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 & RactiveJS
Search
Gabriel Zigolis
November 22, 2014
Technology
3
760
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
250
Front-End Architecture for Large Scale Apps - Amsterdam
zigolis
1
140
Front-End Architecture for Large Scale Apps - Gabriel Zigolis
zigolis
7
500
SOFEA - Arquiteturas REST com Backbone & HTML5 by Gabriel Zigolis
zigolis
3
260
Bem-vindo ao Mundo Front-End por Gabriel Zigolis
zigolis
2
130
Desenvolvimento ágil com jQuery Mobile
zigolis
0
34
Workshop jQuery por Gabriel Zigolis
zigolis
0
36
Workshop / Benchmarking Performance por Gabriel Zigolis
zigolis
1
42
Workshop Padrões de Desenvolvimento Front-End por Gabriel
zigolis
1
38
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
3
900
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
370
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
私が trocco を推す理由
__allllllllez__
1
260
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Building Applications with DynamoDB
mza
88
5.6k
Clear Off the Table
cherdarchuk
84
310k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Making Projects Easy
brettharned
108
5.5k
Building Your Own Lightsaber
phodgson
99
5.7k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
How to name files
jennybc
65
93k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Writing Fast Ruby
sferik
621
60k
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