Porównywanie struktur JavaScript Vue.js, React i Angular (2019)

1. 1. Rendering - wyświetlanie końcowego wyniku
2. 2. Architektura komponentów
3. 3. Orientacja i klasy zależności
4. 4. Kompatybilność wsteczna
5. Kątowy
6. Reaguj
7. Vue.js
8. 5. „Wsparcie techniczne” - dokumentacja i społeczność
9. Reaguj
10. Vue.js
11. Kątowy
12. Podsumuj

Rozpoczynając nowy projekt, programista staje przed wyborem: do jakiego środowiska JavaScript wybrać stronę - Vue.js, React lub Angular? Są między nimi różnice i dość znaczące. Jednak każdy z nich nadaje się do rozwiązywania problemów. Dlatego pozostaje otwartą kwestią wydajności.

Nie ma otwartych danych na temat stopnia wykorzystania ram, jednak analiza pośrednia otwórz pozycje w Indeed.com daje dość ciekawą dystrybucję:

1 miejsce - React 78,1%

2 miejsce - kątowe 21%

3 miejsce - Vue.js 0,8%

4 miejsce - bez określenia środowiska 0,1%

Dane pomiarowe StackOverflow kilka innych liczb już podaje: 67% głosów oddało React, a 42% programistów głosowało na Angular.

Okazuje się, że najbardziej popularne - Reaguj . Ale czy to znaczy, że będzie bardziej skuteczny? Wcale nie, ponieważ za popularnością kryje się tylko korzystanie ze środowiska w takich projektach jak Facebook, Instagram. Ponadto na przykład w Github Vue.js ma najwięcej „gwiazd”.

Dlatego należy porzucić doświadczenia innych osób i spróbować porównać struktury JavaScript za pomocą rzeczywistych wskaźników, które są krytyczne dla programisty.

1. Rendering - wyświetlanie końcowego wyniku

Struktury JavaScript należy najpierw porównać, renderując stronę. Nowoczesna architektura pozwala na dwa typy: po stronie klienta (strona jest rysowana kosztem mocy komputera użytkownika) lub po stronie serwera.

Dom - Document Object Model - model obiektu dokumentu, który umożliwia czytanie i zmianę treści, projektu, a nawet struktury dokumentów HTML. Każda struktura ma swoje własne podejście do przetwarzania DOM, co ma wpływ na wyświetlanie końcowej strony wyświetlanej na ekranie użytkownika.

Vue.js i React tworzą kopię DOM, przetwarzają go, a następnie porównują wynik z wersją oryginalną. W dokumencie końcowym (to znaczy na ekranie użytkownika) zastępowane są tylko te części strony, które różnią się od wyników przetwarzania.

To znacznie przyspiesza ładowanie i renderowanie strony. W związku z tym zmniejsza się natężenie ruchu, co jest szczególnie ważne dla użytkowników urządzeń mobilnych.

Zasadniczo inne podejście do obsługi DOM Ramy kątowe w wersji 1.x i wyższej . Tutaj jest podział na dwa strumienie, a przeglądarka (strona klienta) „odpowiada” na renderowanie DOM, a ogólny strumień (po stronie serwera) na tworzenie dyrektyw, ładowanie kodu i usług.

Ale to wcale nie oznacza, że ​​renderowanie odbywa się po stronie klienta - wizualizacja jest nadal wykonywana przez serwery. W związku z tym optymalizacja SEO nie spowoduje trudności. Podczas indeksowania roboty wyszukiwania będą miały poprawną stronę.

2. Architektura komponentów

Reakcja nie dotyczy czystych ram. Jest to rodzaj zmodyfikowanej biblioteki „wyostrzonej” MVC (Model-View-Controller, gdzie model jest odpowiedzialny za dostarczanie danych, widok wyświetla dane modelu użytkownikowi, a kontroler interpretuje działania użytkownika i zmusza model do wprowadzania zmian).

Angular i Vue.js należą do samych ram.

Jeśli architektura projektu opiera się na React, to z góry określa:

• potrzeba przeszukiwania i wdrażania dodatkowych bibliotek do realizacji każdego zadania;
• konfigurowanie funkcjonalnej części aplikacji dla konkretnej biblioteki;
• trudność zaangażowania innych programistów w projekt, ze względu na różnicę w stosie bibliotek każdej aplikacji.

Dlatego wdrożenie architektury zajmie więcej czasu. Niski poziom API (Application Programming Interface - zestaw gotowych poleceń, bardziej szczegółowo, co to jest API ) wymaga zbyt długiej konfiguracji.

W przypadku korzystania z gotowych frameworków - Vue.js i Angular, nie ma problemów z wyborem lub dostosowaniem bibliotek do różnych zadań. Interfejs API wysokiego poziomu zapewnia kompatybilność wsteczną dla wszystkich bibliotek.

Umożliwi to zewnętrznemu programistowi połączenie się z projektem bez długiego badania architektury aplikacji. W unifikacji procesów leży popularność pełnoprawnych frameworków.

3. Orientacja i klasy zależności

React i Vue.js obsługują tylko jednokierunkowy transfer danych. Jednocześnie obiekty są zamknięte w React. Mówiąc prościej, każdy z obiektów aplikacji odnosi się do ostatecznych procedur, które nie wymagają działań użytkownika do końca pracy.

Jednak React obsługuje status kopiowania i przesyłania. Oznacza to, że właściwości zarejestrowanych obiektów można przywrócić na innym urządzeniu, jeśli uruchomisz aplikację i zgłosisz stan składników. W konsekwencji renderowanie będzie identyczne, na ekranach obu urządzeń będzie taki sam „obraz”.

Framework Vue.js działa trochę inaczej. JS jest wciąż jednokierunkowy, ale komponenty działają z szablonami, a wyjściem jest czysty HTML. Istnieje wsparcie dla JSX, które upraszcza przejście z React i podobnych bibliotek.

Dla ram logika procesu jest zautomatyzowana przez dyrektywy budowlane. Wystarczy dodać wymaganą dyrektywę, aby uzyskać dodatkową funkcjonalność. Na przykład musisz utworzyć element blokowy

poruszał się po stronie. Do implementacji wystarczy dodać dyrektywę „przeciągnij” do właściwości obiektu, po czym można ją przeciągać myszą po ekranie.

Ramy kątowe nieco inna logika procesu. Tak, jest wszystko, co jest charakterystyczne dla Vue.js, ale opis interakcji obiektów występuje w usługach, które są częścią modułów.

Architektura modułowa jest wygodniejsza podczas tworzenia dużych aplikacji. Tworzony jest moduł do rozwiązywania kilku zadań o podobnej funkcjonalności. W rezultacie ostateczny rozmiar kodu staje się mniejszy, a szybkość przetwarzania jest wyższa.

Wsparcie MVVM (Model-View-ViewModel) umożliwia rozwiązywanie różnych zadań w tej samej sekcji aplikacji przy użyciu tego samego zestawu danych. Zależność funkcji określa dwukierunkowy kierunek przesyłania danych. Każda procedura może rozpocząć inny proces.

4. Kompatybilność wsteczna

Dla twórcy aplikacji ważna jest możliwość aktualizacji architektury do łączenia nowych modułów i bibliotek.

Kątowy

Pełne ramy. Absolutna zależność od poprzednich wersji i komponentów. Bezpośrednie przejście z wersji 4.0 do 5.0 nie jest możliwe, konieczne będzie zainstalowanie wszystkich aktualizacji między kolejnymi wersjami. Doprowadzi to do nieuzasadnionego wzrostu głośności aplikacji. Przy okazji, ciekawy fakt Angular wersja 3.0 nie istnieje . Po drugiej wersji natychmiast pojawia się czwarty.

Reaguj

Biblioteka. Pełna kompatybilność między wersjami. Możliwe jest połączenie się z bibliotekami aplikacji w różnych wersjach, aktualizując nieaktualne właściwości dziedziczenia.

Vue.js

Progressive framework (według Vue.js Główny programista Evan Yu ). System modułowy jest podobny do systemu React, ale zawiera wszystkie atrybuty frameworka JS, który działa z pełną kompatybilnością wsteczną.

5. „Wsparcie techniczne” - dokumentacja i społeczność

Wybierając konkretną architekturę, nie można ignorować wsparcia społeczności programistów (społeczności). Przecież nawet proste funkcje mogą być trudne.

Im bardziej złożony projekt, tym częściej deweloper zwraca się do dokumentacji technicznej wybranego środowiska i uzyskuje porady od społeczności. Dlatego warto porównać „wsparcie” poszczególnych ram JS.

Reaguj

„Wsparcie techniczne” środowiska React nie jest łatwe do zorganizowania. Z jednej strony społeczność składa się z tysięcy programistów w różnych krajach, co całkowicie usuwa barierę językową. Możesz skonsultować się z „kolegami w warsztacie” w dowolnym języku, w języku rosyjskim, angielskim, chińskim i innych.

Jednak open source i codzienne pojawienie się nowych bibliotek opartych na React to słabości środowiska. Trudno jest znaleźć dokumentację, która wyczerpująco opisywałaby procesy aplikacji, funkcje i właściwości konkretnej świeżo wydanej biblioteki.

Najczęściej pojawiają się w ten sposób nowe moduły: programista tworzy bibliotekę do rozwiązania zadania w swoim projekcie. Następnie pisze krótki przewodnik i kładzie podwaliny w Internecie.

Vue.js

Szczegółowa dokumentacja ram - „wizytówka” Vue.js. Jednak zwolennicy środowiska nie wspominają, że większość „Podręczników” nie ma normalnego tłumaczenia na język angielski lub rosyjski.

Społeczność użytkowników, pomimo dużej popularności Vue.js na Habré lub Github, jest raczej skromna, zwłaszcza w porównaniu z Angular lub React. Nawet jQuery jest używany przez znacznie więcej programistów niż Vue.js.

Z reguły odpowiedź na pytanie o realizację zadania spodziewana jest na kilka dni. I nie fakt, że ktoś może odpowiedzieć.

Nieco łatwiej jest korzystać ze środowiska czatu na oficjalnej stronie projektu.

Kątowy

W przeciwieństwie do Vue.js i React, w ramach nie tylko napisano szczegółową dokumentację, ale również wydano wiele wytycznych. W związku z tym nie musisz uciekać się do pomocy społeczności, aby szukać odpowiedzi.

Liczba programistów korzystających z platformy wynosi setki tysięcy. Deweloper w dowolnym momencie może zadać pytanie z kategorii „Howto”. Nie musisz szukać oficjalnej strony internetowej projektu. Możesz poprosić o pomoc na temat stackoverflow, toster i innych witryn, aż do „[email protected]”.

Upewnij się, że jest osoba, która wie, jak rozwiązać problem lub powie Ci, gdzie znaleźć odpowiedź.

Jak rozwiązać problem i gdzie znaleźć odpowiedź - dokładnie nasi mentorzy na temat programowania w JavaScript będą Cię pytać Wybierz mentora

Podsumuj

Oczywiście porównywanie ram jest całkowicie obiektywnie dość trudne. Ale analiza pozwoli początkującemu deweloperowi wybrać platformę. Podsumujmy:

1. Jeśli chcesz szybko zbadać środowisko, powinieneś wybrać Vue.js i React.
2. Łatwa nawigacja do Vue.js zarówno użytkownikowi Angular, jak i React. W końcu okazuje się, że jest czysty kod HTML, znany wszystkim programistom. Techniki i techniki są używane mniej więcej tak samo jak w Angular.
3. Jeśli ma zostać opracowany duży projekt, wówczas podstawą powinien być Angular. Zapewnia maksymalną elastyczność i szybkość renderowania. Ogromne doświadczenie innych programistów pozwoli rozwiązać pytania, które na pewno pojawią się podczas pracy nad aplikacją. Reakcja będzie zbyt obszerna, a dla Vue.js nie ma dużej liczby wytycznych.
4. Jeśli inni programiści będą zaangażowani w rozwój w przyszłości, najlepszym wyborem będzie Vue.js. W końcu ten framework jest nie tylko łatwy do nauczenia, ale także pozwala na zmianę aplikacji bez niszczenia jej architektury.
5. Jeśli projekt przewiduje wieloetapową aktualizację i rozszerzenie funkcjonalności w przyszłości, powinieneś użyć Vue.js lub React ze względu na doskonałą kompatybilność wsteczną.

Każda z ram jest na swój sposób dobra, istnieją mocne i słabe strony. Dlatego warto podać jeszcze jedną ważną radę: co będzie łatwiejsze do opanowania przez zespół programistów, powinno być wykorzystane do rozwoju. Zbadaj także dostępne materiały, rozwijaj się, nie zatrzymuj się, ponieważ Vue.js i React ciągle się zmieniają.

Przecież czas poświęcony na badanie specyfiki frameworku opóźnia wydanie aplikacji w celach komercyjnych na czas nieokreślony. Jednocześnie wsparcie techniczne wdrożonego projektu może być nieznośnym obciążeniem, które „przetaktuje” programistów pracujących w pełnym wymiarze godzin.

Przeczytaj także: