Boosting Your Productivity, with Backbone & RactiveJS

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