Boosting Your Productivity, with Backbone & RactiveJS

Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis

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!
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