Javascript SPA design question

Hello,

This may not be the place for this, but I’ve been asking everywhere. What is the proper way to create a dynamic SPA using Webix/Webix Jet?

For instance, in PHP/Python frameworks, content (menus, datatables, etc.) are stored in the database. But with Webix Jet, it looks like all components are static and only consume transactional data from APIs. So is this how it’s typically done in enterprise SPAs?

I’m trying to play around with this idea by creating 4 tables:

views:
id | view_name  

components:
id | component_name | group | view_id | settings
** settings is a JSON field and includes settings of webix components 

user_settings:
id | component_id | view_id | user_settings
** user_settings includes user settings for webix components and these 
override component settings

locales:
id | locale | group | item | text

But this just seems unnatural and a bit cumbersome with Javascript, but I’m not sure. Can anyone give me any idea whether this is good/bad and what is the best way to handle dynamic content with Webix?

Thanks

Hi,

It is possible to store all interface parts in DB and fetch them dynamically
Config of webix widgets is a static JSON, so it can be serialized and stored in DB.
Still, any moderately complex UI will require event handlers and as result, you will store the config along with JS code to DB which sounds like a bad idea. ( at least, from my point of view )

it looks like all components are static

Jet View can contain smaller views, so while the smallest views are really static, their holders can be quite dynamic ( render different content in different cases )

Also, the way how views are loaded not limited to loading content from “views” folder. It is possible to redefine the view resolving mechanic, and load data from any custom source.

I’m trying to play around with this idea by creating 4 tables:

Can be done, but in such case, a client will need to request each view ( make a call to a server, to read from DB ), which means rendering a UI become slow and clunky

Can anyone give me any idea whether this is good/bad and what is the best way to handle dynamic content with Webix?

I’m not quite sure what do you mean by dynamic. Does it mean that the content of an app ( views, logic, etc ) can be changed dynamically, without recompiling the app itself?

// with such code you can use the normal webix jet approach to app building
// each view will be loaded from server side

const app = new JetApp({
	start:"/Form",
	views:(name) => {
           return webix.ajax("/server/views/"+name).then(data => {
               // eval is necessary for inline code handlers
               // loading such code dyncamically is a kind of bad idea in the first place
               eval("webix.temp=" + data.raw());
               return webix.temp;
          });
 	}
});

Similar for a single view

class FormView extends JetView{
	config(){
             // pure config, without script
             return webix.ajax("/server/components/some").then(data => data.json());
	}
}

@maksim - I understand the term dynamic is somewhat vague. What I’m ultimately trying to figure out is whether I can offload some of the UI components to the DB. Like the sidebar/menus. So if I want to change/add/delete a menu item, I can do so from the DB rather then pushing new code.

Another use-case, would be for column settings. Column settings can be vastly different from one datatable to another and can use features like template,scheme:$init and so on. Rather than hardcoding these, it would be useful to be able to change/add/delete these in the DB.

I understand that too many calls can result in a slow/clunky web app, but I’m trying to find a balance that will allow me to create an app that can scale.

I really appreciate your feedback.

Like the sidebar/menus

Sidebar and menus are both data components, so it is expected that their content can be loaded dynamically

Check
https://snippet.webix.com/c0c0zm7f

Here the config contains just a stub for menu data and real data is loaded in the init method ( instead of .parse, here you can use .load or external model, so data can be fetched from DB )

Another use-case, would be for column settings

Yep, it is valid use-case.

class FormView extends JetView{
    config(){
             // pure config, without script
             const grid =  webix.ajax("/server/components/some")
                .then(data => data.json());
                .then(columns => {
                   return { view:"datatable", columns }
                 });

             return grid;
    }
}

Thinks looks nice, while you are loading the static configuration only ( the most part of settings can be described as static config )

If you need to store scheme logic in DB, it looks less nice, as we go to “code in DB” situation, and need to eval the DB response to get both logic and settings.

I understand that too many calls can result in a slow/clunky web app, but I’m trying to find a balance that will allow me to create an app that can scale.

While you are using the above technique for configurable widgets only ( not for all views ) the performance will be fine. Using HTTP2 server or webix.remote will help as well ( both provides ajax multiplexing which means multiple data calls can be done through a single connection )

Also, from our own experience, having an app where part of the UI configuration is loaded as static JSON data from DB is fine, we have some inner apps which are using the same approach.

Storing both config and all related code in DB is also possible. It is a bit depressing for app developers ( development and debug tools are not so nice ) and has an impact on app performance ( an app makes one request per view ). There is at least one known implementation ( by another Webix user). If you have a choice, it is better to avoid this approach.

Storing part of the code in DB and part in static files - this one is bad for sure. It is very easy to break the app, changes in DB can break some code in static files and visa verse. I know about one such solution and as far as I can see it is not going well.

@maksim, this was very helpful for me. You and the Webix team are amazing at helping out your users. I really do appreciate all of your help.