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

Boosting Your Productivity, with Backbone & Rac...

Boosting Your Productivity, with Backbone & RactiveJS

Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis

Gabriel Zigolis

November 22, 2014
Tweet

More Decks by Gabriel Zigolis

Other Decks in Technology

Transcript

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

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

    and views to consume API over a RESTful JSON interface.” BACKBONEJS
  3. CHARACTERISTICS • Powerful Javascript LIB • Adaptable, inspired on MV*

    pattern • Modern, widely used in SPA • Completely skinny, bitch! Just 6.5kb.
  4. 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;
  5. _.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>
  6. 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
  7. BECAUSE WE WANT • Productivity • Friendly code • Data

    binding • Support to animations MORE
  8. CHARACTERISTICS • A kind of magic Javascript LIB • Data-binding

    (a beautiful declarative syntax) • Flexible and performant animations and transitions • {{Mustache}} template system "yay"
  9. {{ template }} <label for="name"> Enter your name: </label> <input

    id="name" value='{{name}}'> <p>Hello {{name}}, I am Ractive</p>
  10. Ractive var ractive = new Ractive({ el: '#output', template: '#tmp-proxy'

    }); ractive.on('hello', function( event ) { alert('hello there!'); });
  11. RACTIVE A MVC LIB IS NOT WE NEED TO ADD

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

    '#output', template: '#tmp-thumbs', adaptors: [ 'Backbone' ] }); and set the adaptor
  13. Also, we can call http request xhr = new XMLHttpRequest();

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

    <li> <img src='/assets/img/{{thumb}}'> </li> {{/thumbs}} </ul>
  15. THAT'S ALL, FOLKS THANKS A LOT GITHUB SLIDESHARE SPEAKERDECK Front-End

    Architect at Arezzo ecommerces @zigolis /zigolis