mozilla-b2g/gaia — pull request #11064 by jrburke (2013-07-19 05:30:48+00:00)
Title: Bug 892069 [email] Optimize startup based on app trigger

### Pull request goals

1) Only render the card that is needed on startup. This is important for the 1.2 email stories around notifications and being able to jump directly to a message.

2) Use the HTML cookie cache for the usual case for fast startup (message_list), and use the DOM node created from the cache as the node for the card instance. This allows the card to be "live" sooner.

3) Load the app UI-first: so, show a card as soon as possible, even before the backend starts up, and allow each card to lazily bind to the back-end model. This allows the UI cards to be visible and usable sooner.

For instance, it is now possible to cold start, see the message list and click through to Compose or click on a message from that cache node and start the loading of the message_reader for that message, before the backend has fully loaded the message. The message then populates the card when it is eventually loaded from the back end.

4) Introduce a pubsub mechanism talked about at a workweek for later refactorings. In this pull request, it is the "events" module.

### Notes

1) The build changed: it creates more build layers to speed loading of the compose and message_reader cards when clicked on during app startup. These multiple build layers will be done more elegantly if the pull request in [890182](https://bugzilla.mozilla.org/show_bug.cgi?id=890182) lands.

Similarly, now that the HTML cache is used for card startup, it will be important to invalidate the cache as we do code changes. I plan to solve this once the pull request in [890182](https://bugzilla.mozilla.org/show_bug.cgi?id=890182) lands by creating a hash of all the file contents and writing that hash in the html_cache_* files for the cache version. I do something similar to this for creating appcache manifests in side projects.

2) There is a new "model" module. It triggers and manages the slices for the cards. There is probably a good discussion about what makes sense for "model" and for slices to do, but as-is I feel it is a step forward for the card code -- the mail_common.js use to try to find the folder_picker card to get folders to list for moving files -- now it asks "model" for this. This is useful now that folder_picker is no longer created on startup.

3) "model" uses "events" to mix in event emitter methods, and message_reader mixes in "events" so its instances can listen for when its `header` property is finally available.

"events" include a `latest` and `latestOnce` which are like `on` and `once` but if there is a value for that property on the object, trigger the listener immediately. This is useful particularly for the "model" properties since when a card wants to use them, they may or may not be ready yet. `latest` is in a way like a basic, very limited Object.observe, something to keep an eye on for the future.

4) With this approach of allowing the card to show itself before the data is fully ready means the buttons in the card should not trigger their full behavior if the data is not available. I think the _on method in "message_reader" may be a way to handle that generically, during event binding.

5) Activity parsing was broken out into "app_messages", and is an event emitter.

6) The likely startup cards now use `model.api` to get to MailAPI. This helps avoid up-front loading of the MailAPI so that card rendering can take priority, and those cards usually wanted to do a `model.latestOnce` anyway.

7) The Cards object now supports the app overriding a Cards.pushDefaultCard to allow inserting a default card when direct jumps into "compose" and later to "message_reader", need to go "back". In those cases, there is no card rendered for "back" yet, so pushDefaultCard is used to create one.

### Video snapshots

Some very rough videos showing the code in action:

* [Activity trigger to Compose](https://vimeo.com/70607429)
* [Compose jump from message_list cache](https://vimeo.com/70607431)
* [message_reader jump from message_list cache](https://vimeo.com/70607430)