Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Back to React

Back to React

Given at the 2017 React Rally Conference.

YouTube video: https://www.youtube.com/watch?v=T9-Mb_axNgA

Ad9e927bce4bd0519631296b5af7af83?s=128

Michael Chan

August 30, 2017
Tweet

Transcript

  1. BACK TO REACT

  2. BACK TO REACT

  3. 5 WAYS TO BE A HAPPY REACT DEVELOPER

  4. START WITH CODE

  5. CATCH FEELS

  6. THE
 MISSING PIECE Meets the BIG O Crappy Keynote

  7. THE
 MISSING PIECE Meets the BIG O Crappy Keynote

  8. THE
 MISSING PIECE Meets the BIG O Crappy Keynote Paraphrased

    & abridged edition
  9. The Missing Piece sat alone…

  10. waiting for someone to take it somewhere.

  11. Some fit but couldn't roll.

  12. Others rolled but didn't fit.

  13. Some had too many pieces missing.

  14. Others had too many pieces, period.

  15. Then, one came along that fit just right …

  16. None
  17. Until the Missing Piece began to grow.

  18. None
  19. Then one came along that looked different.

  20. "I was hoping that I could roll with you…"

  21. "I'm not missing a piece."

  22. "So, you can't roll with me,"

  23. "But you could roll by yourself."

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. SO, BACK TO REACT

  33. None
  34. The V in MVC™

  35. None
  36. None
  37. None
  38. None
  39. None
  40. REACT IS A GOOD MISSING PIECE

  41. 2014 (MY BIG O MOMENT)

  42. None
  43. None
  44. None
  45. “prop drills”

  46. async/shallow setState “prop drills”

  47. async/shallow setState “prop drills” styling

  48. async/shallow setState “prop drills” styling (Context)

  49. async/shallow setState “prop drills” styling (Context)

  50. async/shallow setState styling (Context) big components + better patterns

  51. styling (Context) big components + better patterns RTFM + nothing

    else existed
  52. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS
  53. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS HIGHER TOLERANCE FOR JIT SOLUTIONS
  54. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS MAINTAINABILITY
  55. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS NOBODY ASKS ME ABOUT IT
  56. 2015 (THE YEAR REACT BLEW UP)

  57. None
  58. None
  59. None
  60. REACT

  61. REACT++

  62. None
  63. INSTEAD OF MOVING FAST…

  64. WE WERE MANAGING DEPENDENCIES…

  65. CLARIFYING DESIRED PRACTICES

  66. WE WENT BACKWARD

  67. WHAT CHANGED?

  68. REACT

  69. REACT

  70. #JAVASCRIPTFATIGUE

  71. REACT

  72. —Edsger Dijkstra (On the nature of Computer Science) “Simplicity is

    a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better”
  73. HERE

  74. BEFORE

  75. HERE

  76. FIVE LIBERATING CONSTRAINTS

  77. 1 KNOW WHO’S DRIVING

  78. 1 KNOW WHO’S MOUTH YOU'RE IN

  79. REACT

  80. <script src="./react.js"></script> <script> React.render( React.DOM.div({}, "Hello World!"), document.body ) </script>

  81. REACT REDUX REACT ROUTER

  82. REACT REDUX APP REACT ROUTER

  83. REACT REDUX APP REACT ROUTER REACT-ROUTER-REDUX

  84. REACT FLUX APP REACT ROUTER REACT-ROUTER-FLUX

  85. WHAT ROLE DOES REACT PLAY IN YOUR APP?

  86. 2 OPTIMIZE FOR CHANGE

  87. <RANT />

  88. None
  89. KEEP IT LIVE

  90. DON'T PERF W/O METRICS

  91. 3 KNOW YOUR SHAPES

  92. 3 MASTER THE PATTERNS

  93. None
  94. KNOWING & UNKNOWING

  95. COMPONENT/RENDER PROP

  96. COMPONENT/RENDER PROP

  97. COMPONENT/RENDER PROP

  98. HIGHER-ORDER COMPONENT

  99. HIGHER-ORDER COMPONENT

  100. HIGHER-ORDER COMPONENT

  101. HIGHER-ORDER COMPONENT

  102. HOC VS CALLBACKS

  103. KNOW BOTH

  104. 4 AVOID THE EDGE

  105. –Ryan Florence “Don't forget it's not the edge that's bleeding,

    it's you.”
  106. None
  107. <div style={{ padding: "2rem" }}>

  108. <div css={{ padding: "2rem" }}>

  109. <div className="p-3">

  110. CHOOSE TOOLS YOU CAN MASTER

  111. 5 PARTNER. DON'T DEPEND

  112. None
  113. STOP DELEGATING

  114. WHEN YOU NPM INSTALL, THAT'S YOUR CODE NOW

  115. GET GOOD

  116. SHARE

  117. REACT IS AMAZING

  118. UNITY

  119. GUARD OUR STACK

  120. 1 KNOW WHO’S DRIVING

  121. 2 OPTIMIZE FOR CHANGE

  122. 3 KNOW YOUR SHAPES

  123. 3 MASTER THE PATTERNS

  124. 4 AVOID THE EDGE

  125. 5 PARTNER. DON'T DEPEND

  126. None
  127. @chantastic

  128. @chantastic LEARNREACT.COM

  129. None