![Page 1: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/1.jpg)
Ember.js: Productivity without the fatigue
Jacek Galanciak
![Page 2: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/2.jpg)
![Page 3: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/3.jpg)
![Page 4: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/4.jpg)
This tech talk
• Not a tutorial
• Overview of Ember.js framework
• Overview of the ecosystem and processes
![Page 5: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/5.jpg)
Ember.js encapsulates:
• Framework (“full-frontal framework”)
• Tooling
• Conventions
![Page 6: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/6.jpg)
Installing Ember.js
$ npm install -g ember-cli
![Page 7: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/7.jpg)
Creating a new project
![Page 8: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/8.jpg)
![Page 9: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/9.jpg)
Creating a new project
$ ember new people-app
![Page 10: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/10.jpg)
![Page 11: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/11.jpg)
!"" README.md!"" app# !"" app.js# !"" components# !"" controllers# !"" helpers# !"" index.html# !"" models# !"" resolver.js# !"" router.js# !"" routes# !"" styles# # %"" app.css# %"" templates# %"" components!"" bower.json!"" config# %"" environment.js!"" ember-cli-build.js!"" package.json!"" public# !"" crossdomain.xml# %"" robots.txt!"" testem.js!"" tests# !"" helpers# # !"" destroy-app.js# # !"" module-for-acceptance.js# # !"" resolver.js# # %"" start-app.js# !"" index.html# !"" integration# !"" test-helper.js# %"" unit%"" vendor
16 directories, 19 files
![Page 12: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/12.jpg)
Sass? Bootstrap?
$ ember install ember-cli-sass$ ember install ember-cli-bootstrap-sassy
![Page 13: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/13.jpg)
Hello world$ ember g template applicationinstalling template create app/templates/application.hbs
<div> <label>Name:</label> {{input type="text" value=name placeholder="Enter your name"}} </div> <div class="text"> <h3>My name is {{name}} and I really like Ember!</h3> </div>
![Page 14: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/14.jpg)
Hello world
$ ember serve
Just getting started with Ember? Please visit http://localhost:4200/ember-getting-started to get going
Livereload server on http://localhost:49152Serving on http://localhost:4200/
![Page 15: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/15.jpg)
![Page 16: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/16.jpg)
![Page 17: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/17.jpg)
Ember CLI• generates projects and files
• upgrades your project
• installs addons
• builds your app
• much more
![Page 18: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/18.jpg)
Building your app
$ ember build$ ember build --environment=production
Handled by Broccoli.js: a fully-featured asset pipeline, “React for your filesystem”
![Page 19: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/19.jpg)
<form {{action "createPost" on="submit"}}> <input type="submit"> </form>
<button {{action "buttonClicked"}}>Button</button>
import Ember from 'ember';
export default Ember.Route.extend({ actions: { buttonClicked(n) { alert('Oh yeah!'); }, createPost() { alert("Done!"); } } });
![Page 20: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/20.jpg)
![Page 21: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/21.jpg)
![Page 22: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/22.jpg)
![Page 23: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/23.jpg)
![Page 24: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/24.jpg)
App.Router.map(function() { this.route('mailbox', { path: '/:mailbox_id' }, function() { this.route('mail', { path: '/:message_id', resetNamespace: true }); }); });
<table> <tr> <th>Date</th> <th>Subject</th> <th>From</th> <th>To</th> </tr>
{{#each model.messages as |message|}} {{#link-to "mail" message tagName="tr"}} <td>{{date message.date}}</td> <td>{{message.subject}}</td> <td>{{message.from}}</td> <td>{{message.to}}</td> {{/link-to}} {{/each}} </table>
{{outlet}}
Visit emberjs.com for full example
![Page 25: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/25.jpg)
Ember Data• Data persistence library for Ember
• Mechanism-agnostic (works with JSON APIs, websockets, IndexedDB)
• Follows jsonapi.org by default
• Customizable via adapters (eg. ActiveModelSerializer)
// app/models/post.js export default DS.Model.extend({ title: DS.attr("string"), body: DS.attr("string"),
comments: DS.hasMany("comment") });
store.find("post", 1); // find by ID store.createRecord("post", { title: "So easy", });
![Page 26: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/26.jpg)
Animations$ ember install liquid-fire
export default function(){ this.transition( this.fromRoute('index'), this.toRoute('posts'), this.use('toLeft'), this.reverse('toRight') ); this.transition( this.fromRoute('posts.index'), this.toRoute('posts.new'), this.use('crossFade'), this.reverse('crossFade') ); };
![Page 27: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/27.jpg)
Server-side rendering story• ember-fastboot.com
• Fast, reliable, no more fragile PhantomJS setups
• Good for SEO
• Good for slow mobile devices
• Under the hood: Node.JS app running your Ember app on the server
• Usually no change in code is required
![Page 28: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/28.jpg)
![Page 29: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/29.jpg)
![Page 30: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/30.jpg)
Ember Inspector
http://brewhouse.io/blog/2015/05/13/emberjs-an-antidote-to-your-hype-fatigue.html
![Page 31: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/31.jpg)
![Page 32: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/32.jpg)
Release cycle, upgrades• A guaranteed minor version release every 6 weeks
(like Chrome, Rust)
• Every fourth release is an LTS release
• Easy to follow beta channel
• Easy upgrade path, helpful deprecation warnings, features are not removed before being deprecated for a few releases
![Page 33: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/33.jpg)
Who uses Ember?
http://brewhouse.io/blog/2015/05/13/emberjs-an-antidote-to-your-hype-fatigue.html
![Page 34: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/34.jpg)
My subjective review
• Productivity: ⭐⭐⭐⭐⭐
• Joy: ⭐⭐⭐⭐
• Learning: ⭐⭐⭐
• Future: ⭐⭐⭐⭐⭐
(assuming you want to develop a rich single-page application)
![Page 35: Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Galanciak](https://reader036.vdocuments.net/reader036/viewer/2022062522/58746dd31a28abab198b8c33/html5/thumbnails/35.jpg)
Thank you!