boosting your productivity, with backbone & ractivejs
DESCRIPTION
Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel ZigolisTRANSCRIPT
BOOSTING YOUR PRODUCTIVITYBackbone & RactiveJS
Gabriel Zigolis
@zigolis
Front-End Architect at Arezzo ecommerces
SCHEDULE
• Getting to know Backbone
• Be Ractive
• Everybody together (but separated)
• Yeah, today is code day, babe!
backbonejs.org
“Gives structure to web applications by providing models, collections and views to consume API over
a RESTful JSON interface.”
BACKBONEJS
USE WHY
BACKBONE?
BECAUSEAPPSTH
E
GREW UP
NEEDING
OrganizationArchitecture
Modularization
MORE
CHARACTERISTICS
• Powerful Javascript LIB
• Adaptable, inspired on MV* pattern
• Modern, widely used in SPA
• Completely skinny, bitch! Just 6.5kb.
WHO IS USING IT?
OK, LET’S SEE SOME C0D10101
Collection
var ArticleCollection = Backbone.Collection.extend({ url: '/articles', model: ArticleModel });
return ArticleCollection;
Model
var ArticleModel = Backbone.Model.extend({ getTitle: function() { return this.get('title'); } });
return ArticleModel;
Viewvar 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;
_.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>
COOLNow we have this
WE WANT BUTMORE
YES WE CAN!
• Interactivity
• Two-way binding
• Animations
• SVG manipulation
• {{Mustache}}
EVERYTHINGKEEPING
SIMPLE
ELEGANT
ANDPRODUCTIVE
I’m R
acti
ve.js
NICE TO MEET YOU
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
USE WHY
RACTIVE?
BECAUSE WE WANT
• Productivity
• Friendly code
• Data binding
• Support to animations
MORE
AND THE BESTOF
CHARACTERISTICS
• A kind of magic Javascript LIB
• Data-binding (a beautiful declarative syntax)
• Flexible and performant animations and transitions
• {{Mustache}} template system "yay"
WHO DID IT?
WHO'S BEEN MAINTAINING IT?
OK, LET’S TRYSOMETHING
?
TWO WAY BINDINGD
ATA
Ractive
var ractive = new Ractive({ el: '#output', template: '#tmp-name' });
{{ template }}
<label for="name"> Enter your name: </label>
<input id="name" value='{{name}}'>
<p>Hello {{name}}, I am Ractive</p>
AND THEMAGIC
HAPPENS
PROXIESEVENTS
Ractive
var ractive = new Ractive({ el: '#output', template: '#tmp-proxy' });
ractive.on('hello', function( event ) { alert('hello there!'); });
{{ template }}
<button on-click='hello'>Hello!</button>
WITH A LITTLE BIT MORE
C0D10101
WE CAN DO AMAZING THINGS!
LISTTODO
YES,IT’S SO
NICE
COOL, NOW LET’S MIXBACKBONE
RACTIVE&
RACTIVE A MVC LIBIS
NO
T
WE NEED TO ADD AN ADAPTOR
https://github.com/ractivejs/ractive-adaptors-backbone
We must render the view
ractive = new Ractive({ el: '#output', template: '#tmp-thumbs',
adaptors: [ 'Backbone' ] });
and set the adaptor
Now we can write the collection
Thumbs = Backbone.Collection.extend({ model: Thumb });
And the model
Thumbs = Backbone.Model.extend({ getThumb: function() { return this.get('thumb'); } });
Also, we can call http request
xhr = new XMLHttpRequest(); xhr.open( 'get', '/thumbs' ); xhr.send();
And finally, to show on the view
<ul class='thumbnails'> {{#thumbs}} <li> <img src='/assets/img/{{thumb}}'> </li> {{/thumbs}} </ul>
WOWLOOK AT
THIS
THAT'S ALL, FOLKS
THANKS
A LOT
GITHUB SLIDESHARE
SPEAKERDECK
Front-End Architect at Arezzo ecommerces@zigolis
/zigolis