Najlepsze praktyki: Frontend Frameworks for your web product

Co na pewno odstraszy użytkowników? Powolny UI, niespójne kroje pisma, czy źle rozmieszczone przyciski. Trudno jest wybrać „zwycięzcę”, ale nie chcesz mieć żadnego z nich w aplikacji internetowej, nad którą pracujesz.

Na szczęście, możesz uniknąć tworzenia złego UI używając odpowiedniego frameworka frontendowego. Czytaj dalej i dowiedz się, który z nich jest moim ulubionym.

Co to jest Frontend framework?

Frontend zazwyczaj odnosi się do interfejsu, z którym użytkownicy wchodzą w interakcję podczas przeglądania stron internetowych. Ogólnie rzecz biorąc, frontend odnosi się do przeglądarki, ale może również oznaczać UI aplikacji. Programiści pisali wszystkie kody ręcznie, aby stworzyć elementy, zachowania i wymieniać dane z backendem.

Szkielet frontend upraszcza to zadanie poprzez posiadanie wstępnie napisanych kodów, na których można budować. Służy jako fundament, który zawiera powszechnie używane elementy, takie jak siatka, predefiniowana typografia i komponenty strony internetowej, takie jak przyciski, paski przewijania i panele boczne.

Oszczędza Ci to ponownego wymyślania koła dla każdego projektu.

Udział w rynku frameworków UI

Istnieje więcej niż garść dostępnych frameworków UI, ale 3 z nich są wysoko cenione wśród społeczności programistów.

Liderem jest React, który ma średnio 7 milionów pobrań tygodniowo. Przewyższa on Vue.js i Angulara o znaczną różnicę, ponieważ zdobywcy drugiego miejsca zdobyli średnio 1,5 miliona i 500 tysięcy tygodniowych pobrań.

React

React został opracowany przez Facebook, w ramach próby stworzenia wysokowydajnego i wydajnego UI. Jest oparty na JavaScript i pozwala użytkownikom na tworzenie web UI z dynamicznych komponentów HTML. Po zaprojektowaniu komponentów, React będzie je odpowiednio renderował w oparciu o najnowsze dane.

W React, komponenty są zbudowane tak, aby enkapsulować stan, w którym się znajdują. Umożliwia to komponentom przekazywanie bogatych danych wokół i nie wymaga modelu obiektu dokumentu (DOM) do obsługi stanu.

Facebook wydał pierwszą wersję React w 2013 roku. Kilka lat później wprowadzono React Native dla aplikacji mobilnych.

W przypadku Reacta, logika renderowania jest ściśle sprzężona z innymi logikami UI. Pozwala to na bezproblemowe wykonywanie obsługi zdarzeń, transformacji stanu i przygotowania danych do wyświetlenia. Jest to odstępstwo od konwencjonalnej praktyki, w której znaczniki i logika są przechowywane w oddzielnych plikach.

Podczas gdy praktyka posiadania zarówno znaczników, jak i skryptów Javascript w tym samym pliku jest odrzucana, robienie tego w React zapewnia przejrzystość widoku.

Prostota Reacta sprawiła, że framework ten jest używany przez niektóre z największych firm, w tym Twitter, Pinterest, Netflix i Udemy.

Pros of React

React używa wirtualnego DOM, który jest ekstrakcją rzeczywistego DOM do renderowania UI. Jest to bardziej wydajne, ponieważ komponenty zajmują mniej czasu, aby pokazać się na ekranie.
Ponieważ komponenty w Reacts są enkapsulowane, mogą być używane niezależnie bez żadnych ograniczeń.
React jest wzorowany wokół programowania funkcjonalnego zdefiniowanego przez niezmienne dane, czyste funkcje i styl deklaratywny. Dlatego kody tworzone za pomocą Reacta są łatwe do testowania, mainstreamingu i ponownego użycia.
Jako najpopularniejszy framework, React może pochwalić się dużą globalną społecznością. Oznacza to również, że będziesz miał świetną opcję pakietów open-source do pracy.
React jest proaktywny w aktualizowaniu i wydawaniu nowszych wersji frameworka. Otrzymasz terminowe poprawki błędów i ulepszenia.
Z React możesz zaimplementować różne techniki renderowania, takie jak renderowanie po stronie klienta (CSR), renderowanie po stronie serwera (SSR), a nawet generowanie plików statycznych

Cons of React

Jeśli jesteś nowy w React, koncepcja mieszania szablonów z logiką (JSX) może być myląca na początku.
Zbyt duży nacisk kładziony jest na bibliotekę rdzeniową. Problemy takie jak routing i globalne zarządzanie stanem są delegowane do bibliotek towarzyszących. Odpowiedzialność za to, jak rozwijać się z różnymi bibliotekami, spada w dużej mierze na programistów.
Jak projekt się rozrasta, możesz stracić „przepływ i komponenty danych”. Fakt, że dokumentacja React jest często niekompletna, nie dzięki jego szybkiemu wzrostowi, dodatkowo pogarsza sprawę.

Kiedy używać React

React jest idealnym frameworkiem front-endowym do budowania aplikacji internetowych, które oczekują dużej interakcji i często zmieniających się stanów. Jego unikalne podejście wykorzystujące wirtualny DOM oznacza, że aplikacja internetowa może szybko reagować na dane wprowadzone przez użytkowników i dynamicznie renderować UI.

Jeśli budujesz aplikację internetową, mając niewiele czasu do stracenia, React również okaże się właściwym rozwiązaniem. Jego komponenty wielokrotnego użytku pomagają skrócić czas rozwoju.

Vue.js

Vue.js może nie mieć rozpoznawalnych nazwisk, jeśli chodzi o adopcję, ale nadal jest to bardzo popularny framework wśród deweloperów. Framework ten został stworzony w 2014 roku przez Evana You. Jest prosty i wszechstronny, pozwalając programistom zmierzyć się z dynamicznymi procesami bez konieczności stosowania dodatkowych bibliotek.

Podobnie jak React, Vue.js opiera się na wirtualnym DOM. Oprócz tego jest lekki i obsługuje dwukierunkowe wiązanie danych. Bycie frameworkiem o niewielkich rozmiarach pomaga również w zwiększeniu wydajności frontend’u.

Prosy Vue.js

Vue.js posiada obszerną i zwięzłą dokumentację, która pomaga w nauce frameworka jako nowicjusz.
Używa wirtualnego DOM, który poprawia wydajność renderowania.
Vue.js jest wysoce integrowalny. Mniejsze komponenty Vue.js mogą być bezproblemowo zintegrowane z istniejącą infrastrukturą bez żadnych negatywnych skutków.
Oferuje reaktywne i kompozytowe komponenty widoku.
Templaty tworzone z Vue.js są w formacie HTML. Jest to plus dla programistów, którzy znają HTML.
Rozmiar całego frameworka to tylko 18 kB, co czyni Vue.js niezwykle lekkim i poprawia wydajność UX.

Cons of Vue.js

Społeczność Vue.js jest stosunkowo mała, ponieważ brakuje mu popularności. Dlatego uzyskanie wsparcia rówieśników jest raczej trudne.
Większość dyskusji na temat Vue.js jest prowadzona w języku chińskim, ponieważ framework ten jest bardzo popularny wśród chińskich firm. Bariera językowa utrudnia komunikację dla programistów z innych krajów.
Brak doświadczonych programistów, wsparcia społeczności i problemy ze stabilnością komponentów sprawiają, że używanie Vue.js w dużych projektach jest ryzykowne.

Kiedy używać Vue.js

Vue.js jest świetny do tworzenia prostych aplikacji typu one-page. Ma płytką krzywą uczenia się, dzięki której programiści mogą szybko opanować zasady działania frameworka. Jednakże, nie jest on jeszcze przeznaczony do skomplikowanych projektów, ponieważ zdobycie eksperta w Vue.js nie jest łatwe.

Angular

Angular, który jest tworzony w oparciu o TypeScript, jest kompleksowym frameworkiem frontendowym autorstwa Google. Został wydany w 2016 roku i jest zbudowany w oparciu o podejście programowania obiektowego. Framework posiada dwukierunkowe wiązanie danych, co sprawdza się przy tworzeniu aplikacji webowych i mobilnych.

Do tej pory Angular jest jednym z najbardziej wszechstronnych frameworków w historii, ponieważ programiści mogą zajmować się skomplikowanymi zadaniami w ramach samego frameworka. Nie ma potrzeby stosowania dodatkowych bibliotek przy tworzeniu złożonych UI/UX.

Pros of Angular

Aplikacja logiki aplikacji i warstwy UI jest odsprzężona z architekturą Angular’s Model-View-Controller. Wspiera również separację obaw.
Możesz ominąć domyślne renderowanie DOM szablonu, przechwytując wywołania renderowania. Na przykład, renderer może być skonfigurowany do dynamicznej zmiany UI.
Angular ma silne wsparcie dla budowania i obsługi dynamicznych formularzy. Szablony mogą być używane do tworzenia nowych formularzy w oparciu o dynamicznie zmieniający się model danych.
Biblioteka RxJS jest instalowana razem z Angularem. Jest to biblioteka, która wspiera programowanie reaktywne z obserwowalnymi strumieniami, aby łatwo obsługiwać kod asynchroniczny.
Usługi i Dependency Injection w Angular pozwalają komponentom być łatwo ponownie wykorzystane, przetestowane i utrzymane. Funkcja ta pomaga większym projektom, ponieważ zależności mogą być wywoływane z zewnętrznych źródeł, a nie tworzone wewnątrz klasy.
Przednia kompilacja Angulara skutkuje szybszym czasem ładowania i zwiększonym bezpieczeństwem. W tym procesie kod JavaScript jest tworzony podczas fazy budowania zamiast po pobraniu przez przeglądarkę.

Cons of Angular

Niektórzy mogą mieć problemy ze zrozumieniem wielowarstwowej architektury Angulara, a to może wpłynąć na debugowanie frameworka. Debugowanie pokaźnej aplikacji opartej na Angular może być męczącym procesem.
Aplikacje internetowe stworzone za pomocą Angular mają ograniczone opcje SEO, które mogą być trudno dostępne dla robotów indeksujących wyszukiwarek.
Deweloperzy, którzy są zaznajomieni z JavaScriptem, znajdą Angular stosunkowo trudny w porównaniu z React i Vue.
Angular używa Typescript zamiast bardziej powszechnego JavaScript.

Kiedy używać Angulara

Angular jest frameworkiem go-to podczas tworzenia dużej strony internetowej przedsiębiorstwa lub dużego projektu ze złożoną infrastrukturą. Nadaje się również do projektów obejmujących progresywne aplikacje internetowe (PWA).

Dlaczego używamy React

React jest bez wątpienia naszym ulubionym frameworkiem frontendowym. Oto dlaczego go uwielbiamy:

Jesteśmy w stanie używać Reacta w projektach o różnej złożoności. Sprawdza się w tworzeniu MVP, Startup, Enterprise i rozwiązania E-commerce.
React daje nam tempo do budowania prostych i skalowalnych rozwiązań. Praca z Reactem zawsze była przyjemnym doświadczeniem.
Nasi programiści nie muszą już budować komponentów od podstaw. Ogromna liczba bibliotek i narzędzi React drastycznie skraca czas rozwoju.
Możemy tworzyć zachwycające UI dla naszego produktu, używając komponentów React o otwartym kodzie źródłowym, takich jak Ant Design i Material AI.
React jest prawdopodobnie najpopularniejszym frameworkiem front-end. Nie musimy się martwić o jego utrzymanie i dostosowanie, ponieważ posiada on prężnie działającą społeczność programistów. To inna historia, jeśli używamy Vue.js lub Angular.
Łatwiej jest znaleźć programistę React dla naszego zespołu w porównaniu z innymi frameworkami.

Z powodzeniem rozwinęliśmy kilka projektów z React, a oto dwa godne uwagi.

Apprvl

Apprvl to aplikacja stworzona dla fotografów, aby uprościć zatwierdzanie zdjęć przez klientów. Fotografowie mogą przesyłać swoje prace poprzez aplikację i uzyskiwać komentarze dzieląc się wygenerowanymi linkami ze swoimi klientami.

Nasze rozwiązanie

Zaczynamy od zbudowania głównych części funkcjonalnych w aplikacji internetowej, aby przetestować hipotezy z prawdziwymi użytkownikami. Na podstawie informacji zwrotnej, wprowadzamy odpowiednie zmiany w częściach.

Potem przystępujemy do budowy skalowalnej architektury backendu i rozpoczynamy rozwój aplikacji webowej.

Zakończyliśmy pełny cykl rozwoju aplikacji w oparciu o MVP.

Wyniki

Używając React, jesteśmy w stanie dostarczyć MPV, który spełnia wszystkie wymagania. Jest on dostarczany z minimalną ilością błędów w całym cyklu rozwoju i skalowalny do przyszłego rozwoju.

Plai