HipChat on React

One Year Later

Mark Lozano

History

Good

Bad

Ugly?

Takeaways

History

  • HipChat adopted React when rewriting our Web App

  • A more complete history can be found here

  • React was super-new ... and so was Flux

Sucesses

  • Rethinking the app as a set of:

    • Components

    • Component-level Stores

    • Series of state changes
       

  • Create an abstraction around client/server traffic
     

  • Make our components idempotent (or "pure")

How React Helped

or, how we flux'd up

Mistakes

Dispatcher Abuse

  • It's reserved for application state

  • It's not a generic EventEmitter

  • Be wary of any Dispatcher use outside of an action

Stores

  • Multiple stores aren't inherently bad

  • But if you let them know about each other you're gonna have a bad time

What React doesn't solve for you

Be mindful

  • DOM updates aren't free

  • Processing on stores happens regardless of render

  • A/B Testing
     

  • Rehacked  was created to solve this problem

If we were doing it now

  • NEVER shortcut unidirectional data flow

  • Data management is huge

  • Awesome view layer !== application architecture

  • React has changed lots over the last year+

  • React Best Practices for 2016

Tips

Questions?

HipChat on React - One Year Later

By Mark Lozano

HipChat on React - One Year Later

Lightning Talk about our experience with React after more than a year of using it on our HipChat web app.

  • 1,830