• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Oredev 2013: Building Web Apps with Ember.js
 

Oredev 2013: Building Web Apps with Ember.js

on

  • 1,107 views

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 ...

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.

Statistics

Views

Total Views
1,107
Views on SlideShare
1,087
Embed Views
20

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 20

http://www.xfiremedia.com 20

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Oredev 2013: Building Web Apps with Ember.js Oredev 2013: Building Web Apps with Ember.js Presentation Transcript

    • 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, 13
    • 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 Components 3rd Party Integration (jQuery, D3) Ember-Testing SPA Authentication Ember-Data Remote Data Storage Oredev 2013 Wednesday, November 6, 13
    • 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
    • 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 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
    • 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
    • Building Modern Web Apps Application Route application.hbs App.SearchBox View Loading Route Oredev 2013 Wednesday, November 6, 13
    • Building Modern Web Apps SearchResults Route SearchResultsController search-results.hbs artists[] songs[] actions bindings Oredev 2013 Wednesday, November 6, 13
    • 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 Component Oredev 2013 Wednesday, November 6, 13
    • 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 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
    • 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 (SearchResultsController) HandleBars template (search-results) Notice no Models, no Views Oredev 2013 Wednesday, November 6, 13
    • Bindings Show/Hide Data Wednesday, November 6, 13
    • 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
    • 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 Delay Oredev 2013 Wednesday, November 6, 13
    • 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: 'rocknrollcall' }); Ember Models Store Seeding with Better Dummy Data (Application.Initializer) later ... RESTAdpater Oredev 2013 Wednesday, November 6, 13
    • 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