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
今、改めてBackboneを評価する
Search
Kazuki Shibata
May 27, 2015
Technology
11
5.7k
今、改めてBackboneを評価する
2015/05/27 Data Binding JS Night
Kazuki Shibata
May 27, 2015
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
940
SvelteKitでJamstackを試す
shibe97
1
980
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.7k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1k
CSR / SSR / SSGの動向2020
shibe97
2
1.4k
Jamstack×microCMS 実装編
shibe97
4
760
SentryでSPAのエラーログを収集する
shibe97
1
1.4k
useRefについて調べてみた
shibe97
1
130
フロントエンドエンジニアのキャリアパス
shibe97
9
3.5k
Other Decks in Technology
See All in Technology
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
290
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
190
開発パフォーマンスを最大化するための開発体制
ham0215
2
180
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
160
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
360
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Code Review Best Practice
trishagee
55
15k
BBQ
matthewcrist
80
8.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Adopting Sorbet at Scale
ufuk
68
8.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Transcript
ࠓɺվΊͯBackboneΛධՁ͢Δ @shibe97 2015/05/27 Data Binding JS Night
ࣗݾհ ࣲా ف (@shibe97) ࣄ ಛٕ σβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ ࣾͰࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻ ϒϨΠΫμϯεɻ
None
Backbone.jsͱ • ܰྔͷMV*ϥΠϒϥϦ • jQuery, underscore.jsʹґଘ • Model, Collection, View,
Router, HistoryΛఏڙ • requireΘͳ͍ͱɺάϩʔόϧԚછ͢Δ • σʔλόΠϯσΟϯάखಈͰߦͳ͏
Angularͷ಄ • Α͘Angularͱൺֱ͞Ε͍ͯͨ • AngularํόΠϯσΟϯά͕͋Δ͔Β ͍͍ΑͶ • Backboneશ෦खಈͰॻ͘ͷେมͩΑͶ • ৽͍͠ͷ৮Γ͍ͨΑͶʢצʣ
͔͠͠ɺࠓ • Angular2ํσʔλόΠϯσΟϯάΛ ΊΔ • React͕άϯάϯདྷͯΔ • αʔόαΠυϨϯμϦϯάɺvirtual DOM͕ དྷͯΔ
֤ϑϨʔϜϫʔΫൺֱ ग़యɿhttps://roost.bocoup.com/2015/austin/blog/why-backbone/
ͱΓ͋͑ͣσʔλόΠϯσΟϯάͷ
ͦͦ σʔλόΠϯσΟϯάඞཁͳͷ͔ʁ
σʔλόΠϯσΟϯάͷඞཁੑ ʢݸਓతݟղʣ • Model͔ΒViewͷө͋ͬͨํ͕ྑ͍ͱࢥ͏ • View͔ΒModelͷө߹ʹΑͬͯ ແ͍ํ͕Γ͍͢ • ฤूը໘ͳͲͰଈ࣌ө͞ΕͯࠔΔ •
ʹΑͬͯόΠϯσΟϯάͨ͘͠ͳ͔ͬͨΓ ͢Δ
σʔλόΠϯσΟϯάͷํ๏
Backbone.jsͷΈͷ߹
View -> Model var SomeView = Backbone.View.extend({ events:
{ "click .button" : "changeState" }, changeState: function(e){ this.model.set("item", $(e.target).val()); } });
Model -> View var SomeView = Backbone.View.extend({ initialize:
function(){ this.model.on("change", this.render); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
खಈόΠϯσΟϯάπϥ͍
खಈόΠϯσΟϯάπϥ͍ • ྔ͕૿͑ͯ͘Δͱ͔͍ͬ • σʔλͷྲྀΕ͕ҙຯෆ໌ʹͳΓ͕ͪ • ͤΊͯrender͚ͩͰࣗಈԽͯ͠΄͍͠…
None
Marionette.jsͱ • Backbone.jsͷϓϥάΠϯ • ओʹView·ΘΓͷػೳ͕֦ு͞ΕΔ • Regionػೳ • Moduleػೳ
Marionette.jsʹΑΔίϯϙʔωϯτࢥߟ • Marionette.jsʹRegionͱ ͍͏Έ͕͋Δ • ྖҬΛ࡞ͬͯɺͦ͜ʹView ΛቕΊࠐΜͰ͍͘ͷ • ͜ΕReactͷ ίϯϙʔωϯτͷ߹ʹ
ࣅ͍ͯΔ
Backbone.js + Marionette.js ! ͷ߹
Model -> View (Marionette) var SomeView = Marionette.ItemView.extend({
modelEvents: { "change": "render" } });
Model -> View (ൺֱ༻Backbone) var SomeView = Backbone.View.extend({
initialize: function(){ this.model.on("change", this.render); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
ѱ͘ͳ͍
ϩΰ͕ͳ͍ͷͰNYTimesͷΛ…
Stickit.jsͱ • Backbone.jsͷϓϥάΠϯ • σʔλόΠϯσΟϯά·ΘΓͷػೳڧԽ • ยํόΠϯσΟϯά • ํόΠϯσΟϯά
Viewؙ͝ͱͷ࠶ඳըΛͤ͞ͳ͍ • ೖྗΛଈ࣌ө͍ͤͨ͞UIͰ ೖྗ͢ΔͨͼʹView͕࠶ඳը͞Εͯ͠·͍ ΧʔιϧΞτͯ͠͠·͏ • stickitͦΕΛ͍Ͱ͘ΕΔ
Backbone.js + Marionette.js + Stickit.js ! ͷ߹
Model <-> View (Marionette+Stickit) var SomeView = Marionette.ItemView.extend({
bindings: { "#item": "item" }, onRender: function(){ this.stickit(); } });
Model <-> View (ൺֱ༻Backbone) var SomeView = Backbone.View.extend({
initialize: function(){ this.model.on("change", this.render); }, events: { "click .button" : "changeState" }, changeState: function(e){ this.model.set("item", $(e.target).val()); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
ྑ͍ײ͡
Backboneͷ͜Ε͔Β
Backboneͷ͜Ε͔Β • ͓ͦΒ͘Backbone.jsେ͖͘มΘΒͳ͍ͣ • ͦΕ͕BackboneͷҰ൪ͷϝϦοτͩͱࢥ͏ • ഁյతͳมߋ =>શ໘ϦχϡʔΞϧେมͱ͍͏ҙຯͰ • Marionette.jsଆͰɺvirtualDOMͳͲͷͪΒ΄Βग़͍ͯΔ
͚Ͳɺ·ͩٞதͱ͍͏ײ͡ • Backbone + React ͳͲͰɺϞδϡʔϧ୯ҐͰΘΕΔ͜ͱ ݁ߏ͋Γͦ͏
BackboneͱFluxͷؔ • ಛʹ੍ͳ͍ͨΊɺ FluxͷΑ͏ʹσʔλͷྲྀΕΛҰํʹ͢Δ͜ͱՄೳ • View -> Controller -> Model
-> View -> … • ViewͰϢʔβʔΠϕϯτΛ͔ͭΈɺ ͔ͦ͜ΒApp.vent.trigger(…)ͰControllerʹ͑ɺ Controller͕֘ModelʹมߋΛՃ͑Δ • Marionette͕ఏڙ͍ͯ͠ΔControllerԿͷׂ͍࣋ͬͯͳ͍ͷͰɺ ͦΕΛFlux෩ʹҙຯ͚ͯ͋͛͠Ε͍͚ͦ͏
݁
σʔλͷྲྀΕ͕ҰํʹͳΔΑ͏ʹ όΠϯσΟϯάยํ͕ྑͦ͞͏ (Model -> View)
Thank you :)