Masz do napisania kod i nie wiesz, od czego zacząć? Jak zaplanować jego działanie? Rozpisz kod na kartce, a od razu wszystko wyda się bardziej ułożone. Gwarantuję!
Ale jak to “kod na kartce”?
Kiedy pierwszy raz usłyszałam o tym, by rozpisać działanie kodu, zanim usiądę do samego kodowania, wydało mi się to dziwne. Przecież programuje się na komputerze, a nie na kartce! Co mi to da? Po prostu siadałam od razu do klawiatury i kombinowałam. Dopiero gdy w pracy musiałam zmieniać jednocześnie bardzo wiele metod w wielu plikach, przeprosiłam się z kartką papieru. Mechanizmy działania niektórych funkcjonalności były dla mnie nie do ogarnięcia, dopóki dokładnie ich nie rozpisałam.
Od tego czasu zaczęłam robić schemat działania kodu, zanim usiądę do pisania. Staram się to ćwiczyć za każdym razem, jak mam okazję. Dzięki temu o wiele łatwiej pisze mi się kod. A jak się zgubię, mam gdzie wrócić i sprawdzić, jak to wszystko powinno działać.
Jak to dokładnie działa?
Nie chodzi tutaj o zapisywanie na kartce faktycznego kodu. Zapisuję logikę, schemat działania programu. Najlepiej to zilustrować na przykładach.
Maj 20, 2020 o 2:27 PDT
Powyższy schemat zrobiłam na potrzeby wytłumaczenia tego, jak zabieram się za rozpisywanie tego, co będzie się działo w kodzie. Po prawej strony widać bardzo prosty układ strony – mamy trzy kolumny z tekstem, a pod każdym polem tekstowym znajduje się przycisk “Czytaj więcej”. Po naciśnięciu tego przycisku ma się pokazać więcej tekstu. Jednocześnie tekst na przycisku ma się wtedy zmienić na “Czytaj mniej”.
Po lewej stronie na zdjęciu rozpisałam bardzo wstępny schemat działania. Jak widać, czekam na kliknięcie użytkownika w któryś z przycisków, a potem przechodzę do dalszych kroków. Po kliknięciu muszę znaleźć element, który został kliknięty, a także ten, który ma zostać pokazany/schowany oraz przycisk. Te elementy zapisuję do zmiennych i działam dalej. Jak chcesz posłuchać o całym procesie, odsyłam
.
Nie wchodziłam w tym schemacie w bardzo małe szczegóły, opisałam ogólnie to, co ma robić mój kod. Zadanie było w miarę nieskomplikowane, więc w takim przypadku starcza właśnie takie ogólne rozpisanie działania.
A co, gdy kod będzie bardziej złożony?
Z bardziej złożonym kodem robię dokładnie tak samo w pierwszym etapie. Dorzucam potem etap drugi, w którym wchodzę w detale. Dokładnie wygląda to tak:
Maj 27, 2020 o 9:47 PDT
W powyższym przykładzie zadanie było już bardziej złożone: chodziło o pobranie z bazy danych cytatu i wyświetlenie go na stronie. Miałam endpoint, który zwracał dokładnie jeden cytat. Po wejściu na stronę użytkownik miał widzieć pierwszy cytat, a po kliknięciu na przycisk miał zostać wylosowany kolejny. jeżeli pobrany z API cytat pojawił się w poprzednich 50 wyświetlonych cytatach, miał zostać pominięty i zastąpiony kolejnym, pobranym z bazy.
Ten kod miał o wiele więcej możliwych ścieżek do rozrysowania niż prosty schemat z pierwszego zdjęcia. Najpierw stworzyłam schemat, który widać na dole. Starałam się rozpisać każdą możliwą ścieżkę, jaką może pójść mój kod. Wzięłam pod uwagę też takie rzeczy, jak np. błąd z bazy danych przy pobieraniu cytatu.
Drugim etapem było wypisane wstępnych nazw metod, które chciałam stworzyć w kodzie (górna część ze zdjęcia). Dzięki temu miałam mniej więcej nakreślony podział, jaki chcę zastosować w kodzie. Wypisałam sobie też tzw. “bulk actions”, czyli akcje, które zbierają w sobie kilka innych i występują razem. Dokładnie proces omówiłam
.
Pracując ze schematem ze zdjęcia, stworzyłam ten kod. Jest on napisany w czystym JS. Zadanie pochodzi z kursu Vanilla JS Academy, na którym właśnie jestem. Jak zobaczysz, niektóre nazwy metod pozmieniałam, a niektórych nie wykorzystałam. Jednak wypisywanie ich na kartce spełniło dla mnie rolę porządkującą dolny schemat. Schemat pomógł mi także przy szukaniu rozwiązania dla błędu, z którym walczyłam. Dzięki prześledzeniu napisanej wcześniej logiki, mogłam w miarę gwałtownie odnaleźć, gdzie leży błąd.
A czy Ty rozpisujesz schemat działania kodu na kartce?
Jeśli tak, daj znać, czy masz jakieś sprawdzone praktyki z tym związane. Bardzo chętnie o nich poczytam. Najlepiej napisz do mnie
albo wyślij maila na joanna[at]wakeupandcode.pl.
Jak nie korzystałaś/korzystałeś jeszcze z tej metody pracy z kodem, ogromnie Cię do niej zachęcam. Potrafi naprawdę wiele uporządkować i ułatwić programowanie!
Chcesz poczytać więcej o uczeniu się? Zajrzyj do tego wpisu.
