Embed Size (px)
DESCRIPTION
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.
Citation preview
Oredev 2013Nov 2013
Building Web Apps with Ember.js
Wednesday, November 6, 13
@jdcravensgithub.com/jessecravens
@thomasqbradygithub.com/thomasqbrady
frog
Wednesday, November 6, 13
Oredev 2013
HTML5 Hacks
3
Sign up on the Mailing List
Win A Free eBook athtml5hacks.com
Wednesday, November 6, 13
Getting StartedThe Ember Community
Wednesday, November 6, 13
Oredev 2013
A Great Starting Point for Beginners, but then what is next?
Tom Dale’s Bloggr-Client
Wednesday, November 6, 13
Oredev 2013
Ember Guides, Ember API Docs
Ember Community Docs
Wednesday, November 6, 13
RocknRollCallMaster/Detail and more...
Wednesday, November 6, 13
Oredev 2013
4 repos of varying levels of depth into the application stack
Github/EmberjsBook
Wednesday, November 6, 13
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
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
Ember BasicsThe Minimal Viable App (Chapter 2)
Wednesday, November 6, 13
Oredev 2013
Dummy Data
Binding
Handlebars View helper
How the app loads
Minimal Viable App
Wednesday, November 6, 13
RocknRollCallRequirements and Early Design
Wednesday, November 6, 13
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
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
Oredev 2013
Building Modern Web AppsApplication Route
application.hbs
App.SearchBox View
Loading Route
Wednesday, November 6, 13
Oredev 2013
Building Modern Web AppsSearchResults Route
SearchResultsController
search-results.hbs
artists[]
songs[]
actions
bindings
Wednesday, November 6, 13
Oredev 2013
Building Modern Web AppsArtistRoute
ArtistController
artist.hbs
Wednesday, November 6, 13
Oredev 2013
Building Modern Web AppsActivity Route
Activity Controller
activity.hbs
Ember-Data
LocalStorage
D3 HeatMap Ember Component
Wednesday, November 6, 13
Ember ToolsWorkflow, Boilerplate
Wednesday, November 6, 13
Oredev 2013
Yeoman
Ember Tools
Ember Rails
Ember App Kit
Ember Workflow/Tools Matrix
Wednesday, November 6, 13
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
Prototyping w/ Emberurl driven apps, using dummy data
Wednesday, November 6, 13
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
BindingsShow/Hide Data
Wednesday, November 6, 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
Loading RouteAdding a Spinner and controlling Load with Promises
Wednesday, November 6, 13
Oredev 2013
LoadingRoute
App.LoadingRoute = Ember.Route.extend({});
Loading View
loading.hbs
RSVP Promises and adding a Delay
Loading Route
Wednesday, November 6, 13
ViewsUsing DidInsertElement()
Wednesday, November 6, 13
Oredev 2013
The Hotness Flames
DidInsertElement()
Views
Wednesday, November 6, 13
Ember-DataModels, LocalStorageAdapter
Wednesday, November 6, 13
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
Ember-TestingClient-Side Integration
Wednesday, November 6, 13
Oredev 2013
Ember-Testing
Wednesday, November 6, 13
3rd Party JS IntegrationD3 and jQuery
Wednesday, November 6, 13
Oredev 2013
Web Components
D3 Hotness Heat Map
3rd Party JS and Ember Components
Wednesday, November 6, 13
