patterns for react application design
TRANSCRIPT
PATTERNS FOR REACT APPLICATION DESIGN
Leeds JS March 29th 2017
LEVELS OF EXPERIENCE?How familiar are you with…
• React
• Redux/Flux
• Observables
• Testing
• Functional Programming
WHY REACT?
WHY REACT?
• UI as a representation of state (declarative)
• Simple to implement highly-interactive applications
• Just a library, offers flexibility of implementation
• Helps people become better JavaScript developers
• Easy to test
• Component approach encourages composition…
COMPONENT TYPES
ES6 CLASSESOTHERWISE KNOWN AS STATEFUL COMPONENTS
FUNCTIONAL STATELESS COMPONENTSALSO KNOWN AS FUNCTIONS!
JSX
UNDERNEATH THE SYNTAX, IT’S JUST FUNCTIONS
INTRODUCING REACT INTO A CODEBASE
“Full scale React in production starts with small scale React in production”
Paraphrasing Richard Feldman @rtfeldman
https://www.infoq.com/presentations/elm-producton
“Don’t Rewrite, React”
Ryan Florence, React Europe 2015
MAKE YOUR APP’S INTERFACEA REACT COMPONENTINJECT DEPENDENCIES AS PROPS AND USE LIFECYCLE METHODS
WORKING WITH COMPONENTS
Try to always separate concerns correctlyComponents that know about state shouldn’t output any dom and components
that know about dom should only rely on props provided
COMPOSITION
“Favor object composition over class inheritance…
...You should be able to get all the functionality you need just by assembling existing components through
object composition.”
Gamma et al, 1994
LOTS OF CONDITIONAL BRANCHING IS AN INDICATION THAT A COMPONENT NEEDS REFACTORINGCYCLOMATIC COMPLEXITY OF RENDER FUNCTIONS SHOULD BE VERY LOW
Avoid imperative render functions by liberally using components
FUNCTIONAL COMPOSITION
https://jsbin.com/cobamew/edit?js,output
“It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures..”
Alan Perlis
HIGHER ORDER COMPONENTS
AN EXAMPLE OF ELIMINATING HIDDEN STATE
https://jsbin.com/rekeqi/edit?js,console,output
EXTRACT LOW LEVEL DESIGN LANGUAGE
ENCAPSULATE CSS
CSS IN JS OPTIONS
• Aphrodite
• Glamour
• Styled-Components
• Styled-JSX
STATE MANAGEMENT
START SIMPLE
STATE MANAGEMENT
• Stateful components
• Observables
• Redux
USING “SETSTATE”STANDARD USAGE IS TO PROVIDE AN OBJECT WHICH IS SHALLOW MERGED INTO EXISTING STATE, TRIGGERING RENDER LIFECYCLE
BEWARE, ASYNC
Functions to handle state updates may well be the idiomatic way to update in the future
https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b
OBSERVABLES
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan
REDUX
GROUP ACTIONS, REDUCER, CONSTANTS,ETC. BY FEATURE
KEEP INITIAL STATE AND “SELECTORS” WITH REDUCER CODEIDIOMATIC USAGE OF THE REDUX PATTERN WILL RESULT IN A BETTER STRUCTURE FOR YOUR APPLICATION
FAVOUR DESTRUCTURING
SIDE EFFECTS
Redux-Saga allows you to think about your app as a black box where side effects are pushed outside the
core application logic
TESTING
Removing side effects and working extensively with pure functions will make testing simpler
and more effective
SNAPSHOTS
Keeping logic outside components makes testing easier: use fixtures and snapshots to make
render testing quick and simple
WHAT NEXT?
THINGS TO BE EXCITED ABOUT**MAYBE THINGS JUST TO HAVE A LOOK AT
• ADTs (http://www.tomharding.me/2017/03/03/fantas-eel-and-specification/)
• Preact, Inferno, (Elm?)
• Tree Shaking
• React Router
• Next.js
• React Fiber (https://github.com/acdlite/react-fiber-architecture)
THANK YOUIan Thomas – Principal Engineer, Sky Betting & Gaming
@anatomic