Ember provides a framework of libraries that handle common tasks like initializing applications, routing, loading data, and managing application state. The document discusses how Ember bootstraps applications and instances behind the scenes using initializers and hooks. It also explains how routes ask the store for data, which triggers the adapter to fetch from the server and normalize the response. Debugging techniques are presented for initializers, instances, the registry, container, adapters, and serializers.

1. The Journey through Ember.js Glue
January 27, 2017
Michael North
SO Ember Conf

2. https://mike.works

3. Addepar
Apple
Buffer
Checkmate
Dollar Shave
Club
Ericsson
Facebook
Freshbooks
Github
Google
Heroku
Intercom
Iora Health
LinkedIn
Microsoft
Netflix
Pagerduty
Pivotshare
Practice Fusion
Thoughtbot
Ticketfly
Travis-CI
Tumblr
Twitch
Yahoo
Zenefits
Teaching developers at…
and learning from

5. Library
vs
Framework

6. A Quilt of Libraries
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering

7. A Quilt of Libraries
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering
fetch

8. A Quilt of Libraries
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering
fetch

11. A Quilt of Libraries
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering
fetch

12. A Framework
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering

13. A Framework
Written For You
You Write
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering
INITIALIZERS ROUTES
STORE EM.COMPONENT TEMPLATES
ADAPTERS

14. The Glue
Initializing App Routing Loading Data
Managing App
State
Defining
Components
Rendering

15. The Glue
➡ 📞 Hooks - A construct of opinionated frameworks
➡ 👷 Productivity - Through reducing # of decisions
➡ Additionally, through mastering tools
➡ 🤝 Idioms - Using local expressions to fit naturally
➡ Knowing the local ways is the path to fitting in

16. The Glue
APP INITIALIZATION
ASKING THE STORE FOR DATA

17. ⚠ Private API Warning
The following content will include gratuitous use of private
APIs. This does not mean you should build apps on them.
This journey should only serve to enhance your understanding
of framework internals, in an effort to align your thinking with
the “natural ideas” of the underlying foundation.

18. Booting Up
Ember.Application

19. Booting Up
Ember.Application!#_bootSync
domReady
{
}

20. Booting Up
Ember.Application!#_bootSync
domReady
}
this.runInitializers();
{

21. Initializers
➡ 🍱 Modular boot process

22. Initializers
import Lemon from 'fruits/lemon';
export function initialize(app) {
app.register('fruits:lemon', Lemon);
}
export default {
name: 'my-initializer',
after: 'other-initializer',
initialize
};

23. Initializers
➡ 🍱 Modular boot process
➡ 🕐 Happens WHILE Application boots
➡ ⌛ deferReadiness, advanceReadiness
➡ 💡Think: Registry, not Container

24. Booting UpdomReady
{
this.advanceReadiness();
Ember.Application!#_bootSync
}
this.runInitializers();

25. Booting UpdomReady
{
}
this.didBecomeReady();
{
this.advanceReadiness()
Ember.Application!#_bootSync
}
this.runInitializers();

26. Booting Up
Ember.Application#didBecomeReady
Ember.Application!#_bootSync
{
}

27. if (this.autoboot) {
!// Instantiate a Ember.ApplicationInstance
let instance = this.buildInstance();
instance._bootSync();
instance.startRouting();
}
{Ember.Application#didBecomeReady
}
Ember.Application!#_bootSync Booting Up

28. {Ember.ApplicationInstance!#_bootSync
}
this.setupRegistry();
!// define root element
!// define location
this.runInstanceInitializers();
if (isInteractive) {
this.setupEventDispatcher();
}
Ember.Application#didBecomeReady
Ember.Application!#_bootSync Booting Up

29. Instance Initializers
➡ 🍱 Modular boot process
➡ 🕐 Happens AFTER ApplicationInstance boots
➡ ♻ Re-runs on Fastboot builds
➡ 💡Think: Container, not Registry

30. {Ember.ApplicationInstance!#_bootSync
}
this.setupRegistry();
!// define root element
!// define location
this.runInstanceInitializers();
if (isInteractive) {
this.setupEventDispatcher();
}
Ember.Application#didBecomeReady
Ember.Application!#_bootSync Booting Up

31. if (this.autoboot) {
!// Instantiate a Ember.ApplicationInstance
let instance = this.buildInstance();
instance._bootSync();
instance.startRouting();
}
{Ember.Application#didBecomeReady
}
Ember.Application!#_bootSync Booting Up

32. Ember.ApplicationInstance#startRouting
}
let initialURL = location.getURL();
let initialTransition = this.handleURL(initialURL);
Ember.Router#startRouting {
Ember.Application#didBecomeReady
Ember.Application!#_bootSync
Booting Up

33. vs
Application
ApplicationInstance

34. vs
Initializer
InstanceInitializer

35. Debugging: Initializers

36. Debugging: Initializers

37. Debugging: Instance Initializers

38. Debugging: Registry

39. Debugging: Registry

40. Debugging: Registry

41. Debugging: Container

42. Debugging: Container

43. Debugging: Container

44. Asking the Store for Data
export default Ember.Route.extend({
model() {
return this.store.findAll('course');
}
});

45. Asking the Store for Data
DS.Store!#_fetchAll
DS.Store#findAll

46. Asking the Store for Data
DS.Store#findAll
DS.Store!#_fetchAll(modelClass, array, options)
STRING ARRAY OBJECT

47. Asking the Store for Data
STRING ARRAY OBJECT
DS.Store#findAll
DS.Store!#_fetchAll(“course", [], {} )

48. Asking the Store for Data
DS.Store#findAll
Options
{
reload: true, !// New request from scratch
backgroundReload: true !// Cached data now, then refresh
}
DS.Store!#_fetchAll(“course", [], {} )

49. Asking the Store for Data
reload backgroundReload
🚫 ✅
✅ ✅
🚫 🚫
✅ 🚫
Cached data new, updated live w/ new stuff
No point
Cached data only (peek)
Fetch fresh data only

50. Asking the Store for Data
DS.Store#findAll
DS.Store!#_fetchAll(modelClass, array, options)DS.Store!#_fetchAll("course", this.peekAll("course"), {})

51. Asking the Store for Data
DS.Store!#_fetchAll
DS.Store#findAll
{
let adapter = this.adapterFor('course');
if (options.reload !|| adapter.shouldReloadAll(array)) {
return this._findAll();
}
if (!options.backgroundReload) {
return array;
}
}

52. DS.Store!#_fetchAll
DS.Store#findAll
{DS.Store!#_findAll
let promise = adapter.findAll();
let serializer =
adapter.serializer !||
store.serializerFor('course');
return promise.then((adapterPayload) !=> {
return serializer.normalizeResponse(adapterPayload);
});
Asking the
Store for Data
}

53. DS.Store!#_fetchAll
DS.Store#findAll
{DS.Store!#_findAll
Asking the
Store for Data
DS.RESTAdapter#findAll {
let url = this.buildURL();
return this.ajax(url, 'GET', { data: query });
}

54. DS.Store!#_fetchAll
DS.Store#findAll
{DS.Store!#_findAll
let promise = adapter.findAll();
let serializer =
adapter.serializer !||
store.serializerFor('course');
return promise.then((adapterPayload) !=> {
let payload = serializer.normalizeResponse(adapterPayl
store.push(payload);
});
Asking the
Store for Data
}

55. Debugging Adapters

56. Debugging Adapters

57. Debugging Adapters

58. Debugging Serializers

59. Just because ember does a lot for you…

60. Challenge: One adventure/week

61. Thanks!