Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Patterns in React

1,228 views

Published on

Functional programming principles are the foundation of design patterns in React. Following FP and design patterns in React leads to optimal solutions. Get to know them!

Published in: Technology
  • Be the first to comment

Design Patterns in React

  1. 1. Design Patterns in React 27 June, 2019 Tomasz Bąk tb@tomaszbak.com
  2. 2. Agenda ● Why we need software design patterns? ● Principles of Functional Programming (FP) ● Design patterns in React
  3. 3. What are software design patterns? ● a description or template for how to solve a problem ● they fit between the programming paradigm and a concrete algorithm Programming paradigm (i.e. OOP, functional) Design patterns (i.e. Container Pattern) Algorithm (i.e. your components)
  4. 4. Why we need software design patterns? ● to understand the high-level design of the code ● to apply proven solutions to common problems It is often the case that you won’t need to refactor the code later on because applying the correct design pattern to a given problem is already an optimal solution.
  5. 5. Popular programming design patterns ● Gang of Four (GoF) design patterns https://github.com/fbeline/design-patterns-JS ● S.O.L.I.D. principles https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-or iented-design-with-javascript-790f6ac9b9fa
  6. 6. See more at: Functional programming design patterns by Scott Wlaschin https://vimeo.com/113588389
  7. 7. Principles of Functional Programming (FP) ● Functions are "first class citizens" ● Immutable data structures
  8. 8. Functions composition increase code readability const increment = num => num + 5 const decrement = num => num - 3 const multiply = num => num * 2 const numbersOperation = num => increment(decrement(multiply(num))) console.log(numbersOperation(15)) // 32 Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  9. 9. Functions as parameters increase code flexibility const numbers = [1, 5, 8, 10, 21] const plusOne = num => num + 1 console.log(numbers.map(plusOne)) // [2, 6, 9, 11, 22]
  10. 10. Higher-order functions help to reuse code const numbers = [1, 5, 8, 10, 21] const createAddingFunction = number => arr => arr.map(num => num + number) const numbersPlusOne = createAddingFunction(1) console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  11. 11. Immutability It’s not about forbidding change, but how to handle change. Instead of modifying something you create something new with your change applied.
  12. 12. Immutability unintended objects mutation bug const numbers = [1, 5, 8, 10, 21] const numbersPlusOne = numbers => { for(let i = 0; i < numbers.length; i++) { numbers[i] = numbers[i] + 1 } return numbers } console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted console.log(numbers) // [2, 6, 9, 11, 22] - the side effect we did not want! Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  13. 13. Immutability create new data instead of changing data const numbers = [1, 5, 8, 10, 21] const createAddingFunction = number => arr => arr.map(num => num + number) const numbersPlusOne = createAddingFunction(1) console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted console.log(numbers) // [1, 5, 8, 10, 21] - numbers are not changed by function! Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  14. 14. Design patterns in React ● Components ● Data-Down, Actions-Up
  15. 15. React Component Patterns by Michael Chan https://www.youtube.com/watch?v=YaZg8wg39QQ ● Stateful component ● Stateless component ● Container component ● Higher-order component ● Render props
  16. 16. reactpatterns.com ● Function component ● Destructuring props ● JSX spread attributes ● Merge destructured props with other values ● Conditional rendering ● Children types ● Array as children ● Function as children ● Render prop ● Children pass-through ● Proxy component ● Style component ● Event switch ● Layout component ● Container component ● Higher-order component ● State hoisting ● Controlled input
  17. 17. github.com/vasanthk/react-bits ● Conditional in JSX ● Async Nature Of setState() ● Dependency Injection ● Context Wrapper ● Event Handlers ● Flux Pattern ● One Way Data Flow ● Presentational vs Container ● Third Party Integration ● Passing Function To setState() ● Decorators ● Feature Flags ● Component Switch ● Reaching Into A Component ● List Components ● Format Text via Component ● Share Tracking Logic ● Toggle UI Elements ● HOC for Feature Toggles ● HOC props proxy ● Wrapper Components ● Display Order Variations
  18. 18. Data-Down, Actions-Up
  19. 19. Summary Functional programming principles are the foundation of design patterns in React. Following FP and design patterns in React leads to optimal solutions. Get to know them!

×