Jak zaprojektować apkę SPA w React? (1)

-
Kilka luźnych tipów (chcę je później zebrać w coś bardziej zorganizowanego, na razie tak tylko sobie piszę).
  • kartka twoim przyjacielem. Jak chcesz, to możesz korzystać z apek do diagramów (będzie łatwiej się podzielić z innymi), anyway chodzi o to, żeby sobie rozrysować to wizualnie, co będziesz mieć w tej apce, jak będzie się to wszystko ze sobą wiązać i komunikować.
  • pomyśl o rodzajach danych. - nie wiem, czy to dobre słowo, bo nie chodzi mi o typy danych. Napisałbym struktury danych, ale też nie chodzi mi o struktury danych typu drzewko, graf. Bardziej o to, jakie obiekty dziedzinowe będziesz mieć w apce reprezentowane przez jakieś obiekty. Np. w apce todo list możesz mieć:
    • Task - pojedyncze zadanie z polami `text` czy `isDone`
    • TaskList - lista tych zadań
    • FilterCryteria - czyli które zadania mają być wyświetlane
    • Project - np. "Zrobienie zakupów" to może być projekt, z zadaniami typu "kup mleko", "kup mięso"
    Niektóre zadania będą reprezentowane też przez komponent React, ale jednak nie należy tego mylić. Chodzi o koncepcję dziedzinową, która może być reprezentowana zarówno przez komponent jak i np. obiekt w stanie czy endpoint na backendzie.
  • warto oddzielać od siebie:
    • widok - jak coś ma wyglądać
    • interakcje - np. jak użytkownik kliknie przycisk "add todo", to tworzy się nowy obiekt Task
    • logikę - np. jeśli task jest ustawiony jako zrobiony to automatycznie leci do listy "done"
    • dane - czyli np. "drzewko stanu" czy "JSON pobrany z serwera"
    • poszczególne widżety - przez widżet mam na myśli drzewko skojarzonych ze sobą komponentów. Warto, żeby takie widżety działały niezależnie od siebie.
    przy czym podział "interakcja vs. logika" może być mylący (bo wydaje się to podobne), ale chodzi mi o to, że logika to bardziej coś niezależnego od samego GUI, a przez interakcję mam na myśli konkretnie coś, co reaguje np. na kliknięcia i coś odpala (używając metodologii MVC można powiedzieć, że przez logikę mam na myśli model, a przez interakcję mam na myśli kontroler). Ew. można nazwać interakcję "logiką GUI".
  • myśl w kategoriach przepływu danych. Czyli skąd dane płyną (np. z serwera) w jaki sposób są rozsyłane po komponentach, w jaki sposób się zmieniają. Od tego zależy działanie całej apki! I jak później coś nie sztymuje, to często okazuje się, że gdzieś nie do końca przepływ danych jest przemyślany. I później pewne dane nie docierają tam, gdzie trzeba albo wręcz przeciwnie - docierają kilka razy, co może spowodować race condition czy kilkukrotne przerenderowanie się komponentów itp.

    • Komentarze

    Prześlij komentarz

    Popularne posty z tego bloga

    Dlaczego nie da się nadgonić frontendu

    -
    Obraz
    Światek JavaScriptu, frontendu to jedno wielkie FOMO. Nie uważasz przez chwilę, to się okazuje, że już są kolejne frameworki do nauczenia, biblioteki do obczajenia, wzorce do zrozumienia. Zeszłoroczne dobre praktyki okazują się już przestarzałe i teraz już należy robić inaczej. Można mieć na to wyjebane i robić swoje. I jest to podejście spokojnego programisty, który gdzieś tam klepie po firmach i ma fokus na dostarczanie tasków na produkcję, a nie na naukę frameworków dla frameworków. I to jest dobre podejście. Do czasu zmiany pracy. Bo wtedy się okazuje, że musisz się praktycznie od nowa uczyć masy rzeczy, frontend już jest inny, nie chcą cię już na rozmowach, bo nie znasz jakiejś tam nowej opcji w libce, która weszła akurat wtedy, jak byłeś zajęty pracą. Więc co robić? Można się uczyć na bieżąco nowości. Skąd jednak wiedzieć, czego się uczyć? Cóż, najświeższa wiedza jest na Twitterze (no dobra, czasem świeższa wiedza jest na Githubie, Discordach itp. no ale na Twitterze ta
    Czytaj więcej

    Absurdy Rekrutacji 2023

    -
    Obraz
    Oto absurdy rekrutacyjne, których doświadczyłem w tym roku: 7h robienia zadania domowego (trzeba było prostą apkę w Node.js zrobić), potem feedback, który nawet nie był słowny, ale punktowy. Firma oceniała kandydatów wg punktów. U mnie zabrakło im obsługi błędów (ale nie napisali, że to ważne), więc miałem mniej punktów, więc wypad XD Śmieszne to jest, bo pokazuje ogólne myślenie podczas oceniania, czyli "nie zrobiłeś czegoś? Pewnie tego nie umiesz. Mamy kandydatów, którzy to napisali, oni umieją". Zadanie domowe z tworzenia gier w Pixi.js. Nawet to ciekawe na początku było, bo potrzebowałem googlać, jak się robi pewne rzeczy z Pixi.js. Więc sam skorzystałem na tym. Jednak nie kontynuowałem tego zadania, ponieważ po 2 godzinach owszem, ruszyłem temat i może po 4h by mi się udało zrobić "jakoś" to zadanie. Jednak w wymogach było napisane, że wymogiem jest duża jakość kodu i sensowne podzielenie tego wszystkiego na klasy. Myślę, że jakbym chciał to dobrze zapro
    Czytaj więcej

    Przygody juniora (1)

    -
    Obraz
    Zakodziłem swojego taska. Zakomitowałem i pusznąłem na serwer. Dałem merdż rekłesta. No i czekam. Nie wiedziałem, co ze sobą zrobić, więc wyłączyłem wifi w kompie, żeby włączył się dinozaur. Zacząłem grać. Tak mnie to wciągnęło, że aż pół godziny spędziłem na tym. Nagle stuka mnie w ramię kolega senior. - Czemu nie odpisujesz? Wysłałem ci wiadomość. - A no bo ja, no wiesz, wyłączyłem internet, żeby pograć w dinozaura. - Do tego nie musisz wyłączać internetu. Wystarczy wejść na chrome://dino - rzekł senior i byłem pod wrażeniem jego wiedzy. - O, nie wiedziałem tego! - No to jak masz jakiś problem, to pytaj. - To ty masz jakiś problem, bo przyszedłeś. - A, no tak. No bo dałeś mi tego merdż rekłesta, tak? Ale tam w ogóle nie ma napisanych testów. - A od kiedy muszą być pisane testy? - Od kiedy zmieniliśmy definiszyn ow don. Wcześniej rzeczywiście nie pisaliśmy testów, bo nie było tego w DoD. - A co to są testy i jak się je pisze? - może i głupie pytanie, ale nigdy wcześniej
    Czytaj więcej