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

Boosting Your Productivity, with Backbone & RactiveJS

Boosting Your Productivity, with Backbone & RactiveJS

Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis

43d65af5d3659abff531fa679260e381?s=128

Gabriel Zigolis

November 22, 2014
Tweet

Transcript

  1. BOOSTING YOUR PRODUCTIVITY Backbone & RactiveJS Gabriel Zigolis

  2. @zigolis Front-End Architect at Arezzo ecommerces

  3. SCHEDULE • Getting to know Backbone • Be Ractive •

    Everybody together (but separated) • Yeah, today is code day, babe!
  4. None
  5. backbonejs.org “Gives structure to web applications by providing models, collections

    and views to consume API over a RESTful JSON interface.” BACKBONEJS
  6. USE WHY BACKBONE ?

  7. BECAUSE APPS THE GREW UP

  8. NEEDING Organization Architecture Modularization MORE

  9. CHARACTERISTICS • Powerful Javascript LIB • Adaptable, inspired on MV*

    pattern • Modern, widely used in SPA • Completely skinny, bitch! Just 6.5kb.
  10. WHO IS USING IT?

  11. OK, LET’S SEE SOME C0D10101

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

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

    } }); return ArticleModel;
  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;
  15. _.template <div class="main"> <ul class="list-group"> <script type="text/html" id="tmp-article-list"> <% collection.each(function(model){

    %> <li> <a href="#article/<%= model.id %>" class="list-group-item"> <%= model.getTitle() %> </a> </li> <% }); %> </script> </ul> </div>
  16. COOL Now we have this

  17. WE WANT BUT MORE

  18. YES WE CAN! • Interactivity • Two-way binding • Animations

    • SVG manipulation • {{Mustache}}
  19. EVERYTHING KEEPING SIMPLE

  20. ELEGANT AND PRODUCTIVE

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

  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
  23. USE WHY RACTIVE?

  24. BECAUSE WE WANT • Productivity • Friendly code • Data

    binding • Support to animations MORE
  25. AND THE BESTOF

  26. CHARACTERISTICS • A kind of magic Javascript LIB • Data-binding

    (a beautiful declarative syntax) • Flexible and performant animations and transitions • {{Mustache}} template system "yay"
  27. WHO DID IT ?

  28. WHO'S BEEN MAINTAINING IT?

  29. OK, LET’S TRY SOMETHING ?

  30. TWO WAY BINDING DATA

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

    });
  32. {{ template }} <label for="name"> Enter your name: </label> <input

    id="name" value='{{name}}'> <p>Hello {{name}}, I am Ractive</p>
  33. AND THE MAGIC HAPPENS

  34. PROXIES EVENTS

  35. Ractive var ractive = new Ractive({ el: '#output', template: '#tmp-proxy'

    }); ractive.on('hello', function( event ) { alert('hello there!'); });
  36. {{ template }} <button on-click='hello'>Hello!</button>

  37. AND IT RETURNS THIS

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

    THINGS!
  39. LIST TODO

  40. YES, IT’S SO NICE

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

  42. RACTIVE A MVC LIB IS NOT WE NEED TO ADD

    AN ADAPTOR https://github.com/ractivejs/ractive-adaptors-backbone
  43. We must render the view ractive = new Ractive({ el:

    '#output', template: '#tmp-thumbs', adaptors: [ 'Backbone' ] }); and set the adaptor
  44. Now we can write the collection Thumbs = Backbone.Collection.extend({ model:

    Thumb });
  45. And the model Thumbs = Backbone.Model.extend({ getThumb: function() { return

    this.get('thumb'); } });
  46. Also, we can call http request xhr = new XMLHttpRequest();

    xhr.open( 'get', '/thumbs' ); xhr.send();
  47. And finally, to show on the view <ul class='thumbnails'> {{#thumbs}}

    <li> <img src='/assets/img/{{thumb}}'> </li> {{/thumbs}} </ul>
  48. WOW LOOK AT THIS

  49. THAT'S ALL, FOLKS THANKS A LOT GITHUB SLIDESHARE SPEAKERDECK Front-End

    Architect at Arezzo ecommerces @zigolis /zigolis