Ember: Guts & Goals
0 likes313 views
This document provides an overview of Ember.js, including its core components and goals. It describes the evolution of its templating languages from Handlebars to HTMLBars to Glimmer. It also outlines Ember's release schedule and goals for upcoming versions, focusing on new features like routable components, engines, and Glimmer 2.
![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]);](https://image.slidesharecdn.com/ember-presentation-160418005200/85/Ember-Guts-Goals-8-320.jpg)
![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>';
}](https://image.slidesharecdn.com/ember-presentation-160418005200/85/Ember-Guts-Goals-16-320.jpg)
![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;
}](https://image.slidesharecdn.com/ember-presentation-160418005200/85/Ember-Guts-Goals-17-320.jpg)
Ember: Guts & Goals
- 4. ember new sample-application ember generate route whatever ember serve ember test ember build ember install ember-cli-mirage
- 6. ember serve
- 7. ember test
- 8. 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]);
- 9. What's inside of Ember.js? require.js jQuery rsvp.js route-recognizer Handlebars * Ember Data *
- 10. Ember Data
- 11. 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
- 12. // 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') });
- 14. Handlebars
- 15. 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
- 16. 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>'; }
- 17. 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; }
- 18. 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>
- 19. Handlebars <a {{bind-attr href=url}}></a> HTMLbars <a href={{url}}></a>
- 21. Ember.js Goals
- 22. 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
- 23. Builds Canary Beta Release LTS
- 24. 2.0
- 25. 2.x Routable Components <component>vs. {{component}} asdfadsfasdfasdfs Engines FastBoot Glimmer 2 More ES6 syntax (Decorators) Universal Event Dispatch
- 26. The End