Hella Good Ember

The closing keynote from Wicked Good Ember 2016, hosted on Thompson Island in Boston. https://wickedgoodember.com

Transcript

1. WICKED
   GOOD
   EMBER
   Hella
   

   View Slide

2. View Slide

3. AMBITIOUS
   WEB APPLICATIONS
   

   View Slide

4. Engaging with Standards
   Long Bet
   

   View Slide

5. Tooling
   Long Bet
   

   View Slide

6. Declarative Syntax
   Long Bet
   

   View Slide

7. AMBITIOUS
   WEB APPLICATIONS
   

   View Slide

8. The New Progressive
   Enhancement
   

   View Slide

9. HTML + HTTP
   + maybe JS
   client-side
   JavaScript
   progressive
   enhancement
   JavaScript
   slow devices,
   good network
   fast devices,
   bad network
   technology best for
   

   View Slide

10. Size
    

    View Slide

11. What is Ember for?
    

    View Slide

12. What is Ember for?
    Workspace
    App
    Landing
    Page
    

    View Slide

13. Heroku
    Dashboard
    Square
    Dashboard
    Travis CI
    

    View Slide

14. DISQUALIFIED
    

    View Slide

15. View Slide

16. What is Ember for?
    Workspace
    App
    Landing
    Page New Project
    ?
    BYO Abstraction ???
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. Functionality
    Size
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. hillary.monegraph.com
    

    View Slide

25. hillary.monegraph.com
    

    View Slide

26. Hassan Abdel-Rahman Will Bagby
    hillary.monegraph.com
    

    View Slide

27. • Ember CLI
    • Sass
    • TypeScript
    • App Cache
    • Glimmer 2
    

    View Slide

28. View Slide

29. View Slide

30. 0
    11
    22
    33
    44
    kilobytes, min + gzip
    React
    44kb
    Glimmer 2
    40kb
    App +
    

    View Slide

31. View Slide

32. github.com/
    tomdale/
    apple-pay-merchant-session-server
    

    View Slide

33. Professional stunt drivers on a
    closed course. Do not attempt.
    

    View Slide

34. Glimmer 2
    

    View Slide

35. • JavaScript
    • Small core
    • Components implemented
    in Ember
    Glimmer 1 Glimmer 2
    • TypeScript
    • “Rendering engine engine”
    • Components implemented
    in Glimmer
    

    View Slide

36. Glimmer 1
    Ember
    

    View Slide

37. Glimmer 2
    Ember
    

    View Slide

38. github.com/
    emberjs/
    ember.js/
    issues/13644
    Track Glimmer 2 Progress
    

    View Slide

39. View Slide

40. • String loading
    • Eagerly load common modules
    • Net 20% real-world improvement
    Improving Mobile Load Times
    

    View Slide

41. Where do we go from here?
    

    View Slide

42. Standardize on JavaScript
    Modules
    

    View Slide

43. • router.js
    • route-recognizer
    • rsvp
    • simple-dom
    • simple-html-tokenizer
    • glimmer
    • backburner
    • dag
    • container
    • morph-range
    

    View Slide

44. Move Internals to TypeScript
    

    View Slide

45. • Catches bugs
    • Improves performance
    • Helps enforce static code V8 requires
    • Support opt-in for apps
    • Design user-facing APIs JavaScript-first
    • Aggressive minification
    TypeScript
    

    View Slide

46. The Object Model
    

    View Slide

47. “Where does Ember end and
    the language begin?”
    

    View Slide

48. Engaging with Standards
    Long Bet
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. Ember is Overwhelming
    

    View Slide

53. ember-metal
    ember-runtime container
    ember-routing
    ember-glimmer
    ember-application
    

    View Slide

54. ember-metal
    ember-runtime container
    ember-routing
    ember-glimmer
    ember-application
    Terrifyingly Broad
    Bundle of
    Abstractions and
    APIs
    

    View Slide

55. BYO Layers
    

    View Slide

56. raven-js
    shortid
    sass
    gulp
    gulp-real-favicon
    autoprefixer
    mocha
    bluebird
    validator.js
    webpack-isomorphic-tools
    react-helmet
    react
    redux
    redux-storage
    babeljs
    immutablejs
    react-router
    react-router-redux
    react-intl
    webpack
    express eslint
    formatjs
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. 
    
    .png
    

    View Slide

61. A lot of people will tell you that a set of small, composable
    libraries is better than an opinionated framework, because
    when your constraints don’t line up perfectly with the
    framework’s choices, you are out of luck.
    When using your own set of libraries, you have to glue together
    all the individual components yourself. On the other hand, a
    well-designed framework like Ember is just a curated set of
    libraries that work together seamlessly out-of-the-box. If
    something doesn’t work for you, you can just replace those
    parts and drop in a custom adapter or two.
    Godfrey Chan
    Canadian JavaScript Ambassador
    bit.ly/ember-adapter-patterns
    

    View Slide

62. The Next Round
    

    View Slide

63. “V in MVC” “Platform of Capabilities”
    

    View Slide

64. View Slide

65. Relentless Focus on the Web
    

    View Slide

66. View Slide

67. Instant Web Apps,
    Out of the Box
    

    View Slide

68. Simplify, Simplify, Simplify
    

    View Slide

69. Standalone Glimmer
    

    View Slide

70. …With a Path to Ember
    

    View Slide

71. Workspace
    App
    Landing
    Page
    Glimmer Ember
    

    View Slide

72. Thank You!
    

    View Slide