Narzędzia JavaScript Full-Stack Web Developera: Tooling

0:00W tej lekcji chciałbym zwrócić uwagę na

0:02kilka narzędzi, które bez wątpienia już znasz, ale szansa na to, że je

0:06wykorzystujesz w codziennej pracy jest różna.

0:09Doskonałym przykładem tego, o czym mówię jest Docker, który bez wątpienia jest

0:13bardzo rozpoznawalny, ale jednocześnie nawet patrząc na osoby, które programują w moim

0:17otoczeniu, raczej tylko mała część faktycznie z niego korzysta.

0:21I chociażby z tego powodu chciałbym zwrócić na niego szczególną uwagę,

0:24ze względu na to, że w roli Full Stack

0:26przyjdzie Ci rozwijać równolegle wiele różnych projektów.

0:29No i tutaj, jak doskonale wiesz, każdy z tych

0:31projektów może wymagać różnego środowiska uruchomieniowego.

0:35Czasem będzie to inna wersja Node.js, a czasem zupełnie inne zależności, które

0:39mogą wchodzić w konflikt z Twoimi innymi projektami.

0:43Docker jest bez wątpienia najlepszym rozwiązaniem do tego, aby poradzić sobie z

0:47tym problemem, tym bardziej, że w większości przypadków jego konfiguracja

0:50taka na potrzeby developmentu jest raczej stosunkowo prosta.

0:54Tym bardziej, że w wielu przypadkach

0:56przyjdzie Ci pracować z gotowymi obrazami, które zostały dołączone do projektu i

1:00jedyne co musisz zrobić, to po prostu je uruchomić.

1:02Jeżeli chodzi o samo wykorzystanie Dockera

1:05w warunkach developerskich, o tym będziemy sobie jeszcze rozmawiać,

1:08natomiast na ten moment zachęcam Cię do jego instalacji oraz przejrzenia

1:12dostępnych na Eduweb warsztatów na jego temat.

1:15Tymczasem jest jeszcze jeden wątek, który chciałbym poruszyć w kontekście

1:18konfigurowania naszego środowiska developerskiego.

1:21Jest nim ekspozycja naszego localhost do

1:24internetu. I podczas gdy podobnie jak w przypadku Dockera, ta sytuacja również

1:28bardzo często jest po prostu wymagana bądź też ułatwia rozwój aplikacji

1:33tak bardzo rzadko spotykam się z sytuacjami, w której faktycznie ktoś

1:36podejmuje próbę tego

1:38aby faktycznie udostępnić swój lokalny projekt w internecie.

1:41No i teraz coś takiego można zrobić na wiele różnych sposobów.

1:44Jeżeli wiesz co nieco na temat konfiguracji własnych serwerów, to

1:48niewykluczone, że będziesz w stanie skonfigurować sobie swój własny serwer do

1:51tego, aby komunikował się z Twoim komputerem.

1:54Ja osobiście jednak nie korzystam z tego rozwiązania i zawsze sięgam po ngrok .

1:58Jest to niezwykle proste w obsłudze narzędzie, które za chwilę sobie wykorzystamy.

2:02Przejdę tylko do mojego testowego projektu i uruchomię go tak, aby

2:06działał na porcie localhost 3000, więc w momencie gdy przejdę sobie teraz na ten

2:10adres to powinien wyświetli się tutaj napis Hello World.

2:13Faktycznie wszystko się zgadza, ale jeżeli np.

2:16chciałbym wejść na ten adres na moim

2:17telefonie no to naturalnie nie byłoby takiej możliwości.

2:20Jeżeli jednak uruchomimy polecenie ngrok http 3000 to od razu mamy tutaj informacje

2:26na temat bieżącej sesji oraz zewnętrzny adres kierujący do naszej aplikacji.

2:31Zwrócił uwagę, że w tym momencie nie znajduje się na moim localhost,

2:34a jednocześnie też mamy tutaj działającą aplikację.

2:38Podobnie zresztą będzie, gdy wyciągnę

2:39sobie tutaj swój telefon, a następnie udostępnię sobie ekran.

2:43Teraz jeżeli otworzę sobie ten adres na moim telefonie, to być może bardzo tutaj słabo

2:48to widać ale jednocześnie faktycznie mamy

2:50potwierdzenie, że nasz localhost jest publicznie dostępny.

2:53No i teraz jak może sobie wyobrazić taka możliwość udostępnienia swojego localhost

2:58do internetu sprawdzi się w wielu różnych przypadkach.

3:01Czasem będzie to konieczność tymczasowego

3:03wystawienia swojej aplikacji w celu jej wygodnego przetestowania, bądź np.

3:07wystawienia tylko jednego endpointa czy

3:09jakiegoś webhooka, z którym kontaktuje się jakaś zewnętrzna usługa.

3:13Coś takiego w mojej codzienności sprawdza się niesamowicie dobrze i jeżeli jeszcze

3:17nie korzystasz z tej opcji, to bardzo polecam Ci po nią sięgnąć.

3:21Kolejnym analogicznym wątkiem, który może

3:23zdarzyć Ci się w codziennej pracy jest konieczność połączenia się z jakąś bazą

3:27danych i to niekoniecznie lokalną, ale taką dostępną w Internecie.

3:31Z drugiej strony czasem może zdarzyć się

3:33również tak, że na swoje deweloperskie potrzeby potrzebujesz po prostu jakiejś

3:37szybkiej bazy danych i w tej konkretnej sytuacji jest nie do końca uzasadnione to,

3:42aby stawiać jakąś aplikację bądź ręcznie tworzyć taką bazę na swoim komputerze.

3:46Tylko zdecydowanie lepiej jest sięgnąć po narzędzia typu Railway.

3:50W tym przypadku przejdziemy sobie tutaj do

3:52naszego dashboard i utworzymy nowy projekt.

3:54Tym projektem będzie np.

3:56baza danych MySQL.

3:57Po chwili nasz projekt zostanie tutaj utworzony, a my będziemy mogli nie tylko

4:02utworzyć strukturę tabeli, umieścić również w niej dane, ale również połączyć się

4:06z nią z poziomu naszej aplikacji bądź też nawet lokalnego komputera.

4:10Zatem utworzę sobie tutaj tabelę users i

4:12zaznaczę tylko, że oczywiście jeżeli na ten moment praca z bazami danych jest Ci dość

4:16obca, to zaufaj mi tylko, że wiem co robię, a mianowicie dodaję tutaj pole name

4:21typu text, a resztę ustawień pozostawiam bez zmian.

4:24Pojawiła się tutaj tabela users, wewnątrz której możemy

4:27dodać albo dodatkowe kolumny albo pierwszy wiersz.

4:30Załóżmy, że pierwszym z nich będzie Adam, a drugim np.

4:33Michał. I teraz mamy tutaj dwa

4:35rekordy, do których chcielibyśmy się połączyć.

4:38Możemy to zrobić na wiele różnych sposobów, a jednym z nich jest skopiowanie

4:42polecenia umożliwiającego nawiązanie połączenia z poziomu samego terminala.

4:46Tutaj ponownie przejdziemy sobie do terminala i wpiszemy całe to polecenie.

4:51Tutaj na chwilę musiałem zasłonić ekran ze

4:53względu na to, że jest uwzględnione tutaj hasło do mojego konta, ale jednocześnie

4:57jak widzisz połączenie zostało nawiązane, a ja mogę wykonać

5:00proste zapytanie, aby pobrać wszystkie rekordy z tabeli Users.

5:04Rzeczywiście mamy tutaj Adama i Michała.

5:06Wszystko się zgadza.

5:07Połączenie zostało nawiązane, działa i jesteśmy w stanie z niego korzystać.

5:11Co więcej, analogicznie też możemy

5:13nawiązać takie połączenie z poziomu naszej aplikacji lub też co ważne

5:17zdeployować tutaj projekt

5:19pochodzący z naszego

5:20repozytorium, bądź też wykorzystać jakiś starter i

5:23chociażby uruchomić aplikację ExpressJS.

5:25Tutaj szczerze mówiąc, jeżeli chodzi o sam Railway, raczej

5:28wykorzystuję go wyłącznie na potrzeby takiej piaskownicy do tego, aby

5:32testować sobie różne ustawienia.

5:34Raczej nie zdarzyło mi się korzystać z

5:35niego produkcyjnie, w związku z tym nie wiem, czy mogę go polecić w tym celu.

5:39Nie zmienia to jednak faktu, że do

5:41podanych tutaj przykładów sprawdza się mi idealnie.

5:44I teraz kolejnym ważnym elementem jeżeli chodzi o pracę zarówno z punktu widzenia

5:49lokalnego środowiska, ale też produkcyjnego jest tzw.

5:52REPL. W tym momencie znajdujemy się w

5:54dokumentacji Laravela, czyli poruszamy się w technologii PHP, aczkolwiek

5:59analogicznie REPL dostępny jest również chociażby w NestJS

6:03i tylko chodzi mi o to, aby podkreślić, że

6:05REPL nie jest czymś charakterystycznym np.

6:07dla Node.js czy chociażby frameworka

6:10NestJS, ale również jest dostępny w wielu innych przypadkach.

6:14I teraz jeżeli tylko przyjrzymy się o co w

6:16tym wszystkim chodzi, to zwróć uwagę, że jesteśmy w stanie wykorzystywać pewnego

6:20rodzaju interfejs oraz polecenia, aby wchodzić w interakcję z naszą aplikacją.

6:25Przykładowo, jeżeli stworzymy sobie aplikację NestJS, która będzie wystawiała nam

6:29jakieś API, no to przykładowo jesteśmy w stanie

6:32odwołać się do jakiejś metody wybranego serwisu,

6:35o tym będziemy sobie jeszcze rozmawiać, więc jeżeli na tym etapie nie jest to dla

6:38Ciebie jasne, to absolutnie się tym nie przejmuj i w

6:41wyniku wykonania takiej metody

6:43otrzymujemy rezultat w postaci informacji, którą zwraca ta

6:46metoda. No i teraz

6:47pytanie po co w ogóle są potrzebne takie narzędzia?

6:51Ano czasem zdarzają się różnego

6:52rodzaju błędy aplikacji, które należy zdebugować w dość specyficzny sposób.

6:57Wtedy okazuje się, że pewnych rzeczy po

6:59prostu nie widać na pierwszy rzut oka i np.

7:01uruchamiamy sobie aplikację, przepisujemy

7:04ją i wszystko się zgadza, ale jednocześnie np.

7:06jakieś dane wyświetlane są nie tak, jakbyśmy tego chcieli.

7:09W związku z tym jesteśmy w stanie nawiązać połączenie z konkretnymi elementami

7:13naszej aplikacji, a następnie poprosić je o

7:16jakieś konkretne dane i tym samym podejrzeć, na którym etapie pojawiają

7:20się nam błędy.

7:21Drugim przykładem, który w moim przypadku bardzo

7:23często się sprawdza

7:25jest konieczność napisania jakiegoś zaawansowanego zapytania SQL.

7:28Z jednej strony i nic nie stoi na przeszkodzie, aby wykorzystać np.

7:31TablePlus i nawiązać połączenie z produkcyjną bazą danych, napisać

7:35zapytanie, a następnie wyeksportować wyniki.

7:38Również tak robiłem i również to się sprawdza.

7:41Ale jednocześnie w niektórych przypadkach może okazać się, że

7:43coś takiego będzie albo po prostu bardzo trudne lub mało efektywne.

7:47W takich momentach do gry wchodzi właśnie

7:49REPL, który umożliwia nam napisanie kodu, który będzie operował na metodach i

7:54wartościach zwracanych przez konkretne moduły naszej aplikacji czy np.

7:58endpoint.

7:59Oczywiście sam temat jest zbyt rozległy, żeby teraz móc go pokazywać

8:04ale myślę, że jeszcze pojawi

8:05się okazja do tego, aby sięgnąć po takie narzędzie

8:08w momencie, gdy aplikacja, którą będziemy

8:10budować będzie już kompletna i będziemy mieć jednocześnie dane, z którymi będziemy

8:14mogli pracować i tym samym też podłączyć się do aplikacji

8:18za pomocą REPLa.

8:19Teraz jeszcze tylko w tym momencie chciałbym zwrócić uwagę, że w przypadku

8:22Laravel a REPL jest zdecydowanie bardziej rozbudowany, a dodatkowo pojawiło

8:27się narzędzie Tinkerwell, które świetnie obrazuje to, co przed chwilą powiedziałem.

8:32Zwróć uwagę, że jest to tak jakby

8:33dodatkowy edytor kodu, który wspiera różnego rodzaju funkcje, w tym nawet

8:37podpowiadanie składni nawiązujące do kodu źródłowego naszej aplikacji.

8:42No i tutaj mamy przykład

8:43w którym powstaje zapytanie SQL wykorzystujące np.

8:46wbudowane ORM.

8:48Co więcej, tak jak widać, możemy tutaj

8:50pisać nawet różnego rodzaju funkcje, zwracać z nich wartości, a następnie te

8:54wygenerowane wartości przekazywać do aplikacji i pobierać kolejne informacje.

8:59Nie mam wątpliwości, że jeżeli do tej pory

9:01nie korzystasz z takich narzędzi, to zdecydowanie warto się im przyjrzeć i

9:04przynajmniej sięgnąć po nie przy kolejnej okazji.

9:07I w tym momencie, jeżeli chodzi o te

9:09główne narzędzia, które postrzegam jako bardzo istotne w pracy Full-Stack Developera, tak

9:13jest jeszcze przynajmniej jedno, które warto brać pod uwagę.

9:17Mianowicie w momencie, gdy będziesz pracować jako Full-Stack Developer,

9:20niewykluczone, że przyjdzie Ci projektować różnego rodzaju interfejsy

9:24właśnie na potrzeby aplikacji, którą tworzysz, bądź też nawet jakiegoś

9:27prototypu, w przypadku którego nie będziesz mieć dostępu do projektanta,

9:31który będzie w stanie dostarczyć Ci kompletny interfejs, który

9:34będziesz mógł wdrożyć

9:36i w takiej sytuacji świetnie sprawdza się możliwość sięgnięcia np.

9:39Tailwint oraz Tailwind UI oraz

9:42wykorzystanie gotowych komponentów, które łatwo będziesz w stanie skleić ze sobą, a

9:46następnie wykorzystać we własnej aplikacji.

9:49Swoją drogą taki sam scenariusz może sprawdzić Ci się

9:51również w sytuacji, gdy współpracujesz z

9:53osobą przygotowującą interfejs ze względu na to, że w takiej sytuacji

9:57ona również może sięgnąć np. po

9:59komponenty Figmy dostępne w Tailwind UI a następnie ewentualnie dostosować

10:03je do potrzeb Waszej aplikacji.

10:05Coś takiego w przypadku full stack developmentu

10:07sprawdza się genialnie i po prostu bardzo przyspiesza pracę.

10:11Oczywiście jednocześnie to rozwiązanie

10:13nie jest ograniczone do full stack developmentu

10:15jeżeli pracujesz tylko na froncie bądź backend, również możesz z niego korzystać

10:19natomiast zachęcam do tego, aby właśnie korzystać z design systemów

10:23gotowych bibliotek komponentów

10:24oraz ich implementacji w oparciu o różne frameworki frontendowe.

10:29Takie podejście znacząco ułatwia pracę i

10:31jednocześnie narzędzia takie jak Shuffle.dev

10:33jak widzisz ułatwiają prototypowanie takich aplikacji oraz dostosowanie

10:37elementów interfejsu do Twoich

10:39aktualnych potrzeb.

10:41Teraz jeżeli chodzi o same narzędzia wspierające full stack development

10:45to by było na tyle

10:46więc dziękuję Ci za uwagę i zapraszam do kolejnych materiałów.