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
830
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
290
Front-End Architecture for Large Scale Apps - Amsterdam
zigolis
1
170
Front-End Architecture for Large Scale Apps - Gabriel Zigolis
zigolis
7
600
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
zigolis
3
290
Bem-vindo ao Mundo Front-End por Gabriel Zigolis
zigolis
2
150
Desenvolvimento ágil com jQuery Mobile
zigolis
0
63
Workshop jQuery por Gabriel Zigolis
zigolis
0
50
Workshop / Benchmarking Performance por Gabriel Zigolis
zigolis
1
68
Workshop Padrões de Desenvolvimento Front-End por Gabriel
zigolis
1
67
Other Decks in Technology
See All in Technology
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.4k
AI時代、“平均値”ではいられない
uhyo
8
2.6k
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
180
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
440
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
320
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
720
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Context Engineering - Making Every Token Count
addyosmani
8
300
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimizing for Happiness
mojombo
379
70k
The Pragmatic Product Professional
lauravandoore
36
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Review Best Practice
trishagee
72
19k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
YesSQL, Process and Tooling at Scale
rocio
173
15k
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