„The Sound of Music” może głosić, „Let’s start at the very beginning, a very good place to start.” Ale prawie każdy deweloper wie, że to niemądry plan. Właściwym miejscem do rozpoczęcia jest solidny fundament zbudowany przez wspaniały zespół programistów open source. Sklonuj ich ciężką pracę, a następnie dodaj tylko tyle kodu, aby uczynić go swoim własnym. Nie ma potrzeby powtarzać tego, co wszyscy zrobili wcześniej.
To łatwy plan – kiedy już się zdecydujesz. Niestety, wybór tego fundamentu może być prawie tak trudne, jak rozpoczęcie na samym początku. Świat frameworków internetowych jest bardzo aktywnym obszarem rozwoju i mogą istnieć dziesiątki dobrych projektów open source, które byłyby świetnym początkiem dla twojego projektu.
Co gorsza, różne zespoły, które stworzyły te różne projekty, wyruszyły w inną drogę, ponieważ miały poważne różnice filozoficzne z innymi opcjami. Spojrzeli na inne frameworki i zdecydowali, że mogą zrobić to lepiej. Innymi słowy, zrobili to z jakiegoś powodu i możesz lub nie zgodzić się z ich decyzją.
Lista dobrych miejsc do rozpoczęcia poniżej celowo pomija liderów rynku React, Angular i Vue, aby uczynić rzeczy nieco prostszymi. To nie znaczy, że wielka trójka jest zła. Nadal mogą być odpowiednie dla Ciebie. Chodzi tylko o to, że ciągle się o nich mówi, a te dyskusje pomijają kilka całkiem dobrych innych opcji.
Jest wiele dobrych powodów, aby wybrać najpopularniejsze. Wielu ludzi w twoich butach rozejrzało się i wielu z nich wybrało React, Angular lub Vue z dobrego powodu. Ale to było wtedy. W międzyczasie niektórzy sprytni ludzie stworzyli nowsze frameworki, które są szybsze, prostsze, mocniejsze, lub inne z dużego zestawu superlatyw.
W większości poniższych przypadków, zespoły stworzyły coś intrygującego i potężnego poprzez ponowne wyobrażenie sobie natury frameworka. To wymyślny sposób na powiedzenie, że skończyło się na usunięciu jakiejś cechy, co uczyniło framework bardziej wydajnym, a tym samym zmniejszyło ilość potrzebnej pamięci, przyspieszyło czas uruchamiania, lub ogólnie uczyniło go bardziej zwinnym. Lub w kilku przypadkach, dodali nowe pomysły, które mogą stać się standardem w przyszłości.
Jeśli masz czas, aby zainwestować, oto lista niektórych z innych ciekawych wyborów. Niekoniecznie są one właściwe dla niektórych ludzi i z pewnością nie są najlepszym wyborem dla wszystkich, ale mogą być lepszym wyborem dla ciebie. Twoim zadaniem, jeśli zdecydujesz się je przyjąć, jest stworzenie solidnego opisu swojej aplikacji internetowej, spisanie stosunkowo solidnego opisu różnych przypadków użycia, a następnie ocena tych narzędzi mając to na uwadze.
Może podoba Ci się konkretne podejście do projektowania kodu. Być może Twoja aplikacja nie potrzebuje niektórych funkcji w grubszych, bardziej popularnych frameworkach. Istnieją dziesiątki powodów, dla których warto zainwestować w jedną z tych innych ścieżek. Może się okazać, że jedna z nich zdziała cuda dla twojej aplikacji.
Petit DOM
Jeśli podoba ci się idea wirtualnego DOM, ale nie chcesz wszystkich ograniczeń, które wiążą się z przyjęciem sposobu myślenia ludzi z React, Vue, lub innego dużego frameworka, to Petit DOM jest drogą do zrobienia. Otrzymujesz niewielką ilość kodu, który pozwoli ci manipulować wirtualną kolekcją znaczników, a następnie migrować je do prawdziwego DOM. Wszystko inne dotyczące struktury komponentów i renderowania zależy od Ciebie. Jeśli twoje komponenty są proste, lub jeśli zamierzasz stworzyć jakąś super złożoną hierarchię renderowania, która będzie tylko twoja, może to być twoja podstawa, ponieważ wszystko, co zapewnia, to narzędzie do wirtualizacji DOM.
Surplus
Wirtualny DOM może nie być dla każdego. Zajmuje on miejsce, więc jeśli twoje manipulacje nie są zbyt skomplikowane, równie dobrze możesz przekazać swoje instrukcje do oficjalnego DOM. Biblioteka Surplus właśnie to robi. Bierze ona ulubiony markup JSX i kompiluje go do kodu, który będzie manipulował prawdziwym DOM. Jak to się mówi w branży reklamowej, eliminuje to pośrednika. Bez dyfuzji. Żadnej tajnej dodatkowej warstwy. Po prostu czysta manipulacja prawdziwym DOM. Jeśli twój kod jest prosty i bezpośredni na tyle, by zrobić tylko kilka rzeczy z DOM, po co zawracać sobie głowę wirtualnym rozproszeniem?
RE:DOM
Inną opcją dla tych, którzy nie chcą inwestować żadnej pamięci w wirtualny DOM, jest malutka biblioteka (2KB) o nazwie RE:DOM. RE:DOM zawiera kilka podstawowych procedur, które pozwalają na tworzenie wszystkich znaczników i komponentów za pomocą kilku prostych wywołań JavaScript. Składnia jest znacznie bliższa CSS, więc możesz określić dość skomplikowane znaczniki z ID i klasami za pomocą kilku naciśnięć klawiszy. Twoje klawisze „less than” (<) i „greater than” (>) będą ci wdzięczne.
Mithril
Nie wszystkie alternatywy są malutkie i minimalistyczne. Mithril może być nazwany „średniej wielkości” frameworkiem w tym kontekście, chociaż waży tylko około 8KB. Cały ten kod buduje wirtualny DOM z wydajnym mechanizmem aktualizacji, tak jak inne, ale jest też wyposażony w standardowy zestaw narzędzi do radzenia sobie z wieloma standardowymi wyzwaniami, takimi jak routing i wywołania XMLHttpRequest. Twórcy projektu chcą, aby projekty Mithril były względnie ustandaryzowane i uważają, że dodanie tego kodu do głównej biblioteki zwiększa standaryzację. Jeśli to nie wystarczy, forsują również pewne standardowe formatowanie i idiomatyczne struktury.
Bobril
Jeśli podoba Ci się wirtualny DOM i stanowe komponenty Reacta i lubisz programować w TypeScript, to Bobril lub jego przyjazny Angularowi kuzyn ngBobril może być po prostu biletem. Framework jest konsekwentnie znacznie szybszy niż React lub Angular w niektórych benchmarkach, być może z powodu szybszych algorytmów diff i braku wsparcia dla izomorficznego JavaScriptu. Istnieją również skrócone funkcje do manipulacji CSS i kompletna warstwa zarządzania stanem, BobX, jeśli jej potrzebujesz.
Marko
Jeśli spędzasz czas na licytowaniu dozowników Pez lub innych przedmiotów kolekcjonerskich, doświadczyłeś mocy Marko, wąskiego, szybkiego frameworka, który eBay udostępnia na licencji open source. Najprzyjemniejszą częścią może być bardzo lekka składnia szablonów, która sprytnie usuwa większość nadmiaru tłuszczu z HTML, tak że struktura jest definiowana przez wcięcia i niewiele więcej. A silnik renderujący jest bardzo szybki, zdolny do napędzania wyszukanych konstelacji tańczących DIVów, które aktualizują się szybciej niż 60fps.
Svelte
Twój standardowy framework sieciowy jest dostarczany z kompilatorem i pobraną biblioteką, która obsługuje w czasie działania to, co produkuje kompilator. Ten dwuetapowy proces pozwala na tworzenie bardzo rozbudowanego kodu za cenę oczekiwania na pobranie biblioteki runtime i parsowanie jej przy każdym otwarciu strony. Kompilator Svelte pozbywa się tej złożoności, wypluwając niemal czysty JavaScript, który jest prawie gotowy do samodzielnego działania, aczkolwiek tylko w niektórych nowszych przeglądarkach (np. Chrome, Firefox, Opera i IE10). Jest to sprytny gambit architektoniczny, który tworzy bardzo lekkie strony internetowe, które zajmują mało pamięci.
Inferno
Inferno to kolejny framework stworzony do robienia wielu rzeczy z tego, co robi React, ale z mniejszym pobraniem i szybszym czasem działania. Osiąga to w dużej mierze poprzez wyrzucenie rozbudowanego mechanizmu zdarzeń syntetycznych i skupienie się tylko na tych najbardziej istotnych jak onClick. Wiele innych części API jest podobnych, jeśli nie takich samych, co sprawia, że stosunkowo łatwo jest przenieść swój kod, jeśli nie potrzebuje on warstwy optymalizacji zdarzeń.
Preact
Jednym z najmniejszych potomków Reacta jest Preact, hołd, który oferuje większość najcenniejszych funkcji, takich jak wirtualny DOM i wyrafinowane komponenty, ale pozbywa się syntetycznych obsługi zdarzeń i niektórych rekwizytów dziedziczenia. Podczas gdy Inferno stara się zaimplementować tylko najważniejsze zdarzenia, takie jak onClick, Preact nie zawraca sobie głowy próbami zrobienia czegokolwiek ze zdarzeniami, pozostawiając użytkownikowi poleganie na natywnym addEventListener przeglądarki. Pominięcie funkcji, które nie dodają wiele (w ich opinii) jest sposobem, w jaki sprawiają, że ich pobieranie jest jeszcze mniejsze. Jest to pewien kompromis, ponieważ benchmarki pokazują, że Preact jest nieco wolniejszy niż Inferno. Oczywiście, twoja aplikacja może być inna, a twój przebieg może się różnić. Jeśli naprawdę potrzebujesz czystej kompatybilności z Reactem, istnieje nawet biblioteka (preact-compat), która naprawia większość problemów podczas budowania.
Hapi
Wiele frameworków przybywa w jednym kawałku. Hapi jest raczej kolekcją wtyczek, konstelacją dziesiątek kawałków kodu, które możesz wmieszać w swój stos, jak tylko uznasz za stosowne. Uwierzytelnianie, autoryzacja i logowanie to zadania, które można rozwiązać za pomocą dowolnej liczby opcji. Jeśli budujesz architekturę mikroserwisów pełną interfejsów API, standardowa wtyczka Swagger automatycznie wygeneruje dokumentację Swagger z twojego podstawowego kodu.
Koa
Czasami potrzebujesz dość złożonej kolekcji procedur, które żonglują przychodzącymi żądaniami i tłumaczą je na wiele zmian, niektóre z nich wyszukane. Koa ma za zadanie ułatwić organizację tej pracy. Jego sekret polega na tym, że zamienia funkcje wywołania zwrotnego, które normalnie dominują w JavaScript, w zestaw funkcji asynchronicznych, które odpalają się w odpowiednim momencie. Zagnieżdżone spaghetti stosów wywołań zwrotnych zamienia się w coś nieco czystszego.
Nest
Inna opcja okiełznania złożoności serwera pochodzi od zespołu Nest, który oferuje architekturę wypełnioną kontrolerami, rurami i dostawcami z kilkoma strażnikami, przechwytującymi i filtrami wyjątków podrzuconymi w celu utrzymania porządku. Framework jest nowoczesny i gotowy do obsługi GraphQL i mikroserwisów od samego początku.
Drupal, WordPress, i Rails
Frameworki, które są zbudowane w JavaScript i które działają na szczycie Node.js wypełniają psychologiczne centrum świata web developmentu w tych dniach. Ale błędem może być ignorowanie poprzedniej generacji zbudowanej na PHP, fundamencie, który jest szybszy niż kiedykolwiek, teraz, gdy posiada kompilator just-in-time, jak JavaScript. A Ruby i jego framework Rails nadal służą jako fundamenty solidnych jak skała stron internetowych.
Ostatnia generacja jest naznaczona bitwą i dobrze przetestowana przez ponad dekadę ciągłego rozwoju i pracy. Istnieją wyrafinowani projektanci, którzy mogą włączyć motywy i skórki dla aplikacji. Jest duża szansa, że ktoś już zbudował moduły z funkcjonalnością, której potrzebujesz. Więc zanim odkryjesz sprytny framework Node.js, zastanów się, czy któryś ze staroci nie potrafi już zrobić wiele, jeśli nie wszystko, czego potrzebujesz.
Vanilla JS
Możesz to odebrać jako wredny wykop lub być może satyrę na poziomie „Nowych szat cesarza”, ale trudno się kłócić z jego sukcesem. Vanilla JS to strona, która chwali się, że jej framework jest używany na większej ilości stron internetowych niż „jQuery, Prototype JS, MooTools, YUI i Google Web Toolkit – razem wzięte”. Może to i nie jest prawdą, biorąc pod uwagę rozprzestrzenianie się jQuery, ale pośmiejmy się z tego. Strona jest również wyposażona w uroczy mały selektor, który pozwala połączyć razem niestandardowe archiwum różnych komponentów, takich jak Math, DOM, zamknięcia lub wyrażenia regularne. Bez względu na to, co wybierzesz, wynik jest niesamowicie długi – zero bajtów. Spróbuj to pobić!
Punktem żartu jest to, że czasami ma sens po prostu użycie kilku standardowych elementów w JavaScript i pominięcie dodatków. Biblioteki i frameworki takie jak jQuery czy React zaczęły się po części z powodu szalonych różnic między przeglądarkami. Wiele z tych różnic zniknęło dzięki standaryzacji.
Oczywiście zwolennicy Vanilla JS nie konfrontują się z faktem, że funkcje skrótowe, takie jak $(), są nie tylko wygodne, ale także oszczędzają miejsce w naszym własnym kodzie. Ale jeśli zamierzasz używać document.getElementById tylko od czasu do czasu, może to nie mieć znaczenia. Jeśli zamierzasz tylko dodać kilka funkcji do swojej strony internetowej i te funkcje będą robiły kilka podstawowych rzeczy, zwykły waniliowy JavaScript może być najszybszym frameworkiem dla Ciebie.