Back to React

Given at the 2017 React Rally Conference.

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

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 …
17. Until the Missing Piece began to grow.
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."
32. SO, BACK TO REACT
34. The V in MVC™
40. REACT IS A GOOD MISSING PIECE
41. 2014 (MY BIG O MOMENT)
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)
60. REACT
61. REACT++
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 />
89. KEEP IT LIVE
90. DON'T PERF W/O METRICS
91. 3 KNOW YOUR SHAPES
92. 3 MASTER THE PATTERNS
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.”
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
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
127. @chantastic
128. @chantastic LEARNREACT.COM