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
Data Based JavaScript
Search
Tim Griesser
December 15, 2014
Technology
270
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Data Based JavaScript
Tim Griesser
December 15, 2014
More Decks by Tim Griesser
See All by Tim Griesser
SDL as an Artifact: Code-First Schemas in TS & JS
tgriesser
0
170
SDL as an Artifact: Code-First Schemas and GraphQL Nexus
tgriesser
0
220
End-to-End Testing for the Modern Web
tgriesser
0
180
Paving a New Path for GraphQL Schemas
tgriesser
0
110
Embracing the Power of GraphQL
tgriesser
2
1.1k
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
460
Making Relational Cool Again (or: JavaScript on ACID)
tgriesser
1
440
The Future is Now: JavaScript, ES6, and Babel JS
tgriesser
7
1.3k
Nodevember - Making Relational Cool Again
tgriesser
1
210
Other Decks in Technology
See All in Technology
猫付きpingコマンドを自作
uyuki234
0
260
Adding Right-to-Left support to your web application with CSS logical properties — Lessons from Redmine
vividtone
0
130
案件に一番詳しいAIを Amazon Bedrock AgentCore で作る ― 知見が知見を生むチームへ / Compounding Knowledge with AgentCore
yusukeshimizu
1
150
制約理論(ToC)入門 2026版
recruitengineers
PRO
8
2.6k
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
koh_yoshi
4
1.5k
モダンフロントエンド 開発研修
recruitengineers
PRO
4
790
老害フォレンジッカーはAI羊の夢を見るか?
tadmaddad
0
350
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
sugupoko
0
360
会社紹介資料 / Sansan Company Profile
sansan33
PRO
24
430k
JavaScript 研修 (2026)
recruitengineers
PRO
2
630
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
enakai00
7
4.4k
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
kuroneko13
0
130
Featured
See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.8k
Optimizing for Happiness
mojombo
378
71k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.5k
WENDY [Excerpt]
tessaabrams
11
39k
Are puppies a ranking factor?
jonoalderson
1
3.8k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
230
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
480
Ethics towards AI in product and experience design
skipperchong
2
350
Tell your own story through comics
letsgokoyo
1
1k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
210
Transcript
Data Based JavaScript
DataBase JavaScript?
None
Heavily Inspired by Backbone.js ! • Documentation • API •
Philosophy • Conventions
None
None
None
The Big Idea??
JavaScript “Holy Grail”
None
None
None
JavaScript “Holy Grail”
None
…but I’ve given talks on this before
…and there’s still a lot of work to be done
Data Based JavaScript
Backbone Models & Collections
None
Some Thoughts, Opinions
Some Thoughts, Opinions Backbone Models & Collections do too much
Some Thoughts, Opinions Backbone Models & Collections do too much
Backbone Models & Collections alone aren’t enough
Some Thoughts, Opinions Backbone Models & Collections do too much
Backbone Models & Collections alone aren’t enough There’s better ways than listening to individual change events
Some Thoughts, Opinions Backbone Models & Collections do too much
Backbone Models & Collections alone aren’t enough There’s better ways than listening to individual change events
Backbone Models & Collections do too much
Backbone Models & Collections (might) do too much
Backbone Models & Collections (might) do too much Wrapping Data
(attributes, get, set) Validations Change Notification Relations??? Syncing?? App Specific Logic Models
Backbone Models & Collections (might) do too much Wrapping Data
(attributes, get, set) Validations Change Notification Relations??? Syncing?? App Specific Logic Wrapping models Adding, removing, fetching models Tight ties with model (change / url) Maybe pagination??? Maybe nested models?? Maybe…whatever else you want to put there? Models Collections
What should they do Wrapping Data (attributes, get, set) Return
external relations based on attributes Limited Change Notification App Specific Logic Filter models Models Collections
Collections
None
.length .pop .push .shift .unshift .slice Array-like API
None
None
Behave like sorted maps
Behave like sorted maps which gets a little tricky…
{ add: true remove: false merge: true } Collection#set
Backbone.Model and Backbone.Collection might not be enough
Backbone.Model and Backbone.Collection might not be enough Multiple “sources of
truth”
Backbone.Model and Backbone.Collection might not be enough Multiple “sources of
truth” Object Identity issues
Backbone.Model and Backbone.Collection might not be enough Multiple “sources of
truth” Object Identity issues No definitive place of knowing what data exists in your application
Better than change events?
What might an elegant solution look like?
Limit scope of Models & Collections
Complexities of Models & Collections
Simplify of listening to change / time
Backbone.Session
Backbone.Session Think like a session cookie
Backbone.Session Think like a session cookie Similar to Backbone.sync
Backbone.Session Think like a session cookie Similar to Backbone.sync Models
& collections reference back to session
getPath()
getPath()
None
None
Relations
model.set('first_name', 'Tim')
model.set('first_name', 'Tim') model.session.setIn(['users', 1, 'first_name'], 'Tim')
model.set('first_name', 'Tim') model.session.setIn(['users', 1, 'first_name'], 'Tim') refresh views containing models
looking at paths ['users'], ['users', 1]
model.set('first_name', 'Tim') model.session.setIn(['users', 1, 'first_name'], 'Tim') refresh views containing models
looking at paths ['users'], ['users', 1] Socket, Ajax, etc.
What does this gain us? Drastically simplifies Collections Single source
of truth for everything data related Easy to switch into offline mode
None
None
None
Beyond Backbone Models & Collections
None
var x = new Immutable.Map({a: 1}); ! var y =
x.set('b', 2); ! x.get('a') // 1 ! y.get('a') // 1 ! x.get('b') // undefined ! y.get('b') // 2
Takeaway Points If you like Node but want RDBMS check
out Knex & Bookshelf
Takeaway Points If you like Node but want RDBMS check
out Knex & Bookshelf Maybe Backbone.Session could be a thing?
Takeaway Points If you like Node but want RDBMS check
out Knex & Bookshelf Maybe Backbone.Session could be a thing? Or maybe &.Session?
Summary Time spent critically analyzing the data flow in your
application can save a lot of time later