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 }
Webixjet - moduls
3
Webix Jet speeds up development. On average, teams that work with Jet complete tasks 3 times faster.
10kb
Webix Jet is a lightweight framework. Its minified version adds less than 10 kb to your app.
IE10+
Webix Jet is compatible with all modern browsers, including IE10+, Firefox, Opera, Chrome, and Safari.

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.

For Desktop and Touch Devices