Search code examples
extjsarchitectureextjs7-classic

ExtJS 7 application architecture

I'm starting a big project on ExtJS 7:

  1. There is one common login page facade for all apps;
  2. There will be 5 large applications (~300-1000 classes per each) that will be opened through the facade.
  3. Only one specific app will be working at a time depending on the build configuration. Apps are developed by separate developers;
  4. There will be a library of components;
  5. There is a common theme;

What is the best practice architect approach to organise such project structure?

  1. Should I use one workspace for all apps and component library?

  2. Is it good to divide large applications to the packages?

  3. What is the better approach to packages in my configuration? Should I divide facade to one main application and put 5 applications to the separate packages?

  4. How to organise the component library: where to place the classes? Should I put files to the main facade app or to the separate package)?

Thank you very much.

Solution

  • ask you mentioned there are several ways to archive this, so I will only mention, what i tought when working for Sencha:

    1. Create a single workspace

    This allows you to keep all apps in sync (ExtJS version) and to easily share components and theme.

    1. Create one company theme as a package

    You can do so by using themer. And you can still use a separate theme per app.

    1. Create a base package

    This should include overrides, shared components, shared utils. This will be part of all apps.

    1. Decide if you want to build a single monolyth or load the different packages on demand. 1000 Classes per app will be about 3MB.

    • Monolyth: You load the app once, depending on the device this may take longer. Still you just load the app once per version (caching).

    • Load on Demand: Right after the login, you might have a delay for loading. Depending how you setup the app, you only might have to load the app once. What is the best practice architect approach to organise such project structure? All apps besides the login are packages.

    Link: https://docs.sencha.com/cmd/7.7.0/guides/dynamic_package_loading.html

    • After login, you load a complete new app: Same as dynamic, but you have to reload data on launch.

    1. If you know before the login, which subapp to launch after the login, you might want have a login package and import it to the apps.

    2. Do not:

    • split apps into several packages, but if you have the same workflow in several apps, create packages for workflows and add the package to the sharing apps.