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.
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
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
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
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
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
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