Narzędzia JavaScript Full-Stack Web Developera: Przegląd narzędzi

0:00Nie ulega wątpliwości, że na przestrzeni

0:02ostatnich lat to, w jaki sposób tworzymy frontend bardzo mocno uległo zmianie.

0:06Jednym z takich elementów jest nowy zestaw

0:08narzędzi, które wykorzystujemy do budowania naszej aplikacji

0:12i w szczególności mam tutaj na myśli tą część frontendową.

0:15W momencie, gdy już będziesz projektować full stackowe aplikacje nagle stanie się

0:19wielkim problemem to, aby poświęcać dużo czasu na konfigurację narzędzi, które

0:23zasadniczo odpowiadają tylko za to, aby zbudować Twoją aplikację.

0:28I tak jak w przypadku Webpacka pamiętam, że

0:30sam nagrywałem praktycznie kursy wyjaśniające to, w jaki sposób można w

0:34ogóle uruchomić Webpacka, a co dopiero wykorzystać go np.

0:37w środowisku produkcyjnym.

0:39Oczywiście na pewnym etapie ma znaczenie to, w jaki sposób buduje się nasza

0:43aplikacja i umiejętność kontroli tego procesu staje się istotna, ale

0:48jednocześnie w większości przypadków zupełnie nie musimy zaglądać do plików

0:52konfiguracyjnych po to, aby rozwijać nierzadko nawet rozbudowane aplikacje.

0:57Myślę, że najlepsze w tym wszystkim jest

0:58to, że jeżeli jesteś w sytuacji, w której np.

1:01konfiguracja Gulpa czy Webpacka nie stanowi już dla Ciebie problemu, to zakładam, że

1:05to co przed chwilą powiedziałeś nie robi już na Tobie żadnego wrażenia.

1:09Ale jednocześnie jeżeli przejdziemy sobie teraz do naszego katalogu projektu i np.

1:14wykorzystamy teraz create-react-app do tego, aby zainicjalizować nową

1:18aplikację, to oczywiście po wyrażeniu zgody mogę tutaj rozpocząć jakąś dłuższą

1:24dyskusję i wyjaśnienia jakichś skomplikowanych procesów, które tutaj

1:27zachodzą i narzędzi, które możemy wykorzystywać

1:30ponieważ jej przygotowanie trwa tak długo.

1:33Przypomnę jeszcze tylko, że ja aktualnie

1:35pracuję na bardzo mocnej konfiguracji i tym bardziej spodziewałbym się, że takie

1:40proste rzeczy jak zainicjalizowanie aplikacji, w której w zasadzie nic nie ma,

1:44będzie trwało zdecydowanie krócej niż ponad 25 sekund.

1:49I teraz tylko możesz sobie wyobrazić ile

1:51trwa ten proces w przypadku maszyny z nieco słabszą konfiguracją.

1:55No ale pójdźmy teraz krok dalej i wejdźmy

1:57do aplikacji, a następnie włączmy ją. Pomimo tego, że aplikacja jest dość mała,

2:02raz, że włączyła mi się tutaj zła

2:04przeglądarka, pomimo tego, że inną mam ustawioną jako domyślną, to i tak musiałem

2:09czekać na samo włączenie przynajmniej dwie trzy sekundy.

2:12W momencie, gdy aplikacja rośnie

2:14taki proces trwa znacznie dłużej.

2:16Co więcej, nawet wprowadzanie pojedynczych

2:18zmian może często wiązać się z koniecznością przebudowania aplikacji i za

2:22każdym razem taki proces może zająć od kilku do kilkunastu sekund.

2:26Nie wspomnę już o samym procesie budowania aplikacji na potrzeby produkcyjne, co

2:31również wraz z rozwojem naszej aplikacji będzie zajmowało znacznie więcej czasu.

2:36Sam pamiętam również jak wiele czasu

2:38spędziłem nad tym, aby skonfigurować aplikację, by budowała się w sposób, który

2:43uwzględnia techniki optymalizacyjne takie jak chociażby tree shaking

2:47i teraz sumując to wszystko w całość, czyli kwestie konfiguracji, kwestie samego

2:51uruchomienia, wprowadzenia zmian i oczekiwania na ich zastosowanie oraz

2:55zbudowanie aplikacji i w tym również publikację jej na serwerze produkcyjnym,

3:00zaczynamy mieć tutaj wiele miejsc, w przypadku których możemy tracić mnóstwo

3:04energii i czasu w oczekiwaniu na zbudowanie naszej aplikacji.

3:08Pytanie więc teraz co możemy z tym zrobić?

3:10Jak się pewnie domyślasz, od czasów Gulpa i Webpacka powstało wiele różnych narzędzi i

3:15rozwiązań, które starały się zaadresować problemy poprzedników.

3:19Jedne robiły to lepiej, inne trochę gorzej,

3:21natomiast na koniec dnia nasza uwaga

3:23powinna skupić się głównie na narzędziu Vite.

3:26Rozwiązuje ono praktycznie wszystkie

3:27wspomniane przeze mnie wcześniej problemy i dodatkowo oferuje znacznie więcej.

3:32Oczywiście nie można się tutaj oszukiwać, że na pewnym etapie konieczne będzie

3:35zajrzenie do konfiguracji i ustawienie kilku rzeczy, ale jednocześnie

3:39wprowadzenie takich zmian jest niezwykle proste w porównaniu chociażby do Webpacka, w

3:44przypadku którego dość niskopoziomowo musieliśmy konfigurować różnego rodzaju

3:48rozszerzenia i pluginy, które niekoniecznie współgrały ze sobą.

3:52W tym przypadku do naszej dyspozycji

3:54oddany jest dość prosty interfejs, z pomocą którego te najważniejsze rzeczy

3:58można skonfigurować z pomocą stosunkowo prostego obiektu konfiguracyjnego.

4:02Jednocześnie, jeżeli masz taką potrzebę,

4:04istnieje również możliwość sięgania głębiej i albo instalowania utworzonych

4:09już pluginów lub też nawet utworzenia własnych.

4:13Myślę, że na tym etapie nie będziemy

4:14skupiać się na tych najbardziej zaawansowanych aspektach konfiguracji Vite

4:19tylko zobaczmy, jakie jesteśmy w stanie w ogóle zacząć z niego korzystać.

4:23Otóż na początek możemy po prostu utworzyć katalog vite, a następnie przejść do niego,

4:27zainicjalizować Package.json oraz zainstalować sam vite jako dev dependency.

4:33No i teraz możemy otworzyć nasz edytor i utworzyć plik index.html

4:37Tutaj jak się pewnie domyślasz, jesteśmy w stanie tworzyć w zasadzie co tylko chcemy.

4:41Oczywiście w momencie gdy dodajemy jakieś skrypty musimy oznaczyć je jako moduł, a

4:46następnie po prostu wpisać sobie tutaj kod JavaScript.

4:49Analogicznie też możemy robić ze stylami,

4:51w przypadku których wystarczy utworzyć plik CSS bądź SCSS, a te zostaną nie tylko

4:57odpowiednio podłączone do naszej aplikacji ale

4:59również zyskamy tutaj kilka innych dodatków, które za chwilę Ci pokażę.

5:03Mianowicie, jeżeli teraz uruchomimy sobie naszą

5:06aplikację z pomocą polecenia vite, no to zwróci uwagę, że po pierwsze trwało to

5:1072 milisekundy, a po drugie od razu mamy tutaj kilka bonusów.

5:15Pierwszym z nich jest fakt, że jeżeli wprowadzę tutaj jakiekolwiek zmiany, to

5:19jak widzisz, natychmiast zostaną one odwzorowane w przeglądarce.

5:22Co więcej, to samo by wydarzyło się w momencie, gdybym miał otwartą naszą

5:26aplikację w wielu różnych oknach przeglądarki.

5:29Analogicznie też, jeżeli zmienię tutaj

5:31kolor naszego tła, to natychmiast zmiany zastosowane w CSSie zostaną tutaj

5:35dosłownie wstrzyknięte do naszej aplikacji.

5:38Oznacza to, że w naszym projekcie na ten moment niepotrzebny jest nawet plik

5:42konfiguracyjny vite, a wszystko bez problemu tutaj działa.

5:45Naturalnie w większości przypadków musimy zadbać tutaj o jeszcze kilka dodatkowych

5:49elementów, o których będziemy mówić w kolejnych lekcjach, ale na potrzeby

5:53tworzenia jakiś prostych interfejsów oraz szybkiej edycji plików HTML

5:57myślę, że to co mamy tutaj jest w pełni wystarczające.

6:01Zatem zwróć uwagę jaką przewagę zyskaliśmy

6:03poprzez sięgnięcie po prostu po nowsze, bardziej dopracowane narzędzie, które

6:07rozwiązuje skutecznie problemy poprzedników.

6:10Po pierwsze nie musieliśmy tutaj nic konfigurować,

6:12aplikacja uruchomiła się natychmiast i

6:14natychmiast też mamy podgląd do wszystkich wprowadzanych zmian.

6:17Co więcej, sposób w jaki działa Vite sprawia, że ta szybkość jest utrzymywana

6:21nawet w sytuacji, gdy mamy do czynienia z bardzo rozbudowaną aplikacją.

6:25Nie będę tutaj zgłębiał się w szczegóły ze względu chociażby na to, że w większości

6:29przypadków po prostu ta wiedza nie jest nam potrzebna, ale istotny jest tutaj

6:33efekt, który otrzymujemy i z którego możemy korzystać.

6:36Co więcej, wcześniej wspominałem chociażby

6:38o tym, że możemy korzystać z Parcela do tego, aby tak szybko postawić sobie

6:42serwer, na którym jesteśmy w stanie pracować,

6:44natomiast jednocześnie, pomimo tego, że

6:46Parcel naprawił szereg swoich problemów, które dotykały go przez długi czas, tak

6:51jednocześnie w przypadku Vite nadal mówimy tutaj o przepaści.

6:54Przykładowo, jeżeli teraz utworzymy sobie nową podstronę i nazwiemy ją np.

6:58about.html no to nawet bez

7:01restartowania serwera jesteśmy w stanie przejść na adres pages/about i wszystkie

7:06wprowadzone tutaj zmiany są dla nas od razu dostępne.

7:09Oczywiście w tym momencie znajdujemy się w

7:11konfiguracji, w przypadku której nie mamy do czynienia z żadnym frameworkiem

7:14JavaScript, a jeżeli tylko masz na to ochotę, to nic nie stoi na przeszkodzie,

7:18aby teraz wykorzystać Vite do tego, aby zainicjalizować nową aplikację

7:23i co więcej, nie odgrywa tutaj większej roli

7:26to z jakim frameworkiem frontendowym pracujemy.

7:28Jak widzisz, na tym etapie jesteśmy w stanie wybrać nie tylko te popularne

7:32frameworki, ale również jeżeli zdecydujemy się np.

7:35na svelte, to jesteśmy w stanie nawet

7:37zdecydować, czy już na początkowym etapie chcemy mieć obsługę TypeScriptu.

7:42Jeżeli tak, możemy po prostu teraz przejść do naszego projektu, a następnie

7:45zainstalować zależności i zrobię to z pomocą Bun, aby było szybciej

7:49i tym samym też moglibyśmy wykorzystać

7:52tutaj Bun do tego, aby uruchomić naszą aplikację,

7:55natomiast niestety w związku z tym, że to narzędzie jest jeszcze w wersji beta, to

7:58jak widzisz w przypadku svelte nasza aplikacja teraz nie działa i w związku z

8:02tym nie pozostaje nam nic innego jak po prostu klasycznie ją uruchomić.

8:07W tym momencie wszystko jest już tutaj w

8:08porządku i jesteśmy w stanie wykorzystać tutaj pełen potencjał Svelte w połączeniu z Vite.

8:13Myślę, że na ten moment możemy się tutaj

8:15zatrzymać ze względu na to, że to co najważniejsze już wiesz.

8:19Mianowicie, jeżeli korzystasz ze starszych narzędzi takich jak Gulp czy Webpack lub

8:24też nawet rozwiązań takich jak Create React App, no to całkiem prawdopodobne, że

8:29całkiem mądre będzie sięgnięcie po nowsze rozwiązania, takie jak chociażby Vite,

8:33czy w momencie, gdy będzie dostępna jego

8:35nieco bardziej stabilna i rozbudowana wersja po narzędzia takie jak Bun.

8:40Oszczędność jaką zyskasz właśnie tylko poprzez to, że przełączy się na nowszy

8:44zestaw narzędzi jest tutaj odpowiednio widoczna.

8:47Tymczasem dzięki za uwagę i zapraszam do kolejnej lekcji.