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.

Oleksii Levzhynskyi "Solving behavioral complexity with FRP"

96 views

Published on

At Grammarly, we have tried different approaches to handle behavioral complexity. We made a long journey from callback hell to FRP, and from dynamic to static typing. We will discuss how FRP helped us build stable high-loaded front-end applications with complex async actions for millions of daily users.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Oleksii Levzhynskyi "Solving behavioral complexity with FRP"

  1. 1. Solving behavioral complexity with FRP Oleksii Levzhynskyi Grammarly
  2. 2. • Web Editor • Desktop Editor • Web Extension (past) • @grammarly/focal contributor Oleksii Levzhynskyi
  3. 3. Chapter #1 Complexity.
  4. 4. Email validation
  5. 5. ((([t ]*rn)?[t ]+)?[-!#-'*+/-9=?A-Z^- ~]+(.[-!#-'*+/-9=?A-Z^-~]+)*(([t ]*rn)?[t ]+)?|(([t ]*rn)?[t ]+)?"(((([t ]*rn)?[t ]+)?([]!#-[^-~]|([t -~])))+(([t ]*rn)?[t ]+)?|(([t ]*rn)?[t ]+)?)"(([t ]*rn)?[t ]+)?)@((([t ]*rn)?[t ]+)?[-!#- '*+/-9=?A-Z^-~]+(.[-!#-'*+/-9=?A-Z^- ~]+)*(([t ]*rn)?[t ]+)?|(([t ]*rn)?[t ]+)?[((([t ]*rn)?[t ]+)?[!-Z^-~])*(([t ]*rn)?[t ]+)?](([t ]*rn)?[t ]+)?) RFC 5322
  6. 6. 99%
  7. 7. Where it comes from
  8. 8. Where it comes from • => Historically - “front-end is simple”
  9. 9. Where it comes from • Historically - “front-end is simple” • => Incomplete requirements
  10. 10. Where it comes from • Historically - “front-end is simple” • Incomplete requirements • => 3rd parties that force different approaches
  11. 11. Where it comes from • Historically - “front-end is simple” • Incomplete requirements • 3rd parties that force different approaches • => “Small” changes on the middle of development
  12. 12. Where it comes from • Historically - “front-end is simple” • Incomplete requirements • 3rd parties that force different approaches • “Small” changes on the middle of development • => It just complex
  13. 13. Where it comes from • Historically - “front-end is simple” • Incomplete requirements • 3rd parties that force different approaches • “Small” changes on the middle of development • It just complex • => …
  14. 14. How to detect complexity
  15. 15. How to detect complexity • => Challenge requirements
  16. 16. How to detect complexity • Challenge requirements • => Talk with colleagues
  17. 17. How to detect complexity • Challenge requirements • Talk with colleagues • => Architecture design sessions
  18. 18. How to detect complexity • Challenge requirements • Talk with colleagues • Architecture design sessions • => Prototyping
  19. 19. What we are looking for?
  20. 20. Structural complexity https://bit.ly/2u9LsUb
  21. 21. Coupling & Cohesion
  22. 22. Behavioral complexity
  23. 23. Behavioral complexity
  24. 24. Product / Requirements
  25. 25. Async
  26. 26. How to deal • => Callbacks
  27. 27. How to deal • => Callback hell
  28. 28. How to deal • Callback hell • => Promise
  29. 29. How to deal • Callback hell • Promise • => Event emitter
  30. 30. How to deal • Callback hell • Promise • Event emitter • => Flux/Redux
  31. 31. RP “Manages asynchronous data flows between sources of data and components that need to react to that data.”
  32. 32. RP
  33. 33. RP + FP Deal with async data streams in a functional way: • => pure function
  34. 34. RP + FP Deal with async data streams in a functional way: • pure function • => immutable data
  35. 35. RP + FP Deal with async data streams in a functional way: • pure function • immutable data • => composability
  36. 36. RP + FP Deal with async data streams in a functional way: • pure function • immutable data • composability +
  37. 37. FRP “It’s a different way of thinking: the program is expressed as a reaction to its inputs, or as a flow of data.” Stephen Blackheath, Anthony Jones. “Functional Reactive Programming.”
  38. 38. 1. Events
  39. 39. 2. Behaviors
  40. 40. 3. Composition and Transformation
  41. 41. Chapter #2 Real life example
  42. 42. Cards List
  43. 43. Todo • => Cards list • Active card • Animate active card • Animate cards positions • Optimization
  44. 44. Component #3 Component #1 Component #2
  45. 45. CardList Component #3 Component #1 Component #2
  46. 46. Card #3
  47. 47. Card #3
  48. 48. Observable<Card[]>
  49. 49. Too wordy…
  50. 50. F.div = div + observable props
  51. 51. Atom = Behavior
  52. 52. Atom = Behavior
  53. 53. Atom<ReadonlyArray<Card>> => Atom<ReadonlyArray<Atom<Card>>>
  54. 54. ViewModel
  55. 55. Card #3
  56. 56. SortedMap<CardId, Card>
  57. 57. Cards List • [Done] Cards list • => Active card • Animate active card • Animate cards positions • Optimization
  58. 58. State + activeCard
  59. 59. undefined?
  60. 60. Idiomatic handling for empty values
  61. 61. Idiomatic handling for empty values
  62. 62. Use pure functions!
  63. 63. Cards List • [Done] Cards list • [Done] Active card • => Animate active card • Animate cards positions • Optimization
  64. 64. Animate it
  65. 65. <CardAnimation />
  66. 66. <CardAnimation />
  67. 67. Cards List • [Done] Cards list • [Done] Active card • [Done] Animate active card • => Animate cards positions • Optimization
  68. 68. position: absolute top: <N>px transition-property: top
  69. 69. position: absolute top: <N>px transform: translateY(<N>px) transition-property: transform
  70. 70. Composition
  71. 71. Cards List • [Done] Cards list • [Done] Active card • [Done] Animate active card • [Done] Animate cards positions • => Optimization
  72. 72. Interfaces
  73. 73. ResizeObserver ‘scroll’ +
  74. 74. Interfaces
  75. 75. Cards List • [Done] Cards list • [Done] Active card • [Done] Animate active card • [Done] Animate cards positions • [Done] Optimization
  76. 76. Tips
  77. 77. #1 The complexity - is ok
  78. 78. #2 Think about complexity in advance
  79. 79. #3 Expect async
  80. 80. #4 Try FRP to solve it
  81. 81. #4 Try FRP to solve it
  82. 82. Further reading • Reactive manifesto - https://www.reactivemanifesto.org • The complexity trap - https://danielwestheide.com/blog/2018/12/07/the-complexity- trap.html • A quick introduction into FRP - https://medium.freecodecamp.org/functional- reactive-programming-frp-imperative-vs-declarative-vs-reactive-style-84878272c77f • Functional Reactive Programming, Stephen Blackheath and Anthony Jones • Professor frisby's mostly adequate guide to functional programming • https://github.com/gcanti/fp-ts
  83. 83. The End

×