Patterns For React Application Design
-
Upload
ian-thomas -
Category
Technology
-
view
185 -
download
1
Transcript of Patterns For React Application Design
![Page 1: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/1.jpg)
PATTERNS FOR REACT APPLICATION DESIGN
Leeds JS March 29th 2017
![Page 2: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/2.jpg)
LEVELS OF EXPERIENCE?How familiar are you with…
• React
• Redux/Flux
• Observables
• Testing
• Functional Programming
![Page 3: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/3.jpg)
WHY REACT?
![Page 4: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/4.jpg)
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…
![Page 5: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/5.jpg)
COMPONENT TYPES
![Page 6: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/6.jpg)
ES6 CLASSESOTHERWISE KNOWN AS STATEFUL COMPONENTS
![Page 7: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/7.jpg)
FUNCTIONAL STATELESS COMPONENTSALSO KNOWN AS FUNCTIONS!
![Page 8: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/8.jpg)
JSX
![Page 9: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/9.jpg)
UNDERNEATH THE SYNTAX, IT’S JUST FUNCTIONS
![Page 10: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/10.jpg)
![Page 11: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/11.jpg)
INTRODUCING REACT INTO A CODEBASE
![Page 12: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/12.jpg)
“Full scale React in production starts with small scale React in production”
Paraphrasing Richard Feldman @rtfeldman
https://www.infoq.com/presentations/elm-producton
![Page 13: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/13.jpg)
“Don’t Rewrite, React”
Ryan Florence, React Europe 2015
![Page 14: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/14.jpg)
![Page 15: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/15.jpg)
![Page 16: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/16.jpg)
![Page 17: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/17.jpg)
![Page 18: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/18.jpg)
![Page 19: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/19.jpg)
MAKE YOUR APP’S INTERFACEA REACT COMPONENTINJECT DEPENDENCIES AS PROPS AND USE LIFECYCLE METHODS
![Page 20: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/20.jpg)
![Page 21: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/21.jpg)
WORKING WITH COMPONENTS
![Page 22: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/22.jpg)
![Page 23: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/23.jpg)
![Page 24: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/24.jpg)
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
![Page 25: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/25.jpg)
![Page 26: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/26.jpg)
COMPOSITION
![Page 27: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/27.jpg)
“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
![Page 28: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/28.jpg)
![Page 29: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/29.jpg)
![Page 30: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/30.jpg)
![Page 31: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/31.jpg)
LOTS OF CONDITIONAL BRANCHING IS AN INDICATION THAT A COMPONENT NEEDS REFACTORINGCYCLOMATIC COMPLEXITY OF RENDER FUNCTIONS SHOULD BE VERY LOW
![Page 32: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/32.jpg)
Avoid imperative render functions by liberally using components
![Page 33: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/33.jpg)
FUNCTIONAL COMPOSITION
![Page 34: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/34.jpg)
![Page 35: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/35.jpg)
![Page 36: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/36.jpg)
https://jsbin.com/cobamew/edit?js,output
![Page 37: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/37.jpg)
“It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures..”
Alan Perlis
![Page 38: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/38.jpg)
![Page 39: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/39.jpg)
HIGHER ORDER COMPONENTS
![Page 40: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/40.jpg)
AN EXAMPLE OF ELIMINATING HIDDEN STATE
![Page 41: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/41.jpg)
![Page 42: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/42.jpg)
![Page 43: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/43.jpg)
![Page 44: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/44.jpg)
https://jsbin.com/rekeqi/edit?js,console,output
![Page 45: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/45.jpg)
![Page 46: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/46.jpg)
EXTRACT LOW LEVEL DESIGN LANGUAGE
![Page 47: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/47.jpg)
![Page 48: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/48.jpg)
ENCAPSULATE CSS
![Page 49: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/49.jpg)
![Page 50: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/50.jpg)
CSS IN JS OPTIONS
• Aphrodite
• Glamour
• Styled-Components
• Styled-JSX
![Page 51: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/51.jpg)
STATE MANAGEMENT
![Page 52: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/52.jpg)
START SIMPLE
![Page 53: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/53.jpg)
STATE MANAGEMENT
• Stateful components
• Observables
• Redux
![Page 54: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/54.jpg)
USING “SETSTATE”STANDARD USAGE IS TO PROVIDE AN OBJECT WHICH IS SHALLOW MERGED INTO EXISTING STATE, TRIGGERING RENDER LIFECYCLE
![Page 55: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/55.jpg)
BEWARE, ASYNC
![Page 56: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/56.jpg)
![Page 57: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/57.jpg)
![Page 58: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/58.jpg)
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
![Page 59: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/59.jpg)
OBSERVABLES
![Page 60: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/60.jpg)
![Page 61: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/61.jpg)
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan
![Page 62: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/62.jpg)
![Page 63: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/63.jpg)
![Page 64: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/64.jpg)
![Page 65: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/65.jpg)
![Page 66: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/66.jpg)
REDUX
![Page 67: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/67.jpg)
![Page 68: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/68.jpg)
GROUP ACTIONS, REDUCER, CONSTANTS,ETC. BY FEATURE
![Page 69: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/69.jpg)
KEEP INITIAL STATE AND “SELECTORS” WITH REDUCER CODEIDIOMATIC USAGE OF THE REDUX PATTERN WILL RESULT IN A BETTER STRUCTURE FOR YOUR APPLICATION
![Page 70: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/70.jpg)
FAVOUR DESTRUCTURING
![Page 71: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/71.jpg)
![Page 72: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/72.jpg)
SIDE EFFECTS
![Page 73: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/73.jpg)
![Page 74: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/74.jpg)
![Page 75: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/75.jpg)
Redux-Saga allows you to think about your app as a black box where side effects are pushed outside the
core application logic
![Page 76: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/76.jpg)
TESTING
![Page 77: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/77.jpg)
Removing side effects and working extensively with pure functions will make testing simpler
and more effective
![Page 78: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/78.jpg)
SNAPSHOTS
![Page 79: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/79.jpg)
![Page 80: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/80.jpg)
Keeping logic outside components makes testing easier: use fixtures and snapshots to make
render testing quick and simple
![Page 81: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/81.jpg)
WHAT NEXT?
![Page 82: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/82.jpg)
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)
![Page 83: Patterns For React Application Design](https://reader034.fdocuments.in/reader034/viewer/2022042723/58e4a4521a28abf5428b6ab5/html5/thumbnails/83.jpg)
THANK YOUIan Thomas – Principal Engineer, Sky Betting & Gaming
@anatomic