매우 빠른 개발을 위한 Webix Jet
Webix Jet은 Webix UI 기반 단일 페이지 애플리케이션을 위한 마이크로 프레임워크로, 대용량 데이터로 작동합니다. 다양한 UI 구성 요소를 조합하고 재사용할 수 있습니다. Webix Jet을 사용하면 최소한의 코드 설치 공간으로 완벽한 애플리케이션을 만들고 개발할 수 있습니다.
모듈
Webix Jet을 사용하면 코드와 UI가 분리된 모듈로 분할됩니다. 각 모듈은 앱 전체에서 재사용할 수 있는 JavaScript 클래스에서 제공됩니다. 매우 복잡한 UI도 별도의 블록으로 구분하여 독립적으로 사용하고 테스트할 수 있습니다.
1 import {JetView} from "webix-jet";
2 import header from "views/header";
3 import sidebar from "views/sidebar";
4
5 export default class TopView extends JetView {
6 config() {
7 return {
8 rows:[
9 header,
10 { cols:[ sidebar, { $subview:true } ]}
11 ]
12 };
13 }
14 }
웹 팩 기반 툴체인 및 ES6
Webix Jet은 Webpack 기반 툴체인을 사용하므로 단일 페이지 앱을 쉽게 구성할 수 있습니다. JS 코드의 ES6 기능, CSS 스타일에 대한 LESS/SASS 처리, Webpack 플러그인을 통해 사용자 지정 리소스를 포함 및 번들할 수 있습니다. Webix Jet을 사용하면 앱의 여러 진입점 중에서 코드를 쉽게 구성하고 구성 요소를 재사용할 수 있습니다.
1 import htmlTemplate from "templates/data.hbs";
2
3 export default class NewView extends OtherView {
4 config() {
5 return { cols:[
6 { view:"list", url:"/data/php",
7 click: id => this.select(id) },
8 { template: htmlTemplate, id:"data" }
9 ]};
10 }
11 select(id) {
12 this.$$("data").setValue({id:id});
13 }
14 }
라우팅
URL은 UI의 청사진입니다. Webix Jet에서는, 네이티브 HTML URL을 사용해, 단일 페이지 앱의 다양한 UI 모듈을 표시할 수 있습니다. 또한 사용자가 현재 뷰를 떠나는 것을 방지할 수 있는 뷰(Jet link)에 대한 링크를 더 안전하게 만들 수 있는 방법을 선택할 수도 있습니다. 미리 정의된 네 가지 유형 중 인앱 탐색용 라우터를 선택하거나 사용자 지정 형식을 정의할 수 있습니다.
일반 작업용 플러그인
플러그인 집합은 메뉴 생성, 위치 국한, 접근 제어, 알림 및 스킨 적용과 같은 일반적인 작업을 해결합니다.
1 import {JetView, plugins} from "webix-jet";
2
3 export default class LayoutView extends JetView {
4 config() {
5 return { rows:[
6 { view:"list", url:"/menu/data", id:"top:menu" },
7 { view:"template", id:"top:status" }
8 ]};
9 }
10 init() {
11 this.use(plugins.Menu, "top:menu");
12 this.use(plugins.Status, "top:status");
13 }
14 }
데스크톱 및 터치 기기용
이 프레임워크는 기기 응답성 앱을 위한 솔루션을 제공합니다. 여기에서 화면 크기가 다른 기기에 대한 인터페이스를 설정할 수 있습니다. Webix Jet을 사용하면 iOS, Android 등을 실행하는 데스크탑 및 터치 기기용 앱을 만들 수 있습니다.
Speed up Webix app development with Webix Jet