See how Jacek Galanciak talks about Ember.js: Productivity without the fatigue in Tech Talk episode 9 Visit pilot.co — World’s best engineering and design talent on demand.

1. Ember.js: Productivity
without the fatigue
Jacek Galanciak

4. This tech talk
• Not a tutorial
• Overview of Ember.js framework
• Overview of the ecosystem and processes

5. Ember.js encapsulates:
• Framework (“full-frontal framework”)
• Tooling
• Conventions

6. Installing Ember.js
$ npm install -g ember-cli

7. Creating a new project

9. Creating a new project
$ ember new people-app

11. !"" 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

12. Sass? Bootstrap?
$ ember install ember-cli-sass
$ ember install ember-cli-bootstrap-sassy

13. Hello world
$ ember g template application
installing 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>

14. 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:49152
Serving on http://localhost:4200/

17. Ember CLI
• generates projects and files
• upgrades your project
• installs addons
• builds your app
• much more

18. Building your app
$ ember build
$ ember build --environment=production
Handled by Broccoli.js: a fully-featured asset pipeline,
“React for your filesystem”

19. <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!");
}
}
});

24. 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

25. 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",
});

26. 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')
);
};

27. 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

30. Ember Inspector
http://brewhouse.io/blog/2015/05/13/emberjs-an-antidote-to-your-hype-fatigue.html

32. 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

33. Who uses Ember?
http://brewhouse.io/blog/2015/05/13/emberjs-an-antidote-to-your-hype-fatigue.html

34. My subjective review
• Productivity: ⭐⭐⭐⭐⭐
• Joy: ⭐⭐⭐⭐
• Learning: ⭐⭐⭐
• Future: ⭐⭐⭐⭐⭐
(assuming you want to develop a rich single-page application)

35. Thank you!