Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Web Apps with Ember.js

Jesse Cravens
November 06, 2013

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.

Jesse Cravens

November 06, 2013

More Decks by Jesse Cravens

Other Decks in Technology


  1. Oredev 2013 HTML5 Hacks 3 Sign up on the Mailing

    List Win A Free eBook at html5hacks.com Wednesday, November 6, 13
  2. Oredev 2013 A Great Starting Point for Beginners, but then

    what is next? Tom Dale’s Bloggr-Client Wednesday, November 6, 13
  3. Oredev 2013 4 repos of varying levels of depth into

    the application stack Github/EmberjsBook Wednesday, November 6, 13
  4. 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
  5. 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
  6. Oredev 2013 Dummy Data Binding Handlebars View helper How the

    app loads Minimal Viable App Wednesday, November 6, 13
  7. 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
  8. 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
  9. Oredev 2013 Building Modern Web Apps Activity Route Activity Controller

    activity.hbs Ember-Data LocalStorage D3 HeatMap Ember Component Wednesday, November 6, 13
  10. Oredev 2013 Yeoman Ember Tools Ember Rails Ember App Kit

    Ember Workflow/Tools Matrix Wednesday, November 6, 13
  11. 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
  12. 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
  13. 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
  14. Oredev 2013 LoadingRoute App.LoadingRoute = Ember.Route.extend({}); Loading View loading.hbs RSVP

    Promises and adding a Delay Loading Route Wednesday, November 6, 13
  15. 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
  16. Oredev 2013 Web Components D3 Hotness Heat Map 3rd Party

    JS and Ember Components Wednesday, November 6, 13