The document discusses using Backbone.js and Ractive.js to build productive web applications. It provides an overview of the key features and benefits of each library, including Backbone's MV* pattern and Ractive's data binding capabilities. Code examples are given that demonstrate basic usage of models, collections and views with Backbone and two-way data binding with Ractive. The document also discusses how to combine the two libraries using a Ractive adapter for Backbone.

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. “Gives structure to web applications
by providing models, collections
and views to consume API over
a RESTful JSON interface.”
backbonejs.org
BACKBONEJS

6. USE WHY
BACKBONE?

7. BECAUSE
APPS
THE
UP
GREW

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. KEEPING
EVERYTHING
SIMPLE

20. ELEGANT AND
PRODUCTIVE

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

22. “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.org
RACTIVEJS

23. USE WHY
RACTIVE?

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

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. IT?
WHO DID

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
THEMAGIC 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. RETURNS THIS
AND IT

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

39. LIST TODO

40. IT’S SO
YES,
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. LOOK AT
WOW
THIS

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