ember: guts & goals

26
Ember.js Guts & Goals

Upload: bob-lail

Post on 09-Apr-2017

249 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Ember: Guts & Goals

Ember.jsGuts & Goals

Page 2: Ember: Guts & Goals

Ember.js

Guts

Page 3: Ember: Guts & Goals
Page 4: Ember: Guts & Goals

ember new sample-application

ember generate route whatever

ember serve

ember test

ember build

ember install ember-cli-mirage

Page 5: Ember: Guts & Goals

ember install ember-cli-mirage

Page 6: Ember: Guts & Goals

ember serve

Page 7: Ember: Guts & Goals

ember test

Page 8: Ember: Guts & Goals

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]);

Page 9: Ember: Guts & Goals

What's inside of Ember.js?require.jsjQueryrsvp.jsroute-recognizerHandlebars *Ember Data *

Page 10: Ember: Guts & Goals

Ember Data

Page 11: Ember: Guts & 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

Page 12: Ember: Guts & Goals

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

Page 13: Ember: Guts & Goals
Page 14: Ember: Guts & Goals

Handlebars

Page 15: Ember: Guts & Goals

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

Page 16: Ember: Guts & Goals

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

Page 17: Ember: Guts & Goals

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

Page 18: Ember: Guts & Goals

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>

Page 19: Ember: Guts & Goals

Handlebars

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

HTMLbars

<a href={{url}}></a>

Page 20: Ember: Guts & Goals

GlimmerEmber with Glimmer

Page 21: Ember: Guts & Goals

Ember.js

Goals

Page 22: Ember: Guts & 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

Page 23: Ember: Guts & Goals

Builds

Canary Beta Release LTS

Page 24: Ember: Guts & Goals

2.0

Page 25: Ember: Guts & Goals

2.xRoutable Components <component> vs. {{component}}asdfadsfasdfasdfsEnginesFastBootGlimmer 2More ES6 syntax (Decorators)Universal Event Dispatch

Page 26: Ember: Guts & Goals

The End