Building Web Apps with Ember.js
Oredev 2013
Nov 2013

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

Wednesday, November 6, 13
HTML5 Hacks

Sign up on the Mailing List
Win A Free eBook at
html5hacks.com

Oredev 2013

Wednesday, November 6, 13

3
Getting Started
The Ember Community

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

Oredev 2013

Wednesday, November 6,...
Ember Community Docs
Ember Guides, Ember API Docs

Oredev 2013

Wednesday, November 6, 13
RocknRollCall
Master/Detail and more...
Wednesday, November 6, 13
Github/EmberjsBook
4 repos of varying levels of depth into the application stack

Oredev 2013

Wednesday, November 6, 13
RocknRollCall vs. Bloggr-Client
Ember Tools
Ember Inspector
Ember Boilerplates
App Initializers
Promises
Needs
Ember Compo...
Building Modern Web Apps

One of the hardest
aspects to grasp is an
efficient order

First,
Early Design: HTML, Diagram Cont...
Ember Basics
The Minimal Viable App (Chapter 2)

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

Oredev 2013

Wednesday, November 6, 13
RocknRollCall
Requirements and Early Design

Wednesday, November 6, 13
RockNRollCall Req’s
Search by Keyword to Find Transient Data (Songs and Artists)
Persist the Activity of Selecting Songs a...
RockNRollCall Flow
Application Route, application.hbs, view App.SearchBox
Transitions to the SearchResultsRoute passing th...
Building Modern Web Apps
Application Route
application.hbs
App.SearchBox View

Loading Route
Oredev 2013

Wednesday, Novem...
Building Modern Web Apps
SearchResults Route
SearchResultsController
search-results.hbs

artists[]
songs[]
actions
binding...
Building Modern Web Apps
ArtistRoute
ArtistController
artist.hbs

Oredev 2013

Wednesday, November 6, 13
Building Modern Web Apps
Activity Route
Activity Controller
activity.hbs
Ember-Data
LocalStorage
D3 HeatMap Ember
Componen...
Ember Tools
Workflow, Boilerplate

Wednesday, November 6, 13
Ember Workflow/Tools Matrix
Yeoman
Ember Tools
Ember Rails
Ember App Kit

Oredev 2013

Wednesday, November 6, 13
Ember Workflow/Tools at frog
Many ways to do manage an Ember app:
1. Manual Ember app with Rails backend ported to .NET MVC...
Prototyping w/ Ember
url driven apps, using dummy data

Wednesday, November 6, 13
Prototyping w/ Ember
URL Driven: State Manager and Routes First
Populate the Controllers with Dummy Data (SearchResultsCon...
Bindings
Show/Hide Data

Wednesday, November 6, 13
Bindings
Bindings create links between two properties, such that when one changes the other is
updated.
SearchResultsContr...
Loading Route
Adding a Spinner and controlling Load with
Promises

Wednesday, November 6, 13
Loading Route
LoadingRoute
App.LoadingRoute = Ember.Route.extend({});

Loading View
loading.hbs
RSVP Promises and adding a...
Views
Using DidInsertElement()

Wednesday, November 6, 13
Views
The Hotness Flames
DidInsertElement()

Oredev 2013

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

Wednesday, November 6, 13
Ember-Data
LocalStorage Adapter (Activity Records)
App.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'rocknrollcal...
Ember-Testing
Client-Side Integration

Wednesday, November 6, 13
Ember-Testing

Oredev 2013

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

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

Oredev 2013

Wednesday, November 6, 13
Upcoming SlideShare
Loading in …5
×

Oredev 2013: Building Web Apps with Ember.js

1,294
-1

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,294
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Oredev 2013: Building Web Apps with Ember.js

  1. 1. Building Web Apps with Ember.js Oredev 2013 Nov 2013 Wednesday, November 6, 13
  2. 2. @jdcravens github.com/jessecravens @thomasqbrady github.com/thomasqbrady frog Wednesday, November 6, 13
  3. 3. HTML5 Hacks Sign up on the Mailing List Win A Free eBook at html5hacks.com Oredev 2013 Wednesday, November 6, 13 3
  4. 4. Getting Started The Ember Community Wednesday, November 6, 13
  5. 5. Tom Dale’s Bloggr-Client A Great Starting Point for Beginners, but then what is next? Oredev 2013 Wednesday, November 6, 13
  6. 6. Ember Community Docs Ember Guides, Ember API Docs Oredev 2013 Wednesday, November 6, 13
  7. 7. RocknRollCall Master/Detail and more... Wednesday, November 6, 13
  8. 8. Github/EmberjsBook 4 repos of varying levels of depth into the application stack Oredev 2013 Wednesday, November 6, 13
  9. 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. 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
  11. 11. Ember Basics The Minimal Viable App (Chapter 2) Wednesday, November 6, 13
  12. 12. Minimal Viable App Dummy Data Binding Handlebars View helper How the app loads Oredev 2013 Wednesday, November 6, 13
  13. 13. RocknRollCall Requirements and Early Design Wednesday, November 6, 13
  14. 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. 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. 16. Building Modern Web Apps Application Route application.hbs App.SearchBox View Loading Route Oredev 2013 Wednesday, November 6, 13
  17. 17. Building Modern Web Apps SearchResults Route SearchResultsController search-results.hbs artists[] songs[] actions bindings Oredev 2013 Wednesday, November 6, 13
  18. 18. Building Modern Web Apps ArtistRoute ArtistController artist.hbs Oredev 2013 Wednesday, November 6, 13
  19. 19. Building Modern Web Apps Activity Route Activity Controller activity.hbs Ember-Data LocalStorage D3 HeatMap Ember Component Oredev 2013 Wednesday, November 6, 13
  20. 20. Ember Tools Workflow, Boilerplate Wednesday, November 6, 13
  21. 21. Ember Workflow/Tools Matrix Yeoman Ember Tools Ember Rails Ember App Kit Oredev 2013 Wednesday, November 6, 13
  22. 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
  23. 23. Prototyping w/ Ember url driven apps, using dummy data Wednesday, November 6, 13
  24. 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
  25. 25. Bindings Show/Hide Data Wednesday, November 6, 13
  26. 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. 27. Loading Route Adding a Spinner and controlling Load with Promises Wednesday, November 6, 13
  28. 28. Loading Route LoadingRoute App.LoadingRoute = Ember.Route.extend({}); Loading View loading.hbs RSVP Promises and adding a Delay Oredev 2013 Wednesday, November 6, 13
  29. 29. Views Using DidInsertElement() Wednesday, November 6, 13
  30. 30. Views The Hotness Flames DidInsertElement() Oredev 2013 Wednesday, November 6, 13
  31. 31. Ember-Data Models, LocalStorageAdapter Wednesday, November 6, 13
  32. 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
  33. 33. Ember-Testing Client-Side Integration Wednesday, November 6, 13
  34. 34. Ember-Testing Oredev 2013 Wednesday, November 6, 13
  35. 35. 3rd Party JS Integration D3 and jQuery Wednesday, November 6, 13
  36. 36. 3rd Party JS and Ember Components Web Components D3 Hotness Heat Map Oredev 2013 Wednesday, November 6, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×