Full-stackowy ekosystem JavaScriptu

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ł od Adama Gospodarczyka, który właśnie wystartował z programem JS na wszystkich Frontach.
Pamiętaj, że możesz dać nam znać co sądzisz o naszym newsletterze w dedykowanej do tego ankiecie - dzięki!
Trzymaj się!
Jarek

Full-stackowy ekosystem JavaScriptu

Full-stack w JS w pierwszej chwili kojarzy mi się z Nextem, Remixem albo Freshem. Jeżeli zestawimy to z narzędziami takimi jak vite czy ostatni (jeszcze nieprodukcyjny) bun.sh oraz nowościami które kilka dni temu przedstawił Vercel, to zaczyna być intrygująco.
Gdy uczę się nowych rzeczy, zawsze mam w głowie jedno zdanie “wszystko jest trudne zanim zaczyna być łatwe”. Domyślam się, że jesteś w stanie to potwierdzić. Natomiast zrozumienie wybranego tematu to jedno a pozostawanie na bieżąco z wieloma jednocześnie to zupełnie coś innego a rola full-stacka właśnie tego wymaga.
Dobra wiadomość jest taka, że nie potrzebujesz znać wszystkich dostępnych narzędzi, wystarczy że będziesz w stanie po nie sięgnąć w chwili gdy będziesz tego potrzebować, oraz szybko wejść głęboko w aktualny temat. Coś takiego zapewnia koncepcja “Zoom in & Zoom out”, którą pokazali mi m.in. Jocko Willink i Jim Collins w swoich książkach. Jak nie trudno się domyślić, chodzi o umiejętność spojrzenia na temat z bliska, aby dojrzeć szczegóły oraz z daleka aby zrozumieć szeroki kontekst.
Dlatego przejdziemy teraz przez kilka wątków, na które moim zdaniem warto zwrócić uwagę jako full-stack. Będzie konkretnie, jednak jeżeli coś nie będzie dla Ciebie jasne, po prostu odpowiedz na tą wiadomość.

Tooling, konfiguracja i personalizacja

Na temat narzędzi i tego jak je konfiguruję powiedziałem już wystarczająco m.in w bezpłatnych materiałach wideo oraz wpisach dostępnych na jsnafrontach.pl. Jeżeli ich nie znasz, koniecznie się z nimi zapoznaj. W skrócie najważniejsze narzędzia dla mnie to:
IntelliJ jako IDE
iTerm / Warp jako terminal w połączeniu z zsh
TablePlus jako GUI dla baz danych
Github Actions do CI/CD
Digital Ocean jako hosting (i dev sandbox). Do mniejszych projektów Netlify.
i mniejsze:
yarn / pnpm jako package manager (czekam na v1 bun.sh)
vite jako build tool
runjs jako playground dla JS
raycast jako launche
keyboard maestro i shortcuts do makr i usprawnień
karabiner do konfiguracji klawiatury (Karabiner God Mode)
matter jako reader
rize do pomodoro i trackingu
github copilot jako AI pomagające mi w projektach edukacyjnych oraz w nauce nowych narzędzi (tutaj mój warsztat na ten temat)
endel gdy potrzebuję się całkowicie skupić
anki do zapamiętywania niektórych konceptów (np. elementów modeli mentalnych)

I tak wygląda lista absolutnie najważniejszych narzędzi, które pomagają mi w funkcjonowaniu jako full-stack dev. Zwróć uwagę że uwzględniam na niej nazwy, które nie są bezpośrednio połączone z programowaniem. Pomimo tego są tak istotne dla mnie jako “full-stacka”, że nie wyobrażam sobie bez nich funkcjonowania.
Drugą rzeczą którą trzeba podkreślić jest fakt, że wśród wykorzystywanych przeze mnie narzędzi znajdziesz zarówno takie które są ze mną od lat (np. Digital Ocean) jak i totalnie najnowsze (Warp). Co więcej w przypadku bun.shwręcz czeka on na odpowiedni czas aby go do niej dopisać. Zwracam na to uwagę, ponieważ aktualizowanie swojego zestawu narzędzi w dużym stopniu definiuje Twoją skuteczność i efektywność. Sięganie po nowe rozwiązania jest wymagające ale daje przewagę a momentami wręcz jest to jedyny sposób na odnalezienie się w tak szybko zmieniającym środowisku.
Domyślam się, że możesz się zastanawiać dlaczego korzystam z IntelliJ, skoro jest to IDE utożsamiane z Javą z którą mam niewiele wspólnego (o ile w ogóle). Przez lata korzystałem z WebStorm i PHPStorm a potem przeszedłem do VS Code. Mocno szanuję ten ostatni ale nie mogę go porównać do IntelliJ. W jednym zdaniu mogę powiedzieć, że IntelliJ po prostu wydaje się rozumieć kod aplikacji. Szanuję VSC ale w jego przypadku trudno mówić o tym samym.
Spośród pozostałych narzędzi firmy JetBrains padło u mnie na IntelliJ, ponieważ wspiera wszystkie technologie z którymi przychodzi mi pracować i jest najbardziej rozbudowany. Tym bardziej że jego możliwości konfiguracji sprawiają, że jego główny widok, wygląda u mnie tak:

Dostosowanie narzędzi do siebie

Oczywiście u Ciebie nie musi ale w ten sposób chciałem zwrócić Twoją uwagę na jeszcze jeden ważny element wszystkich narzędzi i aplikacji z jakich przyjdzie Ci korzystać - personalizację.
Nie bez powodu zawsze poświęcam na niego mnóstwo uwagi, ponieważ ważniejsze od tego z jakiego narzędzia korzystasz jest to, w jaki sposób to robisz. Moja checklista w tym obszarze wygląda tak:
Sprawdź możliwości jakie oferuje narzędzie
Zapoznaj się ze skrótami klawiszowymi i jeżeli musisz, dostosuj je do siebie
Wyłącz wszystkie niepotrzebne panele, powiadomienia i wszystko co nie jest potrzebne w danej chwili. Z pomocą skrótów i tak natychmiast możesz po to sięgnąć w razie potrzeby
Przejrzyj artykuły i filmy pokazujące “tips & tricks”
Przejrzyj artykuły i filmy pokazujące wady, słabe strony i alternatywne narzędzia
Zobacz czy dostępne są jakieś integracje z innymi narzędziami i co oferują.
W przypadku aplikacji desktopowej sprawdź czy masz do dyspozycji CLI lub interfejs Apple Script (zaawansowane ale bardzo przydatne)
Zobacz czy twórcy są obecni na Twitterze lub tworzą jakąś społeczność. Bezpośredni kontakt z nimi bywa wartościowym źródłem informacji
Podobne listy swobodnie stosuję też w innych przypadkach. Pomaga mi to w szybkiej eksploracji tematu i właśnie uzyskaniu perspektywy “zoom out”, z której dość sprawnie jestem w stanie przejść do “zoom in” i poznać szczegóły.
W temacie samych narzędzi i ich konfiguracji, świetnie sprawdza się też obserwowanie osób, które poświęcają na to wiele swojej uwagi. Dla mnie takimi osobami są m.in.: Jeffrey Way, Wes Bos, Caleb Porzio i Adam Wathan. Tutaj nie rzadko nawet wystarczy obserwowanie ich na twitterze, ponieważ zwykle dzielą się różnymi ciekawostkami publicznie. Innym razem warto sięgnąć po ich kursy lub tutoriale w których nie rzadko sam znajduję różne przydatne szczegóły.

Vanilla JS

Pomimo tego, że nie mówimy tutaj o podstawach programowania to i tak jest to wątek przy którym muszę się zatrzymać. Wszechobecność frameworków i bibliotek sprawia, że osoby które rozwijają się na ścieżce full-stacka (ale i nie tylko) pomijają absolutny fundament jakim jest znajomość samego JavaScriptu.
I nie mówię tutaj o podstawach takich jak deklarowanie zmiennych, tylko tematach takich jak:
Minimum teorii o sposobie interpretowania kodu przez JS
Execution Context
Scope (Lexical / Dynamic) / Scope Chain / Closure
Prototypal Inheritance
Asynchroniczność
Event Loop
API (np. Promise API, Fetch API itd.)
Nowe elementy składni (np. ECMAScript 2022)
Zrozumienie tych tematów wydaje się być zupełnie niepotrzebne. Sam przez lata uważałem, że “przecież i tak jestem w stanie pisać kod”. Myliłem się i teraz zwracam uwagę innym aby nie popełniali tego samego błędu. Tym bardziej, że jest to uzasadnione wygodą wynikającą z warstwy abstrakcji narzucanej przez frameworki.
Jeżeli chcesz dowiedzieć się więcej na te konkretne tematy, zajrzyj na mój kanał youtube “overment” oraz do moich warsztatów na eduweb.pl. W jednym i drugim miejscu szczegółowo je omawiam i jest to warte Twojej uwagi, jeżeli nadal nie jest to dla Ciebie jasne.
Największą różnicę jaką zobaczysz w chwili gdy sam JavaScript stanie się dla Ciebie jasny, będzie polegała na większej kontroli nad pisanym przez Ciebie kodem. Zwyczajnie będzie dla Ciebie jasne, np. dlaczego zmienia Ci się wartość właściwości obiektu, pomimo tego że pracujesz na jego kopii (więcej pod hasłem “shallow / deep copy” oraz “przekazywanie wartości przez referencję”).

TypeScript

Coraz częściej zdarza mi się tworzyć materiały i kursy o JavaScripcie, w których TypeScript jest domyślnie obecny. Nie dzieje się to bez powodu i podczas gdy jeszcze 3-4 lata temu nie było oczywiste czy TS faktycznie zdobędzie wystarczającą popularność, tak teraz już raczej nikt nie ma wątpliwości.
W dodatku jeżeli nadal pomijasz TS na liście tematów, które chcesz poznać, to niewykluczone że za chwilę nie będziesz mieć wyjścia. Coraz częściej nowe narzędzia, frameworki i biblioteki domyślnie go wspierają. Teraz jeszcze bywa opcjonalny ale jeżeli spojrzysz chociażby na tRPC, to bardzo szybko może okazać się, że TypeScript przestanie być “opcją” i stanie się nieodłączną częścią JavaScriptu
Dobra wiadomość jest taka, że nie potrzebujesz dużo aby przynajmniej zacząć korzystać z TypeScriptu. Solidne podstawy jesteś w stanie opanować w kilka dni. Oczywiście potem krzywa nauki się zmienia, jednak nie stanowi to dużego problemu, ponieważ z czasem wszystko stanie się dla Ciebie jasne.
Także podobnie jak w przypadku zrozumienia samego JavaScriptu, korzystanie z TypeScriptu robi różnicę. Jeżeli na ten moment TS jest dla Ciebie czymś nowym, nie przejmuj się bo dość łatwo możesz przejść przez podstawy z moimi kursami, które udostępniam na eduweb.pl. Będzie to dobra okazja do tego aby zrobić pierwsze kroki lub usystematyzować wiedzę na jego temat przy praktycznych zadaniach.

Front-end & Back-end vs Full-stack

Jeszcze całkiem niedawno w sieci można było spotkać opinie, że rola full-stacka to mit lub, że są nimi wyłącznie jednorożce i inne wybitne jednostki. Uzasadnione było to trudnością w opanowaniu ogromnej ilości materiału oraz umiejętności aby samodzielnie realizować całe projekty.
Teraz rola full-stacka w raporcie StackOverflow znajduje się na szczycie “specjalizacji”, co potwierdza fakt, że full-stackiem można zostać a jednocześnie że na rynku jest ogromne zapotrzebowanie na osoby o tym profilu.

Front-end

Obecnie front-end to nie tylko React, Vue i Angular ale też Solid czy Svelte. Na koniec dnia frameworki stanowią tylko jeden z wielu elementów nowoczesnego front-endu. To duża bariera dla początkujących i wyzwanie dla doświadczonych programistów. W przypadku full-stacków sytuacja komplikuje się jeszcze bardziej.
Z pewnością nie mam tutaj perfekcyjnego sposobu na to aby skutecznie pozostawać na bieżąco ale jednocześnie jest kilka obszarów na które warto zwracać szczególną uwagę. Mam tutaj na myśli:
Rozwój przeglądarek pod kątem wsparcia nowych funkcji HTML / CSS i JavaScript. Obserwowanie zmian, które pojawiają się w kolejnych wersjach, jest dobrym punktem odniesienia i pozwala dobrze określić jakim tematom powinniśmy się przyjrzeć. Jednym z ostatnich przykładów może być “Media Queries Level 4” uwzględniające możliwość pisania breakpointów dla elementów a nie wyłącznie viewportu.
Optymalizacja pod kątem wydajności i dostępności. To kolejny bardzo istotny element na który zwracam uwagę, tym bardziej że odgrywa znaczącą rolę w wielu obszarach - typowej konwersji czy rankingach SEO, które jednoznacznie przekładają się na rezultaty biznesowe. Przykładem ostatnich zmian mogą być Core Vitals, które po prostu trzeba znać przynajmniej w minimalnym stopniu
Rozwój narzędzi dla developerów i trendy takie jak no-code, które w wielu przypadkach są w stanie nam pomóc. Dla przykładu Tailwind w połączeniu z Tailwind UI niesamowicie przyspiesza pracę nad tworzeniem interfejsów. W połączeniu chociażby z https://shuffle.dev wchodzi już mocno w obszar low-code. Poza tym na uwagę zasługują Vitest czy wspomniany wcześniej bun.
Szeroki rozwój możliwości związany z lepszymi parametrami technicznymi urządzeń oraz samym rozwojem języków programowania, pojawieniem się nowych czy po prostu nowymi sposobami rozwiązywania istniejących problemów. Przykładem może być coraz skuteczniejsze AI, które bardzo często dostępne jest w formie API do którego możemy się zwyczajnie podłączyć.
Najnowsze trendy, w przypadku których nie wiadomo jak będzie wyglądać ich przyszłość ale jednocześnie warto je obserwować. Jednym z nich jest Metaverse i rozwój Internetu w kierunku AR i VR. Łatwo sobie wyobrazić, że w chwili pojawienia się na rynku sensownego sprzętu, sposób korzystania z Internetu może się znacząco zmienić. Jeszcze bardziej obrazowym przykładem są urządzenia mobilne. Trudno jest mi sobie to wyobrazić ale już teraz faktem jest, że duża część społeczeństwa korzysta z Internetu wyłącznie za pośrednictwem smartphone’a.
Zatem moja strategia pozostania na bieżąco z front-endem uwzględnia utrzymanie zainteresowania i obserwowanie źródeł w konkretnie zdefiniowanych obszarach. Połączenie tego ze sprawdzonymi twórcami, którzy publikują wartościowe treści, z odrobiną wolnego czasu, są w pełni wystarczające.

Back-end

W przypadku back-endu sytuacja również nie jest prosta. Node.js dość istotnie się rozwija ale jednocześnie pojawia się Deno. Mamy też Rust, który aktualnie jest numerem jeden na mojej liście zainteresowań.
Mogłoby się wydawać, że poznawanie typowo back-endowych technologii aktualnie trochę mija się z celem, ponieważ do dyspozycji mamy full-stackowe frameworki, które świetnie sprawdzają się na back-endzie.
Nie zmienia to jednak faktu, że back-end jest potężnym obszarem na który składa się wiele tematów. Są platformy takie jak Railyway, Netlify czy Vercel albo genialne narzędzia jak Github Actions czy Kubernetes.
Analogicznie jak w przypadku front-endu moja strategia wygląda podobnie. Co więcej dbam też o to aby aktualizować swoją wiedzę również w obszarze “typowego” back-endu aby móc przekładać ją na rozwiązania, które próbują robić wszystko (nie rzadko ze świetnym rezultatem). W każdym razie mówimy tutaj o:
Nowych technologiach lub nowym wykorzystaniu istniejących. Przykładowo zmiana podejścia jaką proponuje bun.sh wydaje się przenosić JS na kolejny poziom lub przynajmniej mocno usprawni nam pracę. Poza tym mamy też wspomniany Rust, w przypadku którego DX (developer experience) jest tak wysoki, że aż żal nie poznać go bliżej.
Narzędziach ułatwiających development. Za każdym razem nie mogę w to uwierzyć ale nadal spotykam osoby pracujące na Wampie i aktualizujące serwery produkcyjne poprzez wgrywanie plików przez FileZillę. Aktualizacja zestawu wykorzystywanych przeze mnie narzędzi jest ważna, aczkolwiek muszę tutaj przyznać, że w przypadku wielu realizowanych przeze mnie projektów, aktualizacja stacku nie jest uzasadniona biznesowo. Ale za to w przypadku nowych projektów sięgam po nowsze rozwiązania.
Pogłębianiu swojej wiedzy z zakresu obsługi serwerów, baz danych. Ich konfiguracja nigdy nie była i prawdopodobnie nie będzie moją pasją ale jednocześnie poznawanie wcześniej nieznanych mi możliwości często się później przydaje. W tym celu wykorzystuję mój sandboxowy serwer w Digital Ocean w przypadku którego może wydarzyć się cokolwiek a ja mogę wyciągać wnioski z moich błędów.
Jeżeli chodzi o sam back-end bardzo lubię utrzymywać kontakt z osobami, które specjalizują się wyłącznie w nim. I przy okazji jest to całkiem dobry sposób w pozostałych obszarach. Po prostu wystarczy zadbać o to aby rozmawiać z doświadczonymi specjalistami, którzy chętnie dzielą się swoim doświadczeniem. Tym bardziej że Twoja szersza perspektywa również może okazać się dla nich przydatna.

Ciekawe linki

Kompendium code review zostało zalinkowane i polecane w ramach dyskusji na temat code review na ahoy. Niezmiennie polecamy dobre źródła i jesteśmy przekonani, że warto tam zajrzeć, zwłaszcza, że temat code review jest czasami traktowany po macoszemu.
Jak nauczyć się czegokolwiek - fajne narzędzie, które pokaże Ci drogę i materiały, jeżeli uznasz, że chcesz się czegoś nauczyć. Jeżeli wpiszesz umiejętność zaawansowaną, to dostaniesz też dodatkowo spis tego, co już powinieneś umieć.
21 lekcji i 25 wskazówek, które warto znać, przed rozpoczęciem kodowania i na początku swojej programistycznej kariery.
Cypress zamierza zrewolucjonizować testowanie Frontu - podejście do testowania, to zawsze ciekawy temat. Jakub Fedoszczak ostatnio na ahoy.so podzielił się swoim nie-testowym podejściem.

Na Społeczności

Nadchodzi zima - czyli dyskusja na temat przyszłości oraz tego co oznacza dla nas aktualna sytuacja gospodarcza i ruchu w spółkach technologicznych w USA.
You - Czarek podzielił się linkiem i rozpoczął dyskusję na temat nowej przeglądarki, która agreguje wyniki z wielu źródeł na jednej stronie, m. in. z serwisów: Twitter, Github, StackOverflow, Arxiv, Hacker News, Wikipedia, Geeks for Geeks, Read the Docs a nawet Code Complete i dużo więcej