Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Boosting Your Productivity, with Backbone & Rac...
Search
Gabriel Zigolis
November 22, 2014
Technology
3
820
Boosting Your Productivity, with Backbone & RactiveJS
Talk about Backbone and RactiveJS on FrontInFloripa 2014 by Gabriel Zigolis
Gabriel Zigolis
November 22, 2014
Tweet
Share
More Decks by Gabriel Zigolis
See All by Gabriel Zigolis
git flow
zigolis
0
280
Front-End Architecture for Large Scale Apps - Amsterdam
zigolis
1
170
Front-End Architecture for Large Scale Apps - Gabriel Zigolis
zigolis
7
580
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
zigolis
3
290
Bem-vindo ao Mundo Front-End por Gabriel Zigolis
zigolis
2
140
Desenvolvimento ágil com jQuery Mobile
zigolis
0
56
Workshop jQuery por Gabriel Zigolis
zigolis
0
47
Workshop / Benchmarking Performance por Gabriel Zigolis
zigolis
1
60
Workshop Padrões de Desenvolvimento Front-End por Gabriel
zigolis
1
59
Other Decks in Technology
See All in Technology
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
100
Data Engineering Study#30 LT資料
tetsuroito
1
250
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
AI エージェントと考え直すデータ基盤
na0
20
8k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
760
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
三視点LLMによる複数観点レビュー
mhlyc
0
230
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
19
7.6k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1.1k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
142
24k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Writing Fast Ruby
sferik
628
62k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Side Projects
sachag
455
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
BOOSTING YOUR PRODUCTIVITY Backbone & 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!
None
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 ?
BECAUSE APPS THE GREW UP
NEEDING Organization Architecture 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;
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;
_.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>
COOL Now we have this
WE WANT BUT MORE
YES WE CAN! • Interactivity • Two-way binding • Animations
• SVG manipulation • {{Mustache}}
EVERYTHING KEEPING SIMPLE
ELEGANT AND PRODUCTIVE
I’m Ractive.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 TRY SOMETHING ?
TWO WAY BINDING DATA
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 THE MAGIC HAPPENS
PROXIES EVENTS
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>
AND IT RETURNS THIS
WITH A LITTLE BIT MORE C0D10101 WE CAN DO AMAZING
THINGS!
LIST TODO
YES, IT’S SO NICE
COOL, NOW LET’S MIX BACKBONE RACTIVE &
RACTIVE A MVC LIB IS NOT 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>
WOW LOOK AT THIS
THAT'S ALL, FOLKS THANKS A LOT GITHUB SLIDESHARE SPEAKERDECK Front-End
Architect at Arezzo ecommerces @zigolis /zigolis