Boosting Your Productivity, with Backbone & RactiveJS

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>

AN

D ITRETURNS

THIS

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