분류 기타

"Quark"발표 — 프로젝트를위한 소프트웨어 스케치북

컨텐츠 정보

  • 조회 235 (작성일 )

본문

1*dEVO_UCvhlPgCm6SdnmQeQ.gif 


거의 1 년의 노력 끝에 마침내 Quark을 발표하게 되어 기쁩니다! 

https://quarkjs.io/ ?에서 다시 확인할 수 있습니다.


Quark는 기능과 같은 기본 데스크탑 앱으로 HTML, CSS 및 JavaScript로 작성된 프로젝트를 생성 할 수 있도록 특별히 설계된 범용 소프트웨어 도구입니다.


왜? ? 


Quark의 아이디어는 엔지니어링 분야에서 학위를 취득 할 때 시작되었으며 차트 플롯, 앱 프로토 타이핑, 개인 프로젝트를 위한 대시 보드 / GUI 생성 등과 같은 작업을 수행하는 데 도움이 되는 소프트웨어 도구의 필요성을 느꼈습니다. 코드를 작성하고 작은 프로젝트를 만들거나 새로운 아이디어를 테스트 할 수 있습니다. 놀랍게도 그렇게 쉬운 방법을 찾지 못했습니다. 따라서 이 프로젝트를 만들기로 결정했습니다.


어떻게 작동합니까? ? 


간단히 말해서 : Quark는 통합 개발 환경 (IDE) 및 JavaScript 런타임입니다. IDE에서 코드를 작성하고 버튼을 눌러 프로젝트를 빌드 하십시오. 그게 다야! ?


IDE는 장면 뒤에서 프로젝트의 트랜스 파일링 및 번들링을 자동으로 처리하고 프로젝트를 열고 실행하기 위해 "두 번 클릭"할 수 있는 단일 출력 파일을 생성합니다. 이러한 출력 파일을 "스케치"라고 합니다.


작동중인 프로세스 확인 —


1*lp-xFu64BOIUOWSq7d_-7w.gif 

위의 데모에서는 Quark 앱을 열고 비어있는 새 프로젝트를 생성 한 다음 프로젝트를 빌드 한 다음 실행합니다. 모두 15 초 안에 완료되었습니다!


"스케치 (Sketches)"= 다이어트중인 전자 앱. ? 


이미 짐작 하셨겠지만 Quark은 Electron 프레임 워크를 기반으로 합니다. 스케치는 본격적인 전자 앱의 모든 기능을 제공합니다. 여기서 유일한 차이점은 수백 메가 바이트가 아닌 몇 킬로바이트에 불과하다는 것입니다.


모든 스케치에 대해 공유 JavaScript 런타임을 사용하여 이 기능을 수행합니다. 대부분의 경우 이 런타임은 전자 앱 무게의 거의 99 %를 차지합니다. 이로 인해 실제 응용 프로그램 논리는 보통 몇 킬로바이트에 불과합니다.


여기서 주의 할 점은 이 공유 런타임으로 인해 스케치가 런타임을 제공하기 위해 Quark 소프트웨어 자체에 직접 의존한다는 것입니다. 따라서 우리는 이러한 프로젝트를 응용 프로그램이 아닌 Quark“스케치”로 구축했습니다.


이것이 의미하는 바는 기계에 수백 개의 스케치를 가질 수 있다는 것입니다. 단 하나의 앱과 동등한 리소스를 소비하면서 완전한 전자 앱의 기능을 제공합니다!


특징 ✨ 


코드 에디터 ? 


Quark에는 강력한 코드 편집기가 내장되어 있습니다. VS 코드 (monaco-editor)를 구동하는 동일한 코드 편집기 즉, Intellisense, 코드 완성, "정의로 이동", 참조 검색 및 빠른 탐색 (Cmd + P)에 대한 지원을 즉시 받을 수 있습니다.


1*oK7rfggUfZgnmFVhzKWYIg.gif 


또한 편집기는 편집 환경을 사용자 정의하기 위해 구성 할 수 있는 약 80 가지 설정을 지원합니다.


모듈 번 들러 ?️ 


Quark는 webpack-loaders (css-loader, html-loader, raw-loader 등)와 같은 무료 유틸리티와 함께 ​​webpack 및 babel 지원이 사전 설치되어 제공됩니다. 즉, 단일 구성 파일을 작성하지 않고도 최신 JavaScript, React 및 TypeScript를 즉시 지원할 수 있습니다. 선택적으로 구성 파일을 작성하고 자신의 필요에 맞게 빌드 시스템을 사용자 정의 할 수도 있습니다.


통합 터미널 ? 


1*flLXGQP3c3oilII89MF9aA.gif 


NPM 클라이언트 ? 


npm 클라이언트가 내장되어 있으므로 응용 프로그램을 개발하는 데 필요한 종속성 및 패키지를 설치할 수 있습니다.


1*ULB5QWPawHvbRFw1RB0oWA.gif 


인 메모리 파일 시스템 ? 


Quark 프로젝트는 컴퓨터에 단일 파일로 존재합니다. 즉, IDE에서 작성하는 모든 코드와 파일은 실제 파일 시스템에서 풋 프린트가 없는 가상 파일입니다. 단일 파일을 공유하는 것만 큼 쉽게 프로젝트를 공유 할 수 있습니다.


응용 프로그램 포장기 ?️ 


모듈 번 들러는 훌륭하지만 항상 애플리케이션 자산 (예 : 이미지, 비디오)을 패키징 할 수는 없습니다. 이 경우에도 아카이브 형식을 지원합니다. 이는 전체 프로젝트를 공유하기 위해 하나의 파일 만 공유한다는 것을 의미합니다.


Electron의 힘 ?


장면 뒤에서 전자의 렌더러 프로세스를 스케치의 런타임으로 사용합니다. 즉, 스케치에서 모든 Node.js 및 Electron의 렌더러 프로세스 API에 액세스 할 수 있습니다.


Showcase ? 


다음은 Quark로 구축 한 스케치 중 일부입니다.


시스템 리소스 모니터 


CPU / 메모리 사용량과 같은 시스템 리소스를 모니터링 합니다. chart.js 및 시스템 정보 라이브러리를 사용하여 작성되었습니다.

1*jJy7QDWWR7bWao1Lmv1hpg.gif 



디지털 제어 시스템


Arduino 프로젝트를 위한 제어 시스템. 노드 직렬 포트 라이브러리를 사용하여 빌드 되었습니다.


1*ZPd_0xHXQ2uYoKdi0OjuOA.gif 


웹 브라우저 


분할보기 및 다중 탭 웹 브라우저. 놀랍게도 이 스케치는 200 줄의 코드로 지어졌습니다 !!


1*kpAR_P5uz2BTmqgh5nK1wQ.gif 


과학 차트 도표 


plotly.js 라이브러리를 사용하여 고급 차트를 플로팅합니다.


1*iOJk_eeMTSpoHeT7ME2bTQ.gif 


재고 분석 앱 


실시간 / 역사 주식 데이터를 분석합니다. Alpha Vantage API를 사용합니다.


1*HcJZwyEFJsifOuIR9BRmNA.gif 


더 많은 사용 사례 


그래도 사진을 얻지 못하면 Quark를 사용할 수 있는 몇 가지 아이디어와 사용 사례가 있습니다.

  • 모든 기존 노드 프로젝트의 중개자 "localhost"를 바꾸십시오. DOM에 Node.js 코드를 직접 작성하십시오.
  • 기존 명령 행 인터페이스 (CLI)를 그래픽 사용자 인터페이스 (GUI)로 변환하십시오. 예 : Angular, Vue.js CLI 용 GUI 클라이언트를 빌드하십시오.
  • imagemin, fluent-ffmpeg 등과 같은 기존 노드 패키지를 사용하여 이미지 변환기, 비디오 변환기와 같은 유틸리티 프로젝트를 빌드하십시오.
  • 다양한 API에서 대량의 숫자 데이터를 사용하는 그래픽 대시 보드를 만듭니다. 예 : Google 클라우드 사용량 측정 항목에 대한 사용량 탐색기 대시 보드를 만듭니다.

미래는 밝다 ? 


곧 멋진 기능이 많이 있습니다. 우리가 달성하고자 하는 주요한 것 중 하나는 Quark으로 제작 된 스케치의 열린 저장소를 만드는 것입니다.


이미지 변환기, 비디오 변환기, To-Do 앱, 스티커 메모 앱 등과 같은 유틸리티 응용 프로그램의 개방형 라이브러리를 버튼을 눌러 컴퓨터에 다운로드 할 수 있다고 상상해보십시오. 모두 본격적인 전자 앱과 같은 기능을 제공합니다. 하나의 자원 만 소비합니다. 즉, 언제든지 컴퓨터에 수백 개의 유틸리티 응용 프로그램을 다운로드 할 수 있습니다. 이로 인해 사용자 생산성이 크게 향상 될 수 있습니다.


또한 Quark의 핵심 기술인 오픈 소싱을 위해 빠르게 노력하고 있습니다. 한편, GitHub 리포지토리에 이미 공개 된 문서 및 웹 사이트에 기여할 수 있습니다.