Runtime load modules from server for Webix Jet

Webix JS
#1

Hi!
After the “shell” with the identification and authentication module is loaded, after the user login, separate modules must be loaded into the system and added to the menu, depending on the user’s rights. How do this?

Работаю с Jet, все классно и нравится. Смущает одно - если роли пользователей разные, они пользуются разными модулями и пункты меню соответственно у них разные. Jet позволяет собирать приложения как отдельные модули. Можно ли их НЕ собирать сразу в одно монолитное приложение? Другими словами, после того, как будет загружена “оболочка” с модулем идентификации и аутентификации после логина пользователя будет известен список разрешенных модулей, соответственно нужно подгружать в систему и добавлять в меню отдельные модули в зависимости от прав пользователя.
Как реализовать такой механизм?

#2

To start from, in most cases it has sense to build a common bundle and load ALL modules, and just show necessary ones in the navigation. ( real access check must be implemented on server side anyway, so presence of inactive admin level UI must not a security issue )

Anyway, if you want to load modules dynamically you need to do 3 things

a) configure tool chain to produce separate js files

For code building tool chain, you can replace a single app with multiple apps ( one project per module, which creates a js bundle with its own JetApp

b) Intercept calls to not loaded modules

you can define a custom app.views handler

export class App extends JetApp {
  views(name) {
    if (type === "jet-views" && name.startsWith("dyn-")){
      return someAsyncCodeToFetchTheModule(name);
    }
    return name;
  }

as result, when user tries to navigate to dyn-module-a, the system will wait for async code loader execution. Views method can return a Promise of JetView or JetApp.

c) implement module loading transport

The dirty implementation may be like next

function someAsyncCodeToFetchTheModule(name){
  return webix.ajax(`js/name`).then(data => {
          webix.exec(data.text());
          return window[`app-${name}`];
  });
}

Of course, it will be better to use a more advanced loader like requireJs or SystemJs. The main approach will be the same though - intercept views call, return promise of jet-app.

1 Like
#3

Максим, спасибо за развернутый ответ! У меня сейчас реализовано по 1 варианту, но если включить все модули то размер упакованного кода увеличивается в 4 раза и начинает выходить за 2 Мб

#4

зависит конечно от сценария, но да, 2mb это уже как то слишком много, такое хочется разбить на модули