Ember: Guts & Goals
-
Upload
bob-lail -
Category
Technology
-
view
249 -
download
4
Transcript of Ember: Guts & Goals
Ember.jsGuts & Goals
Ember.js
Guts
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 serve
ember test
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.jsjQueryrsvp.jsroute-recognizerHandlebars *Ember Data *
Ember Data
ReleasesEmber.js Ember Data
1.0.0
1.1.01.2.0
Jan 1, 2014 1.3.01.4.01.5.0
1.6.01.7.0
1.8.01.9.0
Jan 1, 20151.10.0
1.11.01.12.01.13.0
2.0.02.1.02.2.0
Jan 1, 2016 2.3.02.4.02.5.0
1.0.0-beta.11.0.0-beta.21.0.0-beta.3
1.0.0-beta.4 Jan 1, 20141.0.0-beta.51.0.0-beta.61.0.0-beta.7
1.0.0-beta.8
1.0.0-beta.91.0.0-beta.101.0.0-beta.111.0.0-beta.121.0.0-beta.14 Jan 1, 20151.0.0-beta.151.0.0-beta.16
1.0.0-beta.171.0.0-beta.181.0.0-beta.191.13.0
2.0.02.1.02.2.0
Jan 1, 20162.3.0
2.4.02.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') });
Handlebars
ReleasesEmber.js
1.0.0
1.1.01.2.0
Jan 1, 2014 1.3.01.4.01.5.0
1.6.01.7.0
1.8.01.9.0
Jan 1, 20151.10.0
1.11.01.12.01.13.0
2.0.02.1.02.2.0
Jan 1, 2016 2.3.02.4.02.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>
GlimmerEmber with Glimmer
Ember.js
Goals
ReleasesEmber.js Ember Data
1.0.0
1.1.01.2.0
Jan 1, 2014 1.3.01.4.01.5.0
1.6.01.7.0
1.8.01.9.0
Jan 1, 20151.10.0
1.11.01.12.01.13.0
2.0.02.1.02.2.0
Jan 1, 2016 2.3.02.4.02.5.0
1.0.0-beta.11.0.0-beta.21.0.0-beta.3
1.0.0-beta.4 Jan 1, 20141.0.0-beta.51.0.0-beta.61.0.0-beta.7
1.0.0-beta.8
1.0.0-beta.91.0.0-beta.101.0.0-beta.111.0.0-beta.121.0.0-beta.14 Jan 1, 20151.0.0-beta.151.0.0-beta.16
1.0.0-beta.171.0.0-beta.181.0.0-beta.191.13.0
2.0.02.1.02.2.0
Jan 1, 20162.3.0
2.4.02.5.0
Builds
Canary Beta Release LTS
2.0
2.xRoutable Components <component> vs. {{component}}asdfadsfasdfasdfsEnginesFastBootGlimmer 2More ES6 syntax (Decorators)Universal Event Dispatch
The End