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.

LA Ember.js Meetup, Jan 2017

316 views

Published on

Building on the Glimmer rendering engine, Ember continues to make performance and stability dual priorities. Let's discuss what the web looks like in 2017 and how Ember is prepared, and can better prepare, to meet new challenges.

Published in: Internet
  • Be the first to comment

LA Ember.js Meetup, Jan 2017

  1. 1. January 2017
  2. 2. twitter.com/mixonic Ember.js Core Team madhatted.com
  3. 3. FORMALISM
  4. 4. 1 let spaceship = { 2 mass: 2 3 }; 4 5 let acceleration = 2; 6 let force = spaceship.mass * acceleration; 7 8 accelerate(spaceship, force);
  5. 5. 1 let spaceship = { 2 mass: 2 3 }; 4 5 function deriveForce(mass, acceleration) { 6 return mass * acceleration; 7 } 8 9 let acceleration = 2; 10 let force = deriveForce(spaceship.mass, acceleration); 11 12 accelerate(spaceship, force);
  6. 6. “The purpose of abstraction is not to be vague, but to create a new semantic level in which one can be absolutely precise.” The Humble Programmer Edsger Dijkstra 1972
  7. 7. 1 let spaceship = { 2 mass: 2 3 }; 4 5 function deriveForce(mass, acceleration) { 6 return mass * acceleration; 7 } 8 9 let acceleration = 2; 10 let force = deriveForce(spaceship.mass, acceleration); 11 12 accelerate(spaceship, force);
  8. 8. INTUITION
  9. 9. We now come to the decisive step of mathematical abstraction: we forget about what the symbols stand for. The mathematician is concerned with the catalogue alone; he is like the man in the catalogue room who does not care what books or pieces of an intuitively given manifold the symbols of his catalogue denote. He need not be idle; there are many operations which he may carry out with these symbols, without ever having to look at the things they stand for. The Mathematical Way of Thinking Hermann Weyl 1940
  10. 10. 20172011 2013 2015 1.0 2.0
  11. 11. WHO USES THE WEB AND HOW
  12. 12. 0 0.25 0.5 0.75 1 2011 2012 2013 2014 2015 2016 Global Desktop Web Traffic Global Mobile Web Traffic StatsCounter
  13. 13. ITU
  14. 14. WHAT THE WEB IS
  15. 15. 0 0.25 0.5 0.75 1 2011 2012 2013 2014 2015 2016 Chrome Traffic IE Traffic StatsCounter
  16. 16. • Online/Offline status • Selection API • XHR2 / CORS • background-color: currentColor • All ES5 • let / const • High Resolution Timers • MessageChannel • Blobs • TypedArrays • Geolocation • Web Sockets IE11+ WEB FEATURES
  17. 17. • Online/Offline status • Selection API • XHR2 / CORS • background-color: currentColor • All ES5 • let / const • High Resolution Timers • MessageChannel • Blobs • TypedArrays • Geolocation • Web Sockets • Web Workers • Internationalization API • Strict HTTPS Transport • HTTP2 • MP3, AAC, MPEG-4/H.264 • WOFF • SVG, SVG filters • <input pattern= • DNS prefetch • Multiple File Selection • Viewport sizes (8vw) • querySelector, matches IE11+ WEB FEATURES
  18. 18. • Online/Offline status • Selection API • XHR2 / CORS • background-color: currentColor • All ES5 • let / const • High Resolution Timers • MessageChannel • Blobs • TypedArrays • Geolocation • Web Sockets • Web Workers • Internationalization API • Strict HTTPS Transport • HTTP2 • MP3, AAC, MPEG-4/H.264 • WOFF • SVG, SVG filters • <input pattern= • DNS prefetch • Multiple File Selection • Viewport sizes (8vw) • querySelector, matches • File API • IndexedDB • WebGL • dataset • <script> defer • getBoundingClientRect • ::first-line • calc() • requestAnimationFrame • atob / btoa • PageTransitionEvent • <video> IE11+ WEB FEATURES
  19. 19. • Online/Offline status • Selection API • XHR2 / CORS • background-color: currentColor • All ES5 • let / const • High Resolution Timers • MessageChannel • Blobs • TypedArrays • Geolocation • Web Sockets • Web Workers • Internationalization API • Strict HTTPS Transport • HTTP2 • MP3, AAC, MPEG-4/H.264 • WOFF • SVG, SVG filters • <input pattern= • DNS prefetch • Multiple File Selection • Viewport sizes (8vw) • querySelector, matches • File API • IndexedDB • WebGL • dataset • <script> defer • getBoundingClientRect • ::first-line • calc() • requestAnimationFrame • atob / btoa • PageTransitionEvent • <video> • <audio> • Session History • <progress> • MutationObserver • Navigation Timing API • <script> async • naturalWidth, naturalHeight • input event • matchMedia • crypto.getRandomValues() • Viewport sizes (8vw) • classList IE11+ WEB FEATURES
  20. 20. • Online/Offline status • Selection API • XHR2 / CORS • background-color: currentColor • All ES5 • let / const • High Resolution Timers • MessageChannel • Blobs • TypedArrays • Geolocation • Web Sockets • Web Workers • Internationalization API • Strict HTTPS Transport • HTTP2 • MP3, AAC, MPEG-4/H.264 • WOFF • SVG, SVG filters • <input pattern= • DNS prefetch • Multiple File Selection • Viewport sizes (8vw) • querySelector, matches • File API • IndexedDB • WebGL • dataset • <script> defer • getBoundingClientRect • ::first-line • calc() • requestAnimationFrame • atob / btoa • PageTransitionEvent • <video> • <audio> • Session History • <progress> • MutationObserver • Navigation Timing API • <script> async • naturalWidth, naturalHeight • input event • matchMedia • crypto.getRandomValues() • Viewport sizes (8vw) • classList • Custom events • TTF/OTF • CSP 1.0 • Range • page visibility • SVG in CSS background • 3d transforms • Semantic Elements, e.g. <section> • AppCache • Web Crypto • CSS3 multi-column layout • console log methods • insertAdjacentHTML • Session History IE11+ WEB FEATURES
  21. 21. WHO DEVELOPS FOR THE WEB
  22. 22. 0 32500 65000 97500 130000 2011 2013 2015 BLS Fulltime Web Developers, USA
  23. 23. 2011
  24. 24. 2017
  25. 25. • Make Ember easier to learn • Deliver it to clients in smaller, smarter chunks • Do less work on the client • Better arrange work on the client • Make it easier for addons and contributors to participate
  26. 26. INITIATIVESThe Road Ahead
  27. 27. ENGINES & LAZY LOADING • emberjs/rfcs#10 Merged in April 2016 • Design cycle was 1.5 years! • Additions to Ember were kept minimal, the majority of the functionality is in the ember-engines addon • Further specification for lazy loading in emberjs/rfcs#153 (asset manifest) and emberjs/rfcs#158 (loader service) • Support for lazy loading is in ember-engines@0.4.0
  28. 28. MODULE UNIFICATION • Proceeded by emberjs/rfcs#124, Module Normalization • emberjs/rfcs#143 Merged in mid-October • Design cycle was 8 months • Included building a migration tool for real apps to test our assumptions about aesthetics (ember-module-migrator) • Work on a dynamic version of the resolver begun in ember- cli/ember-cli#6332 • Work on improving IDE support in emberjs/ember.js#14430
  29. 29. JAVASCRIPT MODULE API • emberjs/rfcs#176 opened November 2016, closed 5 days ago • Based on feedback from “module shims”, emberjs/rfcs#68 • Includes plans for a migration tool via static analysis • Was considered for 2.12, but we decided to go slow
  30. 30. ROUTER SERVICE • emberjs/rfcs#95 was merged November 2016 • Design cycle a little over a year • There have been several partial implementations, but no complete PR
  31. 31. GLIMMER COMPONENTS & ELEMENT MODIFIERS 1 <div {{my-element-modifier}}></div> 1 <my-ember-component />
  32. 32. GLIMMER COMPONENTS & ELEMENT MODIFIERS • emberjs/rfcs#60 (Component Unification) closed April • emberjs/rfcs#112 (Element Modifiers) open since January • Challenges: • Moving from this.attrs to this.args. New two way binding callback API • If we migrate to this.args, what happens to the name `didReceiveAttrs` • Is there a better way to express recompilation than observers? • DOM attributes and props • @arg
  33. 33. GLIMMER COMPONENTS & ELEMENT MODIFIERS 1 <my-ember-component> 2 Hello 3 </my-ember-component>
  34. 34. 1 <my-ember-component class="important"> 2 Hello 3 </my-ember-component> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  35. 35. 1 <my-ember-component 2 class="important" 3 data-priority> 4 Hello 5 </my-ember-component> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  36. 36. 1 <div> 2 {{@model.name}} 3 </div> 1 <my-ember-component 2 class="important" 3 data-priority 4 @model={{someProperty}} /> 1 <div class="important" data-priority> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  37. 37. 1 <div> 2 {{@model.name}} 3 </div> 1 <my-ember-component 2 class="important" 3 data-priority 4 @model={{someProperty}} /> 1 <div class="important" data-priority> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  38. 38. 1 <div> 2 {{@model.name}} 3 </div> 1 <my-ember-component 2 class="important" 3 data-priority 4 @model={{someProperty}} /> 1 <div class="important" data-priority> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  39. 39. 1 <div> 2 {{@model.name}} 3 </div> 1 <my-ember-component 2 class="important" 3 data-priority 4 @model={{someProperty}} /> 1 <div class="important" data-priority> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  40. 40. 1 <div class="solid"> 2 {{@model.name}} 3 </div> 1 <div class="important solid"> 2 Mitchell 3 </div> 1 <my-ember-component 2 class="important" 3 @model={{someProperty}} /> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  41. 41. 1 <div class="solid"> 2 {{@model.name}} 3 </div> 1 <div class="important solid"> 2 Mitchell 3 </div> 1 <my-ember-component 2 class="important" 3 @model={{someProperty}} /> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  42. 42. 1 <my-ember-component 2 @model={{someProperty}} as |name|> 3 {{name}} 4 </my-ember-component> 1 <div> 2 {{yield @model.name}} 3 </div> 1 <div> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  43. 43. 1 <my-ember-component 2 @model={{someProperty}} as |name|> 3 {{name}} 4 </my-ember-component> 1 <div> 2 {{yield @model.name}} 3 </div> 1 <div> 2 Mitchell 3 </div> GLIMMER COMPONENTS & ELEMENT MODIFIERS
  44. 44. IGNITER • No RFC yet. Experimentation in runspired/igniter • Would remove the requirement of explicit runloops
  45. 45. IGNITER 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels');
  46. 46. 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); render(); render(); render(); IGNITER
  47. 47. 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); render(); render(); render(); IGNITER
  48. 48. 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); IGNITER
  49. 49. Ember.run(() => { 2 3 4 }); 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); IGNITER
  50. 50. Ember.run.begin(); 2 3 4 Ember.run.end(); 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); IGNITER
  51. 51. Ember.run.begin(); 2 3 4 Ember.run.end(); 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); render(); IGNITER
  52. 52. 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); IGNITER
  53. 53. 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); 1 setTimeout(() => { 2 render(); 3 }); IGNITER
  54. 54. IGNITER 1 obj.set('name', 'Betsy'); 2 obj.set('age', '42'); 3 obj.set('shoes', 'heels'); scheduleRender(); scheduleRender(); scheduleRender(); 1 requestAnimationFrame(() => { 2 render(); 3 });
  55. 55. • Glimmer binary VM and wire format, stack VM • Interoperability with ES Classes • Lazy evaluation and dead code elimination • Fastboot rehydration • Critical path rendering • Improved RFC automation • Improved visibility of feature progress
  56. 56. The Future
  57. 57. “…is already here —” William Gibson 1999
  58. 58. “it’s just not evenly distributed” William Gibson 1999
  59. 59. “It is hard for people to imagine what the web is capable of.” 201 Created Clients 2017
  60. 60. shop-201.com • SEO Friendly • Great animations • Install-to-homescreen • Tap-to-pay (ApplePay) • Phones, tablets, desktops
  61. 61. Thanks

×