Ember: Guts & Goals

ember new sample-application
ember generate route whatever
ember serve
ember test
ember build
ember install ember-cli-mirage

ember install ember-cli-mirage

ember build
my-project/
├── app/
│ ├── coffee/
│ │ └── app.coffee
│ └── scss/
│ ├── _vars.scss
│ └── app.scss
├── dist/
│ ├── app.css
│ └── app.js
└── Brocfile.js
/* Brocfile.js */
// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var compileCoffee = require('broccoli-coffee');
var mergeTrees = require('broccoli-merge-trees');
// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';
var coffeeDir = 'app/coffeescript';
// Tell Broccoli how we want the assets
// to be compiled
var styles = compileSass([sassDir],
'app.scss', 'app.css');
var scripts = compileCoffee(coffeeDir);
// Merge the compiled styles and scripts
// into one output directory.
module.exports = mergeTrees([styles, scripts]);

What's inside of Ember.js?
require.js
jQuery
rsvp.js
route-recognizer
Handlebars *
Ember Data *

Releases
Ember.js Ember Data
1.0.0
1.1.0
1.2.0
Jan 1, 2014 1.3.0
1.4.0
1.5.0
1.6.0
1.7.0
1.8.0
1.9.0
Jan 1, 2015
1.10.0
1.11.0
1.12.0
1.13.0
2.0.0
2.1.0
2.2.0
Jan 1, 2016
2.3.0
2.4.0
2.5.0
1.0.0-beta.11.0.0-beta.2
1.0.0-beta.3
1.0.0-beta.4 Jan 1, 20141.0.0-beta.51.0.0-beta.6
1.0.0-beta.7
1.0.0-beta.8
1.0.0-beta.9
1.0.0-beta.10
1.0.0-beta.11
1.0.0-beta.12
1.0.0-beta.14 Jan 1, 2015
1.0.0-beta.15
1.0.0-beta.16
1.0.0-beta.171.0.0-beta.18
1.0.0-beta.191.13.0
2.0.0
2.1.0
2.2.0
Jan 1, 20162.3.0
2.4.0
2.5.0

// app/models/blog-post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
createdAt: DS.attr('date'),
comments: DS.hasMany('comment')
});
// app/models/comment.js
import DS from 'ember-data';
export default DS.Model.extend({
body: DS.attr('string'),
username: DS.attr('string'),
post: DS.belongsTo('blog-post')
});

Releases
Ember.js
1.0.0
1.1.0
1.2.0
Jan 1, 2014 1.3.0
1.4.0
1.5.0
1.6.0
1.7.0
1.8.0
1.9.0
Jan 1, 2015
1.10.0
1.11.0
1.12.0
1.13.0
2.0.0
2.1.0
2.2.0
Jan 1, 2016
2.3.0
2.4.0
2.5.0
Handlebars
HTMLBars
Glimmer

Handlebars
<ul>
{{#each items as |item|}}
{{#if item.completed}}
<li><del>{{item.title}}</del></li>
{{else}}
<li>{{item.title}}</li>
{{/if}}
{{/each}}
</ul>
function(items) {
var html = '<ul>';
for(var i = 0; i < items.length; i++) {
var item = items[i];
html += '<li>';
if(item.completed) {
html += '<del>' + item.title + '</del>';
} else {
html += item.title;
}
html += '</li>';
}
return html + '</ul>';
}

HTMLbars
<ul>
{{#each items as |item|}}
{{#if item.completed}}
<li><del>{{item.title}}</del></li>
{{else}}
<li>{{item.title}}</li>
{{/if}}
{{/each}}
</ul>
function(items) {
var list = document.createElement('ul');
for(var i = 0; i < items.length; i++) {
var item = items[i];
var row = document.createElement('li');
var text = dcument.createTextNode(item.title);
if(item.completed) {
var del = document.createElement('del');
del.appendChild(text);
row.appendChild(del);
} else {
row.appendChild(text);
}
list.appendChild(row);
}
return list;
}

Handlebars
<script id="metamorph-173-start" type="text/x-placeholder"></script>
<li><del>
<script id="metamorph-174-start" type="text/x-placeholder"></script>
TDL item text
<script id="metamorph-174-end" type="text/x-placeholder"></script>
</del></li>
<script id="metamorph-173-end" type="text/x-placeholder"></script>
HTMLbars
<li><del>TDL item text</del></li>

Handlebars
<a {{bind-attr href=url}}></a>
HTMLbars
<a href={{url}}></a>

Builds
Canary Beta Release LTS

2.x
Routable Components
<component>vs. {{component}}
asdfadsfasdfasdfs
Engines
FastBoot
Glimmer 2
More ES6 syntax (Decorators)
Universal Event Dispatch

Ember: Guts & Goals

Related slideshows

More Related Content

Ember: Guts & Goals