The road to Ember.js 2.0

The road to EmberJs 2.0Lucio Grenzi

ROME 18-19 MARCH 2016

The road to EmberJs 2.0

Who is this guy

FreelanceFront end web developerOver 10 years of

programming experienceOpen source addictedGithub.com/dogwolf


“A framework for creating ambitous web application”- Emberjs homepage -

Latest version: v 2.4Date of birth: 2011Origin: SproutCore forkMIT LicenseMantained by the Ember.Js CommunityDepends on handlebar.js and jQueryMore than 15000 GitHub stars


What is Ember.js?

A Javascript framework Based on MVC pattern Client side Single Page App Declarative Two ways data binding*


AngularJs vs EmberJsAngularJS is a toolset for building the framework most suited to your application development- AngularJs homepage-

A framework for creating ambitous web application”

- Emberjs homepage -


Philosophy on AngularJsWeb application development needs first class support for data binding, dependency injection and testabilityUse this primitives to build your own high level abstractions specific to your particular application's needs


Quality of a framework

1. It should be clear where code belongs and where to find it

2. You should have to write and mantain the least code amount of code necessary

3. Change in one area of your app should not affect others areas


EmberJs Philosophy

Stability without stagnation Big bang releases App rewrites (every new release) Long-lived (custom) branches


EmberJs release cycleSix weeks release cycleAdd new featuresDeprecates nasty parts of the code

Ember 2.0 only removes features that were deprecated as of Ember 1.13


What’s new in EmberJs 2.0• Ember CLI• Shift to Components• Glimmer, the new rendering engine• ES6 modules at the core• One-way values by default• Simplification of many Ember concepts:

– New attribute binding syntax– HTML syntax (angle brackets) for

Components– More consistent scoping– much more…


Ember-cli


Ember-cli support Handlebars HTMLBars Emblem LESS Sass Compass Stylus CoffeeScript EmberScript Minified JS & CSS


Ember-cli (cont.)Require Node.js and npmRequire Bower in order to keep your front-end

dependencies up-to-date $npm install -g bower Reccomended PhantomJs in order to use the

automated test runner $npm install -g phantomjs-prebuilt


Create a new project$ember new my-app Launch a project $cd my-app$ember server Navigate to http://localhost:4200 to see the new

app


Other usefull commands$ember build Builds the application into the dist/ directory $ember testRun tests with Testem in CI mode. $ember install <addon-name>Installs addon-name into your project and saves it

to the package.json file


Ember-cli addon systemProvides a way to create reusable units of code Extend the build tool Found all the addons at emberaddons.com


Emberaddons


Handlebars 2.xA superset of the Mustache template engine First added to EmberJ 1.9 The focus is keeping the logic out of the template


<body><script type="text/x-handlebars" id="ember-template" data-

template-name="index"> </b>My videos</b><ul>{{#each video in videos}} <li>{{#link-to 'videos.edit' video}}{{video.title}}{{/link-

to}}</li>{{/each}}</ul></script></body>


var source = $("#ember-template").html();var template = Handlebars.compile(source);

App.Router.map(function() { this.resource("videos", function(){ this.route("edit", { path: "/:video_id" }); });});

Result:

<ul> <li><a href="/videos/1">My first video</a></li> <li><a href="/videos/2">My second video</a></li> <li><a href="/videos/3">My third video</a></li></ul>


GlimmerThe render engine, since version 1.13

Takes advantage of the groundwork laid by HTMLBars to dramatically improve re-rendering performance.

Compatible with the full public API of Ember 1.x


Glimmer (cont.)

Takes advantage of the React-inspired improvements to the Ember programming model

Value-diffing strategy by using a virtual tree of

the dynamic areas of the DOM Supporting efficient re-renders of entire data

structures. Explicit mutation (via set) when it is used


One-Way BindingsOn Ember 1.x component properties used to be bound two ways.

Property of a component as well as its data source are both mutable.

{{#my-component compName=model.name }}{{/my-component}}

<my-component compName=model.name ></my-component>


Explicitly a two-way bindingThere is a new mut keyword to explicit the old

behaviour <my-component compName={{mut

model.name}} ></my-component>


Manage a mutable component

Set the value of the property

this.attrs.compName.update("newcompName");

Show the actual value of the property

this.attrs.firstName.value;


Ember-dataLibrary for robustly managing model data in your Ember.js applications

Is designed to be agnostic to the underlying persistence mechanism

Uses Promises/A+-compatible promises to manage loading and saving records


Getting started with Ember-dataVersion >= 2.3 ember-data is a proper Ember-CLI

$ember install ember-data Version < 2.3, add the npm package and add the

dependency via bower:npm install [email protected] --save-devbower install ember-data --save


Ember-data flowApplication

Store

Adapter

Cloud

Promise (with records)

Promise (json)

find()

find()

XHR() XHR() returns


The Store

The store is responsible for managing the lifecycle of your models.

By loading the Ember Data library in your app, all of the routes and controllers in will get a new store property


The Adapter

The adapter is responsible for translating requests from Ember-data into requests on your server.


How it woks// app/models/news.jsimport DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), createdBy: DS.attr('string'), createdAt: DS.attr('date'), comments: DS.hasMany('comment')}); // app/models/comment.jsimport DS from 'ember-data'; export default DS.Model.extend({ message: DS.attr('string'), sentAt: DS.attr('date'), nickname: DS.attr('string'), post: DS.belongsTo('news')});

Retrieve multiple recordsvar newses = this.store.findAll('news'); // => GET /postsvar newses = this.store.peekAll('news'); // => no network

request Query for multiple recordsthis.store.query('news', { filter:

{ createdBy:'Lucio' } }).then(function(param_1) {});


More intuitive attribute bindings

Ember 1.x (deprecated)

<a {{bind-attr href=url}}>Click here</a>

Ember 2.x

<a href="{{url}}">Click here</a>


ComponentsBased on of the W3C Web Components specification

The specification is comprised of four smaller specifications; templates, decorators, shadow DOM, and custom elements.


Ember Components vs. Ember Views EmberJs is a MVC .. V doesn't stand for view? Components are a subclass of Ember.View Views are generally found in the context of a

controller. Views sit behind a template and turn input into a

semantic action in a controller or route.


Ember Components vs. Ember Views EmberJs component do not have a context, they

only know about the interface that they define Components can be rendered into any context,

making it decoupled and reusable. In order to render properly a component you must

supply it with data that it's expecting


Anatomy of an Ember Components

An Ember component consists of a Handlebars template file and an accompanying Ember class (if needed extra interactivity with the component).


Generate an Ember Component $ ember generate component multitabs

This will create three new files a Handlebars file for our HTML app/templates/components/multitabs.hbs a JavaScript file for our component class

app/components/multitabs.js a test file tests/integration/components/multitabs-test.js


Using the Component

Open the application templateapp/templates/application.hbs Add in the following after the h3 tag to use the

component.

{{multitabs}}


Add dynamic data

$ ember generate route application

This will generate app/routes/application.js. Open this up and add a model property:

export default Ember.Route.extend({ model: function(){ });});


Add Polymer to Ember project

$ ember new PolymerProject$ bower install polymer --save

The road to EmberJs 2.0// Brocfile.js ...var EmberApp = require('ember-cli/lib/broccoli/ember-app');...var app = new EmberApp();...var polymer = pickFiles('bower_components/', { srcDir: '', files: [ 'webcomponentsjs/webcomponents.js', 'polymer/polymer.html'// 'polymer/polymer.js' ], destDir: '/assets'}); module.exports = mergeTrees([ polymer, app.toTree()]);

// Index.html...<script src="assets/webcomponentsjs/webcomponents.js"></script>...


Resources and Referenceshttps://github.com/emberjs/datahttps://github.com/emberjs/rfcs/pull/15http://ember-cli.com/http://code.tutsplus.com/tutorials/ember-

components-a-deep-dive--net-35551http://www.sitepoint.com/understanding-

components-in-ember-2/


Questions?

https://www.flickr.com/photos/derek_b/3046770021/

Thanks!

ROME 18-19 MARCH 2016

[email protected]

All pictures belongto their respective authors

Software

The road to Ember.js 2.0