On Wed, Dec 2, 2015 at 6:06 PM, Fred Lin <[email protected]> wrote: > Start from v2, Settings is migrating the whole app and panels to AMD module. > https://github.com/mozilla-b2g/gaia/tree/master/apps/settings#how-to-port-an-existing-panel-to-follow-the-new-architecture-design
Along the modularization lines, these utility libraries might be of interest, they are used in email at the moment. I think settings might have other alternatives for some of these, but listing them for completeness, in case other apps want to explore further modularization: Alameda AMD module loader. The 0.2.1-native-promise release relies on the native promise support in the platform, and provides a small speed boost over the 0.2.0 release. Overall, slightly smaller and faster than the 0.2.0 release. https://raw.githubusercontent.com/requirejs/alameda/0.2.1-native-promise/alameda.js cards Handles the placement and animation of UI card views. Uses require([]) to dynamically load the next view card, module based. A URL-based navigation scheme could use this module as a helper to manage the view transitions. https://github.com/jrburke/cards element AMD loader plugin for constructing custom elements. Email uses this to create the custom element used for each view card, and for sub-view custom elements. The email custom elements do not use shadow DOM to get startup cache benefits, but that is a style choice, not enforced by the custom element definition. https://github.com/jrburke/element I will be around next week if anyone wants to talk more in person. --- More recently, I have been experimenting with re-rendering the innerHTML of a custom element based on model updates. The goal is to get some of the benefits of a flux-like react system, but not require the react overhead. Mainly: * Reduce UI state management via just re-rendering on a model change. * Instead of using virtual dom diffing, target areas in the card that could change via small targeted custom elements that listen to model change events, and only have those update. * Allow mixing the HTML and JS variable usage in one file, by using a template string construct. Example custom element that listens to both accounts and folders model changes and re-renders its contents: https://github.com/jrburke/gaia/blob/convoy-htemplate/apps/email/js/cards/fld/accounts-folders.js That example is larger, since the model is not expected to change much while that card is open, and it was more convenient to just flatten the code. This is an example of a smaller more targeted custom element that updates the last synced date on folder changes: https://github.com/jrburke/gaia/blob/convoy-htemplate/apps/email/js/cards/lst/last_synced.js The html`` template string construct is provided by here: https://github.com/jrburke/gaia/blob/convoy-htemplate/apps/email/js/htemplate.js All of this is very much experimental and subject to change, but happy to talk with others who might be interested in the approach. James _______________________________________________ dev-fxos mailing list [email protected] https://lists.mozilla.org/listinfo/dev-fxos
