I would suggest using a different attribute name than ‘role’ as it is reserved by ARIA and accessibility.
Yura From: [email protected] <[email protected]> Reply: [email protected] <[email protected]> Date: October 27, 2015 at 12:45:44 PM To: [email protected] <[email protected]> Subject: NGA JS aggregation/minification strategy proposal I'd like to suggest new way of approaching minification and concatenation of our JS code. Currently, our strategy at build time is to gather all synchronous <scripts> in ./{appname}/index.html and jsmin them into a single "gaia_build_index.js", then gather all deferred <scripts> and jsmin them into a single "gaia_build_defer_index.js". In result instead of: <script src="/js/endpoint.js"></script> <script src="/js/config.js"></script> <script src="/js/app.js"></script> <script defer src="/components/bridge/bridge.js"></script> <script defer src="/shared/js/intl/l20n-service.js"></script> <script defer src="/shared/js/intl/l20n-client.js"></script> <script defer src="/shared/js/intl_helper.js"></script> <script defer src="/components/gaia-header/dist/gaia-header.js"></script> <script defer src="/components/gaia-toolbar/gaia-toolbar.js"></script> <script defer src="/js/db.js"></script> <script defer src="/shared/js/lazy_loader.js"></script> <!-- to be lazy loaded: <script defer src="/js/async_db.js"></script> <script defer src="/js/thumbnails.js"></script> <script defer src="/js/mediadb.js"></script> <script defer src="/elements/music-overlay.js"></script> <script defer src="/elements/music-scan-progress.js"></script> <script defer src="/elements/music-tab-bar.js"></script> <script defer src="/elements/music-view-stack.js"></script> --> we have this: <script src="./gaia_build_index.js"></script> <script src="./gaia_build_defer_index.js"></script> and then some LazyLoader is loading the remaining files one by one. That's not a bad strategy, but it means that we have a lot of JS code that is unnecessary during app startup that has to be loaded/parsed at the same time as the code required for startup. That leads us to use a "third stage" code that is commented out in <head> and loaded using LazyLoader class inside JS. =============== Proposal ================== I'd like to suggest that we tie our JS code bundling to our bootstrap stages[0]. In that world, we assign a role="" to each <script> tag. That role allows us to group scripts that are needed together. It also allows us to bundle the lazyloaded groups of scripts and remove the need for LazyLoader completely. Here's an example of how it might work (details to be decided): <script role="navigationLoaded" src="/js/endpoint.js"></script> <script role="navigationLoaded" src="/js/config.js"></script> <script role="navigationLoaded" src="/js/app.js"></script> <script role="visuallyLoaded" defer src="/components/bridge/bridge.js"></script> <script role="visuallyLoaded" defer src="/shared/js/intl/l20n-service.js"></script> <script role="visuallyLoaded" defer src="/shared/js/intl/l20n-client.js"></script> <script role="visuallyLoaded" defer src="/shared/js/intl_helper.js"></script> <script role="visuallyLoaded" defer src="/components/gaia-header/dist/gaia-header.js"></script> <script role="visuallyLoaded" defer src="/components/gaia-toolbar/gaia-toolbar.js"></script> <script role="visuallyLoaded" defer src="/js/db.js"></script> <!-- to be lazy loaded: <script role="editView" src="/js/async_db.js"></script> <script role="editView" src="/js/thumbnails.js"></script> <script role="editView" src="/js/mediadb.js"></script> <script role="settingsView" src="/elements/music-overlay.js"></script> <script role="settingsView" src="/elements/music-scan-progress.js"></script> <script role="settingsView" src="/elements/music-tab-bar.js"></script> <script role="albumView" src="/elements/music-view-stack.js"></script> --> results in: <script role="navigationLoaded" src="./js-opt/index_navigationLoaded.js"></script> <script role="visuallyLoaded" defer src="./js-opt/index_visuallyLoaded.js"></script> <script role="editView" data-lazy-src="./js-opt/index_editView.js"></script> <script role="settingsView" data-lazy-src="./js-opt/index_settingsView.js"></script> <script role="albumView" data-lazy-src="./js-opt/index_albymView.js"></script> And then the only thing you need in your code is: scriptElement.addEventListener('load', () => { console.log('My lazy loaded JS view is ready!'); }); if (scriptElement.dataset.lazySrc) { scriptElement.setAttribute('src', scriptElement.dataset.lazySrc); scriptElement.dataset.lazySrc = undefined; } or if we maintain some LazyLoader: LazyLoader.load(['settings', 'editView']).then(); That enables pretty flexible per-app decisions on which scripts are loaded with each group, and how is that group loaded (maybe navigationLoaded should be deferred? Maybe it should be synchronous? maybe it should be async?). You can go more granular, and have separate script group for navigationInteractive, or, if you don't need to alter HTML at all, only have navigationInteractive group for binding chrome to your glue code. It would be easy to adjust webapp-optimize to handle that, and would allow us to load the right JS at the right time. It also degrades gracefully to work the way it does right now. Thoughts? Opinions? zb. p.s. 1) We may still need some lazy_loader.js which would take the scripts with a given role from head comments and load them for non optimized scenario. But in the production code we could just remove it. 2) There may be lazy loaded scripts needed by multiple lazyloaded groups. In those cases we could separate them into their own group the way we would with shared CSS or L10n resources. In the worst case, each lazy loaded script would have its own group which is basically what we do now. [0] https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines _______________________________________________ dev-fxos mailing list [email protected] https://lists.mozilla.org/listinfo/dev-fxos
_______________________________________________ dev-fxos mailing list [email protected] https://lists.mozilla.org/listinfo/dev-fxos
