All Things Open 2014 - Day 2 Thursday, October 23rd, 2014 Yehuda Katz Founder of Tilde Front Dev 1 The Ember.js Framework - Everything You Need To Know

2. What is Ember?

3. Full Stack

4. Aspirational

5. Without boiling the ocean

6. Browsers figured out how to have stability without stagnation

7. We copied them

9. Rolling in Best Practices

10. Chasing the Hype Dragon
We are exhausted of chasing the hype dragon. Finding good ideas and rolling them into something stable and cutting edge is better.

11. Delivering On Our Promises
If you look at Ember at any given point, it may look like there's a lot of vaporware, but we have a history of coming through.

17. Ember CLI
Ember App Kit experimented, and Ember CLI delivers a stable, framework-level solution.

18. Ember CLI
$
ember
server
Ember App Kit experimented, and Ember CLI delivers a stable, framework-level solution.

19. My EmberCamp keynote

25. ES6 Modularization

26. <script
type="text/x-­‐placeholder">

28. Ember 1.8: Metal Views
Script tags finally removed in stable, tomorrow!

31. Up to Date
bustle.com 1.8.0-beta.5
discourse.org 1.6.0
vine.co 1.7.0
squareup.com 1.5.0
intercom.io 1.7.0
travis-ci.org 1.6.1
ghost.org 1.7.0
We take stability very seriously, and are rewarded with apps staying largely up to date. This means an ecosystem that is able to take advantage of
improvements.

32. Demo

33. We're Always Learning

35. We learned from Backbone that there was virtue in a small scope and keeping small (relative to SproutCore!)

36. We learned from Angular the virtue of directives and dependency injection.

37. And we learned from React the virtue of more explicit data flow and coarses updated made fast via virtual DOMs.

38. So what is Ember?

39. Consistency!
Our highest value is consistency.

40. /apps/1
It doesn't matter how you navigate to a route; the vast majority of the code is identical. This allows you to experiment and tinker a lot more without things
breaking.

41. /apps/1
navigate
It doesn't matter how you navigate to a route; the vast majority of the code is identical. This allows you to experiment and tinker a lot more without things
breaking.

42. /apps/1
navigate
/apps/2
It doesn't matter how you navigate to a route; the vast majority of the code is identical. This allows you to experiment and tinker a lot more without things
breaking.

43. /apps/1
navigate
/apps/2 /settings
It doesn't matter how you navigate to a route; the vast majority of the code is identical. This allows you to experiment and tinker a lot more without things
breaking.

44. /apps/1
navigate
/apps/2 /settings
?
It doesn't matter how you navigate to a route; the vast majority of the code is identical. This allows you to experiment and tinker a lot more without things
breaking.

45. Here's a bit of app state (the user's name).

46. Yehuda Katz
Here's a bit of app state (the user's name).

47. Yehuda Katz
I open the Ember inspector and find the user model.

48. Yehuda Katz
I edit it.

49. Yehuda KatzYehuda Katz

50. Yehuda Katz

51. Yehuda Katz
And you can see that the name updates.

52. And you can see that the name updates.

53. • Initial Load
• Web Socket
• Settings Page
• Internationalization
• ...
There are many ways for this application-wide model to update, and many places where it appears. Keeping the update consistent (data bindings) means
you can change the flow of those updates and never have the UI get out of sync.

54. • Initial Load
• Web Socket
• Settings Page
• Internationalization
• ...
Yehuda Katz
There are many ways for this application-wide model to update, and many places where it appears. Keeping the update consistent (data bindings) means
you can change the flow of those updates and never have the UI get out of sync.

55. One Representation
&
One Code Path
There is only one representation of visual UI (data bound template with declarative data flow) and one code path for navigation (routes). This means that
navigating in a different order or loading data differently (or adding push!) doesn't break things.

56. Freedom to Explore and Tinker
This gives you the freedom to explore new ideas far more aggressively and refactor your UI without fear. This is something we have taken advantage of in
Skylight and I can attest that it works as advertised.

57. Without Fear

58. The Future

59. The Future
?

60. HTMLBars!
The two things I am most excited about are getting rid of {{bind-attr}} and the macro-performance improvements we will eventually get from coarser
updates and virtual-DOM-style diffing. The micro-improvements (up to 2x) don't hurt either.

61. HTMLBars!
<a
class="{{active}}"
href="{{url}}.html">
The two things I am most excited about are getting rid of {{bind-attr}} and the macro-performance improvements we will eventually get from coarser
updates and virtual-DOM-style diffing. The micro-improvements (up to 2x) don't hurt either.

62. HTMLBars!
<a
class="{{active}}"
href="{{url}}.html">
The two things I am most excited about are getting rid of {{bind-attr}} and the macro-performance improvements we will eventually get from coarser
updates and virtual-DOM-style diffing. The micro-improvements (up to 2x) don't hurt either.

63. Simpler and Clearer

64. Simpler and Clearer
• Controllers

65. Simpler and Clearer
• Controllers
• Top-Level Components driven by the Router

66. Simpler and Clearer
• Controllers
• Top-Level Components driven by the Router
• Simplified inter-component data-flow and virtual DOM inspired by React.js

67. Simpler and Clearer
• Controllers
• Top-Level Components driven by the Router
• Simplified inter-component data-flow and virtual DOM inspired by React.js
• Finished full-stack documented all together on the website
• Ember w/ Modules
• Ember Data
• Ember CLI
• Ember Inspector

68. Stop Chasing the Hype Dragon
"Eventually all the good ideas will end up in Ember"

69. Ember's release process gives you Stability without Stagnation. We stay close to the cutting edge (modules, build tooling, virtual DOM) but in an orderly
way that you can build apps on. Join us!