Talk given at Leeds JS in March 2017 covering topics such as state management, types of components, functional techniques and unit testing of React applications.

1. PATTERNS FOR REACT
APPLICATION DESIGN
Leeds JS March 29th 2017

2. LEVELS OF EXPERIENCE?
How familiar are you with…
• React
• Redux/Flux
• Observables
• Testing
• Functional Programming

3. WHY REACT?

4. 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…

5. COMPONENT TYPES

6. ES6 CLASSES
OTHERWISE KNOWN AS STATEFUL COMPONENTS

7. FUNCTIONAL STATELESS COMPONENTS
ALSO KNOWN AS FUNCTIONS!

8. JSX

9. UNDERNEATH THE SYNTAX, IT’S JUST FUNCTIONS

11. INTRODUCING REACT INTO A CODEBASE

12. “Full scale React in production starts with small scale
React in production”
Paraphrasing Richard Feldman @rtfeldman
https://www.infoq.com/presentations/elm-producton

13. “Don’t Rewrite, React”
Ryan Florence, React Europe 2015

19. MAKE YOUR APP’S INTERFACE
A REACT COMPONENT
INJECT DEPENDENCIES AS PROPS AND USE LIFECYCLE METHODS

21. WORKING WITH COMPONENTS

24. Try to always separate concerns correctly
Components that know about state shouldn’t output any dom and components
that know about dom should only rely on props provided

26. COMPOSITION

27. “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

31. LOTS OF CONDITIONAL BRANCHING
IS AN INDICATION THAT A
COMPONENT NEEDS REFACTORING
CYCLOMATIC COMPLEXITY OF RENDER
FUNCTIONS SHOULD BEVERY LOW

32. Avoid imperative render functions by
liberally using components

33. FUNCTIONAL COMPOSITION

36. https://jsbin.com/cobamew/edit?js,output

37. “It is better to have 100 functions operate on one data
structure than 10 functions on 10 data structures..”
Alan Perlis

39. HIGHER ORDER COMPONENTS

40. AN EXAMPLE OF ELIMINATING HIDDEN STATE

44. https://jsbin.com/rekeqi/edit?js,console,output

46. EXTRACT LOW LEVEL DESIGN LANGUAGE

48. ENCAPSULATE CSS

50. CSS IN JS OPTIONS
• Aphrodite
• Glamour
• Styled-Components
• Styled-JSX

51. STATE MANAGEMENT

52. START SIMPLE

53. STATE MANAGEMENT
• Stateful components
• Observables
• Redux

54. USING “SETSTATE”
STANDARD USAGE IS TO PROVIDE AN OBJECT WHICH IS SHALLOW
MERGED INTO EXISTING STATE,TRIGGERING RENDER LIFECYCLE

55. BEWARE, ASYNC

58. 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

59. OBSERVABLES

61. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan

66. REDUX

68. GROUP ACTIONS, REDUCER, CONSTANTS,
ETC. BY FEATURE

69. KEEP INITIAL STATE AND “SELECTORS”
WITH REDUCER CODE
IDIOMATIC USAGE OF THE REDUX PATTERN WILL RESULT
IN A BETTER STRUCTURE FORYOUR APPLICATION

70. FAVOUR DESTRUCTURING

72. SIDE EFFECTS

75. Redux-Saga allows you to think about your app as a
black box where side effects are pushed outside the
core application logic

76. TESTING

77. Removing side effects and working extensively
with pure functions will make testing simpler
and more effective

78. SNAPSHOTS

80. Keeping logic outside components makes testing
easier: use fixtures and snapshots to make
render testing quick and simple

81. WHAT NEXT?

82. 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)

83. THANK YOU
Ian Thomas – Principal Engineer, Sky Betting & Gaming
@anatomic