Based on presentation (general-optimization.pdf) on optimization by Ali Khalili during Hackathon V3.0

Splitting layout

• multi-page application  → in components/defaultHTMLlayout.js → based on URL load certain libraries (e.g. CKeditor for visiting URL /edit)
  • we can have a generic layout inherited by other layout if needed (e.g. ui intl libraries or shim libs need to be reused in most of the other layouts).
• multiple single-page applications → standalone aplication. E.g. presentation layout (reveal.js is large), slide edit layout (CKeditor = 600kb, Latex_ams.. libary = 500kb, ), slide view, user profile layout, etc... In practice → separate github repot + is separate application → has own server.js/client.js/etc...
  • multiple single-page applications → Better for scalability
  • multi-page application → better for user loading (only load libraries when necessary, based on URL/page visit)
    • Presentation mode - standalone/multiple single-page applications - do not need to load fluxible, etc.. (single page application). Needs to load reveal.js and Latex_ams.. libary and maybe some SVG/diagram libraries, semantic UI)
    • exam mode (
    • user profile
    • slide edit layout → multipage → part of platform → on loading /edit also load ckeditor, Latex_ams.. libary and some SVG/diagram libraries

Dynamic/lazy loading of modules → action → select j.s. file . use ES6 require.ensure - Darya Tarasowa - interesting in applying - related to multi-language UI.

• Is complicated
• Is good for when other developers want to work on something → we give bundle with component, action, js. files/libraries

Current libraries (see webpack visualiser) →

• replace with another library, or
• use own functions