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

Justin Tulloss

April 25, 2013

More Decks by Justin Tulloss

Other Decks in Programming


  1. Responsibilities • Render itself • Respond to user interactions •

    Manipulate data (the model) Monday, May 6, 13
  2. 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
  3. 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
  4. 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
  5. createChildComponents • When rendered, all children are destroyed • Before

    rendering, call createChildComponents • Lets us re-create children safely Monday, May 6, 13
  6. onRendered • DOM elements exist! • Might be “offline”, they

    don’t yet have dimensions. Monday, May 6, 13
  7. 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
  8. 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
  9. 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