Zamień ten tekst na URL Webhooka

Full-stack i Programowanie

Za bardzo wysuszony kod i inne

Wydanie nr
9
opublikowane
2022-08-22
Mateusz Kozłowski
Mateusz Kozłowski
Senior React Developer

Cześć !
Witaj w kolejnym newsletterze Ahoy Dev! Jak zwykle mamy dla Ciebie serię linków ze świata Full-Stack, podsumowanie ostatniego tygodnia na Ahoy! oraz merytoryczny artykuł, tym razem od Michała Kozłowskiego.
Pamiętaj, że możesz dać nam znać co sądzisz o naszym newsletterze w dedykowanej do tego ankiecie - dzięki!
Trzymaj się!
Jarek


Czy można wysuszyć kod za bardzo?

Jakiś czas temu zostałem przydzielony do pracy nad aplikacją dla nowego klienta. Projekt dotyczy aplikacji webowej do zarządzania firmą szkoleniową i jej wszystkimi podmiotami: placówkami, trenerami, uczestnikami, itd. Potraktowałem to zlecenie jako okazję do wykazania się. Postanowiłem jak najlepiej wykorzystać dotychczasowo zdobytą wiedzę i nauczyć się jeszcze więcej.
Jednym z pierwszych zadań było utworzenie widoków dla ciągle rosnącej liczby bytów. Każdy z nich powinien mieć tabelę i formularz pozwalający na tworzenie lub edycję wpisu. Nie pamiętam, jak wiele widoków było do stworzenia na samym początku, ale w tej chwili w jest ich ok. 100.
Bardzo szybko zniechęciłem się do tego zadania, ponieważ wydawało się bardzo żmudne, powtarzalne i nigdy się niekończące. A terminy były na wczoraj. Wtedy właśnie w mojej głowie pojawiła się myśl, że trzeba to jakoś uogólnić, ugenerycznić, skompresować, żeby przestać się tak bardzo powtarzać.
Idea niepowtarzania się podziałała na mnie jak czerwona płachta na byka, ponieważ w poprzednim projekcie, do którego dołączyłem w końcowej fazie utrzymania były kilogramy powielonego kodu. Czułem, że muszę przegnać to przekleństwo z mojego życia.
Nie jestem w stanie policzyć wszystkich godzin, które spędziłem na pracy nad tym szalonym pomysłem. Ostatecznie powstał formBuilder, który spełnia swoją funkcję. Jest to funkcja, która mapuje tablicę obiektów zawierających konfigurację pól formularza. Dzięki generycznemu typowaniu udało mi się sprawić, że intelisens podpowiada dostępne pola danych oraz rodzaje inputów.
https://d2y5h3osumboay.cloudfront.net/x14026v8ndkagtl1ago0ih2igsrv
Zatem udało mi się osiągnąć mój cel. Teraz przy użyciu jednej listy byłem w stanie wyświetlić i tabelę, i formularz! Wow. Niestety pojawienie się komplikacji było tylko kwestią czasu. Moje rozwiązanie, choć byłem z niego bardzo dumny, było bardzo hermetyczne. Nie tylko nie spełniało zasady Open-Close (i pewnie kilka innych, ale mniejsza o spełnianie zasad co do litery). Co gorsza, rezultatem była jedynie długa, płaska lista pól, która oferuje kiepską czytelność i użyteczność użytkownikowi.

Wracając po rozum do głowy

Okres wakacji i chwilowa zmiana priorytetów w firmie sprawiły, że w zeszłym tygodniu wróciłem do tematu z odświeżoną głową, za którą szybko się złapałem widząc swoje dotychczasowe dokonania. Na szczęście, dzięki odpoczynkowi odzyskałem też serce do tej aplikacji.
Na szczęście projekt wyszedł już z fazy, w której klientowi i szefostwu zależy na jak najszybszych widocznych rezultatach. To również presja czasu sprawiła, że wpadłem w pułapkę jak największego uproszczenia. W tej chwili mogę z zaangażowaniem pracować nad widokami, które jak najlepiej posłużą wszystkim pracownikom firmy klienta.
Zdałem sobie sprawę, że zbyt pochopnie uznałem dwa różne komponenty (tabelę oraz formularz) - nawet w tej ilości - za podobne i wymagające "uproszczenia" i automatyzacji. Każdy z tych elementów to inny scenariusz dla użytkownika i zasługuje na indywidualne podejście, spójne wewnątrz design systemu, który staram się wypracować dla tej aplikacji.
Czas, który poświęciłem na przygotowanie tego sprytnego rozwiązania był pewnie porównywalny z przygotowaniem każdego widoku z osobna. Na dobre wyjdzie mi na pewno to, ile nowych rzeczy nauczyłem się o Typescript & React. Projekt na szczęście bardzo na tym nie ucierpiał. Obok istniejących już tabel będą dodawane kolejne elementy i wówczas stopniowo zastąpię mojego dzielnego formBuildera dedykowanymi zestawami komponentów.
Dyskusję na temat tego artykułu znajdziesz oczywiście na Ahoy.

Ciekawe linki

8 umiejętności, których potrzebujesz jako Frontend Developer - krótko i na temat, zajrzyj zwłaszcza, jeśli dopiero zaczynasz swoją przygodę z Frontem, bo w zwięzłej formie przejrzysz, co powinieneś wiedzieć i umieć. A jeśli JS jest Ci już nieco bliższy, to zajrzyj do listy 10 hacków, które powinien znać każdy programista.
Lista stron, które pomogą przy różnych okazjach - od działań na PDF, JPG itd., przez programistyczne cheatsheety i roadmapy kariery, aż po narzędzie, które ułatwi ładne zaprezentowanie kodu na social mediach. Jest tego sporo, więc nie będę wymieniał wszystkiego, ale jestem przekonany, że każdy znajdzie coś dla siebie.
20 rzeczy, które umykają nawet (niektórym) Seniorom - sprawdź, czy i Tobie unikają. Pewnie nie, bo przecież Ty wiesz więcej, prawda ;)?

Na Społeczności

Artykuł na tematu formularzy z głową od Jakuba Fedoszczaka, który odpowiadał za artykuł w poprzednim wydaniu. Tym razem Jakub zaserwował nam kolejną porcję wiedzy, opakowaną w kilka tysięcy znaków, dlatego otwieraj koniecznie, jeżeli masz wolną chwilę i chcesz się czegoś dowiedzieć.
Dane możemy pokazywać w bardzo różny sposób. W formie tabeli, ciągu znaków, ale również, jako wykres kołowy, o czym w tym artykule napisał Wojtek Połowniak. Jeżeli masz czasem potrzebę zaprezentowania danych w sposób prosty, to nie ma co zaprzęgać armaty i wykorzystywać biblioteki JS, bo może wystarczyć lekki CSS.
Wiesz, że Społeczność Ahoy ma swoją własną wewnętrzną “walutę”, która służy między innymi do tipowania, ale można za nią wymieniać się również usługami i produktami w ramach Społeczności? Mechanizm, który został tam zaprzęgnięty jest dość skomplikowany, a tutaj Adam Gospodarczyk trochę odpowiadał, jak to wygląda od środka. Żeby zobaczyć, jak skomplikowany to temat, zobacz zrzut z jednego ze scenariuszy w Make:

Wydarzenia

Niedawno odbyło się kolejny live. Tym razem Wojtek Dasiukiewicz, opowiedział o tym, jak budować Start-up na etacie! Wojtek jest programistą z 10 letnim stażem, ale - co ciekawe - nie zatrzymał się tylko na funkcji etatowego Team Lada, ale od ponad roku rozwija Zencal. Jeśli jeszcze go nie znasz, to koniecznie sprawdź (zarówno Zencal, jak i Live z Wojtkiem)
Przypominam, że już za tydzień kolejne spotkanie Ahoy Book Club, na którym na warsztat idzie genialna książka Grega McKeowna - Esencjalista. Jeżeli czasami czujesz, że masz zbyt wiele priorytetów, to znaczy, że warto przeczytać książkę i zajrzeć na spotkanie.