patterns for react application design

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