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
280
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
190
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
450
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
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
layerx
PRO
0
1.3k
AI時代におけるプロダクト横断勉強会の設計
zozotech
PRO
0
170
AI-DLCって実際どう? 〜聞きたいこと全部聞いてみる〜
news_it_enj
0
240
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
layerx
PRO
2
1.6k
Kiro Crewしか勝たん!?
miu_crescent
PRO
0
190
AIで実装は速くなった。なのにプロダクトは速くならない。職能の壁を越えて価値のフローを設計する
nwiizo
7
7.4k
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
nikkei_engineer_recruiting
0
240
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
layerx
PRO
4
2.6k
enechainの内製セルフサービスプラットフォーム
hiyosi
0
130
From Vanilla Kubernetes to a Batteries-Included Platform: Developer Experience at 1,300+ Clusters
yosshi_
0
620
PfEingのアプローチで働こう
rindrics
0
200
Backstageでつくるセルフサービスな社内開発基盤
kikunosuke75
1
360
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Designing Experiences People Love
moore
143
24k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
510
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
Crafting Experiences
bethany
1
300
Amusing Abliteration
ianozsvald
1
290
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
570
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
310
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.7k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
320
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
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