-
<% collection.each(function(model){ %>
<li>
<a href="#article/<%= model.id %>" class="list-group-item">
<%= model.getTitle() %>
</a>
</li>
<% }); %>
Slide 1
Slide 1 text
BOOSTING YOUR
PRODUCTIVITY
Backbone & RactiveJS
Gabriel Zigolis
Slide 2
Slide 2 text
@zigolis
Front-End Architect at Arezzo ecommerces
Slide 3
Slide 3 text
SCHEDULE
• Getting to know Backbone
• Be Ractive
• Everybody together (but separated)
• Yeah, today is code day, babe!
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
backbonejs.org
“Gives structure to web applications
by providing models, collections
and views to consume API over
a RESTful JSON interface.”
BACKBONEJS
Slide 6
Slide 6 text
USE
WHY
BACKBONE
?
Slide 7
Slide 7 text
BECAUSE
APPS
THE
GREW
UP
Slide 8
Slide 8 text
NEEDING
Organization
Architecture
Modularization
MORE
Slide 9
Slide 9 text
CHARACTERISTICS
• Powerful Javascript LIB
• Adaptable, inspired on MV* pattern
• Modern, widely used in SPA
• Completely skinny, bitch! Just 6.5kb.
Slide 10
Slide 10 text
WHO IS USING IT?
Slide 11
Slide 11 text
OK, LET’S SEE SOME
C0D10101
Slide 12
Slide 12 text
Collection
var ArticleCollection = Backbone.Collection.extend({
url: '/articles',
model: ArticleModel
});
return ArticleCollection;
Slide 13
Slide 13 text
Model
var ArticleModel = Backbone.Model.extend({
getTitle: function() {
return this.get('title');
}
});
return ArticleModel;
Slide 14
Slide 14 text
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;
Slide 15
Slide 15 text
_.template
Slide 16
Slide 16 text
COOL
Now we have this
Slide 17
Slide 17 text
WE WANT
BUT
MORE
Slide 18
Slide 18 text
YES WE CAN!
• Interactivity
• Two-way binding
• Animations
• SVG manipulation
• {{Mustache}}
Slide 19
Slide 19 text
EVERYTHING
KEEPING
SIMPLE
Slide 20
Slide 20 text
ELEGANT
AND
PRODUCTIVE
Slide 21
Slide 21 text
I’m Ractive.js
NICE TO MEET YOU
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
USE
WHY
RACTIVE?
Slide 24
Slide 24 text
BECAUSE
WE WANT
• Productivity
• Friendly code
• Data binding
• Support to animations
MORE
Slide 25
Slide 25 text
AND
THE
BESTOF
Slide 26
Slide 26 text
CHARACTERISTICS
• A kind of magic Javascript LIB
• Data-binding (a beautiful declarative syntax)
• Flexible and performant animations and transitions
• {{Mustache}} template system "yay"
Slide 27
Slide 27 text
WHO DID
IT
?
Slide 28
Slide 28 text
WHO'S BEEN MAINTAINING IT?
Slide 29
Slide 29 text
OK, LET’S TRY
SOMETHING
?
Slide 30
Slide 30 text
TWO WAY
BINDING
DATA
Slide 31
Slide 31 text
Ractive
var ractive = new Ractive({
el: '#output',
template: '#tmp-name'
});
Slide 32
Slide 32 text
{{ template }}
Enter your name:
Hello {{name}}, I am Ractive
Slide 33
Slide 33 text
AND
THE
MAGIC
HAPPENS
Slide 34
Slide 34 text
PROXIES
EVENTS
Slide 35
Slide 35 text
Ractive
var ractive = new Ractive({
el: '#output',
template: '#tmp-proxy'
});
ractive.on('hello', function( event ) {
alert('hello there!');
});
Slide 36
Slide 36 text
{{ template }}
Hello!
Slide 37
Slide 37 text
AND IT
RETURNS
THIS
Slide 38
Slide 38 text
WITH A
LITTLE
BIT
MORE
C0D10101
WE CAN DO AMAZING THINGS!
Slide 39
Slide 39 text
LIST
TODO
Slide 40
Slide 40 text
YES,
IT’S SO
NICE
Slide 41
Slide 41 text
COOL, NOW LET’S MIX
BACKBONE
RACTIVE
&
Slide 42
Slide 42 text
RACTIVE
A MVC LIB
IS NOT
WE NEED TO ADD AN ADAPTOR
https://github.com/ractivejs/ractive-adaptors-backbone
Slide 43
Slide 43 text
We must render the view
ractive = new Ractive({
el: '#output',
template: '#tmp-thumbs',
adaptors: [ 'Backbone' ]
});
and set the adaptor
Slide 44
Slide 44 text
Now we can write the
collection
Thumbs = Backbone.Collection.extend({
model: Thumb
});
Slide 45
Slide 45 text
And the model
Thumbs = Backbone.Model.extend({
getThumb: function() {
return this.get('thumb');
}
});
Slide 46
Slide 46 text
Also, we can call http request
xhr = new XMLHttpRequest();
xhr.open( 'get', '/thumbs' );
xhr.send();
Slide 47
Slide 47 text
And finally, to show
on the view
-
{{#thumbs}}
-
Slide 48
Slide 48 text
WOW
LOOK AT
THIS
Slide 49
Slide 49 text
THAT'S
ALL, FOLKS
THANKS
A LOT
GITHUB
SLIDESHARE
SPEAKERDECK
Front-End Architect at Arezzo ecommerces
@zigolis
/zigolis