Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"

587 views

Published on

Ember.js is being adopted more and more broadly as time passes, and is an excellent choice for highly complex data-driven UIs. With the recent release of the "2.0" version of the framework, things are faster, smarter, and easier than ever. With a focus on productivity and reducing the number of trivial decisions developers must make while building an app, it's astonishing how quickly one can get up and running, and how well the abstractions hold up as the codebase scales in size and complexity.
I'd like to give a general overview of Ember, and pause to reflect on some important differences that may be important when considering what the best tool is for your project.

Published in: Technology
  • Be the first to comment

Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"

  1. 1. Mike North Levanto Financial, Inc. Ember.js – Modern, Scalable, Ambitious Apps
  2. 2. JS UI FRAMEWORKS 99 2000 01 02 03 04 05 06 07 08 09 2010 11 12 13 14 15 16 17 2 2 6 7 8 9 10 11 12 ES3 ES5 @MichaelLNorth
  3. 3. NOW IMAGINE… • All the micro-libraries • All the build tools • All the pre-processors and post-processors • All of the permutations with typescript, babel, etc…
  4. 4. 2
  5. 5. What our users need us to build
  6. 6. What we’re sometimes tempted to build
  7. 7. What our users need us to build
  8. 8. THE EMBER ECOSYSTEM ember-cli Code Generation Asset Pipeline Plugins Extensible CLI Test Runner ember.js SPA routing Components Templating Data Binding Prioritized Work Queue ember-data Request Construction JSON Serialization Redux-like Data Flow Async Relationships liquid-fire animations ember-collection virtualized list
  9. 9. THE EMBER ECOSYSTEM • Built on strong conventions & opinions • Focus on developer productivity • Aligned with web standards • Abstractions hold up w/ large scale & complexity • Constantly improving
  10. 10. TEMPLATING • Handlebars • Declarative markup, an extension of HTML • Compiled at build time • Extensible Hello, <strong> {{firstName}} {{lastName}} </strong>!
  11. 11. TEMPLATING • Helpers • Block vs inline form • Easy to read and reason about My pet goes {{#if isDog}} arf {{else}} meow {{/if}} My pet goes {{if isDog "arf" "meow"}}
  12. 12. My pet goes {{if isDog "arf" "meow"}} function ifHelper(condition, ifTrue, ifFalse) { return condition ? ifTrue : ifFalse } {{#if isEnabled}} <b>Switch is enabled</b> {{/if}} function ifHelper(condition, callbackIfTrue) { return condition ? callbackIfTrue() : ''; }
  13. 13. <ul> {{#each arr as |item|}} <li>{{item.name}}</li> {{/each}} </ul> function eachHelper(array, cb) { return array .map(item => cb(item)) .join(''); }
  14. 14. ROUTING • Router - Finite State Machine • Routes - Manage transitions between states • URLs drive your app this is a core pillar of Ember
  15. 15. ROUTING ember routing URL changes components templates HTML++ ember-data store adapter makes requests serializer transforms JSON Talks to API
  16. 16. application index application posts post author comments index index index indexindex /URL:
  17. 17. application posts posts/index application posts post author comments index index index indexindex /posts/URL:
  18. 18. application post post/index application posts post author comments index index index indexindex /post/31URL:
  19. 19. application post application posts post author comments index index index indexindex {{outlet}} /post/31/comments/URL:
  20. 20. application post application posts post author comments index index index indexindex post/comments post/comments/index /post/31/comments/URL:
  21. 21. COMPONENTS How many of you have been using some type of web component for > 5 years?
  22. 22. COMPONENTS
  23. 23. <my-widget title='Enter your Info'> <my-field name='Username'/> <my-field name='Password'/> </my-widget>
  24. 24. W3C WEB COMPONENT SPEC IS INCOMPLETE!
  25. 25. …ANDTHIS IS A GOODTHING WEB UI LIBS ARE JUST A GIANT SERIES OF HACKS
  26. 26. TC39
  27. 27. <my-widget title='Enter your Info'> <my-field name='Username'/> <my-field name='Password'/> </my-widget> {{#my-widget title='Enter your Info’}} {{my-field name=‘Username’}} {{my-field name=‘Password’}} {{/my-widget}}
  28. 28. init on instantiation willInsertElement before the component’s element is inserted into the DOM didInsertElement after the component’s element has been inserted into the DOM willDestroyElement before the component’s element is removed from the DOM $(document).ready() for components Clean up before tear down EMBER.COMPONENT
  29. 29. EMBER-DATA • Unidirectional data flow, single atom of state • Can talk to any API • Moves data massaging out of your business logic • Built around fetch (important for SS rendering!) • Saves tons of time if your API uses consistent conventions
  30. 30. EMBER-DATA: MODEL • Representation of any (usually persistent) data • Defined by attributes, and relationships to other models • “model” is the factory that defines the structure of “records” // app/models/book.js import DS from 'ember-data'; const { attr, hasMany } = DS; export default DS.Model.extend({ title: attr('string'), publishedAt: attr('date'), chapters: hasMany('chapter') });
  31. 31. EMBER-DATA: STORE • Where you get/create/destroy records • A single source of truth • This means that all changes are kept in sync! • Similar concept in Facebook/flux, angular-data
  32. 32. EMBER-DATA: STORE // (maybe) API request for all records of type "author" this.store.findAll('author'); // (maybe) API request for record of type "post" with id 37 this.store.findRecord('post', 37); // API request for all records of type "author" this.store.fetchAll('author'); // API request for record of type "post" with id 37 this.store.fetchRecord('post', 37); // look in cache for all records of type "author" this.store.peekAll('author'); // look in cache for record of type "post" with id 37 this.store.peekRecord('post', 37);
  33. 33. EMBER-DATA:ADAPTER export default DS.RESTAdapter.extend({ host: 'https://api.github.com', urlForQuery (query, modelName) { switch(modelName) { case 'repo': return `${this.get('host')}/orgs/${query.orgId}/repos`; default: return this._super(...arguments); } } });
  34. 34. EMBER-DATA: SERIALIZER export default DS.RESTSerializer.extend({ normalizeResponse(store, modelClass, payload, id, requestType){ const newPayload = { org: payload }; return this._super(store, modelClass, newPayload, id, requestType); } });
  35. 35. EMBER-CLI
  36. 36. ADOPTION
  37. 37. RECENT DEVELOPMENTS
  38. 38. FASTBOOT
  39. 39. ENGINES
  40. 40. GLIMMER 2
  41. 41. …AND MORE…
  42. 42. THANKS! COME TO THE EMBER.JS WORKSHOP!

×