Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Yoin to Ember.js

Yoin to Ember.js

Evolution of the Web / Ember.js Introduction / Yoin Company Presentation

639ea77b2ed92f49e4704caf0af44252?s=128

Pablo Martín

November 15, 2012
Tweet

More Decks by Pablo Martín

Other Decks in Programming

Transcript

  1. to

  2. PABLO MARTIN MUÑOZ ¿Who am I? Open Source Architect &

    Data Scientist @edipotrebol
  3. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ www.flickr.com: adactio The new multiscreen world
  4. The future: ubiquitous computing Yoi n to E m b

    e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ
  5. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ THE PROBLEM 3
  6. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ THE SOLUTION 4 MULTIMEDIA PERFORMANCE & INTEGRATION 3D GRAPHICS, EFFECTS CSS3 STYLING OFFLINE & STORAGE DEVICE ACCES HTML SEMANTICS CONECTIVITY
  7. “We can do 95% of what we want to do

    with HTML5” 5 Yoi n to E m b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ Thom Cummings (VP Marketing at SoundCloud) February 2012
  8. THE EVOLUTION OF APLICATIONS 6 Yoi n to E m

    b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ Desktop applications Web apps Web applications Apps 2000`s 2010`s
  9. THE EVOLUTION OF THE WEB 7 Yoi n to E

    m b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ - Security - Storage - User interface - Business logic - Storage
  10. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ “This is the best time ever to be a software developer” 8 Steve Ballmer (Microsoft CEO) September 2011
  11. EMBER.JS 9 Yoi n to E m b e r

    1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ Javascript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. emberjs.com
  12. Classes for OO programming 10 Yoi n to E m

    b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ Person = Ember.Object.extend({ firstName: null, lastName: null });
  13. Mixins for aspect programming 11 Speaker = Ember.Mixin.create({ hello: function()

    { var first = this.get(‘firstName’), last = this.get(‘lastName’); alert(first + ‘ ‘ + last + ‘: HELLO!’); } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }).hello(); Yoi n to E m b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ
  14. Computed properties 12 Person = Ember.Object.extend({ fullName: function(){ var firstName

    = this.get(‘firstName’), lastName = this.get(‘lastName’); return firstName + ‘ ‘ + lastName; }.property(‘firstName’, ‘lastName’); }); var tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); alert(tom.get(‘fullName’)); Yoi n to E m b e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ
  15. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ ARCHITECTURE 13 Router (Domain) (States) Models Controllers Views (Application data) (User interface)
  16. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ MODELS (EMBER DATA) 14 • Domain Schema • Client Side ORM for REST API • Relations definition (hasMany, hasOne, belongsTo) • Queries (find, findQuery, findAll) • Create, Update, Delete • Backend independent
  17. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ VIEWS 15 • Manage data visualization and user events • Sends events to router • View hierarchy • Handlebars as a template engine
  18. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ CONTROLLERS 16 • Between Models and Views (and Router) • Very little logic • Application data
  19. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ ROUTER (STATES) 17 • Responds to events from view • Transitions to new events • Saves application data into controllers
  20. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ EMBERJS USES JQUERY AS A DEPENDENCY FOR 18 • DOM manipulation • Event delegation • AJAX request
  21. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ EMBER.JS... 19 • Manages complexity • MIT-license • More productive • 100% Open SOurce • Built by the comunity (https://github. com/emberjs)
  22. WHO USES EMBER.JS? 20 Yoi n to E m b

    e r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ
  23. WHAT´S YOIN? 21 Yoi n to E m b e

    r 1 5 . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ The invitation experience yoinup.com
  24. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ WE USE EMBER.JS AND MORE 22
  25. Yoi n to E m b e r 1 5

    . 1 1 . 2 0 1 2 PA B LO M A RT I N M U Ñ OZ We are hiring!
  26. Thanks! Design: @alelopbes