Legacy React

Jak zrobić refactoring i nie stracić pracy?

Czy w Twoim kodzie czają się smoki?
Boisz się coś zmienić bo zaraz coś na produkcji się wywali?
Chcesz przerobić komponenty klasowe na funkcyjne ale nie wiesz nawet jak zacząć?
Nie wiesz jak przerobić stan, referencje i kontekst na hooki?
Zastanawiasz się jak przerobić componentDidMount w useEffect?
Pożegnaj się z przerabianiem kodu metodą YOLO!

Na tym szkoleniu pokażę Ci techniki refactoringu dzięki którym raz na zawsze przestaniesz się bać legacy code w Reakcie.

Pokażę Ci jak tworzyć szybkie testy komponentów, które dadzą Ci pewność, że Twoje zmiany nic nie popsują.

Poznasz metodę małych kroków, która commit po commicie zaprowadzi Cię do lepszego kodu.

Zapraszam 🙂

Transcript

2. TY PRZED SZKOLENIEM ❌ Strach przed refactoringiem ❌ Obawa przed deploymentem ❌ Złe doświadczenia 
 (refactoring metodą YOLO HURRA czasem zawodzi) ❌ Niechęć do dotykania Legacy Kodu ❌ Stres, wypalenie, niechęć do pracy TY PO SZKOLENIU ✓ Radość z refactoringu ✓ Deploymenty w piątek wieczorem 
 (bo czemu nie ;) ✓ Dobre nawyki ✓ Przyjemność pracy z Legacy Kodem ✓ Zero stresu, luz, zadowolenie z pracy
3. ALE JAK? ✓ Umiejętność szybkiego pisania SMOKE TESTÓW ✓ Dyscyplina małych kroków ✓ 100% Pewne techniki refaktoryzacji
4. @MEHOWTE MICHAŁ TASZYCKI KursReacta GraphQL Mastery
6. ZACZYNAMY
7. NA POCZĄTEK
8. PROSTY PRZYKŁAD
10. NO TO JUŻ!
11. NO TO JUŻ!
12. STOP
13. SKĄD WIESZ, ŻE CZEGOŚ NIE ZEPSUJESZ?
14. BEZ TESTÓW NIE RUSZAMY KODU
15. JAKICH TESTÓW?
16. JEDNOSTKOWE? AKCEPTACYJNE? INTEGRACYJNE? E2E?
17. SZKODA CZASU!
18. LEGACY KOD MA SWOJE ZALETY
19. JEST BRZYDKI ALE DZIAŁA!
20. DLATEGO…
21. WYKONAMY TEST DYMIENIA
22. SMOKE TESTS
23. SMOKE TESTS Podłącz urządzenie do prądu. Jeśli nie dymi - test przeszedł :D
24. SMOKE TESTS Nagraj zachowanie programu. Ma działać jak wcześniej.
25. TESTUJEMY
26. DANE WEJŚCIOWE
27. DANE WYJŚCIOWE
28. SMOKE TESTS DANE WEJŚCIOWE
29. SMOKE TESTS DANE WYJŚCIOWE
30. SMOKE TESTS WRZUCAMY NA WEJŚCIE CO SIĘ DA
31. SMOKE TESTS NAGRYWAMY WYNIKI
32. SMOKE TESTS MAM GDZIEŚ CO SIĘ TAM RENDERUJE
33. SMOKE TESTS WAŻNE, ŻE TO CO WCZEŚNIEJ
34. CZAS NA REFACTORING
35. KROK 0/2 ZMIANA NAZWY
36. KROK 0/2 ZMIANA NAZWY
37. KROK 1/2 CONST PROPS
38. POZBYWAMY SIĘ THIS KROK 1/2 CONST PROPS
39. TU JEST THIS KROK 1/2 CONST PROPS
40. TU NIE MA KROK 1/2 CONST PROPS
41. KROK 2/2 KOMPONENT FUNKCYJNY
42. PROPS KROK 2/2 KOMPONENT FUNKCYJNY
43. KROK 2/2 KOMPONENT FUNKCYJNY
44. KAŻDY KROK TO MAŁA ZMIANA
45. TESTY PRZECHODZĄ PO KAŻDYM KROKU
46. NIE UAKTUALNIAMY SNAPSHOTÓW!!!
47. PO KAŻDYM KROKU ROBIMY COMMIT
48. CZAS NA COŚ TRUDNIEJSZEGO
49. STATE EVENT HANDLER
53. SMOKE TESTS
54. SMOKE TESTS WRZUCAMY NA WEJŚCIE CO SIĘ DA
55. SMOKE TESTS NAGRYWAMY WYNIKI
56. KROK 1/9 CONST HANDLE SUBMIT
57. KROK 1/9 CONST HANDLE SUBMIT
58. KROK 1/9 CONST HANDLE SUBMIT
59. KROK 1/9 CONST HANDLE SUBMIT
60. KROK 2/9 LOKALNY EVENT HANDLER
61. KROK 2/9 LOKALNY EVENT HANDLER
62. KROK 2/9 LOKALNY EVENT HANDLER UWAGA: TESTY WYDAJNOŚCIOWE PO TYM ETAPIE
63. KROK 3/9 CONST STATE
64. KROK 3/9 CONST STATE
65. KROK 3/9 CONST STATE
66. KROK 3/9 CONST STATE
67. KROK 3/9 CONST STATE
68. KROK 4/9 DESTRU KTURY ZACJA STANU
69. KROK 4/9 DESTRU KTURY ZACJA STANU
70. KROK 4/9 DESTRU KTURY ZACJA STANU
71. KROK 5/9 CONST PROPS
72. KROK 5/9 CONST PROPS
73. KROK 5/9 CONST PROPS
74. TA CZĘŚĆ JEST JUŻ GOTOWA
75. JEDZIEMY DO GÓRY
76. JEDZIEMY DO GÓRY
77. KROK 6/9 JUST PROPS
78. KROK 6/9 JUST PROPS
79. KROK 6/9 JUST PROPS
80. KROK 7/9 KOMPONENT FUNKCYJNY
81. KROK 7/9 KOMPONENT FUNKCYJNY
82. KROK 7/9 KOMPONENT FUNKCYJNY
83. KROK 7/9 KOMPONENT FUNKCYJNY
84. UWAGA! USE STATE NIE ZADZIAŁA KROK 7/9 KOMPONENT FUNKCYJNY
85. KROK 8/9 POZBYWAMY SIĘ LEGACY STATE
86. KROK 8/9 POZBYWAMY SIĘ LEGACY STATE
87. KROK 9/9 USE CALLBACK (OPCJONALNIE)
88. KROK 9/9 USE CALLBACK (OPCJONALNIE)
89. PÓJDŹMY O KROK DALEJ
90. REFS COMPONENT DID MOUNT COMPONENT DID UPDATE
93. SMOKE TESTS
94. SMOKE TESTS WRZUCAMY NA WEJŚCIE CO SIĘ DA
95. SMOKE TESTS NAGRYWAMY REZULTAT
96. KROK 1/3 METODA POMOCNICZA EFFECT
97. TEN SAM KOD KROK 1/3 METODA POMOCNICZA EFFECT
98. KROK 1/3 METODA POMOCNICZA EFFECT
99. KROK 2/3 CONST REF PROPS
100. TU JEST THIS KROK 2/3 CONST REF PROPS
101. KROK 2/3 CONST REF PROPS TU NIE MA!
102. KROK 3/3 KOMPONENT FUNKCYJNY
103. PROPS KROK 3/3 KOMPONENT FUNKCYJNY
104. USE REF KROK 3/3 KOMPONENT FUNKCYJNY
105. USE EFFECT KROK 3/3 KOMPONENT FUNKCYJNY
106. KROK 3/3 KOMPONENT FUNKCYJNY
107. A KONTEKST, A ZMIENNE INSTANCJI?
108. PROVIDER
109. CONSUMER
110. SMOKE TESTS
111. SMOKE TESTS TESTUJEMY OBA NA RAZ
112. SMOKE TESTS WEJŚCIE = AKTUALNY CZAS
113. SMOKE TESTS WRZUCAMY NA WEJŚCIE CO SIĘ DA
114. SMOKE TESTS NAGRYWAMY REZULTAT
115. SMOKE TESTS
116. SMOKE TESTS TESTUJEMY UPŁYW CZASU
117. CONSUMER
118. USE CONTEXT KROK 1/1 KOMPONENT FUNKCYJNY
119. KROK 1/1 KOMPONENT FUNKCYJNY
120. PROVIDER
121. KROK 1/6 CONST PROPS STATE
122. KROK 1/6 CONST PROPS STATE
123. KROK 2/6 ZMIENNE 
 INSTANCJI 
 PRZERÓB NA REF
124. KROK 2/6 ZMIENNE 
 INSTANCJI 
 PRZERÓB NA REF
125. KROK 2/6 ZMIENNE 
 INSTANCJI 
 PRZERÓB NA REF
126. KROK 3/6 CONST REF
127. KROK 3/6 CONST REF
128. KROK 4/6 KOMPONENT FUNKCYJNY
129. PROPS KROK 4/6 KOMPONENT FUNKCYJNY
130. USE LEGACY STATE KROK 4/6 KOMPONENT FUNKCYJNY
131. USE EFFECT Z PUSTYMI ZALEŻNOŚCIAMI KROK 4/6 KOMPONENT FUNKCYJNY
132. DESTRUKTOR USE EFFECT KROK 4/6 KOMPONENT FUNKCYJNY
133. KROK 4/6 KOMPONENT FUNKCYJNY
134. KROK 5/6 ZMIEŃ REF NA CONST
135. KROK 5/6 ZMIEŃ REF NA CONST
136. KROK 5/6 ZMIEŃ REF NA CONST
137. KROK 6/6 POZBĄDŹ SIĘ LEGACY STATE
138. KROK 6/6 POZBĄDŹ SIĘ LEGACY STATE
139. KROK 6/6 POZBĄDŹ SIĘ LEGACY STATE
140. OK
141. KONIEC ZABAWY
142. CZAS NA NAJTRUDNIEJSZY KOMPONENT…
145. SMOKE TESTS
146. KROK 1/8 CONST EVENT HANDLER STATE SET STATE
147. KROK 1/8 CONST EVENT HANDLER STATE SET STATE
148. KROK 1/8 CONST EVENT HANDLER STATE SET STATE
149. KROK 2/8 DODAJ ZMIENNĄ INSTANCJI EFFECTS COUNT PIERWSZY EFFECT
150. KAŻDY KOLEJNY EFFECT KROK 2/8 DODAJ ZMIENNĄ INSTANCJI EFFECTS COUNT
151. KROK 2/8 DODAJ ZMIENNĄ INSTANCJI EFFECTS COUNT
152. PIERWSZY EFFECT KROK 2/8 DODAJ ZMIENNĄ INSTANCJI EFFECTS COUNT
153. KAŻDY KOLEJNY EFFECT KROK 2/8 DODAJ ZMIENNĄ INSTANCJI EFFECTS COUNT
154. KROK 3/8 SKOPIUJ IFY
155. KROK 3/8 SKOPIUJ IFY
156. TEN SAM KOD KROK 3/8 SKOPIUJ IFY
157. KROK 4/8 METODA POMOCNICZA EFFECT
158. KROK 4/8 METODA POMOCNICZA EFFECT
159. KROK 5/8 ZMIENNIE INSTANCJI PRZERÓB NA REF
160. KROK 5/8 ZMIENNIE INSTANCJI PRZERÓB NA REF
161. KROK 5/8 ZMIENNIE INSTANCJI PRZERÓB NA REF
162. KROK 6/8 KOMPONENT FUNKCYJNY
163. USE LEGACY STATE KROK 6/8 KOMPONENT FUNKCYJNY
164. USE REF KROK 6/8 KOMPONENT FUNKCYJNY
165. USE EFFECT KROK 6/8 KOMPONENT FUNKCYJNY
166. KROK 6/8 KOMPONENT FUNKCYJNY
167. KROK 7/8 UPROŚĆ USE EFFECT
168. KROK 7/8 UPROŚĆ USE EFFECT
169. KROK 8/8 POZBĄDŹ SIĘ LEGACY STATE
170. KROK 8/8 POZBĄDŹ SIĘ LEGACY STATE
171. KROK 8/8 POZBĄDŹ SIĘ LEGACY STATE
172. PODSUMUJMY
173. JAK BEZSTRESOWO REFAKTORYZOWAĆ?
174. 1. SMOKE TESTS
175. 2. PRZENOSIMY HANDLERY DO RENDER
176. 3. UJEDNOLICAMY EFEKTY
177. 4. TWORZYMY STAŁE LOKALNE (PROPS, STATE, HANDLERS, REFS, CONTEXT)
178. 5. PRZERABIAMY KOMPONENT
179. 6. UPIĘKSZAMY KOD
180. 1. PISZEMY TESTY - SMOKE TESTS 2. PRZENOSIMY HANDLERY DO RENDER 3. UJEDNOLICAMY EFEKTY 4. TWORZYMY STAŁE LOKALNE (PROPS, STATE, HANDLERS, REFS, CONTEXT) 5. PRZERABIAMY KOMPONENT 6. UPIĘKSZAMY KOD BEZSTRESOWY REFACTORING