Architected by Yehuda Katz (core Ruby on Rails contributor) and Tom Dale, Ember.js is a JavaScript MVC framework which evolved from Sproutcore 2.0. Seen as an alternative to other popular client MVC solutions like Backbone.js and Angular.js, Ember.js differs in that it provides 'Rails-like' defaults by convention to common coding patterns, intelligent memory management, built-in integration testing, and a next generation client side persistence solution called ember-data. Join O'Reilly authors, Jesse Cravens and Thomas Brady, as they take the audience through the construction of a demo application: setting up client side models and exploring the use of various persistence solutions, using data bindings to live update the UI in response to data changes, and showing how Ember’s router manages application state. Attendees should leave this session with an understanding of how to build and deploy Ember.js applications using various server side web frameworks and the latest in client-side build, package management, and workflow.

1. Building Web Apps with Ember.js
Oredev 2013
Nov 2013
Wednesday, November 6, 13

2. @jdcravens
github.com/jessecravens
@thomasqbrady
github.com/thomasqbrady
frog
Wednesday, November 6, 13

3. HTML5 Hacks
Sign up on the Mailing List
Win A Free eBook at
html5hacks.com
Oredev 2013
Wednesday, November 6, 13
3

4. Getting Started
The Ember Community
Wednesday, November 6, 13

5. Tom Dale’s Bloggr-Client
A Great Starting Point for Beginners, but then what is next?
Oredev 2013
Wednesday, November 6, 13

6. Ember Community Docs
Ember Guides, Ember API Docs
Oredev 2013
Wednesday, November 6, 13

7. RocknRollCall
Master/Detail and more...
Wednesday, November 6, 13

8. Github/EmberjsBook
4 repos of varying levels of depth into the application stack
Oredev 2013
Wednesday, November 6, 13

9. RocknRollCall vs. Bloggr-Client
Ember Tools
Ember Inspector
Ember Boilerplates
App Initializers
Promises
Needs
Ember Components
3rd Party Integration (jQuery, D3)
Ember-Testing
SPA Authentication
Ember-Data
Remote Data Storage
Oredev 2013
Wednesday, November 6, 13

10. Building Modern Web Apps
One of the hardest
aspects to grasp is an
efficient order
First,
Early Design: HTML, Diagram Controllers
URL Driven: State Manager and Routes First
Work front to back helps
Populate the Controllers with Dummy Data
stay efficient,
Models, Fixtures, FixtureAdapter || LocalStorageAdapter
Then,
avoiding rewriting code
Create the Backbone
and States
of the Application
Build Server-Side Routes/Endpoints
Serialization and Formatting JSON
Remote Data Store and DB Sync
By using Dummy data,
you are able to organize
the Apps Routes/Controllers
Oredev 2013
Wednesday, November 6, 13
Work front to back helps
stay efficient,
avoiding rewriting code

11. Ember Basics
The Minimal Viable App (Chapter 2)
Wednesday, November 6, 13

12. Minimal Viable App
Dummy Data
Binding
Handlebars View helper
How the app loads
Oredev 2013
Wednesday, November 6, 13

13. RocknRollCall
Requirements and Early Design
Wednesday, November 6, 13

14. RockNRollCall Req’s
Search by Keyword to Find Transient Data (Songs and Artists)
Persist the Activity of Selecting Songs and Artists into LocalStorage
Display Detail information to the User
Show a Visualization of the ‘Hotness’ of your Searches
Oredev 2013
Wednesday, November 6, 13

15. RockNRollCall Flow
Application Route, application.hbs, view App.SearchBox
Transitions to the SearchResultsRoute passing the query
Calls the searchByName(), searchByTitle on Artists/Songs Controllers
Populates the artists, songs arrays on the SearchResultsController
In search-results template iterate over those arrays
Click on takes the User to the Detail page
Oredev 2013
Wednesday, November 6, 13

16. Building Modern Web Apps
Application Route
application.hbs
App.SearchBox View
Loading Route
Oredev 2013
Wednesday, November 6, 13

17. Building Modern Web Apps
SearchResults Route
SearchResultsController
search-results.hbs
artists[]
songs[]
actions
bindings
Oredev 2013
Wednesday, November 6, 13

18. Building Modern Web Apps
ArtistRoute
ArtistController
artist.hbs
Oredev 2013
Wednesday, November 6, 13

19. Building Modern Web Apps
Activity Route
Activity Controller
activity.hbs
Ember-Data
LocalStorage
D3 HeatMap Ember
Component
Oredev 2013
Wednesday, November 6, 13

20. Ember Tools
Workflow, Boilerplate
Wednesday, November 6, 13

21. Ember Workflow/Tools Matrix
Yeoman
Ember Tools
Ember Rails
Ember App Kit
Oredev 2013
Wednesday, November 6, 13

22. Ember Workflow/Tools at frog
Many ways to do manage an Ember app:
1. Manual Ember app with Rails backend ported to .NET MVC
2. Rails app w/ ember-rails that manually copied early Yeoman prototype
3. Node app w/ ember-tools ... using MEEN Boilerplate
4. RnRCall, Yeoman prototype ---> Rails
RnRCall, Yeoman prototype ---> Node
Have not used Ember App Kit, yet.
Oredev 2013
Wednesday, November 6, 13

23. Prototyping w/ Ember
url driven apps, using dummy data
Wednesday, November 6, 13

24. Prototyping w/ Ember
URL Driven: State Manager and Routes First
Populate the Controllers with Dummy Data (SearchResultsController)
HandleBars template (search-results)
Notice no Models, no Views
Oredev 2013
Wednesday, November 6, 13

25. Bindings
Show/Hide Data
Wednesday, November 6, 13

26. Bindings
Bindings create links between two properties, such that when one changes the other is
updated.
SearchResultsController
App.SearchResultsController = Em.ObjectController.extend({
...
artistsIsChecked: true,
songsIsChecked: true,
...
});
search-results.hbs
{{view Ember.Checkbox checkedBinding="artistsIsChecked"}}
{{#if artistsIsChecked}}
...
{{/if}}
Oredev 2013
Wednesday, November 6, 13

27. Loading Route
Adding a Spinner and controlling Load with
Promises
Wednesday, November 6, 13

28. Loading Route
LoadingRoute
App.LoadingRoute = Ember.Route.extend({});
Loading View
loading.hbs
RSVP Promises and adding a Delay
Oredev 2013
Wednesday, November 6, 13

29. Views
Using DidInsertElement()
Wednesday, November 6, 13

30. Views
The Hotness Flames
DidInsertElement()
Oredev 2013
Wednesday, November 6, 13

31. Ember-Data
Models, LocalStorageAdapter
Wednesday, November 6, 13

32. Ember-Data
LocalStorage Adapter (Activity Records)
App.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'rocknrollcall'
});
Ember Models
Store
Seeding with Better Dummy Data (Application.Initializer)
later ... RESTAdpater
Oredev 2013
Wednesday, November 6, 13

33. Ember-Testing
Client-Side Integration
Wednesday, November 6, 13

34. Ember-Testing
Oredev 2013
Wednesday, November 6, 13

35. 3rd Party JS Integration
D3 and jQuery
Wednesday, November 6, 13

36. 3rd Party JS and Ember Components
Web Components
D3 Hotness Heat Map
Oredev 2013
Wednesday, November 6, 13