Yoin to Ember.js

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

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