Jak wybrać najlepszy front-end Framework

Świat JavaScript to bogate środowisko z dziesiątkami narzędzi, bibliotek i frameworków. Ale przy wielu opcjach pojawia się wiele zamieszania. To naprawdę miecz obosieczny.

Podczas gdy masz dużo miejsca na kreatywność i eksperymentowanie, czasami nie masz pewności, jaką bibliotekę lub framework wybrać.

Wybrana przez Ciebie platforma front-endowa może na dłuższą metę stworzyć lub przerwać Twój projekt.

W tym artykule przyjrzymy się niektórym z najpopularniejszych frameworków JavaScript i ich wzajemnym porównywaniu. Przyjrzymy się pięciu różnym perspektywom tych frameworków, co ogólnie ułatwia proces podejmowania decyzji o twojej następnej frameworku JavaScript.

Niezależnie od tego, czy wybierasz jeden z tych popularnych frameworków JavaScript, czy coś bardziej ezoterycznego, powinieneś wziąć pod uwagę każdy z tych aspektów.

Dostępność zasobów edukacyjnych

Ten jest oczywisty, ale często pomijany. Chociaż fantazyjna strona główna niektórych frameworków może przyciągnąć twoją uwagę, nadal potrzebujesz dodatkowych kursów, książek, samouczków i artykułów oprócz nudnej i suchej dokumentacji, które pomogą Ci zacząć.

Tworzenie niesamowitych ram to jedno, a przekazywanie głównych idei, które za nimi stoją, to coś innego. W rzeczywistości jest wielu profesjonalnych programistów, którzy specjalizują się w coachingu. Dobrze przygotowany zasób edukacyjny radykalnie zmniejszy Twoją krzywą uczenia się.

Poszukaj zasobów od godnych zaufania autorów, z którymi masz już doświadczenie — w końcu będzie to warte twojego czasu. Jeśli masz trudności ze znalezieniem czegoś przydatnego, zachowaj ostrożność: struktura, której próbujesz się nauczyć, może być nowa lub nie została jeszcze dobrze przyjęta przez społeczność.

Chociaż wspomniałem, że sama dokumentacja nie wystarczy, są od tego wyjątki. Na przykład EmberJS ma świetną dokumentację. Podstawowe funkcje i przypadki użycia są ładnie opisane z ogólnymi przykładami tu i tam. Niestety poza dokumentacją pozostaje nam niewiele zasobów książek, kursów wideo czy innych materiałów.

Z drugiej strony istnieje mnóstwo zasobów dla Angulara i Reacta. Prawie każda strona edukacyjna zorientowana na front-end zawiera artykuł lub dwa na ich temat, może nawet pełny kurs wideo lub książkę.

Vue uderza w środek: ma dobrą dokumentację i jest kilka fajnych kursów, z których możesz wybierać.

Na przykład Aurelia ma prawie zerowe zasoby; jedyną nadzieją dla ciebie jest dokumentacja i szczęście.

Wolę mieć wybór.

Nawet jeśli czytasz świetną książkę lub kurs, jest szansa, że ​​nauczysz się czegoś nowego, wystawiając się na różne zasoby. Jeśli jesteś zaznajomiony z tematem, często możesz przejrzeć i poszukać możliwych obszarów, które nie są jeszcze do końca jasne.

Niestety ta strategia nie zadziała, jeśli masz ograniczone możliwości, które prowadzą nas do następnego punktu.

Popularność

Możesz być dumny z uczenia się czegoś egzotycznego, ale jeśli spojrzysz na to z perspektywy biznesowej, to nie jest to samo. Twoja firma lub klient prawdopodobnie woli używać sprawdzonego w boju zestawu narzędzi.

Powodów jest kilka. Jeśli framework nie jest tak popularny, oznacza to, że jest kilku programistów, którzy się w nim specjalizują. Co się stanie, jeśli porzucisz projekt lub znajdziesz nową pracę? Twój pracodawca utknie w poszukiwaniu programisty, który zna platformę, z której korzystałeś.

Ten proces może stać się prawdziwym obciążeniem dla firmy. To samo jest prawdą, nawet jeśli trzymasz się projektu i on się rozwija. Teraz pracodawca potrzebuje więcej programistów, aby przyspieszyć rozwój.

Istnieje kilka innych osobistych powodów, dla których możesz zdecydować się na popularną, powszechnie używaną platformę. Co się stanie, jeśli utkniesz z jakimś problemem i nie ma społeczności, do której możesz poprosić o pomoc? Ponieważ jesteś sam z dokumentacją, prawdopodobnie zmarnujesz dużo czasu.

Poza tym chcesz pomyśleć o przyszłych, bardziej atrakcyjnych możliwościach w swojej karierze. Jeśli specjalizujesz się w czymś popularnym i jesteś w tym naprawdę dobry, będzie dla Ciebie wiele projektów.

Oczywistymi liderami są tutaj Angular i React.

Większość ofert pracy związanych z front-endem wymaga jednego lub drugiego. Są wspierani odpowiednio przez Google i Facebook, dzięki czemu pracodawcy czują się „bezpieczni” w swoim wyborze.

Czasami wybór ram dla Twojej firmy lub klienta nie zależy od Ciebie; może został wykonany przez poprzedniego pracownika lub inną osobę z zespołu. Są szanse, że będzie to Angular lub React. Teraz istnieją inne opcje, takie jak Ember i Vue. Ale musisz celowo szukać firm, które ich używają.

Możesz określić popularność frameworka, szybko sprawdzając, jak dobrze projekt radzi sobie na GitHub i innych miejscach. Oto kilka statystyk zebranych w chwili pisania tego artykułu:

Chociaż te biblioteki istnieją wystarczająco długo, aby sprawdzić się jako popularne opcje, jeśli próbujesz czegoś naprawdę nowego, podobne statystyki mogą pomóc w dokonaniu wyboru.

Uczenie się tylko Angulara lub Reacta zaprowadzi Cię tylko do tej pory w Twojej karierze. Oczywiście będziesz miał mnóstwo możliwości, ale jest powód, dla którego istnieją inne frameworki. Staraj się je poznać w wolnym czasie i od czasu do czasu przeprowadzaj eksperymenty. Nawet jeśli nigdy nie używasz ich w prawdziwych projektach, zyskasz cenne informacje, które pomogą Ci w codziennej pracy programistycznej.

Podstawowe cechy

Przejdźmy teraz do kwestii technicznych.

Na początku chcesz krótko omówić podstawowe funkcje frameworka, aby mieć odpowiednie oczekiwania, kiedy zaczniesz kodować. W tym celu przejrzyj dokumentację. Musisz ogólnie zorientować się, o co chodzi w tych ramach. Czy jest to tylko warstwa widoku, w pełni rozwinięta, czy coś pomiędzy?

Jeśli masz bogate doświadczenie z innymi frameworkami, proces ten jest łatwy i szybki. W dokumentacji poszukaj następujących tematów: szablonowanie, zarządzanie stanem, komunikacja HTTP, przetwarzanie i walidacja formularzy oraz routing. To są codzienne czynności, które wykonujesz jako programista. Nie wszystkie z nich mogą być przedstawione w podstawowej strukturze lub może istnieć inne podejście do konkretnego problemu.

Omówmy krótko popularne opcje.

Zaczniemy od Reacta i Vue. Tak naprawdę nie są to ramy; reprezentują tylko warstwę widoku aplikacji. Oznacza to, że wszystkie inne elementy — komunikacja HTTP, walidacja formularzy itp. — zależą od Ciebie.

Jak wspomniałem wcześniej, może to być miecz obosieczny. W końcu zbudujesz swój własny, niestandardowy framework. Oba mają swoje ekosystemy bibliotek, które zapewniają rozwiązania najczęstszych problemów, ale ogólna struktura będzie się różnić w zależności od projektu.

JSX Reacta zawsze sprawiał, że się wzdrygnąłem. Musiałem się do tego przyzwyczaić. Jednak szablony Vue są naprawdę fajne, zwłaszcza jeśli pochodzisz z Angulara.

Z drugiej strony Ember ma prawie wszystko. Co zaskakujące, rdzeń Ember nie zapewnia zaawansowanego przetwarzania formularzy. Ma tylko kilka pomocników wejściowych i to wszystko. Jest bardzo uparty i ma nawet własną warstwę danych. Wszystko musi być zrobione „po Ember”.

Jeśli masz doświadczenie w innych frameworkach lub ogólnie w JavaScript, możesz być sfrustrowany, ponieważ Ember używa własnego modelu obiektowego. Standardowe klasy ES2015 nie są powszechnie używane, jak stwierdza ich dokumentacja. Może się okazać, że przypisujesz wartość bezpośrednio do nieruchomości, a Ember narzeka na to.

Kolejną istotnie odmienną od innych frameworków jest Ember Data. Jest to warstwa danych dla aplikacji Ember. Można o tym myśleć jak o jakimś ORM-ie dla front-endu. Tworzysz modele i mapujesz relacje między nimi.

Teraz, jeśli twój serwer używa JSON API (jest to specyfikacja implementacji API JSON), jesteś w dobrym miejscu z Emberem, ale niestety większość serwerów tego nie robi. Musisz więc napisać niestandardowe adaptery i serializatory. Jednak jeśli robisz rzeczy w sposób Ember, może to być naprawdę produktywne. Po prostu ma stromą krzywą uczenia się.

Angular 2 to bogaty w funkcje framework. Jest dostarczany z wieloma modułami, takimi jak Ember, więc masz do dyspozycji mnóstwo narzędzi po wyjęciu z pudełka. Ponieważ jednak Angular jest przeznaczony do dużych aplikacji, promuje TypeScript, który może wywołać pewien opór, zanim go wypróbujesz.

Inną wartą uwagi rzeczą jest intensywne użycie obserwabli z biblioteki Rx, co jest naprawdę miłe. Możesz przedstawić prawie wszystko jako obserwowalny i zastosować operacje wysokiego poziomu, takie jak mapa, filtr itp. Jeśli użyłeś Lodash lub podkreślenia, Rx jest trochę taki sam, ale na sterydach.

Oto podsumowanie podstawowych funkcji czterech frameworków, które omawiamy w tym artykule:

Wszystkie te cechy, które pokrótce omówiliśmy, są bezwartościowe, jeśli musisz palić świecę na obu końcach, aby skutecznie z nich korzystać – co jest następnym punktem.

Użyteczność

Jeśli w tym momencie nadal masz entuzjazm dla wybranego frameworka, następnym krokiem jest ubrudzenie sobie rąk.

Może struktura będzie dla Ciebie odpowiednia ze względu na Twoje pochodzenie. Może jest trochę inaczej i pod pewnymi względami stanowi dla ciebie wyzwanie. Jeszcze tego nie wiesz i żadna ilość czytania lub oglądania samouczków nie pomoże, dopóki sam tego nie wypróbujesz.

Najlepszym sposobem na wyczucie frameworka jest użycie go w jakimś mini projekcie. Daje to możliwość rozwiązywania codziennych problemów wymienionych powyżej za pomocą danego frameworka.

Pracując nad projektem, nie spiesz się i zastanów, czy jesteś produktywny. Jak łatwo osiągnąć pożądany rezultat? Czy musisz szukać zewnętrznych bibliotek? Może potrzebujesz wtyczek od społeczności. Czy istnieje jakaś konwencjonalna struktura lub wytyczne w kontekście ram? Może istnieje CLI, aby przyspieszyć proces rozwoju. Na tym etapie zbierasz podstawowe doświadczenie, dzięki czemu możesz zastanowić się, jak by to było, gdybyś używał tego frameworka do nadchodzących projektów, a nawet przenosił już istniejące.

Ember jest uważany za bardzo produktywny framework, przynajmniej dla jego głównych użytkowników. Pochodzi z CLI, co naprawdę pomaga. Możesz generować trasy, kontrolery, komponenty i modele za pomocą własnych zestawów testów. Robienie tego wszystkiego ręcznie to żmudne zadanie. Możliwe jest również wygenerowanie nowego projektu. Stworzy podstawową strukturę folderów, zainstaluje niezbędne pakiety, narzędzia do budowania, środowisko testowe itp. Jeśli nigdy nie korzystałeś z CLI w takim stopniu, będziesz bardzo zadowolony. Ale, jak wspomniałem wcześniej, Ember jest bardzo uparty; pomimo całej tej dobroci, możesz czuć się sfrustrowany, próbując wykonać typowe zadania.

Teraz dla React i Vue mają jakiś CLI, create-react-app i vue-cli. Ale oprócz generowania wstępnego projektu z pewnymi opcjami, nie oferują tak wiele w porównaniu do Ember lub Angular. Jest to zrozumiałe, ponieważ oba reprezentują warstwę widoku. Jeśli lubisz niestandardowe przepływy pracy, eksperymenty lub różne struktury na podstawie projektu do projektu, jesteś w dobrym miejscu. Dla niektórych programistów elastyczność jest kluczem, który nieodłącznie wiąże się z używaniem Reacta lub Vue.

Angular 4 jest wyposażony w CLI, tak jak robi to Ember. Możesz generować komponenty, dyrektywy, usługi itp. Generuje również początkową strukturę aplikacji, więc musisz tylko martwić się o produkt. Środowisko testowe jest naprawdę fajne, ponieważ z każdym wygenerowanym fragmentem aplikacji zestaw testowy znajduje się blisko niego (dosłownie). Poza tym TypeScript może zapewnić prawdziwy wzrost produktywności. Dlatego:

Ile razy spotkałeś się z kodem z liniami takimi jak ta…

 function doSomething(someData) { // do something }

…i zastanawiałeś się, czym u licha jest someData , jakie powinien mieć właściwości, jakie funkcje powinien zapewniać i jakie jest ich zachowanie? Za pomocą TypeScript definiujesz typ i oczekujesz odpowiednich danych. Może pójść dalej, jeśli używasz IDE z obsługą TypeScript. Możesz odkrywać różne części aplikacji w mgnieniu oka.

Nie dotykaliśmy IDE, ale dla większości popularnych frameworków istnieje kilka wtyczek, które sprawiają, że programowanie jest naprawdę łatwe. Na przykład WebStorm jest dostarczany z wbudowaną obsługą Angular, React i Vue.

Łatwość integracji (z innymi bibliotekami)

Wreszcie można to uznać za część użyteczności, ale jest tak ważne, że zasługuje na osobną sekcję.

Bez względu na to, jak bogaty w funkcje jest wybrany framework, prawdopodobnie napotkasz problemy, w których potrzebne będą dodatkowe narzędzia. Istnieją świetne biblioteki skupiające się na jednym problemie, czy to manipulacji DOM, przetwarzaniu danych, formatowaniu czasu, edycji tekstu sformatowanego itp. Jeśli spróbujesz zintegrować jedną z nich i spędzać nad nią godziny za każdym razem, może nie jest to optymalny wybór .

Testowanie tego jest bardzo łatwe. Możesz szybko wymyślić jakiś wyimaginowany scenariusz, w którym potrzebujesz określonej biblioteki. Spójrz na swoje wcześniejsze projekty; jakich narzędzi używałeś iw jakich scenariuszach? Są szanse, że znowu wpadniesz w te same sytuacje i chcesz być na to przygotowany, a przynajmniej mieć jakieś oczekiwanie.

Nie wszystkie dostępne biblioteki obsługują TypeScript. Ponieważ Angular intensywnie go używa, niektóre z dobroci TypeScriptu mogą zniknąć podczas korzystania z takiej biblioteki. Oczywiście można znaleźć obejście tego problemu, ale jest to trochę bardziej kłopotliwe. Ze względu na popularność Angulara możesz zintegrować instrukcje na stronie samej biblioteki.

W przypadku Vue i React jesteś odpowiedzialny za prawie wszystko, a korzystanie z innych bibliotek nie jest wyjątkiem. Jeśli używasz Webpacka lub podobnego narzędzia do budowania, możesz bezpośrednio odwołać się do bibliotek zainstalowanych za pomocą NPM. Odkryłem, że korzystanie z wtyczek społecznościowych jest trochę kłopotliwe dla Vue, zwłaszcza gdy zawierają one również logikę interfejsu użytkownika.

Ember ma EmberObserver, który jest stroną internetową wtyczek społecznościowych. Każdy z nich ma punktację w skali od zera do dziesięciu. To naprawdę świetne miejsce do szukania czegoś, czego potrzebujesz. Jeśli wpiszesz nazwę swoich ulubionych bibliotek, takich jak Lodash, Rx lub Ramda, znajdziesz powiązane wtyczki, od prostych wrapperów po kompletne przepisywanie. Oczywiście istnieją repozytoria Awesome React i Awesome Vue, które gromadzą powiązane zasoby, w tym biblioteki, ale uważam, że EmberObserver jest szczególnie przydatny.

Zobowiązanie do frameworka JavaScript

Wybór odpowiedniego frameworka JavaScript to jeden z najważniejszych kroków na drodze do sukcesu Twojego projektu internetowego. Niezależnie od tego, czy pracujesz nad małym projektem, czy dużym, niezależnie od tego, czy pracujesz solo, czy w zespole, każdy z tych szczegółów odgrywa kluczową rolę w określeniu, który framework jest najlepszy dla twojego projektu (a mniej który framework może preferować ).

Jeśli chodzi o podstawowe funkcje i użyteczność, wymieniłem punkty, które w różnym stopniu wpłyną na produktywność programistów. Użyteczność jest szczególnie trudna, ponieważ w dużej mierze zależy od Twojego doświadczenia i wykształcenia, a także od firmy lub organizacji, w której pracujesz.

Z biegiem czasu frameworki, które omówiliśmy w tym artykule, mogą ewoluować, ich popularność może się zmieniać, a projekty, do których są odpowiednie, mogą się zmieniać, ale ten artykuł powinien dać ogólne pojęcie o tym, gdzie każdy z tych frameworków może działać najlepiej.