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
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide