Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

101514201 created stackup ember

60 views

Published on

  • Be the first to comment

  • Be the first to like this

101514201 created stackup ember

  1. 1. Ember is for Everybody Cory Forsyth @bantic
  2. 2. 201 Created Matthew BealeCory Forsyth http://201-created.com/
  3. 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. 4. Our Work • Single Page App Development • Training • Tune-Up / Rescue • 0-100% Development • Open Source Contributions
  5. 5. Front-End Development in 2014 is growing up
  6. 6. JavaScript in 2014 is growing up ecmascript 6 generators Promises Broccoli TDD single-page apps classes import/export JShint Systemjs
  7. 7. CSS in 2014 is growing up transforms border-radius CSS performance tooling Sass/LESS [attr$=val] layout thrashing web fonts
  8. 8. Browsers in 2014 are growing up transforms developer tools offline-first HTML5 APIs evergreen Content Security Policy mobile emulation
  9. 9. JavaScript is eating the world • Massive deployment base • “Fast” • Node • Node-webkit • Powerful Browser APIs
  10. 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. 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. 12. Ember • Feels like • “Mature” Development • iOS App Development • Everything has a place • Holistic
  13. 13. The Ember Trifecta Ember + Ember Data Ember-CLI Ember Inspector
  14. 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. 15. Ember Inspector • Chrome Extension • X-Ray Vision for • Ember Views • Ember Routes • Ember Data
  16. 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. 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. 18. Ember Demo Computed Property Setters controller fullName: function(key, value){! if (arguments.length > 1) { // setter! var fullName = value,! names = fullName.split(' '),! firstName = names[0],! lastName = names[1];! ! this.setProperties({! firstName: firstName,! lastName: lastName! });! }! ! if (this.get('firstName') && this.get('lastName')) {! return this.get('firstName') + ' ' +! this.get('lastName');! }! }.property('firstName', 'lastName')!
  19. 19. Ember Demo Routes • Manage Asynchrony • Sub states: Loading, error • Promises
  20. 20. Ember Demo Query Params export default Ember.Controller.extend({! queryParams: ['page', 'count'],! ! // defaults! page: 1,! count: 10! });!
  21. 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. 22. Ember Is For Everybody
  23. 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. 24. Other Ember Niceties • ember addons • ember data • ember components
  25. 25. Thank you Cory Forsyth @bantic Photo credits ! ! ! Wild West Dragon-orb! ! Evolution Wikimedia! ! Everybody Wikipedia!
  26. 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

×