boosting your productivity, with backbone & ractivejs

49
BOOSTING YOUR PRODUCTIVITY Backbone & RactiveJS Gabriel Zigolis

Upload: gabriel-gottgtroy-zigolis

Post on 02-Jul-2015

316 views

Category:

Technology


0 download

DESCRIPTION

Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis

TRANSCRIPT

Page 1: Boosting Your Productivity, with Backbone & RactiveJS

BOOSTING YOUR PRODUCTIVITYBackbone & RactiveJS

Gabriel Zigolis

Page 2: Boosting Your Productivity, with Backbone & RactiveJS

@zigolis

Front-End Architect at Arezzo ecommerces

Page 3: Boosting Your Productivity, with Backbone & RactiveJS

SCHEDULE

• Getting to know Backbone

• Be Ractive

• Everybody together (but separated)

• Yeah, today is code day, babe!

Page 4: Boosting Your Productivity, with Backbone & RactiveJS
Page 5: Boosting Your Productivity, with Backbone & RactiveJS

backbonejs.org

“Gives structure to web applications by providing models, collections and views to consume API over

a RESTful JSON interface.”

BACKBONEJS

Page 6: Boosting Your Productivity, with Backbone & RactiveJS

USE WHY

BACKBONE?

Page 7: Boosting Your Productivity, with Backbone & RactiveJS

BECAUSEAPPSTH

E

GREW UP

Page 8: Boosting Your Productivity, with Backbone & RactiveJS

NEEDING

OrganizationArchitecture

Modularization

MORE

Page 9: Boosting Your Productivity, with Backbone & RactiveJS

CHARACTERISTICS

• Powerful Javascript LIB

• Adaptable, inspired on MV* pattern

• Modern, widely used in SPA

• Completely skinny, bitch! Just 6.5kb.

Page 10: Boosting Your Productivity, with Backbone & RactiveJS

WHO IS USING IT?

Page 11: Boosting Your Productivity, with Backbone & RactiveJS

OK, LET’S SEE SOME C0D10101

Page 12: Boosting Your Productivity, with Backbone & RactiveJS

Collection

var ArticleCollection = Backbone.Collection.extend({ url: '/articles', model: ArticleModel });

return ArticleCollection;

Page 13: Boosting Your Productivity, with Backbone & RactiveJS

Model

var ArticleModel = Backbone.Model.extend({ getTitle: function() { return this.get('title'); } });

return ArticleModel;

Page 14: Boosting Your Productivity, with Backbone & RactiveJS

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;

Page 15: Boosting Your Productivity, with Backbone & RactiveJS

_.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>

Page 16: Boosting Your Productivity, with Backbone & RactiveJS

COOLNow we have this

Page 17: Boosting Your Productivity, with Backbone & RactiveJS

WE WANT BUTMORE

Page 18: Boosting Your Productivity, with Backbone & RactiveJS

YES WE CAN!

• Interactivity

• Two-way binding

• Animations

• SVG manipulation

• {{Mustache}}

Page 19: Boosting Your Productivity, with Backbone & RactiveJS

EVERYTHINGKEEPING

SIMPLE

Page 20: Boosting Your Productivity, with Backbone & RactiveJS

ELEGANT

ANDPRODUCTIVE

Page 21: Boosting Your Productivity, with Backbone & RactiveJS

I’m R

acti

ve.js

NICE TO MEET YOU

Page 22: Boosting Your Productivity, with Backbone & RactiveJS

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

Page 23: Boosting Your Productivity, with Backbone & RactiveJS

USE WHY

RACTIVE?

Page 24: Boosting Your Productivity, with Backbone & RactiveJS

BECAUSE WE WANT

• Productivity

• Friendly code

• Data binding

• Support to animations

MORE

Page 25: Boosting Your Productivity, with Backbone & RactiveJS

AND THE BESTOF

Page 26: Boosting Your Productivity, with Backbone & RactiveJS

CHARACTERISTICS

• A kind of magic Javascript LIB

• Data-binding (a beautiful declarative syntax)

• Flexible and performant animations and transitions

• {{Mustache}} template system "yay"

Page 27: Boosting Your Productivity, with Backbone & RactiveJS

WHO DID IT?

Page 28: Boosting Your Productivity, with Backbone & RactiveJS

WHO'S BEEN MAINTAINING IT?

Page 29: Boosting Your Productivity, with Backbone & RactiveJS

OK, LET’S TRYSOMETHING

?

Page 30: Boosting Your Productivity, with Backbone & RactiveJS

TWO WAY BINDINGD

ATA

Page 31: Boosting Your Productivity, with Backbone & RactiveJS

Ractive

var ractive = new Ractive({ el: '#output', template: '#tmp-name' });

Page 32: Boosting Your Productivity, with Backbone & RactiveJS

{{ template }}

<label for="name"> Enter your name: </label>

<input id="name" value='{{name}}'>

<p>Hello {{name}}, I am Ractive</p>

Page 33: Boosting Your Productivity, with Backbone & RactiveJS

AND THEMAGIC

HAPPENS

Page 34: Boosting Your Productivity, with Backbone & RactiveJS

PROXIESEVENTS

Page 35: Boosting Your Productivity, with Backbone & RactiveJS

Ractive

var ractive = new Ractive({ el: '#output', template: '#tmp-proxy' });

ractive.on('hello', function( event ) { alert('hello there!'); });

Page 36: Boosting Your Productivity, with Backbone & RactiveJS

{{ template }}

<button on-click='hello'>Hello!</button>

Page 37: Boosting Your Productivity, with Backbone & RactiveJS

AN

D ITRETURNS

THIS

Page 38: Boosting Your Productivity, with Backbone & RactiveJS

WITH A LITTLE BIT MORE

C0D10101

WE CAN DO AMAZING THINGS!

Page 39: Boosting Your Productivity, with Backbone & RactiveJS

LISTTODO

Page 40: Boosting Your Productivity, with Backbone & RactiveJS

YES,IT’S SO

NICE

Page 41: Boosting Your Productivity, with Backbone & RactiveJS

COOL, NOW LET’S MIXBACKBONE

RACTIVE&

Page 42: Boosting Your Productivity, with Backbone & RactiveJS

RACTIVE A MVC LIBIS

NO

T

WE NEED TO ADD AN ADAPTOR

https://github.com/ractivejs/ractive-adaptors-backbone

Page 43: Boosting Your Productivity, with Backbone & RactiveJS

We must render the view

ractive = new Ractive({ el: '#output', template: '#tmp-thumbs',

adaptors: [ 'Backbone' ] });

and set the adaptor

Page 44: Boosting Your Productivity, with Backbone & RactiveJS

Now we can write the collection

Thumbs = Backbone.Collection.extend({ model: Thumb });

Page 45: Boosting Your Productivity, with Backbone & RactiveJS

And the model

Thumbs = Backbone.Model.extend({ getThumb: function() { return this.get('thumb'); } });

Page 46: Boosting Your Productivity, with Backbone & RactiveJS

Also, we can call http request

xhr = new XMLHttpRequest(); xhr.open( 'get', '/thumbs' ); xhr.send();

Page 47: Boosting Your Productivity, with Backbone & RactiveJS

And finally, to show on the view

<ul class='thumbnails'> {{#thumbs}} <li> <img src='/assets/img/{{thumb}}'> </li> {{/thumbs}} </ul>

Page 48: Boosting Your Productivity, with Backbone & RactiveJS

WOWLOOK AT

THIS

Page 49: Boosting Your Productivity, with Backbone & RactiveJS

THAT'S ALL, FOLKS

THANKS

A LOT

GITHUB SLIDESHARE

SPEAKERDECK

Front-End Architect at Arezzo ecommerces@zigolis

/zigolis