Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Ribs

Intro to Ribs

A cursory overview of the Ribs JS framework

71e1e919a7f3f8c7b97a1c98d3532c69?s=128

Justin Tulloss

April 25, 2013
Tweet

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