W obecnym świecie frontendowym jesteśmy ze wszystkich stron atakowani frameworkami czy bibliotekami. Chcesz zrobić stronę? Musisz użyć czegoś, nieważne czego. Internet wie lepiej. React? Vue? A może Angular? Nie ważne, najważniejsza jest biblioteka lub framework! – takie myślenie ma jednak drugie, mroczniejsze dno.

Gdy zaczynałem swoją przygodę z JSem, na topie było jQuery, nowością był Angular.js, a React dopiero wchodził do polskich firm. Bardzo dużo czasu i nerwów straciłem, próbując się nauczyć najpierw jQuery, a później Angulara. Spotykałem się z wieloma problemami, których nie rozumiałem, a które zajmowały mi wiele godzin pracy. Dzisiaj, z perspektywy czasu, wszystkie moje problemy wynikały z jednej prostej rzeczy – nierozumienia JavaScriptu.

Zamiast nauczyć się solidnych podstaw, próbowałem ułatwić sobie drogę. Chciałem pójść na skróty, używając gotowych bibliotek. Myślałem, nie tylko ja zresztą, że jeżeli np. jQuery ułatwia pracę z niezrozumiałym wtedy JSem, to i problemy będą łatwiejsze do rozwiązania, szybciej się nauczę i raz-dwa będę zarabiał wykopowe 15k.

Rzeczywistość okazała się brutalna, a ja straciłem naprawdę wiele czasu, zanim nie zrozumiałem jak ten JS tak naprawdę działa. Co dzieje się pod spodem, co sprawia, że czasami chcemy rwać sobie włosy z głowy. I właśnie dlatego chciałbym podzielić się z Tobą tym, dlaczego warto poznać podstawy JavaScript.

Lepsze zrozumienie tego, co się dzieje pod spodem

Czy spotykamy dziwny błąd, czy nagle nasza strona nie działa tak, jakbyśmy chcieli, czy mamy problem z ukochanym this – aby być lepszym frontend developerem, musimy wiedzieć jak JS działa pod spodem. Jak działają zakresy zmiennych, jak działa this w określonych miejscach, dlaczego wbrew pozorom nie zawsze powinniśmy stosować arrow functions. Wiedza o działaniu JS przyda się nam przez całe frontendowe życie. Oraz pozwoli zrozumieć ten obrazek:

Pisanie lepszego kodu

Czysty JS ma bardzo dużo wbudowanych funkcji, które możemy wykorzystać. Nie ma sensu np. dodawać całej biblioteki underscore.js, jeżeli chcemy wykorzystać jedną funkcję, która i tak istnieje w czystym JSie. Z innej strony – rozumiejąc, jak działa JS, możemy pisać czystszy i lepszy kod, a także nauczymy się wykorzystywać mocne strony JSa na swoją korzyść.

Szybsza nauka frameworków i bibliotek

Wbrew pozorom nauka czystego JSa nie jest przeciwieństwem nauki frameworków. Jest zbudowaniem lepszych fundamentów pod naukę. Znając wszystkie zalety i wady JSa, wiedząc, jak działa, zaczniemy o wiele szybciej uczyć się kolejnych frameworków i bibliotek. Nawet, co zaskakujące, w pewnym momencie odkryjesz, że one wszystkie są do siebie bardzo podobne.

Frameworki i biblioteki się zmieniają, JS trwa

Skoro już nawiązujemy do frameworków i bibliotek, na początku artykułu wspomniałem, że gdy zaczynałem się uczyć, na topie było jQuery, Angular.js był super, a wchodził React. Od tego czasu minęło ponad 5 lat, a pojawiają się kolejne biblioteki i frameworki, np. Vue. Bardzo możliwe, że ten świetny, najlepszy i jedyny na świecie ukochany framework, w którym pracujesz, jutro będzie na wymarciu, bo powstanie coś lepszego/przyjemniejszego/szybszego/cokolwiek.

I co wtedy? Zainwestowany czas na naukę frameworka przepada? Uczysz się na nowo od zera? Nie! Dzięki zdobytemu doświadczeniu oraz dobrej i gruntownej wiedzy o czystym JSie bez problemu przeskakujesz na inne rozwiązanie. Jeżeli rozumiemy, co się dzieje pod spodem, możemy tę wiedzę przenosić z frameworka na framework, z biblioteki na bibliotekę.

Niepotrzebne komplikowanie

Bardzo często używamy frameworka czy biblioteki od razu, nie zastanawiając się, czy jest to potrzebne. Kiedy dobrze poznamy JS, nagle się okaże, że nie trzeba ściągać np. Angulara, żeby łatwo pobrać oraz wyrenderować dynamiczną obrazków. Wystarczy czysty JS. Albo nie użyjemy Vue tylko do pokazywania i ukrywania treści. Może czasami jest to wygodniejsze, ale niepotrzebnie skomplikowane. Po co to robić? Bardzo prawdopodobne, że wystarczyłoby parę linii w czystym JSie i mielibyśmy ten sam efekt.

Rozmiar strony

Zminifikowana, produkcyjna wersja Vue.js waży 33,3 KB. Niewiele, prawda? A teraz dodaj to na swój serwer, gdzie ty płacisz za transfer. I dodaj do tego, że Twoja strona odnosi sukces na skalę światową (czego Ci szczerze życzę :) ) i masz np. 10 milionów wejść miesięcznie. 10 milionów razy 33,3 KB dalej niecałe 318 GB transferu. Transferu jednego frameworka, który być może nie jest potrzebny.

Nie mówię, żeby zawsze obcinać jak najbardziej, oczywiście przeglądarki też cache’ują po swojej stronie niektóre biblioteki i frameworki, ale widzisz, w czym rzecz. Jeżeli możemy coś zrobić językiem wbudowanym w przeglądarkę w prosty sposób, to nie warto dodawać dodatkowych rzeczy do pobierania dla klientów.

Podsumowanie

Jak widzisz, nauka czystego JSa może dać wiele. A poza tym, będzie procentować całe życie. Dlatego proszę Cię, poświęć swój czas i naucz się czystego JSa. Zapraszam również do komentarzy, opowiedz swoją historię. W kolejnym wpisie napiszę, z czego najlepiej zacząć się uczyć JSa.

Dobrego dnia!