Slide 1

Slide 1 text

Data Based JavaScript

Slide 2

Slide 2 text

DataBase JavaScript?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Heavily Inspired by Backbone.js ! • Documentation • API • Philosophy • Conventions

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

The Big Idea??

Slide 9

Slide 9 text

JavaScript “Holy Grail”

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

JavaScript “Holy Grail”

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

…but I’ve given talks on this before

Slide 16

Slide 16 text

…and there’s still a lot of work to be done

Slide 17

Slide 17 text

Data Based JavaScript

Slide 18

Slide 18 text

Backbone Models & Collections

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Some Thoughts, Opinions

Slide 21

Slide 21 text

Some Thoughts, Opinions Backbone Models & Collections do too much

Slide 22

Slide 22 text

Some Thoughts, Opinions Backbone Models & Collections do too much Backbone Models & Collections alone aren’t enough

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Backbone Models & Collections do too much

Slide 26

Slide 26 text

Backbone Models & Collections (might) do too much

Slide 27

Slide 27 text

Backbone Models & Collections (might) do too much Wrapping Data (attributes, get, set) Validations Change Notification Relations??? Syncing?? App Specific Logic Models

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Collections

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

.length .pop .push .shift .unshift .slice Array-like API

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Behave like sorted maps

Slide 36

Slide 36 text

Behave like sorted maps which gets a little tricky…

Slide 37

Slide 37 text

{ add: true remove: false merge: true } Collection#set

Slide 38

Slide 38 text

Backbone.Model and Backbone.Collection might not be enough

Slide 39

Slide 39 text

Backbone.Model and Backbone.Collection might not be enough Multiple “sources of truth”

Slide 40

Slide 40 text

Backbone.Model and Backbone.Collection might not be enough Multiple “sources of truth” Object Identity issues

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Better than change events?

Slide 43

Slide 43 text

What might an elegant solution look like?

Slide 44

Slide 44 text

Limit scope of Models & Collections

Slide 45

Slide 45 text

Complexities of Models & Collections

Slide 46

Slide 46 text

Simplify of listening to change / time

Slide 47

Slide 47 text

Backbone.Session

Slide 48

Slide 48 text

Backbone.Session Think like a session cookie

Slide 49

Slide 49 text

Backbone.Session Think like a session cookie Similar to Backbone.sync

Slide 50

Slide 50 text

Backbone.Session Think like a session cookie Similar to Backbone.sync Models & collections reference back to session

Slide 51

Slide 51 text

getPath()

Slide 52

Slide 52 text

getPath()

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Relations

Slide 56

Slide 56 text

model.set('first_name', 'Tim')

Slide 57

Slide 57 text

model.set('first_name', 'Tim') model.session.setIn(['users', 1, 'first_name'], 'Tim')

Slide 58

Slide 58 text

model.set('first_name', 'Tim') model.session.setIn(['users', 1, 'first_name'], 'Tim') refresh views containing models looking at paths ['users'], ['users', 1]

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

What does this gain us? Drastically simplifies Collections Single source of truth for everything data related Easy to switch into offline mode

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Beyond Backbone Models & Collections

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Takeaway Points If you like Node but want RDBMS check out Knex & Bookshelf

Slide 68

Slide 68 text

Takeaway Points If you like Node but want RDBMS check out Knex & Bookshelf Maybe Backbone.Session could be a thing?

Slide 69

Slide 69 text

Takeaway Points If you like Node but want RDBMS check out Knex & Bookshelf Maybe Backbone.Session could be a thing? Or maybe &.Session?

Slide 70

Slide 70 text

Summary Time spent critically analyzing the data flow in your application can save a lot of time later