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
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
150
Desenvolvimento ágil com jQuery Mobile
zigolis
0
60
Workshop jQuery por Gabriel Zigolis
zigolis
0
48
Workshop / Benchmarking Performance por Gabriel Zigolis
zigolis
1
65
Workshop Padrões de Desenvolvimento Front-End por Gabriel
zigolis
1
63
Other Decks in Technology
See All in Technology
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
25
7.9k
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
310
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
790
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.6k
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
190
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
280
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
2k
Webアクセシビリティ入門
recruitengineers
PRO
2
830
Browser
recruitengineers
PRO
5
1.2k
帳票Vibe Coding
terurou
0
150
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
460
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Embracing the Ebb and Flow
colly
87
4.8k
It's Worth the Effort
3n
187
28k
Music & Morning Musume
bryan
46
6.8k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Become a Pro
speakerdeck
PRO
29
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Automating Front-end Workflow
addyosmani
1370
200k
Gamification - CAS2011
davidbonilla
81
5.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