Intro to Ribs

A cursory overview of the Ribs JS framework

Transcript

1. Ribs. Monday, May 6, 13
2. Provides structure for your Backbone(.js) GET IT?! Monday, May 6, 13
3. Also starts with R. Monday, May 6, 13
4. 9LHZ 'DWD Monday, May 6, 13
5. M V VM API Backbone.View Backbone.Model http://backbonejs.org Monday, May 6, 13
6. Code Structure Monday, May 6, 13
7. Component %HKDYLRUV -6 /D\RXW KWPO 6W\OH &66 Monday, May 6, 13
8. Responsibilities • Render itself • Respond to user interactions • Manipulate data (the model) Monday, May 6, 13
9. 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
10. HOFRPSRQHQWQDPH! HO HO HO HO (OHPHQWVRIFKLOG FRPSRQHQWV 0DUNXS Monday, May 6, 13
11. Monday, May 6, 13
12. Monday, May 6, 13
13. ,QWHUQDOORJLFDQGHYHQW KDQGOHUV ΖQWHUIDFH &KLOG (YHQW 3DUHQWRUVRPHFRGHZLWKDUHIHUHQFH Monday, May 6, 13
14. 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
15. Lifecyle Monday, May 6, 13
16. Standard Backbone API • Event delegates • Special properties • el, $el, attributes Monday, May 6, 13
17. Delegates • onModelCreated • createChildComponents • onRendered • onInserted • onDetached • onDestroyed Monday, May 6, 13
18. 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
19. createChildComponents • When rendered, all children are destroyed • Before rendering, call createChildComponents • Lets us re-create children safely Monday, May 6, 13
20. onRendered • DOM elements exist! • Might be “offline”, they don’t yet have dimensions. Monday, May 6, 13
21. 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
22. 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
23. onDestroyed • You’re going away • Cleanup Monday, May 6, 13
24. Demo/Questions Monday, May 6, 13
25. 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
26. Thanks! Monday, May 6, 13