Webix Jet for extremely fast development
Webix Jet is a micro framework for Webix UI-based single-page applications that work with big amounts of data. It allows to combine and reuse diverse UI components. With Webix Jet you can create and develop perfect applications with minimal code footprint.
Modules
With Webix Jet, code and UI are split into isolated modules. Each module is presented by a JavaScript class that can be reused across the app. Even a very complicated UI can be divided into separate blocks which can be used and tested independently.
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 }
Getting Started with Webix Jet
First of all, you need to download Webix Jet and unpack it locally. Next, you should define the application structure.
The SPA is divided into multiple views that are kept in separate files.
The URL of the app is divided by a hashbang (#!) into two parts:
- the web address of the app;
- the app URL fragment that defines the UI (#!/some/part).
The navigation between pages is enabled when the URL of the page changes.
The next steps are to define a view module and create subviews. For more information on including subviews and in-app navigation, check out the following links: Creating views, Views and Subviews, In-App Navigation, Menu Plugin.
Whereas views contain the code of interfaces, models control the data. You can find more details about data loading here.
1 //views/top.js
2 import {JetView} from "webix-jet";
3 export default class TopView extends JetView {
4 config() {
5 return {
6 cols: [
7 { view: "menu" },
8 { $subview: true }
9 ]
10 };
11 }
12 }Webpack-based toolchain and ES6
Webix Jet uses Webpack-based toolchain, which makes single-page apps easily configurable. You can use ES6 features in JS code, LESS/SASS processing for CSS styles and embed and bundle any custom resources through Webpack plugins. Webix Jet makes it easier to organize code and reuse components among multiple entry points of your app.
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 }Routing
URL is a blueprint for your UI. With Webix Jet, you can use native HTML URLs to show different UI modules of a single-page app. You may also choose a safer way to create links to views - Jet links - which can prevent users from leaving the current view. You can choose a router for in-app navigation among four predefined types or define a custom one.
Plugins for common tasks
A set of plugins solves common tasks such as creating menus, localization, access control, notifications, and applying skins.
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 }For desktop and touch devices
The framework provides a solution for device-responsive apps, where you can define interfaces for devices of different screen size. With Webix Jet, you can build apps for both desktop and touch devices that run iOS, Android, etc.
Webix Jet related articles
Client-Side Data Processing with Webix Jet
New Strategy of Complex Widgets: Why Webix Jet
Using Webix Jet with TypeScript
Webix 9.0: Pivot Remade, Updates for Diagram, Gantt and Spreadsheet
Speed up Webix app development with Webix Jet