Boosting Your Productivity, with Backbone & RactiveJS

Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis

Transcript

1. BOOSTING YOUR
   PRODUCTIVITY
   Backbone & RactiveJS
   Gabriel Zigolis
   

   View Slide

2. @zigolis
   Front-End Architect at Arezzo ecommerces
   

   View Slide

3. SCHEDULE
   • Getting to know Backbone
   • Be Ractive
   • Everybody together (but separated)
   • Yeah, today is code day, babe!
   

   View Slide

4. View Slide

5. backbonejs.org
   “Gives structure to web applications
   by providing models, collections
   and views to consume API over
   a RESTful JSON interface.”
   BACKBONEJS
   

   View Slide

6. USE
   WHY
   BACKBONE
   ?
   

   View Slide

7. BECAUSE
   APPS
   THE
   GREW
   UP
   

   View Slide

8. NEEDING
   Organization
   Architecture
   Modularization
   MORE
   

   View Slide

9. CHARACTERISTICS
   • Powerful Javascript LIB
   • Adaptable, inspired on MV* pattern
   • Modern, widely used in SPA
   • Completely skinny, bitch! Just 6.5kb.
   

   View Slide

10. WHO IS USING IT?
    

    View Slide

11. OK, LET’S SEE SOME
    C0D10101
    

    View Slide

12. Collection
    var ArticleCollection = Backbone.Collection.extend({
    url: '/articles',
    model: ArticleModel
    });
    return ArticleCollection;
    

    View Slide

13. Model
    var ArticleModel = Backbone.Model.extend({
    getTitle: function() {
    return this.get('title');
    }
    });
    return ArticleModel;
    

    View Slide

14. View
    var AppView = Backbone.View.extend({
    template: _.template( $('#tmp-article-list').html() ),
    el: '.main',
    initialize: function () {
    this.collection = new Collection();
    this.collection.fecth();
    this.listenTo(this.collection, 'sync', this.render);
    },
    render: function() {
    this.$('.list-group').html(this.template({
    'collection' : this.collection
    }));
    }
    });
    return AppView;
    

    View Slide

15. _.template
    
    
    <br/><% collection.each(function(model){ %><br/><li><br/><a href="#article/<%= model.id %>" class="list-group-item"><br/><%= model.getTitle() %><br/></a><br/></li><br/><% }); %><br/>
    
    
    

    View Slide

16. COOL
    Now we have this
    

    View Slide

17. WE WANT
    BUT
    MORE
    

    View Slide

18. YES WE CAN!
    • Interactivity
    • Two-way binding
    • Animations
    • SVG manipulation
    • {{Mustache}}
    

    View Slide

19. EVERYTHING
    KEEPING
    SIMPLE
    

    View Slide

20. ELEGANT
    AND
    PRODUCTIVE
    

    View Slide

21. I’m Ractive.js
    NICE TO MEET YOU
    

    View Slide

22. ractivejs.org
    “It's a JavaScript library for building
    reactive user interfaces in a way that
    doesn't force you into a particular
    framework's way of thinking.”
    RACTIVEJS
    

    View Slide

23. USE
    WHY
    RACTIVE?
    

    View Slide

24. BECAUSE
    WE WANT
    • Productivity
    • Friendly code
    • Data binding
    • Support to animations
    MORE
    

    View Slide

25. AND
    THE
    BESTOF
    

    View Slide

26. CHARACTERISTICS
    • A kind of magic Javascript LIB
    • Data-binding (a beautiful declarative syntax)
    • Flexible and performant animations and transitions
    • {{Mustache}} template system "yay"
    

    View Slide

27. WHO DID
    IT
    ?
    

    View Slide

28. WHO'S BEEN MAINTAINING IT?
    

    View Slide

29. OK, LET’S TRY
    SOMETHING
    ?
    

    View Slide

30. TWO WAY
    BINDING
    DATA
    

    View Slide

31. Ractive
    var ractive = new Ractive({
    el: '#output',
    template: '#tmp-name'
    });
    

    View Slide

32. {{ template }}
    
    Enter your name:
    
    
    Hello {{name}}, I am Ractive
    

    View Slide

33. AND
    THE
    MAGIC
    HAPPENS
    

    View Slide

34. PROXIES
    EVENTS
    

    View Slide

35. Ractive
    var ractive = new Ractive({
    el: '#output',
    template: '#tmp-proxy'
    });
    ractive.on('hello', function( event ) {
    alert('hello there!');
    });
    

    View Slide

36. {{ template }}
    Hello!
    

    View Slide

37. AND IT
    RETURNS
    THIS
    

    View Slide

38. WITH A
    LITTLE
    BIT
    MORE
    C0D10101
    WE CAN DO AMAZING THINGS!
    

    View Slide

39. LIST
    TODO
    

    View Slide

40. YES,
    IT’S SO
    NICE
    

    View Slide

41. COOL, NOW LET’S MIX
    BACKBONE
    RACTIVE
    &
    

    View Slide

42. RACTIVE
    A MVC LIB
    IS NOT
    WE NEED TO ADD AN ADAPTOR
    https://github.com/ractivejs/ractive-adaptors-backbone
    

    View Slide

43. We must render the view
    ractive = new Ractive({
    el: '#output',
    template: '#tmp-thumbs',
    adaptors: [ 'Backbone' ]
    });
    and set the adaptor
    

    View Slide

44. Now we can write the
    collection
    Thumbs = Backbone.Collection.extend({
    model: Thumb
    });
    

    View Slide

45. And the model
    Thumbs = Backbone.Model.extend({
    getThumb: function() {
    return this.get('thumb');
    }
    });
    

    View Slide

46. Also, we can call http request
    xhr = new XMLHttpRequest();
    xhr.open( 'get', '/thumbs' );
    xhr.send();
    

    View Slide

47. And finally, to show
    on the view
    
    {{#thumbs}}
    
    
    
    {{/thumbs}}
    
    

    View Slide

48. WOW
    LOOK AT
    THIS
    

    View Slide

49. THAT'S
    ALL, FOLKS
    THANKS
    A LOT
    GITHUB
    SLIDESHARE
    SPEAKERDECK
    Front-End Architect at Arezzo ecommerces
    @zigolis
    /zigolis
    

    View Slide