Najpopularniejsze frameworki Node.js w 2022 r.

Express.js jest tak stary jak Node.js i chociaż Express wciąż jest fenomenalnym frameworkiem zaplecza, nowy rodzaj narzędzi i zestawów pozostawia swój ślad.

Przede wszystkim trend przesunął się w kierunku metaframeworków , gdzie popularny framework, taki jak React, został przeprojektowany, aby wspierać rozwój pełnego stosu. Zaletą tego podejścia jest to, że możesz utrzymać swoją wiedzę w określonych ramach i jednocześnie pracować nad rzeczami back-endowymi. Innymi słowy, wykonaj pełny rozwój stosu.

Skąd pochodzą te dane?

Wszystkie dane pochodzą z ankiet, takich jak State of JavaScript, Stack Overflow Developer Survey oraz osobistego doświadczenia w pracy z różnymi projektami. To nie jest recenzja, na podstawie której framework Node.js ma najwięcej gwiazdek GitHub.

Zamiast tego porównałem liczbę gwiazdek zdobytych w ciągu ostatniego roku. Jest to solidny wskaźnik tego, jak aktywny jest dany projekt i jak dobrze reagują na niego programiści.

 Jeśli chcesz wypróbować którykolwiek z tych frameworków w środowisku czasu rzeczywistego, zapoznaj się z moim artykułem o platformach hostingowych dla programistów. Każda platforma ma darmowy plan, a prawie wszystkie z nich pozwalają zaimportować repozytorium GitHub i bezpośrednio je hostować. 

Np. Możesz wziąć dowolne repozytorium i uruchomić je w ciągu kilku minut.

Aktualne trendy Node.js

W tym poście zauważysz, że wiele frameworków wspomnianych w tym artykule jest opartych na frameworku front-end. Jest to również określane jako meta-ramy . Więc o co z tym chodzi i dlaczego to podejście?

Jeśli spojrzymy na coś takiego jak React, sposób renderowania strony odbywa się poprzez CSR – Renderowanie po stronie klienta. Po wysłaniu żądania przeglądarka otrzymuje plik HTML typu barebone bez rzeczywistej zawartości strony. Tak więc przeglądarka wykonuje drugą podróż, aby pobrać dokument JavaScript, który zawiera treść strony, a następnie dostarcza go i renderuje rzeczywistą stronę.

I to będzie się działo za każdym razem, gdy użytkownik wejdzie w interakcję ze stroną. Mimo że kod HTML pozostaje taki, jaki jest, różne żądania trasy oznaczają, że przeglądarka musi przechodzić tam iz powrotem, aby renderować treść, której chce użytkownik.

Jest to również często określane jako SPA lub aplikacja jednostronicowa.

A oto wady tego podejścia – CSR –:

• Buforowanie — ponieważ cała zawartość strony jest renderowana za pomocą języka JavaScript, na stronie nie ma rzeczywistej zawartości HTML, którą można buforować.
• SEO – Chociaż roboty indeksujące stają się „mądrzejsze”, istnieją definitywne problemy z indeksowaniem treści przez roboty zależne wyłącznie od JavaScript.
• Renderowanie — początkowe renderowanie jest często powolne i nie odpowiada, dopóki cały kod JavaScript nie zostanie załadowany.

Tak więc w tym kontekście ideą stojącą za frameworkami takimi jak Next i Nuxt jest przejęcie frameworka front-end, ale nadanie mu SSR (Server-Side Rendering) za pośrednictwem Node.js.

Mówiąc o SSR – Nick Johnstone opublikował ciekawy tekst zatytułowany „Absurdalna złożoność renderowania po stronie serwera”. Jest też odpowiedni wątek Hacker News z dość dużą dyskusją na ten temat. Chociaż w najbliższej przyszłości niewiele się zmieni, uważam, że niektóre z tych koncepcji spowodują znaczącą zmianę w sposobie działania niektórych frameworków.

#1 – Next.js

Więcej niż bycie React Framework – Next.js zyskuje na popularności dzięki absurdalnie wysokiemu tempu rozwoju. Next.js 10 do Next.js 12 zajęło tylko rok.

Podstawową koncepcją Next.js jest to, że używa Reacta jako podstawy, ale wykonuje całą strukturę renderowania po stronie serwera za pomocą własnej specyfikacji. Ponieważ renderowanie odbywa się po stronie serwera, nie musisz renderować stron po stronie klienta, co zapewnia ogromne korzyści w zakresie wydajności i SEO tam, gdzie to dotyczy.

Jednym z powodów, dla których Next doczekał się tak masowej adopcji, jest to, że eliminuje potrzebę budowania własnego zaplecza. Przez cały czas, zapewniając znaczące sposoby na optymalizację wydajności twoich aplikacji po wyjęciu z pudełka. Vercel to utrzymuje.

#2 – Gniazdo

NestJS po cichu zdołał przyciągnąć znaczną aprobatę społeczności back-endowej. Jedną z głównych filozofii stojącej za Nest jest to, że chociaż frameworki takie jak React przyspieszają rozwój front-endu, wiele takich frameworków ma problemy z rozwiązaniem problemu z architekturą aplikacji. Nest rozwiązuje ten problem, stosując podejście oparte na architekturze.

Co jest oczywiście specyficzne dla back-endu.

Nest opiera się na trzech podstawowych komponentach (inspirowanych przez Angular) – kontrolerach , dostawcach i modułach . Wykorzystanie modułów to sposób, w jaki Nest próbuje rozwiązać problem złożonej hierarchii aplikacji. Każdy składnik można podzielić na kategorie w osobnym module, w ramach którego konfigurujesz własne kontrolery, zależności i określonych dostawców.

#3 – Pasek

Headless to wściekłość w obecnej narracji front-endowej. A Strapi wykonał świetną robotę, pozycjonując się jako jeden z wiodących frameworków Headless CMS.

Czym więc jest Strapi? W najbardziej praktycznym ujęciu Strapi jest zapleczem Twojej aplikacji front-endowej. W pewnym sensie Strapi eliminuje potrzebę uczenia się frameworka takiego jak Express, ponieważ może wykonać większość pracy za pośrednictwem swojego API.

Obejmuje to zarządzanie treścią za pomocą niestandardowego interfejsu użytkownika, punkty końcowe w locie dla GraphQL i REST, zarządzanie użytkownikami (role itp.) oraz osobny interfejs wtyczki, na którym można budować. Strapi jest całkowicie niezależny od frameworka i integruje się z praktycznie każdym językiem, frameworkiem lub biblioteką front-end.

#4 – Remiks

Remix to framework fullstack zbudowany przez ludzi, którzy stworzyli React Router.

Uważam, że Remix jest również jednym z najszybciej rozwijających się frameworków fullstack, jakie widzieliśmy w ostatnich latach. Więc dlaczego? Po pierwsze, Remix stara się jak najbardziej zintegrować ze standardami sieciowymi, zapewniając zwięzłe interfejsy API dla typowych kodów stanu i interakcji użytkowników.

W przeciwieństwie do tradycyjnego frameworka, Remix nie tworzy struktur opartych na kaskadzie (komponentach). Zamiast tego dane są ładowane równolegle po stronie serwera, a następnie podawane jako strona HTML. Oznacza to również, że funkcje oparte na JavaScript (takie jak przesyłanie formularzy) nie spowodują uszkodzenia witryny, jeśli użytkownik ma wyłączoną obsługę JavaScript.

#5 – Nuxt

Nuxt 3 (dla Vue 3) jest w otwartej wersji beta: miej oko.

Nuxt opiera się na Vue jako frameworku pełnego stosu do tworzenia solidnych aplikacji. Jest to również meta-framework, stworzony, aby radykalnie poprawić wrażenia z rozwoju pełnego stosu Vue. Nuxt obsługuje SSR, SPA i statyczne wygenerowane strony.

Główną zaletą dla programistów Vue jest to, że Nuxt może wstępnie renderować widoki i udostępniać je jako pliki statyczne. To oczywiście ma świetne wyniki w optymalizacji SEO i zapewnia znaczny wzrost interaktywności. Ale są też pewne wady.

Podczas gdy Vue ma stały kanał po stronie klienta, Nuxt nie. Tak więc interakcja z DOM po wyrenderowaniu strony przez Nuxt może okazać się trudna.

#6 – SvelteKit

Svelte ma status fajnego dzieciaka w obecnej erze front-endu, a zespół pracuje nad SvelteKit – frameworkiem z pełnym stosem, który opiera się (zastępuje) na Sapperze. SvelteKit wyróżnia się skomplikowanym systemem routingu opartym na plikach.

Podstawowym celem SvelteKit jest przyspieszenie tworzenia stron internetowych poprzez usunięcie niektórych z bardziej powszechnych wąskich gardeł. Wdrażając Snowpack, Vite i inne narzędzia zewnętrzne – SvelteKit może zapewnić bogate w funkcje doświadczenie programistyczne.

Wreszcie, SvelteKit wdraża proces Nawodnienia. Możliwość zachowania stanu aktywnego elementów DOM, które zostały wyrenderowane po stronie serwera.

#7 – Fastify

Framework Fastify stawia na wydajność, a poszczególne testy wykazały, że może obsłużyć do 60 000 żądań na sekundę. Możesz rozszerzyć Fastify (oprócz już świetnego oprzyrządowania) za pomocą hooków i wtyczek. I pomimo tego, że nie jest platformą typu TypeScript, Fastify obsługuje TypeScript.

Mówiąc o wtyczkach, wiele z nich dzieje się w Fastify. Tak bardzo, że Fastify ma oficjalne repozytorium zarówno dla wtyczek stworzonych przez społeczność, jak i wtyczek stworzonych przez zespół Fastify. Ideą wtyczek jest to, że zapewnia czystą architekturę systemu i eliminuje potrzebę przeskakiwania do alternatywnych frameworków. To sprawia, że ​​Fastify jest szczególnie przydatny do tworzenia interfejsów API o niskim nakładzie pracy z wysoką wydajnością w czasie rzeczywistym.

#8 – Sekwoja

Kochasz interfejsy API? Czy lubisz JAMStack? Jeśli odpowiedź brzmi tak, pokochasz RedwoodJS. Jest to framework aplikacji internetowych z pełnym stosem, wykorzystujący wiele nowoczesnych technologii. Technologie te obejmują GraphQL, Prisma, Storybook i Jest. Frontend w Redwood jest zbudowany na bazie Reacta, a także otrzymujesz pełną obsługę TypeScript.

#9 – Ekspresowe

Czy Express wypadł z łask? Nie dokładnie. Framework jest nadal niezwykle popularny i lubiany, ale nie tak bardzo, jak inni wielcy gracze. Dla zespołu, który od lat współpracuje z Expressem, nie ma sensu przesiadać się na coś innego, ponieważ nie ma tu żadnych fundamentalnych kwestii. Wiele frameworków wciąż opiera się na Express.

#10 – Adonis

Adonis to po raz pierwszy w TypeScript framework MVC zaplecza zbudowany dla Node.js. Pamiętaj, że pomimo tego, że Adonis opisuje siebie jako framework back-endu, równie dobrze jest robić z nim pełny programowanie.

Jednym z głównych powodów, dla których programiści uwielbiają Adonisa, jest jego natywna obsługa TypeScript.

Ale także wsparcie dla ORM (Object Relational-Mapping), silne praktyki bezpieczeństwa i łatwa do naśladowania dokumentacja.

Wreszcie, Adonis integruje się z ekosystemem Node.js na podstawowym poziomie, więc posiadanie wcześniejszego doświadczenia w tworzeniu Node jest w zasadzie koniecznością.

#11 – Zwornik

Ostatnią platformą Node.js na tej liście jest Keystone. I podobnie jak Express, istnieje prawie od pierwszego dnia. To sprawia, że ​​Keystone jest dojrzałą platformą, zapewniającą konkretne narzędzia i integracje, aby stworzyć środowisko przyjazne dla programistów.

Niektóre godne uwagi funkcje (z których wiele zostało udoskonalonych przez lata) w Keystone obejmują automatyczne CRUD za pośrednictwem API GraphQL, które można dalej rozszerzać. Dodatkowo możesz tworzyć i implementować własne komponenty React.js.

Keystone jest używany w różnych dziedzinach programistycznych i dobrze współpracuje z aplikacjami mobilnymi, praktycznymi witrynami internetowymi, sklepami eCommerce i wieloma innymi.

Meta, tubylec i szczypta Headless

Minęło sporo czasu, odkąd ostatnio robiłem taki przegląd. Wtedy sprawy były o wiele prostsze i chociaż nigdzie nie można znaleźć Compound i Locomotive, miło jest zobaczyć, jak Keystone i Express przechodzą przez próbę czasu.

Mogę też powiedzieć, że wokół Node.js jest sporo szumu. Wierzę, że niektórzy ludzie są nieszczęśliwi i czują się z tym skazani . Pomysł menedżerów pakietów (npm) również zaczyna się starzeć, ponieważ pakiety wciąż dodają stosy niepotrzebnych rozmiarów pakietów do projektu na małą skalę.

Ale niezależnie od przypadku popularność każdego frameworka mówi sama za siebie. Ogólnie rzecz biorąc, programiści są zadowoleni z pracy z meta frameworkami i może to mieć związek z faktem, że usprawnia to również rozwój pełnego stosu. To w większości eliminuje potrzebę ponownego uczenia się nowego ulubionego frameworka od zera.