Save 37% off PRO during our Black Friday Sale! »

Legacy React

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 🙂

85977ebfe59c2ee669f2196930f1a701?s=128

Michał Taszycki

October 26, 2021
Tweet

Transcript

  1. None
  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

  5. None
  6. ZACZYNAMY

  7. NA POCZĄTEK

  8. PROSTY PRZYKŁAD

  9. None
  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

  50. None
  51. None
  52. None
  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

  91. None
  92. None
  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…

  143. None
  144. None
  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