New Webix Jet and the Good Stuff It Can Do

Webix Jet is a micro framework for single-page applications created with Webix UI components. It allows you to divide app code into modules as well as combine and reuse diverse UI components. The framework provides a solution for device-responsive apps that can be opened on both Desktop and mobile touch devices that run iOS, Android, etc.

With Webix Jet, you can easily create and develop perfect applications with loosely-coupled code. Sounds intriguing? Let’s look closer at what’s new in Webix Jet 1.0 and recap the useful features that migrated from the previous version.

You can also check out this online demo to see what complex UIs can be created with Jet.

Webix Jet Core Concepts

Modules

The core concepts of Webix Jet are view modules and routing. Code and UI are split in isolated modules. Modules can be reused in many places across the app. Splitting into modules helps you keep your code loosely-coupled and makes it more difficult to break the app. All modules can be developed and tested separately.

App Modules

The configuration of the class instance includes app config such as the app ID, version, initial URL, and others parameters. You can find JetApp API in the GitBook.

Routing

The URL of the page reflects the current state of the UI. The URL instructs the app which view modules to show. You can use several ways to show different modules of a single-page app, including Jet links or native URL links.

Besides, the new Jet has more flexible routing. You can choose a router for in-app navigation among four predefined types or define a custom one. For example, if you prefer to display the URL without a hashbang, you can choose UrlRouter:

Latest Features of Webix Jet

Webpack-based Toolchain

As the new Webix Jet uses a Webpack-based toolchain, it is easier to resolve module dependencies, to organize code and reuse components among multiple entry points of your app. Single-page apps become easily configurable. For example, you can change the default app config in webpack.config.js if you want your app to have several entry points.

package.json contains predefined scripts for common tasks. For instance, when your app is ready for production, run npm run build to create minified bundles for every entry point of your app. After that, all you have to do is upload the contents of the codebase folder and your HTML file to the production server.

Plugins for Task Solution

New Jet has a set of plugins that are designed to solve common tasks such as creating menus, access control, warning about unsaved data, localization, status notifications and applying skins. For example, the User plugin will help you control access to your app. And if for some reasons, like unsaved form data or insufficient access rights, you want to block routing, use UnloadGuard. You can also define your own plugins for other tasks.

Better Debugging and Event Handling

For more insights into the nature of errors that might occur, you can enable debugging in your app config and make use of error events.