매우 빠른 개발을 위한 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 }
Webixjet - moduls
3
Webix Jet은 개발 속도를 높입니다. 평균적으로 Jet과 함께 일하는 팀은 3배 더 빠르게 작업을 완료합니다.
10kb
Webix Jet는 가벼운 프레임워크입니다. 최소화된 버전이 앱에 10kb 미만으로 추가됩니다.
IE10+
Webix Jet은 IE10+, Firefox, Opera, Chrome 및 Safari를 포함한 모든 최신 브라우저와 호환됩니다.

웹 팩 기반 툴체인 및 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 등을 실행하는 데스크탑 및 터치 기기용 앱을 만들 수 있습니다.

For Desktop and Touch Devices