Backbone.js vs React - co wybrać na front-end? [aktualizacja 2023]

Wraz z nieustannie zmieniającym się krajobrazem tworzenia aplikacji webowych programiści dostają wciąż nowe narzędzia, technologie i frameworki, które obiecują ułatwić im życie. To, że część z nich istnieje od kilku lat, nie znaczy, że stały się przestarzałe czy nieistotne.

W rzeczywistości niektóre uznane frameworki JavaScriptu, takie jak Backbone.js i React, pozostają w 2023 roku bardzo aktualne dzięki swojej wszechstronności, elastyczności i solidności. Te technologie wciąż są wartościowymi opcjami dla programistów front-endu w świecie, w którym szybki development i łatwość budowania interfejsów mają kluczowe znaczenie.

W Ideamotive chcemy dostarczać aktualne, sensowne spojrzenie na możliwości tych trwałych frameworków JavaScriptu.

Czym jest Backbone.js?

Backbone to framework JavaScript oparty na architekturze MVC. W Backbone.js widok MVC pomaga zaimplementować logikę komponentu podobną do kontrolera. Widok Backbone może korzystać z silników takich jak Mustache i Underscore.js.

Backbone to łatwy w użyciu framework JavaScript, który pozwala szybko tworzyć aplikacje jednostronicowe. Aby w pełni wykorzystać Backbone.js, programiści JavaScript muszą wybrać spośród następujących narzędzi: 

• Chaplin, 
• Marionette, 
• Thorax, 
• Handlebars,
• Mustache

Jeśli musisz zbudować aplikację z różnymi typami użytkowników, możesz użyć kolekcji Backbone (tablic) do rozdzielenia modeli. Zdarzeń można używać z modelami, kolekcjami, trasami i widokami Backbone.

Ekosystem BackboneJS obejmuje:

• Bibliotekę Backbone, na którą składają się zdarzenia, modele, kolekcje, widoki i router.
• Underscore.js, bibliotekę JavaScriptu z funkcjami pomocniczymi, których możesz użyć do pisania kodu działającego w różnych przeglądarkach.
• Silniki szablonów, takie jak Mustache i jQuery-tmpl.
• Internetowe repozytorium BackPlug z wieloma gotowymi rozwiązaniami dla aplikacji Backbone.
• Interfejs wiersza poleceń generatora Trunk do tworzenia aplikacji trunk.
• Biblioteki JavaScript Marionette, Thorax i Chaplin do budowania zaawansowanej architektury aplikacji Backbone.

Backbone.js to idealny wybór do pracy nad front-endem i back-endem, bo obsługuje REST API używane do utrzymywania obu warstw w synchronizacji.

Czym jest React?

Kilka lat temu React podbił świat JS-a i stał się jego niekwestionowanym liderem. React zaleca stosowanie podejścia reaktywnego i paradygmatu programowania funkcyjnego. 

React wprowadził też wiele własnych koncepcji, definiujących jego unikalne (w chwili powstania) podejście do tworzenia stron z interfejsem użytkownika. Aby używać Reacta, trzeba opanować architekturę komponentową, JSX i jednokierunkowy przepływ danych. Jednokierunkowy przepływ danych realizuje Flux.

Aplikacje w React dzielą się na kilka komponentów. Jeden plik komponentu zawiera zarówno logikę biznesową, jak i znaczniki HTML (a właściwie znaczniki JSX przekształcane w funkcje JavaScriptu). 

Do komunikacji między komponentami możesz użyć Fluxa lub podobnej biblioteki JS. 

React wprowadził również specjalne obiekty - state i props. Za pomocą obiektów state i props możesz po prostu przekazywać dane z komponentu do layoutu (obiekt state) albo z komponentu nadrzędnego do potomnego (obiekt props).

React skłonił do powstania wielu dodatkowych narzędzi zapewniających dużą elastyczność. Na przykład zamiast Fluxa programiści React mogą wybrać:

• MobX, 
• Redux, 
• Fluxy, 
• Fluxible, 
• RefluxJS. 

A ta lista bibliotek do zarządzania stanem w Reakcie jest daleka od kompletnej. Tak samo jest z bibliotekami HTTP: React działa z jQuery AJAX, fetch API, Superagent i Axios, żeby wymienić tylko kilka.

Ekosystem Reacta obejmuje:

• Samą bibliotekę React plus React-DOM do manipulacji DOM.
• React Router do implementacji tras.
• JSX, specjalny język znaczników mieszający HTML z JavaScriptem.
• Create React App, interfejs wiersza poleceń do szybkiego przygotowania projektu w Reakcie.
• Biblioteki oparte na Axios i Redux, biblioteki JS pozwalające zorganizować komunikację ze stroną serwerową.
• React Developer Tools dla przeglądarek Chrome i Firefox.
• React Native do tworzenia natywnych aplikacji mobilnych na iOS i Androida.

Dlaczego warto je porównać?

Coraz trudniej jest programistom front-endu zdecydować, który framework aplikacji JavaScript wybrać, zwłaszcza gdy trzeba zbudować aplikację jednostronicową. Nie mówiąc o osobach biznesowych, które patrzą na ten wybór z innej perspektywy. (A przy okazji - czemu nie sprawdzić, co JS ma do zaoferowania biznesowi?)

Dlatego mocno polecamy ten materiał osobom wybierającym między dwiema stronami JS-a: Backbone.js vs React.

Obszary porównania

Skoro to Ty decydujesz, który framework JS wykona zadanie, czeka Cię spore wyzwanie, bo trzeba wybrać.

Aby ułatwić wybór frameworka JS do pracy po stronie klienta, zawęziliśmy obszary porównania do kilku najważniejszych. Dla developmentu po stronie klienta nasza lista kryteriów wygląda tak:

Szybkość i łatwość kodowania

Pod powierzchnią nie dzieje się żadna magia: kod źródłowy Backbone.js jest przejrzysty, czytelny i dobrze skomentowany. Backbone jest też „lekki” w tym sensie, że jego użycie niewiele kosztuje. Można go łatwo wpiąć w istniejącą stronę i korzystać tylko z wybranych komponentów biblioteki (na przykład widoków bez modeli i kolekcji). 

Choć jest wiele frameworków, z którymi zaczniesz szybciej, brak niespodzianek, szybkość i elastyczność Backbone'a sprawiają, że nadaje się on do wszystkich typów aplikacji. Z drugiej strony, ponieważ wiele funkcji nie jest dostępnych domyślnie, musisz albo napisać więcej kodu bazowego, aby je uzyskać, albo znaleźć wtyczkę, która dostarczy je po Twojemu.

Backbone nie narzuca też konkretnej struktury, programista musi pamiętać o rzeczach takich jak zarządzanie pamięcią, a brak zarządzania cyklem życia widoku sprawia, że zmiany stanu łatwo prowadzą do wycieków pamięci. Stąd potrzeba więcej kodu niż w Reakcie.

Jednocześnie React pozwala kodować dość szybko. Ten system JS jest szeroko polecany za efektywność, mały rozmiar bloków, elastyczność i szybsze podejście do pracy dzięki prostemu modelowi komponentów i renderowaniu po stronie serwera.

Zwycięzca: React

Wydajność

Od swojego powstania React zmienił sposób, w jaki programiści front-endu myślą o budowaniu aplikacji webowych. Dzięki wirtualnemu DOM React sprawia, że aktualizacje UI są maksymalnie wydajne, a Twoja aplikacja - szybsza.

Z Reactem możesz uzyskać wiele oferowanych przez niego usprawnień wydajności, mierząc i optymalizując to, jak i kiedy renderują się Twoje komponenty. A React dostarcza dokładnie te narzędzia i funkcje, które to ułatwiają.

Jeśli chodzi o Backbone'a, w odróżnieniu od wielu innych pełnoprawnych frameworków JavaScript stara się on ograniczać złożoność, aby uniknąć problemów z wydajnością. W szczególności nie napotkasz problemów wynikających z dwukierunkowego wiązania danych czy pętli inline, jak w AngularJS. Skoro o Angularze mowa, mamy świetny wpis porównujący go z Reactem. 

Jak w każdym frameworku MVC, Backbone.js zmniejsza obciążenie serwera, tak że strona zależy od niego tylko przy pobieraniu danych JSON, a nie przy logice wyświetlania. Daje to znaczące zyski wydajności nawet wtedy, gdy strona się rozrasta.

Jednak w zależności od poziomu doświadczenia Backbone.js może być dla programisty błogosławieństwem albo wyzwaniem.

Narzędzia takie jak Backbone mogą być problematyczne również wtedy, gdy zespół źle oceni juniora, bo Backbone nie narzuca konkretnej struktury. Angular sprawia, że nieco trudniej - choć z pewnością nie jest to niemożliwe! - nazbierać kupę spaghetti code, mówi Jason Swett.

Budując aplikację w Backbone.js, na pewno będziesz potrzebować wielu bibliotek i dodatków, a choć wiele osób kocha rozszerzalność, praca z tym frameworkiem bywa męcząca.

Zwycięzca: React

Dokumentacja

Shawn Moore, CTO w Solodevmówi:

Backbone, znany z obszernej dokumentacji technicznej i czystej organizacji kodu podzielonego na sensowne pliki JavaScript, ułatwia pracę zespołową. Eliminuje też potrzebę przechowywania danych w DOM - zamiast tego trzyma je w modelu.

Choć Backbone nie jest dziś aktywnie rozwijany, błędy były naprawiane, a dokumentacja jest systematycznie aktualizowana.

Użytkownicy Reacta narzekają na brak dopracowanej dokumentacji. ReactJS to superszybko rozwijające się rozwiązanie, co nie zostawia miejsca na uproszczoną dokumentację - dokumenty bywają nieco chaotyczne, bo wielu programistów wprowadza je indywidualnie, bez systematycznego podejścia.

Nie da się jednak zaprzeczyć, że materiałów i zasobów online o React.js jest mnóstwo. Dzięki wsparciu Facebooka istnieje wiele możliwości korzystania z ogromnej dokumentacji i zasobów online, by uczyć się i używać tego frameworka JavaScript.

Zwycięzca: React

Popularność

Według similartech.comjest 781,832 stron, które w 2023 roku używają Backbone'a. Jeśli chodzi o Reacta, portal doliczył się aż 1,345,179 domen korzystających z tej technologii. I oczywiście ten trend tylko rośnie.

React JS zajmuje wiodącą pozycję w top 10 tys. stron, top 100 tys. stron, top 1 mln stron i w całym internecie. Pod względem udziału w rynku Backbone.js wyraźnie ustępuje React JS we wszystkich segmentach.

Odwołując się do Google Trends, relacja Backbone.js vs React nie nadaje się do porównania, bo liczby są zbyt różne. Nic dziwnego - wspierany przez Facebooka, Instagram i inne znane organizacje React jest jednym z najpopularniejszych frameworków JavaScript ostatnich pięciu lat.

Zwycięzca: React

Społeczność

State of JavaScript 2018 pokazują, że popularność Reacta stopniowo rosła w latach 2016-2018.

Świetne jest to, że wspiera go duża społeczność programistów z całego świata. React ma bardzo aktywną społeczność, wsparcie i mnóstwo gotowych wtyczek i bibliotek.

W sierpniu 2021 roku miał 173 tysiące gwiazdek na Github .

Ekosystem Backbone.js z 28 tysiącami gwiazdek na GitHub bywał ogromny. Na forach zawsze znajdziesz świetne rozwiązania. Ale w tej chwili Backbone.js uchodzi za framework legacy, przy wielu dostępnych nowych opcjach.

Zwycięzca: React

Pula specjalistów

Popyt na programistów Backbone JS jest bardzo wysoki w USA, Kanadzie, Wielkiej Brytanii, Rosji, Niemczech i innych krajach Europy Zachodniej. W tych krajach Ameryki Północnej i Europy są tysiące stron. W chwili pisania tego tekstu na portalu Indeed.com jest ponad 600 nowych ofert pracy związanych z Backbone.js i ponad 800 ogłoszeńdla programistów Backbone JS. Wszystkie te statystyki i liczby pokazują, że popyt na programistów Backbone JS jest bardzo wysoki.

Jednak podobnie jak w sekcji o popularności, React ma znacznie większe liczby. Zgodnie z Stack Overflow Developer Survey 2021, framework wspierany przez FB zyskał w ostatnim roku sporo punktów:

• React jest najpopularniejszym produktem, którego chce co czwarty programista.
• React.js wyprzedził w tym roku jQuery jako najczęściej używany framework webowy - 40,14% vs 34,42%.

Backbone nie został w tym raporcie nawet wspomniany.

Zwycięzca: React

Łatwość nauki

React jest w pełni przyjazny początkującym - poradniki pomagają poradzić sobie z trudnościami pojawiającymi się w nauce. Podstaw Reacta nauczysz się w kilka godzin, a jego zaawansowane aspekty poznasz dzięki szczegółowej dokumentacji. Nie jest jednak tak łatwy do nauki jak Vue (porównanie znajdziesz tu - Vue vs. React). 

A co z Backbone'em? Od wydania wersji 0.1.0 minęło 5 lat i przez cały ten czas jego rozwój i aktualizacje nie ustawały. Można się go jednak łatwo nauczyć z wielu powodów:

• mnóstwo dokumentacji i tutoriali jest dostępnych za darmo w sieci.
• twórca Backbone'a opublikował szczegółowy tutorial do tego frameworka.
• został dobrze przetestowany i wsparty licznymi aplikacjami typu Todo.

Jeśli jednak zamierzasz pracować z Backbone'em, prawie na pewno będziesz musiał nauczyć się Marionette, Chaplina lub Thoraxa.

Zwycięzca: React

Koszt developmentu

Wracając do Stack Overflow Developer Survey 2021 - sekcji o najlepiej płatnych technologiach - widzimy, że programiści React.js zarabiają średnio 58 128 dolarów rocznie. Znowu brak danych o Backbone. 

Porozmawiajmy więc o realnych zarobkach w Reakcie w różnych ważnych krajach świata. Skoro umiejętności i doświadczenie programistów React są w dużej cenie, rynek tych specjalistów jest z pewnością konkurencyjny. Ponieważ rdzeniem ReactJS jest JavaScript, w poszukiwaniu średniego rocznego wynagrodzenia programisty ReactJS na świecie uwzględniliśmy także zarobki programistów JavaScript oraz juniorów React JS.

• USA: $92,232
• Wielka Brytania: $78,528
• Szwajcaria: $127,011
• Francja: $50,879

Jednocześnie zatrudnianie programistów Backbone.js stało się konkurencyjne. Programiści Backbone.js są bardzo poszukiwani i kosztowni ze względu na swoje umiejętności. Poniżej średnie roczne wynagrodzenia programistów Backbone.js z różnych krajów:

• Stany Zjednoczone: 75 215 USD
• Wielka Brytania: 33 733 GBP  (44 581 USD)
• Ukraina: 14 400 USD
• Kanada: 70 000 CAD (54 809 USD)
• Australia: 70 638 AUD (53 437 USD)

Zwycięzca: Backbone.js

Główne plusy i minusy obu technologii

Zalety Backbone.js

Lekkość. Waga projektu naprawdę ma znaczenie, gdy mówimy o szybkości ładowania i responsywnych mobilnych aplikacjach webowych. Tutaj mniej znaczy więcej. Backbone jest więc obiecującym frameworkiem we wszystkich obszarach tworzenia aplikacji webowych.

• Ma około 7,6 KB rozmiaru po minifikacji i kompresji gzip.
• Można łatwo pozbyć się zależności od jQuery.
• Backbone opiera się na bibliotece Underscore.js (5,7 KB), która także bywa przydatna w pracy.

Rozszerzalność. Rozszerzalność leży u podstaw całego frameworka Backbone. Zawiera więc wiele małych bibliotek odpowiadających szczególnym potrzebom. Co więcej, zawsze można stworzyć własny framework MVC.

• LayoutManager - daje więcej opcji renderowania.
• Backbone.Stickit i Epoxy - zapewniają lepsze wiązanie modelu z widokiem.
• Marionette - pozwala lepiej ustrukturyzować kod aplikacji.
• React - może służyć jako silnik widoku.

Struktura MV. Backbone ułatwia strukturyzowanie JavaScriptu. Zawiera też podstawy programowania obiektowego. W efekcie przechodzi od używania DOM do RESTful API po to, by pobierać JSON i zapisywać wszystkie dane w formacie modelu. Wreszcie powiązanie widoku z modelami pozwala zobaczyć każdą zmianę w HTML-u.

Abstrakcyjny kod aplikacji. Abstrakcja to jedna z trzech rzeczy naprawdę ważnych w programowaniu. Im lepsza, tym lepszy kod. Ukrywa wszystko poza istotnymi danymi o obiekcie. Jest to potrzebne, by uprościć poruszanie się po złożonych projektach i zwiększyć efektywność. Mówiąc prosto, Backbone pozwala programiście trzymać logikę aplikacji oddzielnie od interfejsu użytkownika. Dzięki temu obie części można łatwo zmieniać, aktualizować i utrzymywać. Ten podział jasno pokazuje, gdzie potrzebne są zmiany i który test jednostkowy napisać.

Wszechstronność. W odróżnieniu od innych frameworków Backbone.js pozwala wybrać narzędzia, które najlepiej pasują do Twojego projektu. Nie ma własnego silnika szablonów (poza podstawowym, zawartym w Underscore.js). Ten wybór pozwala programistom korzystać z narzędzi, które już znają, i przyspieszyć pracę.

Synchronizacja ze stroną serwerową. Modele w Backbone.js łatwo powiązać z back-endem. Framework świetnie wspiera RESTful API, więc modele można mapować na endpointy REST. Ponieważ dziś mamy nie tylko przeglądarki desktopowe, ale i urządzenia mobilne, bardzo wygodnie jest dostarczać wszystkie dane przez API. Możesz tworzyć prawdziwe aplikacje przeglądarkowe na desktop i mobile, wykraczające daleko poza możliwości prostych stron.

Szybkość strony. Jak w każdym frameworku MVC, Backbone.js zmniejsza obciążenie serwera, tak że strona zależy od niego tylko przy pobieraniu danych JSON, a nie przy logice wyświetlania. Daje to znaczące zyski wydajności nawet wtedy, gdy strona się rozrasta.

Wady Backbone.js 

• Pozwala też na szablony firm trzecich i nie ma opcji dwukierunkowego wiązania, co wielu uważa za minus.
• To, że widoki bezpośrednio manipulują DOM-em, jest z punktu widzenia programisty znacznie bardziej skomplikowane. Dlatego BackboneJS nie jest tak popularny wśród programistów i wolą od niego choćby Embera.

Zalety Reacta

Wsteczna kompatybilność. Niektóre frameworki wymagają przepisania kodu po aktualizacji do najnowszej wersji. Cóż, nie dotyczy to React.js. Publiczne API zawsze pozostawało w zasadzie takie samo, co ułatwia Facebookowi i innym firmom aktualizowanie kodu korzystającego ze starszych części.

Tryb równoległy. Ten tryb to zestaw funkcji zaprojektowanych tak, by aplikacje React były jeszcze szybsze i przyjaźniejsze dla użytkownika. Wymusza dostosowanie się do możliwości urządzenia użytkownika i szybkości sieci.

Budowanie dynamicznych aplikacji webowych staje się łatwiejsze. Zanim pojawił się ReactJS, budowanie dynamicznych aplikacji webowych wymagało skomplikowanego kodowania. ReactJS to zmienił, upraszczając proces dzięki rozszerzeniu JavaScriptu. Dzięki JSX cytaty HTML i składnia znaczników mogą wyświetlać konkretne podkomponenty. Poza tym rozszerzenie JavaScriptu ułatwia tworzenie kodu czytelnego dla maszyn.

Własne renderery React. Rozszerzenie React.js wraz z wydaniem React Native zmusiło programistów do implementowania innego renderera. Tak narodziła się koncepcja Custom React Renderers. Pozwala ona tworzyć własne implementacje.

Czas developmentu. React to przede wszystkim szybkość, i to nie tylko szybkość ładowania strony, ale też tempo pracy. Proces przyspiesza wiele rzeczy:

• gotowe rozwiązania
• stworzone komponenty można wykorzystywać ponownie
• możliwość dostosowania aplikacji webowej za pomocą „Create React App”, czyli startera dostarczanego przez Facebooka.

Łatwość nauki i użycia. Jeśli masz programistów JavaScript, nauka Reacta nie powinna zająć im dużo czasu. Będziesz jednak potrzebować kogoś doświadczonego, kto poprowadzi ich przez ten proces.

Łatwo przejąć taki projekt. Podejście komponentowe sprawia, że aplikacje React są czytelne, zrozumiałe i łatwiejsze w utrzymaniu. Jeśli kod jest czysty, zewnętrzny programista bez trudu go zrozumie i przejmie dalej.

Skalowalność. Dzięki modułowości aplikacje React łatwo się skalują. Możesz zacząć od małego i rosnąć. Na przykład możesz zacząć od prostego MVP, a potem zrobić z niego aplikację jednostronicową tak rozbudowaną jak Facebook.

Komponenty wielokrotnego użytku, czyli modułowość. Podejście komponentowe bardzo tu pomaga, bo aplikacje React składają się z odrębnych komponentów, które można rozbić na podkomponenty. Każdy komponent i podkomponent odpowiada za jeden mały fragment całej aplikacji i można go użyć ponownie w dowolnym miejscu i czasie. Pozwala to zbudować złożoną aplikację z prostych klocków.

Łatwość testowania i debugowania. ReactJS ma własne narzędzia do testowania i debugowania komponentów przed ich faktycznym użyciem.

Wady Reacta 

• To nie do końca kompletny framework. Wygląda raczej na bibliotekę. Użycie architektury Flux nie jest najmądrzejszą decyzją, bo w obecnym układzie niewielu programistów jest do niej przyzwyczajonych. 
• Do tego do renderowania komponentów używa JSX, którego programiści nie znoszą. 
• Dla części osób krzywa uczenia się może wydawać się stroma.
• Integracja z popularnymi frameworkami MVC wymaga sporo dostosowań.

Kiedy używać i przykłady

Jeśli musisz stworzyć jednostronicową aplikację w Javie, Backbone Ci wystarczy. Ten framework Model View zrobi znacznie więcej niż samo uporządkowanie architektury JavaScriptu, by uniknąć modelu spaghetti code. W efekcie Backbone rozwiąże wiele irytujących problemów, na które możesz natrafić pod koniec pracy nad dużą aplikacją. 

Kiedy więc używać Backbone.js?

Gdy trzeba zmniejszyć liczbę żądań HTTP do serwera

Zwykle większość danych w aplikacjach webowych zawiera back-end. W efekcie HTML jest wypychany przy pełnym przeładowaniu strony, gdy wykonywana jest jakakolwiek akcja w interfejsie. JavaScript po stronie klienta ma tymczasem ograniczone możliwości rozwiązania tego problemu. Ale z Backbone.js wszystko się zmieniło. Pobiera on surowe dane z back-endu aplikacji i wyświetla je w przeglądarce zgodnie z potrzebą.

Gdy trzeba uprościć złożone projekty interfejsu

Backbone używa jednego widoku do zarządzania wieloma zagnieżdżonymi widokami korzystającymi z potrzebnych modeli. Pomaga to oszczędzić czas, poprawić czytelność kodu i uprościć przyszłe przeróbki. Dzięki temu sprawdza się, gdy programiści tworzą złożone projekty z dużym, interaktywnym i bogatym interfejsem.

Przykłady:

• Trello
• Foursquare
• Basecamp Calendar

Gdy chcesz uniknąć spaghetti code

Tradycyjnie Backbone nie zmuszał programistów do rozdzielania warstwy danych i widoku na osobne obiekty. Tymczasem większość programistów mocno zaleca robienie tego zawsze - poza modelami, które nie są tworzone z powiązaniami do swoich widoków. Wszystkie modele i kolekcje, cała warstwa danych, powinny być więc ostatecznie wyraźnie oddzielone od widoków, do których należą. Ścisłe rozdzielenie pojęć pomoże uniknąć zamiany całej pracy programisty w spaghetti code. Dzięki temu łatwiej poruszać się po kodzie i oszczędzisz czas, gdy w przyszłości będziesz coś pisać lub poprawiać błędy.

Podsumowanie. Krótko mówiąc, zbudowana aplikacja załaduje tylko jeden pakiet, zawierający wszystkie potrzebne skrypty, style i etykiety. Wszystko, czego użytkownik potrzebuje do prostych działań, będzie w jednym miejscu. W efekcie nie ma potrzeby żadnej dodatkowej aktywności w tle. Na przykład Gmail bez trudu przełącza się między czytaniem przychodzących maili a odpowiadaniem na nie, bo nie ma dodatkowych żądań do serwera.

Decyzja o włączeniu Reacta do Twojego stosu technologicznego może stać się łatwiejsza, gdy wiesz, co potencjalnie możesz z nim zbudować i czy to Cię interesuje. Bez zbędnych wstępów przejdźmy więc do listy możliwych projektów:

Aplikacja jednostronicowa (SPA)

To najczęstszy przypadek użycia React JS. Przypomnijmy: aplikacja jednostronicowa to taka, która nie wymaga przeładowania strony po stronie użytkownika. Innymi słowy, odwiedzający dalej korzysta z tej samej strony, bez ładowania nowych. Gmail i Facebook to świetne przykłady aplikacji jednostronicowych.

Wieloplatformowe aplikacje mobilne (z React Native)

Jeśli chcesz stworzyć wieloplatformową aplikację natywną, możesz to zrobić z Reactem i React Native. Jest wieloplatformowa, bo zamiast dwóch aplikacji natywnych budujesz jedną, a przypomina natywną, bo aplikacje zbudowane w React Native działają jak natywne.

Dashboardy i narzędzia do wizualizacji danych

Jeśli w jakiś sposób opierasz się na danych, bardzo ważne jest, by prezentować je użytkownikowi końcowemu w czytelny i atrakcyjny wizualnie sposób. Choć znajdziesz wiele gotowych szablonów dashboardów, ich długotrwałe utrzymanie jest trudne, a cena, którą trzeba zapłacić, dość wysoka. Lepiej więc budować od zera. I faktycznie React ma kilka funkcji, które w tym pomagają: komponenty wielokrotnego użytku i wirtualny DOM.

Strony e-commerce i sprzedaży detalicznej

W odróżnieniu od zwykłych stron firmowych sklepy internetowe i strony detaliczne zawierają dużo bardziej złożone elementy, takie jak API, filtry, wewnętrzna wyszukiwarka itd. Dzięki Reactowi programiści mogą zaimplementować to wszystko, tworząc osobne i łatwo skalowalne komponenty.

Aplikacje webowe dla przedsiębiorstw

Architektura komponentowa to powód, dla którego firmy takie jak Walmart czy AirBnB zdecydowały się włączyć Reacta do swoich stosów technologicznych. To podejście pozwala podzielić proces tworzenia aplikacji korporacyjnej na mniejsze części, używając osobnych komponentów interfejsu.

Komunikatory

Skoro to Facebook stworzył i wydał Reacta, trochę dziwi, że jego zespół nie używa go do budowy Messengera. Można jednak zbudować komunikator w Reakcie, bo działa on jak klient WebSocket. Odpowiada za dwukierunkową komunikację między serwerem a klientem.

Blogi osobiste i firmowe (z Gatsby)

Choć stronę można stworzyć w samym React.js, do takiego zadania jeszcze lepszy jest Gatsby. To nowoczesny framework front-endowy, który zyskuje popularność wśród programistów front-endu i miłośników JavaScriptu. Zbudujesz nim błyskawicznie superszybkie strony firmowe i osobiste, pobierające dane z wielu różnych źródeł, takich jak WordPress czy Contentful.

Serwis społecznościowy

Ten punkt jest ściśle związany z poprzednim, bo serwisy społecznościowe zaleca się tworzyć jako aplikacje jednostronicowe (SPA). Ponieważ użytkownik SPA nie musi przeładowywać strony, np. aby sprawdzić nowe wiadomości, znacząco poprawia to doświadczenie użytkownika.

Lista popularnych stron zbudowanych w React JS

Facebook

Reacta stworzył inżynier oprogramowania w Facebooku. Od tego czasu Facebook utrzymuje ten framework, choć pozostaje on open source. Byłoby więc dziwne, gdyby Facebook go nie używał, skoro robią to inni. Na stronie Facebooka jest mnóstwo interaktywności.

Zwykle, gdy polubisz post albo dodasz komentarz, trzeba przeładować całą stronę, by pokazać tę zmianę. Programiści mogą to jednak obejść, włączając częściowe przeładowania. Oznacza to, że gdy post zostanie polubiony, ikona Lubię to zmienia kolor, a reszta strony pozostaje bez zmian.

Netflix

Kolejny dobry przykład strony w Reakcie to Netflix. Wielu początkujących ćwiczyło na pewnym etapie nauki, tworząc klony Netflixa. Tak mocno ten serwis streamingowy kojarzy się z tą biblioteką. Netflix używa jej do renderowania back-endu swoich stron, wstępnie ładując Reacta, zwłaszcza przy procesie rejestracji. Poprawiło to wydajność.

Salesforce

Salesforce to kolejny przykład stron w Reakcie, które wdrożyły go wcześnie. Według bloga Salesforce to doświadczenie przypomina bardziej bibliotekę niż framework, co przyciągnęło ich do tej platformy. W szczególności dlatego, że jest prezentacyjny i deklaratywny, można go wygodnie zintegrować z istniejącymi projektami.

Wykorzystanie tej biblioteki pomogło Salesforce stworzyć Lightning Design System, framework CSS o otwartym kodzie. Istnieje dziś Lightning Design System for React, który implementuje warianty komponentów LDS dla Reacta.

Podsumowanie

W czasach szybko zmieniającej się technologii nie można lekceważyć znaczenia uznanych narzędzi, zwłaszcza w świecie tworzenia aplikacji webowych.

Mimo pojawienia się licznych frameworków JavaScript, Backbone.js i React pozostają w 2023 roku dwiema z najbardziej wszechstronnych i solidnych opcji. Backbone.js, ze swoim prostym, ale skutecznym frameworkiem, daje mocną bazę do szybkiego tworzenia aplikacji jednostronicowych (SPA). Owszem, pełne wykorzystanie jego możliwości wymaga dodatkowych narzędzi, takich jak Marionette, Thorax czy Chaplin, a także Handlebars lub Mustache, ale pozostaje opcją wartą rozważenia dla osób dobrze znających architekturę MVC.

React z kolei cieszy się dużą popularnością i szerokim zastosowaniem. Nie da się zaprzeczyć trendowi sprzyjającemu Reactowi, zwłaszcza przy tworzeniu zaawansowanych interfejsów użytkownika. My w Ideamotive uważamy jednak, że nie ma jednego „najlepszego” frameworka JavaScript. Wybór najczęściej sprowadza się do indywidualnych preferencji, budżetu, celów projektu i planów na przyszłość.

Programistom i firmom zmagającym się z wyborem technologii Ideamotive oferuje doradztwo techniczne i wiedzę zarówno w Backbone.js, jak i w Reakcie. Rozumiemy, że wybór właściwej technologii może mocno wpłynąć na powodzenie projektu, i jesteśmy tu, by pomóc Ci podjąć właściwą decyzję.