Webix Jet is a client-side JavaScript micro-framework designed to simplify the development and maintenance of single-page applications (SPAs) built with Webix UI components. As of version 3.0.3, it offers a structured approach to app creation through modules like apps, views, models, and services, implemented as ES6 classes. The framework emphasizes modularity, reusability, and efficient code organization, making it suitable for complex data management applications. Key differentiators include its lightweight footprint (under 10kb minified), a robust plugin system for common functionalities (e.g., menus, localization, authentication), and flexible routing capabilities. Since version 3.0, Webix Jet has migrated its default toolchain to Vite, while still maintaining compatibility with Webpack. It also boasts comprehensive TypeScript support since version 1.3, providing improved development experience with type safety and auto-completion. The project is actively maintained, with a cadence of significant major releases every few years and more frequent minor updates and patches, as confirmed by its documentation and community support.
npm install webix-jetVerified import paths — ran on the pinned version, not inferred.
This quickstart initializes a basic Webix Jet application with a single 'TopView' and renders it into the document body. It demonstrates the core setup of `JetApp` and `JetView` using TypeScript, including the necessary global exposure of the `webix` object.
Review the official 'Migration from Jet 0.x' guide in the Webix Jet documentation and compare your project's build configuration with the latest `jet-start` demo on GitHub for Vite setup. This primarily involves configuring `vite.config.js` and updating `package.json` scripts.
Update calls to `getUrl()`, `getUrlString()`, and `refresh()` to handle Promises if needed. Ensure `removeView()` behavior aligns with expectations for nested Jet views. Consult the 'What's New' section for v3.0 in the official documentation.
After importing Webix, explicitly assign it to the global `window` object in your main application entry file: `import * as webix from 'webix'; (window as any).webix = webix;` (for TypeScript). Alternatively, include Webix via a `<script>` tag in `index.html`.
For asynchronous UI generation, wrap the `config()` method's return in a Promise. Fetch data within the `config()` method, and return the UI configuration only after the data is available: `config() { return new Promise(resolve => { webix.ajax('/data').then(data => { resolve({ view: 'datatable', data: data.json() }); }); }); }`.Migrate any code using `WJET` to the standard ES6 class-based `JetApp` and `JetView` structure. Refer to the current quickstart guides and demo projects for modern development patterns.
Ensure `window.webix = webix;` is executed in your main application entry point after importing the Webix library, or load Webix via a `<script>` tag before your application bundle.
Check the `config()` method of the problematic JetView for syntax errors, incorrect Webix UI component properties, or invalid nesting. Enable debug mode (`debug: true` in `JetApp` config) for more detailed console logs.
Inspect the `init()` and other lifecycle methods of the affected JetView for logical errors or incorrect API calls. Use the debug mode to trace the execution flow and identify the source of the error.
Ensure you are calling `this.$$(id).parse(data)` or `this.$$(id).load(url)` within the `init()` method or a data loading handler, and that the `data` or `url` resolves to a compatible format for the Webix component. Verify the data structure.
If the component is in a parent view, use `this.getParentView().$$('myId')` or pass the ID to a global `webix.$$('myId')` if it's a top-level ID. If it's in a dynamic subview, ensure the subview is loaded before attempting to access its components. Verify the ID is unique within the intended scope.