Yoin to Ember.js

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

Transcript

1. to
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    });
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

26. Thanks!
    Design: @alelopbes
    

    View Slide