Ember.js: Productivity without the fatigue

Jacek Galanciak

This tech talk

• Not a tutorial

• Overview of Ember.js framework

• Overview of the ecosystem and processes

Ember.js encapsulates:

• Framework (“full-frontal framework”)

• Tooling

• Conventions

Installing Ember.js

$ npm install -g ember-cli

Creating a new project

Creating a new project

$ ember new people-app

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

Sass? Bootstrap?

$ ember install ember-cli-sass$ ember install ember-cli-bootstrap-sassy

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>

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/

Ember CLI• generates projects and files

• upgrades your project

• installs addons

• builds your app

• much more

Building your app

$ ember build$ ember build --environment=production

Handled by Broccoli.js: a fully-featured asset pipeline, “React for your filesystem”

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

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

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

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

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

Ember Inspector

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

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

Who uses Ember?

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

My subjective review

• Productivity: ⭐⭐⭐⭐⭐

• Joy: ⭐⭐⭐⭐

• Learning: ⭐⭐⭐

• Future: ⭐⭐⭐⭐⭐

(assuming you want to develop a rich single-page application)

Thank you!