Ember.js - the framework for creating ambitious web apps

Ember.js is the framework for creating ambitious web apps. In this talk I'm exploring why that is the case and how Ember support especially larger and long term projects with its focus on conventions, dedication to stability without stagnation and a great community.

Transcript

2. Marco Otte-Witte @marcoow
3. http://simplabs.com @simplabs
5. http://emberjs.com/images/brand/ember_Ember-Light.png
6. …let's start with some context
8. https://facebook.github.io/react/ http://red-badger.com/blog/wp-content/uploads/2015/04/react-logo-1000-transparent.png
9. https://angularjs.org https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png
10. https://angular.io https://github.com/angular/angular.io/blob/master/public/resources/images/logos/angular2/angular.svg ? ? ? ? ?
11. https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png
12. …but isn't Ember dead?
13. Ember is alive and well, just doesn't receive as much hype as the other ones
14. So what is Ember.js?
15. Ember is a framework for ambitious web applications
16. …but isn't Ember huge? » ls -lh 514K ember-data.prod.js 1.6M ember.prod.js 1.1K react-dom.js 644K react.js
18. the base Framework with the core functionality http://emberjs.com/images/brand/ember_Ember-Light.png https://github.com/emberjs/ember.js
19. the command line interface http://emberjs.com/images/brand/ember_CLI-Light.png https://github.com/ember-cli/ember-cli
20. Angular CLI is built on Ember CLI https://github.com/angular/angular-cli "dependencies": {
 … "ember-cli": "2.5.0",
 …
21. the data persistence library http://emberjs.com/images/brand/ember_Data-Light.png https://github.com/emberjs/data
22. Liquid Fire for animations https://github.com/ember-animation/liquid-fire
23. Ember Inspector Developer Tools extension for Chrome and Firefox https://github.com/emberjs/ember-inspector
25. Ecosystem
26. http://www.ecma-international.org/ecma-262/6.0/
27. https://babeljs.io
28. https://babeljs.io http://handlebarsjs.com
29. http://jsonapi.org
30. JSON API is great for all APIs, not only in combination with Ember
31. “ “ “ “
32. Convention over Configuration
33. https://github.com/rails/weblog/blob/gh-pages/images/rails-logo.svg
34. CoC is based on the idea that all projects have lots of things in common that can all be solved once by the framework
35. CoC allows you to focus on features
36. …and features mean value
37. Conventions also prevent projects from piling up complexity
38. …as there's usually only one right way to do sth.
39. conventions also make switching between projects easy
40. Ember.js' Conventions
43. The Router describes the application's route hierarchy and maps URLs to Ember routes
45. Routes in Ember are nested and child routes render into their parent routes
47. Routes load models and render templates
49. Models represent persistent state
51. Templates map data to DOM
53. Components combine a template and associated code as a reusable UI element
56. application.hbs {{outlet}}
57. {{outlet}} albums.hbs
58. album.hbs {{star-rating}} {{song-tile}} {{play-icon}}
59. Ember CLI
60. Ember ClI implements a build system and defines a common project structure
61. » tree app/ app "## app.js "## components $ &## album-tile.js "## models $ &## album.js "## router.js "## routes $ &## albums.js &## templates "## application.hbs "## components $ &## album-tile.hbs &## albums.hbs
62. // app/models/album.js import Model from 'ember-data/model'; import attr from 'ember-data/attr'; import { belongsTo } from 'ember-data/relationships'; export default Model.extend({ title: attr('string'), artist: belongsTo() });
63. » ember build Built project successfully. Stored in "dist/".
64. » ember serve Livereload server on http://localhost:49152 Serving on http://localhost:4200/ Build successful - 2569ms. Slowest Trees | Total ----------------------------------------------+--------------------- Babel | 362ms Babel | 355ms SourceMapConcat: Concat: Vendor | 227ms SourceMapConcat: Concat: Addon JS | 141ms Slowest Trees (cumulative) | Total (avg) ----------------------------------------------+--------------------- Babel (13) | 1143ms (87 ms) SourceMapConcat: Concat: Vendor (1) | 227ms SourceMapConcat: Concat: Addon JS (1) | 141ms Funnel: Addon JS (7) | 129ms (18 ms)
65. » ember test Built project successfully. Stored in "/Users/marcoow/Documents/Code/ember-blog/tmp/class- tests_dist-7Ro1V3FR.tmp". ok 1 PhantomJS 1.9 - Acceptance | list posts: visiting / renders all posts … ok 67 PhantomJS 1.9 - Unit | Model | post: belongs to an author ok 68 PhantomJS 1.9 - JSHint - unit/models/post-test.js: should pass jshint 1..68 # tests 68 # pass 68 # skip 0 # fail 0
66. Evolution
67. Ember goes to great lengths to make sure the community moves forward, not leaving a single project behind
68. RFCs Canary Beta Stable LTS
69. RFCs are were new features and changes are discussed in the open before implementation begins
71. the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs
72. Canary builds are where new features land first (behind feature flags)
73. // config/environment.js var ENV = { EmberENV: { FEATURES: { 'ember-routing-routable-components': true } } };
74. Beta releases have new features that proved stable in Canary enabled by default
75. Stable releases contain everything that proved to be stable in the Beta phase
76. There are new beta and stable releases every 6 weeks
77. the release process is inspired by the Chromium Project's Release Channels https://www.chromium.org/getting-involved/dev-channel
78. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html
79. Semantic Versioning gives software versions their meaning back (if used correctly)
80. Major.Minor.Patch
81. Ember's 6 week stable releases are minor releases and thus backwards compatible
82. …might introduce new deprecations though
84. Major Releases do not introduce any new functionality but remove previously deprecated cruft only
85. Upgrading from one major release to the next is as easy as clearing all deprecations and switching the release number
86. The whole community is moving forwards constantly in incremental steps that are easy for everyone to make
87. "Stability without Stagnation"
88. Long Term Support releases are less frequently updated stable releases
89. every fourth stable release is an LTS release
90. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html
91. Enabling Code Reuse across the community
92. Addons can extend the build process, add commands, merge code into the app, etc.
93. » ember install ember-cli-sass Installing packages for tooling via npm. Binary downloaded and installed at /Users/marcoow/ Documents/Code/ember-workshop/tomster-player/ node_modules/ember-cli-sass/node_modules/broccoli-sass- source-maps/node_modules/node-sass/vendor/darwin-x64-14/ binding.node "/Users/marcoow/Documents/Code/ember-workshop/tomster- player/node_modules/ember-cli-sass/node_modules/ broccoli-sass-source-maps/node_modules/node-sass/vendor/ darwin-x64-14/binding.node" exists. testing binary. Binary is fine; exiting. Installed packages for tooling via npm. Installed addon package.
94. » ember install ember-cli-deploy Installed packages for tooling via npm. installing ember-cli-deploy create config/deploy.js Installed addon package. » ember help deploy Requested ember-cli commands: ember deploy <deployTarget> <options...> Deploys an ember-cli app --deploy-config-file (String) (Default: config/deploy.js) --verbose (Boolean) (Default: false) --activate (Boolean) (Default: false) --show-progress (Boolean) (Default: true) aliases: -p, -progress --log-info-color (String) (Default: "blue") --log-error-color (String) (Default: "red")
95. » ember install ember-simple-auth Installed packages for tooling via npm. Installed addon package.
96. This is only possible with Ember CLI that provides a standard build system and a common project structure
97. …and everybody in the community is using it
99. Big advancements
100. Ember's conventions, unified build system, common project structure and the release process allow Ember to make big advancements and take the whole community with it
101. Ember's new, super fast rendering engine 2
102. Ember's rendering performance used to be not too great actually
104. Glimmer 2 is coming with one of the next minor releases, thus is going to be fully backwards compatible
105. Server side rendering for Ember apps https://github.com/ember-fastboot/fastboot-website/blob/master/public/images/logo.svg
106. FastBoot boots Ember apps on the server and rehydrates them in the browser for super fast startup
107. …which solves the problems of slow(ish) initial load while preserving all the benefits that you get with using sth. like Ember
108. FastBoot will be available as an Addon and will not require anyone to rewrite their apps
109. » ember install ember-cli-fastboot Installed packages for tooling via npm. Installed addon package. » ember fastboot Built project successfully. Stored in "fastboot-dist". Installing FastBoot npm dependencies Ember FastBoot running at http://[::]:3000
110. » curl -i localhost:3000 HTTP/1.1 200 OK X-Powered-By: Express Content-Type: text/html; charset=utf-8 Content-Length: 694 ETag: W/"2b6-8EjmJvo+xk/TQB5ieKgfwg" Date: Thu, 05 May 2016 19:35:42 GMT Connection: keep-alive <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Fastboot</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/" /> <link rel="stylesheet" href="assets/vendor.css"> <link rel="stylesheet" href="assets/fastboot.css"> </head> <body> <div id="ember490" class="ember-view"><h2 id="title">Welcome to Ember</h2></div> <script src="assets/vendor.js"></script> <script src="assets/fastboot.js"></script> </body> </html>
111. There's a bright future ahead for Ember
114. Ember does not depend on the goodwill of a single company but is backed by a great community and core team members with all kinds of backgrounds
116. https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png
117. Thanks
118. http://simplabs.com @simplabs