Building Web Apps with Ember.js

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.

Transcript

1. Oredev 2013 Nov 2013 Building Web Apps with Ember.js Wednesday, November 6, 13
2. @jdcravens github.com/jessecravens @thomasqbrady github.com/thomasqbrady frog Wednesday, November 6, 13
3. Oredev 2013 HTML5 Hacks 3 Sign up on the Mailing List Win A Free eBook at html5hacks.com Wednesday, November 6, 13
4. Getting Started The Ember Community Wednesday, November 6, 13
5. Oredev 2013 A Great Starting Point for Beginners, but then what is next? Tom Dale’s Bloggr-Client Wednesday, November 6, 13
6. Oredev 2013 Ember Guides, Ember API Docs Ember Community Docs Wednesday, November 6, 13
7. RocknRollCall Master/Detail and more... Wednesday, November 6, 13
8. Oredev 2013 4 repos of varying levels of depth into the application stack Github/EmberjsBook Wednesday, November 6, 13
9. Oredev 2013 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 RocknRollCall vs. Bloggr-Client Wednesday, November 6, 13
10. Oredev 2013 First, Early Design: HTML, Diagram Controllers URL Driven: State Manager and Routes First Populate the Controllers with Dummy Data Models, Fixtures, FixtureAdapter || LocalStorageAdapter Then, Build Server-Side Routes/Endpoints Serialization and Formatting JSON Remote Data Store and DB Sync Building Modern Web Apps Work front to back helps stay efficient, avoiding rewriting code One of the hardest aspects to grasp is an efficient order Work front to back helps stay efficient, avoiding rewriting code Create the Backbone and States of the Application By using Dummy data, you are able to organize the Apps Routes/Controllers Wednesday, November 6, 13
11. Ember Basics The Minimal Viable App (Chapter 2) Wednesday, November 6, 13
12. Oredev 2013 Dummy Data Binding Handlebars View helper How the app loads Minimal Viable App Wednesday, November 6, 13
13. RocknRollCall Requirements and Early Design Wednesday, November 6, 13
14. Oredev 2013 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 RockNRollCall Req’s Wednesday, November 6, 13
15. Oredev 2013 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 RockNRollCall Flow Wednesday, November 6, 13
16. Oredev 2013 Building Modern Web Apps Application Route application.hbs App.SearchBox View Loading Route Wednesday, November 6, 13
17. Oredev 2013 Building Modern Web Apps SearchResults Route SearchResultsController search-results.hbs artists[] songs[] actions bindings Wednesday, November 6, 13
18. Oredev 2013 Building Modern Web Apps ArtistRoute ArtistController artist.hbs Wednesday, November 6, 13
19. Oredev 2013 Building Modern Web Apps Activity Route Activity Controller activity.hbs Ember-Data LocalStorage D3 HeatMap Ember Component Wednesday, November 6, 13
20. Ember Tools Workflow, Boilerplate Wednesday, November 6, 13
21. Oredev 2013 Yeoman Ember Tools Ember Rails Ember App Kit Ember Workflow/Tools Matrix Wednesday, November 6, 13
22. Oredev 2013 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. Ember Workflow/Tools at frog Wednesday, November 6, 13
23. Prototyping w/ Ember url driven apps, using dummy data Wednesday, November 6, 13
24. Oredev 2013 URL Driven: State Manager and Routes First Populate the Controllers with Dummy Data (SearchResultsController) HandleBars template (search-results) Notice no Models, no Views Prototyping w/ Ember Wednesday, November 6, 13
25. Bindings Show/Hide Data Wednesday, November 6, 13
26. Oredev 2013 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}} Bindings Wednesday, November 6, 13
27. Loading Route Adding a Spinner and controlling Load with Promises Wednesday, November 6, 13
28. Oredev 2013 LoadingRoute App.LoadingRoute = Ember.Route.extend({}); Loading View loading.hbs RSVP Promises and adding a Delay Loading Route Wednesday, November 6, 13
29. Views Using DidInsertElement() Wednesday, November 6, 13
30. Oredev 2013 The Hotness Flames DidInsertElement() Views Wednesday, November 6, 13
31. Ember-Data Models, LocalStorageAdapter Wednesday, November 6, 13
32. Oredev 2013 LocalStorage Adapter (Activity Records) App.ApplicationAdapter = DS.LSAdapter.extend({ namespace: 'rocknrollcall' }); Ember Models Store Seeding with Better Dummy Data (Application.Initializer) later ... RESTAdpater Ember-Data Wednesday, November 6, 13
33. Ember-Testing Client-Side Integration Wednesday, November 6, 13
34. Oredev 2013 Ember-Testing Wednesday, November 6, 13
35. 3rd Party JS Integration D3 and jQuery Wednesday, November 6, 13
36. Oredev 2013 Web Components D3 Hotness Heat Map 3rd Party JS and Ember Components Wednesday, November 6, 13