Odkrywanie MERN, MEAN i MEVN

Od momentu pojawienia się JavaScript w 1995 roku, jego główną rolą było programowanie po stronie klienta, czyli tak zwany front-end. Początkowo język ten nie cieszył się najlepszą opinią z powodu niskiej wydajności, jednak z czasem zainwestowano ogromne zasoby w jego rozwój i ulepszenie.

Te inwestycje zaowocowały powstaniem wielu popularnych bibliotek i frameworków wykorzystujących JavaScript. Wśród nich warto wymienić jQuery, React, AngularJS, Vue oraz Node.js.

Czym jest pełny stos JavaScript?

Pojęcie pełnego stosu JavaScript odnosi się do praktyki używania tego języka zarówno w warstwie interfejsu użytkownika (front-end), jak i po stronie serwera (back-end) aplikacji. JavaScript, znany głównie z bibliotek i frameworków front-endowych, dzięki Node.js zyskał także silną pozycję w obszarze serwerowym.

Node.js, mimo że nie był pierwszą próbą użycia JavaScript po stronie serwera, okazał się najbardziej udanym rozwiązaniem. Obecnie JavaScript po stronie serwera jest niemal synonimem Node.js, a sam JavaScript stał się oficjalnie językiem programowania full-stack, posiadającym trzy bardzo popularne stosy.

Stos MERN

Stos MERN, oparty na JavaScripcie, jest prawdopodobnie najczęściej wybieranym rozwiązaniem, składającym się z czterech kluczowych technologii. Na froncie aplikacji wykorzystywana jest biblioteka React, popularne narzędzie opracowane przez Facebooka. Jej popularność wynika z wielu czynników, takich jak elastyczność, optymalizacja wydajności oraz szybkie wdrożenie przez duże firmy technologiczne.

Pozostałe trzy elementy tego stosu to Node.js, Express i MongoDB. Te technologie współpracują ze sobą w zapleczu stosu MERN.

Node.js (znany również jako NodeJS) to więcej niż tylko framework. Jest to asynchroniczne środowisko uruchomieniowe JavaScript, które działa po stronie serwera aplikacji, zarządzając określonymi procesami. Twórcy Node.js postawili na nieblokujące operacje wejścia/wyjścia (I/O), co daje mu przewagę nad konkurencją i pozwala na tworzenie aplikacji bez obawy o zakleszczenia.

Kolejną istotną cechą Node.js jest jego sterowanie zdarzeniami. Wykorzystuje on pętlę zdarzeń jako podstawową strukturę środowiska uruchomieniowego, a nie tylko bibliotekę. Ta pętla zdarzeń odpowiada za zdolność Node.js do wykonywania nieblokujących operacji wejścia/wyjścia.

Express (znany także jako Express.js) to framework dla Node.js, który umożliwia mu realizację konkretnych zadań. Na przykład, Express odgrywa kluczową rolę w sposobie, w jaki Node.js obsługuje routing aplikacji, znacznie upraszczając ten proces. W większości aplikacji Node.js to właśnie Express jest odpowiedzialny za obsługę wszystkich żądań HTTP.

MongoDB to system zarządzania bazami danych NoSQL. Podobnie jak Node.js, MongoDB jest pionierem w swojej dziedzinie. Przez długi czas nazwa MongoDB była synonimem baz danych NoSQL. Programiści chętnie korzystają z MongoDB ze względu na jego łatwość użycia i większą elastyczność w porównaniu z jego odpowiednikami SQL.

Stos MEAN

Tym, co wyróżnia stos MEAN od MERN, jest technologia front-end, czyli Angular. Historia Angulara jest dość skomplikowana. Pierwsza wersja Angulara (AngularJS) została napisana wyłącznie w JavaScripcie. Obecnie Angular to platforma do tworzenia aplikacji internetowych oparta na języku TypeScript, który jest nadzbiorem JavaScript.

Angular to framework oparty na komponentach, oferujący wbudowane wsparcie dla kluczowych elementów tworzenia stron internetowych, takich jak routing. Ponadto, Angular pełni rolę platformy deweloperskiej, oferując zaawansowane funkcje, które zazwyczaj trzeba byłoby pozyskiwać z zewnętrznych bibliotek lub frameworków. Jednym z przykładów jest narzędzie do internacjonalizacji.

Narzędzie do internacjonalizacji ułatwia lokalizację poprzez wydzielenie tekstu do tłumaczenia na różne języki. Obsługuje ono wiele tłumaczeń, a także umożliwia formatowanie danych w zależności od lokalizacji użytkownika aplikacji. W back-endzie stosu MEAN znajdują się Node.js, Express oraz MongoDB.

Stos MEVN

Chociaż stos MEVN jest prawdopodobnie najmniej popularny spośród trzech głównych stosów JavaScript, nadal cieszy się wsparciem silnej społeczności. Stos MEVN składa się z Node.js, Express, MongoDB oraz Vue.

Vue (znany również jako Vue.js) to framework JavaScript. Podobnie jak React i Angular, Vue wykorzystuje model oparty na komponentach, pozwalający na tworzenie zarówno prostych, jak i złożonych interfejsów użytkownika aplikacji. Ten framework wyróżniają dwie podstawowe cechy: deklaratywne renderowanie i reaktywność.

Struktura Vue oferuje renderowanie deklaratywne, umożliwiające opisanie wyglądu interfejsu użytkownika za pomocą stanu JavaScript. Stan JavaScript odgrywa kluczową rolę w mechanizmie reaktywności, pozwalając na aktualizowanie modelu DOM (Document Object Model) w przypadku wystąpienia zmian.

MERN kontra MEAN kontra MEVN

Porównanie tych trzech głównych stosów JavaScript sprowadza się głównie do analizy technologii wykorzystywanych w warstwie front-end. Dlatego poniższa tabela przedstawia ocenę stosów z uwzględnieniem React, Angular i Vue.

MERN

MEAN

MEVN

Krzywa uczenia się

React charakteryzuje się łagodną krzywą uczenia się.

Angular wymaga intensywnej nauki ze względu na szeroką gamę funkcji i wykorzystanie TypeScript.

Vue jest uważany za bardziej przyjazny dla początkujących w porównaniu do React, ponieważ używa składni szablonów bardzo zbliżonej do HTML, podczas gdy React korzysta z JavaScript XML (JSX).

Ekosystem

• React używa biblioteki Redux do zarządzania stanem.
• React Router służy do routingu.
• Biblioteki takie jak Material-UI i Bootstrap do projektowania komponentów.
• Jest, Mocha i Chai to popularne narzędzia do testowania.

• Angular wykorzystuje bibliotekę NgRx do zarządzania stanem.
• Angular ma wbudowany router.
• Material Angular do projektowania komponentów.
• Posiada wbudowane narzędzia testujące.
• Oferuje wbudowane renderowanie po stronie serwera.

• Vue używa biblioteki Pinia do zarządzania stanem.
• Vue Router do routingu.
• Biblioteki komponentów takie jak Vuetify i Element UI do projektowania interfejsu.
• Vue posiada wbudowane narzędzia testujące.
• Obsługuje renderowanie po stronie serwera.

Licencja i społeczność

• React posiada licencję MIT.
• React może pochwalić się dużą społecznością i szerokim wyborem bibliotek zewnętrznych, np. Redux, które wspierają tworzenie wysokiej jakości aplikacji.

• Angular posiada licencję MIT.
• Angular również ma silną społeczność, a większość zasobów jest wbudowana.

• Vue posiada licencję MIT.
• Vue posiada rosnącą społeczność, a wiele z jego zasobów jest wbudowanych.

Elastyczność

React jest bardzo elastyczny pod względem struktury projektu i możliwości ponownego wykorzystania komponentów.

Angular ma swoje wymagania odnośnie struktury projektu ze względu na dużą liczbę wbudowanych funkcji i konwencji.

Vue plasuje się gdzieś pomiędzy Reactem a Angularem. Zapewnia sporą elastyczność, oferując jednocześnie własny zestaw konwencji.

Bezpieczeństwo

React nie oferuje żadnych wbudowanych funkcji bezpieczeństwa.

Angular posiada wbudowane zabezpieczenia, które pomagają chronić przed atakami typu cross-site scripting (XSS).

Vue również ma wbudowaną ochronę przed atakami XSS.

Wydajność renderowania

React wykorzystuje wirtualny DOM (VDOM), będący kopią rzeczywistego DOM. Gdy zmienia się stan aplikacji, React tworzy wirtualną reprezentację w VDOM, która następnie aktualizuje rzeczywisty DOM w procesie zwanym uzgadnianiem. Takie podejście minimalizuje rzeczywiste manipulacje DOM, które są kosztowną operacją.

Angular korzysta z mechanizmu wykrywania zmian, który monitoruje stan aplikacji i aktualizuje DOM w przypadku wykrycia zmian.

Vue łączy wirtualny DOM React z własnym systemem reaktywności. Zapewnia to Vue to, co najlepsze z obu światów w kontekście renderowania.

Dostępność

React nie oferuje wsparcia dla ułatwień dostępu.

Angular posiada narzędzia i funkcje wspomagające dostępność.

Vue nie obsługuje ułatwień dostępu.

Zalety pełnego stosu JavaScript

Niewątpliwą zaletą pełnego stosu JavaScript jest skrócenie czasu potrzebnego programistom na naukę, którzy zdecydują się na jego wykorzystanie. Dodatkowo, jest on asynchroniczny, co umożliwia tworzenie skalowalnych aplikacji. Pod względem wydajności środowisko uruchomieniowe JavaScript, zwłaszcza Node.js, należy do najlepszych, zapewniając sprawne przetwarzanie po stronie serwera.

Jednak pełny stos JavaScript ma również pewną wadę. Mimo że JavaScript po stronie serwera bardzo dobrze radzi sobie z procesami wejścia/wyjścia i zdarzeniami, nie jest idealny do zadań intensywnie obciążających procesor, szczególnie gdy dostępne są wydajniejsze języki, takie jak Python czy Java.