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
590
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
57
Workshop jQuery por Gabriel Zigolis
zigolis
0
48
Workshop / Benchmarking Performance por Gabriel Zigolis
zigolis
1
61
Workshop Padrões de Desenvolvimento Front-End por Gabriel
zigolis
1
60
Other Decks in Technology
See All in Technology
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
670
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
220
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.3k
AI工学特論: MLOps・継続的評価
asei
10
1.6k
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
生成AIによる情報システムへのインパクト
taka_aki
1
150
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
310
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
620
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
170
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
370
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
A better future with KSS
kneath
238
17k
Building Adaptive Systems
keathley
43
2.7k
Navigating Team Friction
lara
187
15k
Automating Front-end Workflow
addyosmani
1370
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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