React without Redux

Spencer Brown (@nworbrecneps) - 10/4/2017

Hello!● Spencer Brown

● Software Engineer @ Mixmax

● We’re hiring!

History of front-end @ Mixmax1. Speed, simplicity → MeteorJS

2. Microservices & server-side rendering → Backbone.js & Handlebars

3. Complex UI for scheduling, analytics, etc. → problems → ?

Backbone is imperative

These issues affected user experience

Three solutions● Use Backbone differently

● Replace Backbone entirely

● Replace Backbone’s view layer

Use Backbone differently● Decompose views

● Update DOM outside of Backbone.View#render

Replace Backbone entirely● Possible benefit from going all-in?

● $$$

Replace Backbone’s view layer● Keep Backbone’s data storage & logic; replace

its view layer

● Less rewriting

● Weird patterns?

Solution: replace Backbone’s view layerNext step: evaluate view frameworks

Framework requirements● Interoperates with Backbone Models and

Collections

● Doesn’t require rewriting existing views or routing

● Mature/well-backed

Frameworks● Ractive, Preact, Inferno, etc.: Too immature

● Vue: Less mature and less intuitive for designers than React

● Angular: Widely used, but doesn’t play well with Backbone and has a steep learning curve

● React: Fulfills all our requirements!

Using React● All new features in React

● Other views replaced over time, bottom-up

● connect-backbone-to-react

Flux-like architecture

connect-backbone-to-reactFlux

connected component

Backbone model(s)

`save` called

API

connected component

Backbone model(s)

`save` called

API

API

updateTask() { this.props.model.save({ foo: ‘bar’ }) .then(() => { // … });}

TaskModel

<BackboneProvider models={{ task: this.task }}> <SalesforceDetails /></BackboneProvider>

Provider used in top-level component

A Backbone Model

Update logic in a downstream component

export default connectBackboneToReact(({ task }) => { return { task };})(SalesforceDetails);

In SalesforceDetails

You might not need ReduxWe’re getting all of React’s benefits without Redux

Thanks!

Spencer Brown (@nworbrecneps) - 10/4/2017