Co to jest node.js

"Node.js to środowisko uruchomieniowe języka JavaScript oparte na silniku V8 przeglądarki Chrome" - taką definicję możemy przeczytać na oficjalnej stronie Node. W mojej opinii, jest to hasło, które nie mówi zbyt dużo początkującym developerom. Dziś chciałbym rozwiać ich wątpliwości. Zapraszam do lektury.

Z teoretycznej strony, node.js to środowisko uruchomieniowe JavaScriptu po stronie serwera. Słysząc to, początkujący webdeveloper pomyśli pewnie, że dzięki niemu możemy korzystać z kodu JS po backendowej stronie aplikacji. To prawda. Dzięki powstaniu tego środowiska, język JavaScript niesamowicie się rozwinął i z czasem przestano go nazywać mało poważnym językiem do wyświetlania niewielkich pop-upów na stronach internetowych. Zyskał szersze zastosowanie i możliwości innych języków, takich jak PHP, Ruby, Python etc., przeznaczonych do prac serwerowych. W praktyce jednak, nawet frontendowcy skazani są na używanie środowiska node oraz wybranego menadżera pakietów (npm, yarn). Nie ma jednak nic pejoratywnego w określeniu "skazani", bowiem node przyczynił się także do rozwoju aplikacji webowych po stronie klienta, czyli - jednym słowem - frontendu. Jako, że moją główną dziedziną jest frontend, to właśnie z jego perspektywy opiszę poruszaną tu technologię i wyjaśnię, dlaczego jest ona ogromnie ważna dla każdego frontendowca.

Co umożliwia node?

Główną funkcjonalnością node.js, jako technologii wykonywanej po stronie serwera, jest manipulacja strumieniami wejścia/wyjścia. Dzięki temu możemy: czytać, tworzyć, usuwać i modyfikować pliki. Nie jest to wykonalne po stronie klienta, korzystając tylko z przeglądarkowej wersji JavaScriptu. Oprócz tego, po powstaniu node.js, zyskał on rangę pełnoprawnego języka serwerowego, który w pewnych aspektach góruje nad starszymi technologiami backendowymi. Nie jest to jednak obiekt moich dzisiejszych rozważań. No dobrze - zrozumiałym jest, że język na backendzie powinien używać z funkcjonalności, które oferuje node. Co jednak sprawia, że jest on taki ważny dla frontendu? Już wyjaśniam.

Node.js jako podstawowe narzędzie pracy frontend developerów

Jak oczywiście wiemy, strona internetowa to zwykły plik HTML. Ewentualnie z połączonymi zależnościami w postaci stylów CSS albo skryptów w JS, manipulującymi DOMem na stronie. Są jeszcze assety takie jak obrazki, zdjęcia, czy inne pliku zaciągane z serwera lub z innego miejsca w sieci. To wszystko, co dotyczy strony frontendowej. Nie ma nic więcej. Tak właśnie kiedyś działały, jak i dzisiaj funkcjonują strony w sieci. Tak działa ten blog, facebook, youtube, czy każda inna strona w Internecie. 

Z biegiem czasu i powstawaniem nowych wersji przeglądarek oraz ich silników (od których zależy poprawność uruchamiania i wyświetlania stron internetowych), powstał ogromny rozłam między działaniem starszych przeglądarek, a ich nowymi wersjami. Coś co działało w jednej przeglądarce, nie działało w jej starszej wersji lub innej przeglądarce. Każdą zmorą webdevelopera z dawniejszych czasów był Internet Explorer, który posiadał swój własny silnik i posługiwał się odmiennymi, niezrozumiałymi nikomu, rozwiązaniami w JavaScripcie i w całym DOMie. Radzono sobie z tym w ten sposób, że programista pisał tak zwane "polyfille". Zapewniały one poprawność działania strony i jej kodu w większości starszych i nowszych wersjach przeglądarek. Kamień milowy, co do zasadności tego podejścia, nastąpił w momencie powstania nowego standardu języka JS - EcmaScript 6. ES6 wprowadzał ogrom nowości i usprawnień, tchnąwszy w ten język nowe życie.

zdjęcie tematyczne

Zmiany zabrnęły tak daleko, że pisanie polyfillów do starego kodu sprzed ES6, mijało się z celem. Powstało rozwiązanie Babel, dzięki któremu zajmowanie się takimi rzeczami przez programistów zeszło na dalszy plan. Ma ono za zadanie odciążyć programistów i w sposób automatyczny transpilować nowsze wersje JS (w standardach ES6+) do ich starszych wersji. Świetne rozwiązanie ogromnego wówczas problemu dotyczącego frontednu. Powstanie Babela i wysyp wielu innych, nowych bilbiotek, usprawniających pisanie stron internetowych, spowodowało, że musiało być lepsze rozwiązanie niż wklejanie masy linijek zależności do pliku HTML. Tym rozwiązaniem został node.js wykonywany po stronie serwera.

Dzięki node.js i jego menadżerowi pakietów (npm), dodawanie nowych bibliotek stało się proste i przejrzyste. Spowodowało to, że w większości narzędzi, frameworków, preprocesorów CSS itp., zaczęto korzystać z node. Nie w sposób bezpośredni, ale poprzez dany system budowania aplikacji, np. webpacka lub Gulpa. Buildery, z uwagi na niedostępne jak dotąd możliwości klientowego JavaScriptu, muszą korzystać z  tego środowiska. Przede wszystkim dzięki builderom otrzymujemy końcowy, produkcyjny build, gotowy do puszczenia w świat. To właśnie sprawiło, że node.js w dzisiejszym frontendzie, jest rzeczywistym must-have każdej komercyjnej i zaawansowanej aplikacji webowej.

Jak działają buildery?

Jak sama nazwa wskazuję, dzięki builderom budujemy naszą stronę do postaci poprawnej w przeglądarce - zwykłej strony wykorzystującej jedynie pliki HTML, CSS i JS. Builder wykorzystuje możliwości node i za pomocą różnych paczek określonych jako loadery, transpiluje nasz kod do postaci uniwersalnej, działającej w większości przeglądarkach. Możemy tak skonfigurować builder, aby wykorzystywał Babela, transpilował kod SaSS do czystego CSS lub nawet, żeby zaczytywał poprawnie pliki graficzne. Poza tym buildery sprawiają, że wydajność strony jest lepsza, np. poprzez minifikowanie kodu. O samym webpacku zrobię osobny wpis wyjaśniajacy jego podstawowe funkcje i działanie. Niech to będzie preludium do rozwinięcia tego akapitu.

zdjęcie tematyczne

Instalacja node.js

Środowisko node jest multiplatformowe i dostępne na każdym systemie operacyjnym. W przypadku Windowsa i Apple, instalacja środowiska jest dziecinnie prosta i polega na prostym przeklikaniu instalatora, którego można pobrać z oficjalnej strony technologii. I ten sposób jak najbardziej polecam. Linux wymaga wpisaniu jednej komendy instalacyjnej. Ważne jest, by podczas instalacji, zainstalować także menadżer pakietów dla node - npm, z którym techniki pracy będę przedstawiał w następnym poście. Menadżer pakietów jest ogromnie ważny dla naszych projektów, w kontekście korzystania z zewnętrznych bilbiotek. Po instalacji mamy dostęp do wiersza poleceń node, gdzie możemy sprawdzić wersję poprzez polecenie:

node -v

Oczywiście polecam jak najczęściej aktualizować node do nowych wersji, by zachowość ciągłość poprawnego działania i kompatybilność pobranych paczek. Najlepiej to robić w ten sam sposób, w który instalowaliśmy środowisko pierwszy raz.

Node to must-have!

Z webpacka i innych narzędzi wymagającyh node, jak pewnie się domyślasz, korzysta React, a w zasadzie paczka create-react-app, czyli prosto mówiąc, aplikacja reactowa. Create-react-app wymaga byśmy używali node i uprzednio skonfigurowanego webpacka. Poza aplikacjami reactowymi, CLI (Command Line Interface - wiersz poleceń) Vue oraz Angulara, także wymagają do działania node. Jest więc naturalnym procesem, by frontednowcy, chcący rozpocząć przygodę z danym frameworkiem, musieli poznać to wspaniałe narzędzie. Narzędzie, które rozwiązuje masę dotychczasowych problemów, z którymi twórcy stron internetowych musieli się jak dotąd mierzyć. Narzędzie, które wprowadza gros świetnych rozwiązań we współczesnym świecie programowania po stronie klienta. Mimo, że zostało stworzone do obsługi serwera.

© Damian Kalka 2022
Wszelkie prawa zastrzeżone