Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (11)
Ähnlich wie Stackup New Languages Talk: Ember is for Everybody
Ähnlich wie Stackup New Languages Talk: Ember is for Everybody (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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