react without redux - mixmax · 2020-03-11 · history of front-end @ mixmax 1. speed, simplicity...
TRANSCRIPT
![Page 1: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/1.jpg)
React without Redux
Spencer Brown (@nworbrecneps) - 10/4/2017
![Page 2: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/2.jpg)
Hello!● Spencer Brown
● Software Engineer @ Mixmax
● We’re hiring!
![Page 3: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/3.jpg)
History of front-end @ Mixmax1. Speed, simplicity → MeteorJS
2. Microservices & server-side rendering → Backbone.js & Handlebars
3. Complex UI for scheduling, analytics, etc. → problems → ?
![Page 4: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/4.jpg)
Backbone is imperative
![Page 5: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/5.jpg)
![Page 6: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/6.jpg)
These issues affected user experience
![Page 7: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/7.jpg)
Three solutions● Use Backbone differently
● Replace Backbone entirely
● Replace Backbone’s view layer
![Page 8: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/8.jpg)
Use Backbone differently● Decompose views
● Update DOM outside of Backbone.View#render
![Page 9: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/9.jpg)
![Page 10: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/10.jpg)
Replace Backbone entirely● Possible benefit from going all-in?
● $$$
![Page 11: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/11.jpg)
Replace Backbone’s view layer● Keep Backbone’s data storage & logic; replace
its view layer
● Less rewriting
● Weird patterns?
![Page 12: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/12.jpg)
Solution: replace Backbone’s view layerNext step: evaluate view frameworks
![Page 13: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/13.jpg)
Framework requirements● Interoperates with Backbone Models and
Collections
● Doesn’t require rewriting existing views or routing
● Mature/well-backed
![Page 14: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/14.jpg)
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!
![Page 15: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/15.jpg)
Using React● All new features in React
● Other views replaced over time, bottom-up
● connect-backbone-to-react
![Page 16: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/16.jpg)
![Page 17: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/17.jpg)
Flux-like architecture
connect-backbone-to-reactFlux
connected component
Backbone model(s)
`save` called
API
![Page 18: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/18.jpg)
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
![Page 19: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/19.jpg)
You might not need ReduxWe’re getting all of React’s benefits without Redux
![Page 20: React without Redux - Mixmax · 2020-03-11 · History of front-end @ Mixmax 1. Speed, simplicity → MeteorJS 2. Microservices & server-side rendering → Backbone.js & Handlebars](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c4d0b079c4261e118880a/html5/thumbnails/20.jpg)
Thanks!
Spencer Brown (@nworbrecneps) - 10/4/2017