Intro to Ribs - Speaker Deck

Slide 1

Slide 1 text

Ribs. Monday, May 6, 13

Slide 2

Slide 2 text

Provides structure for your Backbone(.js) GET IT?! Monday, May 6, 13

Slide 3

Slide 3 text

Also starts with R. Monday, May 6, 13

Slide 4

Slide 4 text

9LHZ 'DWD Monday, May 6, 13

Slide 5

Slide 5 text

M V VM API Backbone.View Backbone.Model http://backbonejs.org Monday, May 6, 13

Slide 6

Slide 6 text

Code Structure Monday, May 6, 13

Slide 7

Slide 7 text

Component %HKDYLRUV-6 /D\RXWKWPO 6W\OH&66 Monday, May 6, 13

Slide 8

Slide 8 text

Responsibilities • Render itself • Respond to user interactions • Manipulate data (the model) Monday, May 6, 13

Slide 9

Slide 9 text

Restrictions • Can’t touch DOM or state that belongs to any other component. • That includes styles! • Can only manipulate other components through exposed interfaces. • Can only communicate with the outside world by triggering events. Monday, May 6, 13

Slide 10

Slide 10 text

HOFRPSRQHQWQDPH! HO HO HO HO (OHPHQWVRIFKLOG FRPSRQHQWV 0DUNXS Monday, May 6, 13

Slide 11

Slide 11 text

Monday, May 6, 13

Slide 12

Slide 12 text

Monday, May 6, 13

Slide 13

Slide 13 text

,QWHUQDOORJLFDQGHYHQW KDQGOHUV ΖQWHUIDFH &KLOG (YHQW 3DUHQWRUVRPHFRGHZLWKDUHIHUHQFH Monday, May 6, 13

Slide 14

Slide 14 text

Paths • URL for a given component can be inferred from the name • Catalog.Artist -> /blah/Catalog.Artist.js • Path in source tree can be inferred from the component name • Catalog.Artist -> /stuff/Catalog/Artist/ Monday, May 6, 13

Slide 15

Slide 15 text

Lifecyle Monday, May 6, 13

Slide 16

Slide 16 text

Standard Backbone API • Event delegates • Special properties • el, $el, attributes Monday, May 6, 13

Slide 17

Slide 17 text

Delegates • onModelCreated • createChildComponents • onRendered • onInserted • onDetached • onDestroyed Monday, May 6, 13

Slide 18

Slide 18 text

onModelCreated • Data is available! • Either it was passed to you or it was fetched from the API • Set up listeners for data changed events, create new models based on original model Monday, May 6, 13

Slide 19

Slide 19 text

createChildComponents • When rendered, all children are destroyed • Before rendering, call createChildComponents • Lets us re-create children safely Monday, May 6, 13

Slide 20

Slide 20 text

onRendered • DOM elements exist! • Might be “ofﬂine”, they don’t yet have dimensions. Monday, May 6, 13

Slide 21

Slide 21 text

onInserted • You’re live • Dimensions are available • Listen for pubsub updates, updates that don’t matter when you’re not in the foreground Monday, May 6, 13

Slide 22

Slide 22 text

onDetached • No longer necessarily in the DOM, but might be re-inserted later • Stop listening for changes that don’t matter when the user isn’t watching Monday, May 6, 13

Slide 23

Slide 23 text

onDestroyed • You’re going away • Cleanup Monday, May 6, 13

Slide 24

Slide 24 text

Demo/Questions Monday, May 6, 13

Slide 25

Slide 25 text

The Future • Untie templates and components • Generalize lifecycle state machine • Devs can add their own states • Support different templates for states • Open Source! Monday, May 6, 13

Slide 26

Slide 26 text

Thanks! Monday, May 6, 13