Webix Jet for extremely fast development

Webix Jet is a micro framework for single-page applications on top of Webix UI. It allows to combine and reuse diverse UI components. With Webix Jet you can easily create and develop perfect applications without any stress and with minimal code footprint.

Webixjet - moduls

Modules

With Webix Jet, code and UI are split in isolated modules. Each module is presented by a JavaScript class that can be reused in many places across the app. Even 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. From our experience, 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 modern, Webpack-based toolchain, which makes single-page apps easily configurable. You can use up-to-date ES6 features in JS code, LESS/SASS processing for CSS styles and embed and bundle any custom resources through Webpack plugins. With Webix Jet, it is 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. Or choose a more safe way to create links to views - Jet links, which can help to stop users from leaving the current view. You can choose a router for in-app navigation among four pre-defined 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 a bit different interface for devices of different sizes. With Webix Jet, you can build apps for both Desktop and touch devices that run iOS, Android, etc.

For Desktop and Touch Devices