Stackup New Languages Talk: Ember is for Everybody
3 likes1,096 views
This document discusses Ember.js and its growing popularity and maturity as a front-end framework. It provides an overview of Ember's core capabilities like data binding, computed properties, routes, and testing support. It also introduces related tools like Ember CLI and Ember Inspector that improve the development experience. Code examples demonstrate key Ember features in action. The document argues that Ember is now ready for mainstream usage and provides a robust environment for building large single-page applications.
![CSS in 2014
is growing up
transforms
border-radius
web fonts
CSS performance tooling
Sass/LESS
[attr$=val]
layout thrashing](https://image.slidesharecdn.com/stackup-ember-is-for-everybody-141015123617-conversion-gate01/85/Stackup-New-Languages-Talk-Ember-is-for-Everybody-7-320.jpg)
![Ember Demo
Computed Property Setters
fullName: function(key, value){!
if (arguments.length > 1) { // setter!
var fullName = value,!
names = fullName.split(' '),!
firstName = names[0],!
lastName = names[1];!
controller
!
this.setProperties({!
firstName: firstName,!
lastName: lastName!
});!
}!
!
if (this.get('firstName') && this.get('lastName')) {!
return this.get('firstName') + ' ' +!
this.get('lastName');!
}!
}.property('firstName', 'lastName')!](https://image.slidesharecdn.com/stackup-ember-is-for-everybody-141015123617-conversion-gate01/85/Stackup-New-Languages-Talk-Ember-is-for-Everybody-18-320.jpg)
![Ember Demo
Query Params
export default Ember.Controller.extend({!
queryParams: ['page', 'count'],!
!
// defaults!
page: 1,!
count: 10!
});!](https://image.slidesharecdn.com/stackup-ember-is-for-everybody-141015123617-conversion-gate01/85/Stackup-New-Languages-Talk-Ember-is-for-Everybody-20-320.jpg)
![Ember Demo
Tests
test('visiting /', function() {!
visit('/');!
!
andThen(function() {!
var h1 = find('h1:contains(Ember Is For Everybody)');equal(h1.length,!
1,!
'has title');!
!
equal(find('a[href="/data-binding"]').length,!
1,!
'has link to data-binding demo');!
!
equal(currentURL(), '/');!
});!
});!](https://image.slidesharecdn.com/stackup-ember-is-for-everybody-141015123617-conversion-gate01/85/Stackup-New-Languages-Talk-Ember-is-for-Everybody-21-320.jpg)
Stackup New Languages Talk: Ember is for Everybody
- 1. Ember is for Everybody Cory Forsyth @bantic
- 2. 201 Created Cory Forsyth Matthew Beale http://201-created.com/
- 3. Our Stack • Frontend: Ember.js, Sass • Editor: Vim • Remote collab:tmux / tmate / screenhero • Backend: Ruby, Node, Python • Github Issues & PRs • Test-Driven • Communication: Slack • Organization: Trello • Deployment: Divshot, Heroku, S3, Azure
- 4. Our Work • Single Page App Development • Training • Tune-Up / Rescue • 0-100% Development • Open Source Contributions
- 5. Front-End Development in 2014 is growing up
- 6. import/export JavaScript in 2014 is growing up ecmascript 6 generators Promises Broccoli TDD single-page apps classes JShint Systemjs
- 7. CSS in 2014 is growing up transforms border-radius web fonts CSS performance tooling Sass/LESS [attr$=val] layout thrashing
- 8. Browsers in 2014 are growing up transforms developer tools offline-first HTML5 APIs evergreen Content Security Policy mobile emulation
- 9. JavaScript is eating the world • Massive deployment base • “Fast” • Node • Node-webkit • Powerful Browser APIs
- 10. Evolution of Front-End JavaScript • onclick! • “Sprinkles” of JS! • “frameworks” (Prototype, MooTools, jQuery)! • build systems, asset pipelines (multi-file js)! • frameworks v2 (Backbone)! • high-level frameworks (Ember, Angular…)
- 11. JavaScript is Frontierland • Exciting new developments • ES6: First new JavaScript version in…? • Exciting new tools • Grunt, AMD, require.js, jspm, Broccoli, transpiler • Changing quickly • proliferation of libraries
- 12. Ember • Feels like • “Mature” Development • iOS App Development • Everything has a place • Holistic
- 13. The Ember Trifecta Ember + Ember Data Ember-CLI Ember Inspector
- 14. Ember-CLI • Command-line tool (like “rails”) • 1-step to a new app (ember new my-app) • Code generators (ember generate model User) • Built-in Test Harness • Rich, rapidly-growing plugin ecosystem
- 15. Ember Inspector • Chrome Extension • X-Ray Vision for • Ember Views • Ember Routes • Ember Data
- 16. Ember Demo Data Binding <p>! {{input value=name placeholder="Enter your name"}}! {{input type='checkbox' checked=showMany}}! </p>! ! {{#if name}}! <p>! Your name is: {{name}}! </p>! {{/if}}! template
- 17. Ember Demo Computed Properties <h2>Computed Properties</h2>! ! <p>! {{input value=firstName}}! {{input value=lastName}}! </p>! ! {{#if name}}! <p>! Your full name is: {{name}}! </p>! {{/if}}! import Ember from 'ember';! ! export default Ember.Controller.extend({! name: function(){! var first = this.get('firstName'),! last = this.get('lastName');! if (!first || !last) { return; }! ! return first + ' ' + last;! }.property('firstName','lastName')! });! template controller
- 18. Ember Demo Computed Property Setters fullName: function(key, value){! if (arguments.length > 1) { // setter! var fullName = value,! names = fullName.split(' '),! firstName = names[0],! lastName = names[1];! controller ! this.setProperties({! firstName: firstName,! lastName: lastName! });! }! ! if (this.get('firstName') && this.get('lastName')) {! return this.get('firstName') + ' ' +! this.get('lastName');! }! }.property('firstName', 'lastName')!
- 19. Ember Demo Routes • Manage Asynchrony • Sub states: Loading, error • Promises
- 20. Ember Demo Query Params export default Ember.Controller.extend({! queryParams: ['page', 'count'],! ! // defaults! page: 1,! count: 10! });!
- 21. Ember Demo Tests test('visiting /', function() {! visit('/');! ! andThen(function() {! var h1 = find('h1:contains(Ember Is For Everybody)');equal(h1.length,! 1,! 'has title');! ! equal(find('a[href="/data-binding"]').length,! 1,! 'has link to data-binding demo');! ! equal(currentURL(), '/');! });! });!
- 22. Ember Is For Everybody
- 23. The Front-End Story • Ember is Mainstream-ready • Ember + Ember-CLI = 1st Class Dev Environment • How do apps grow with us? What does a long-lived SPA look like?
- 24. Other Ember Niceties • ember addons • ember data • ember components
- 25. Thank you Cory Forsyth @bantic Photo credits ! ! ! Wild West Dragon-orb! ! Evolution Wikimedia! ! Everybody Wikipedia!
- 26. Links Cory Forsyth @bantic Photo credits ! ! ! Wild West Dragon-orb! ! Evolution Wikimedia! ! Everybody Wikipedia! Slides: http://bit.ly/ember-everybody Example app: https://github.com/bantic/ember-is-for- everybody http://emberjs.com http://201-created.com/codethroughs http://ember-cli.com