2017-02-10 68 views
7

Niedawno otrzymaliśmy React w naszej firmie jako technologię front-end do budowy naszej ogromnej aplikacji internetowej firmy. Mówiąc ostatnio, mam na myśli, że nie mamy żadnego wcześniejszego doświadczenia z Reactem (mamy ogromne doświadczenie w AngularJS), a mówiąc o ogromnej aplikacji, mam na myśli to, że jest naprawdę ogromna i bardzo dynamiczna z wieloma różnymi elementami i funkcjonalnością.React architektura dla ogromnej aplikacji biznesowej

Ponieważ będziemy mieli wiele ogromnych komponentów, które odgrywają bardzo ważną rolę i mają w sobie złożoną logikę, a ponieważ chcemy, aby były łatwe do podłączenia i wielokrotnego użytku, chcemy, aby były jak najbardziej odizolowane od poza światem i innymi częściami naszej aplikacji, ponieważ w przeciwnym razie ze względu na ich rozmiar i złożoną funkcjonalność byłoby praktycznie niemożliwe ich opracowanie i utrzymanie. Z tego powodu zdecydowaliśmy, że NIE będziemy używać Redux, przynajmniej na początku, podczas gdy opracowujemy same oddzielne komponenty, ponieważ kompromituje to izolację komponentów i sprawia, że ​​cała logika przepływu danych aplikacji jest niemożliwa do zrozumienia, gdy jest tak wiele złożonych składniki. Chociaż uważam, że nasz wybór może być błędny, ponieważ, jak już wspomniałem, nie mamy doświadczenia z React.

Jak już wspomniałem, aplikacja jest bardzo dynamiczna. Rozumiem przez to, że komponenty są faktycznie renderowane przez dane. Używamy różnych klas dostawców konfiguracji, które współdziałają z punktami końcowymi API, aby pobrać elementy konfiguracji naszej aplikacji, takie jak konfiguracje nawigacji, strony, różne formularze, listy itp., A następnie spróbować renderować komponenty, które są odczytywane z tej konfiguracji.

Problem polega na tym, że po kilku tygodniach zmagań z Reactem i znalezienia właściwych wzorów i wspólnych rozwiązań naszych problemów, rozmawialiśmy w naszej ekipie, że być może React nie jest odpowiednią technologią dla nas, ponieważ jest to biblioteka UI, nie wydarzenie jest ramą i nie pomaga nam to bardzo, ale po prostu dodaje reguły renderowania, które musimy czasem łamać, aby osiągnąć pożądaną dynamikę i niezależność od komponentów.

Zważywszy na izolację komponentów i zarządzanie przepływem danych, osobiście słyszałem, że istnieje język dla front-endowego Wiązu rozwojowego, który ma dość solidną architekturę przepływu danych, gdzie każdy komponent ma swój własny model, który jest oddzielony od innych, ale ja nie wiem, czy warto spróbować, bo wkrótce może to również stać w tyle za naszymi dużymi wymaganiami.

Powodem, dla którego piszę to pytanie, jest to, że mam nadzieję uzyskać wgląd od ludzi, którzy mają solidne doświadczenie w pracy z dużymi aplikacjami front-end. Chciałbym wiedzieć, czy możliwe jest opracowanie takiej aplikacji za pomocą React, czy React nadaje się do takiej złożoności i dynamiki, czy naprawdę potrzebujemy Redux, czy czegoś innego, jaką ścieżkę, praktyki, ideologie powinniśmy przestrzegać. Jeśli dobrze zrozumiałeś moje pytanie, to bardziej strona architektury, z którą walczymy, niż technologia. Może po prostu kroczymy ścieżką, która prowadzi do coraz większej walki i złożoności, ale nie do produkcji.

Odpowiedz

3

Rozpoczęcie pisania bardziej złożonych aplikacji w React naprawdę może być trudną walką, dokładnie wiem, jak to jest!

Jak powiedziałeś, React jest biblioteką interfejsu użytkownika, a nie ramą zdarzeń. Dlatego zazwyczaj potrzebujesz biblioteki do obsługi zdarzeń, na przykład Redux. Wyraźnie stwierdzasz, że zdecydowałeś się nie używać Redux (używałeś nawet wielkich liter). Gdybym był tobą, cofnąłbym się o krok i przemyślę tę decyzję. Mówisz, że powodem, dla którego nie korzystasz z Redux, jest to, że nie możesz utrzymywać swoich komponentów w łatwy sposób podłączalny i możliwy do ponownego użycia podczas korzystania z Redux. Twierdzę, że to nieprawda. Redux jest całkowicie oddzielony od komponentów React. Redux obsługuje tylko odbieranie zdarzeń i zarządzanie stanem. Z punktu widzenia komponentów React po prostu otrzymuje dane w rekwizytach i wysyła zdarzenia, wywołując zwykłe funkcje. Możliwe jest wciąż testowanie jednostkowe, ponowne użycie itp.

Proponuję, abyś spojrzał na Redux jeszcze raz, biorąc to pod uwagę. Chętnie pomożemy, jeśli masz więcej pytań!

+0

Dobrze jest wiedzieć, że ktoś tu już wiemy co przechodzisz. Mówiąc o 'Redux', próbowałem napisać z nim dynamiczny komponent formularza i bardzo szybko się pomyliłem, kiedy musiałem wprowadzić konfigurację i dane do stanu z różnych źródeł, a następnie poprawnie renderować formularz i synchronizować jego różne części. . Następnie część sprawdzania poprawności również została uruchomiona, a następnie zmienne tworzą typy pól, takie jak autouzupełnianie, które ładuje wybory z internetowego interfejsu API. Nadal jednak uważam, że zamieszanie mogło być spowodowane brakiem doświadczenia i znajomością biblioteki/frameworka. – Salivan

6

Nie ma absolutnie żadnych wątpliwości, że React/Redux może (i jest powszechnie używany) do rozwijania aplikacji, które opisujesz. Nic w twoim opisie nie sprawia, że ​​budujesz tak unikatowo, że wyklucza React jako platformę do jego budowania. Aktywnie współpracujemy z dużym klientem korporacyjnym, który buduje swój cały front-end - za pomocą 100 + SPA (aplikacje pojedynczej strony) w React. Jest to zespół złożony z ponad 100 deweloperów w 2-3-letnim projekcie.

Sposób, w jaki zorganizowane zostało to kluczowa -

Najpierw chcesz wybrać biblioteki komponentów UI. Kilka przykładów poniżej:

My w zasadzie wziął jedną z nich i zbudował bibliotekę komponentów z im, ponieważ nasze komponenty są bardzo niestandardowe.

Po drugie, stworzyliśmy modułową architekturę, w której każdy moduł (SPA) jest pakietem npm z głównym komponentem kontenerowym i sklepem redux.

Wreszcie mamy pakiet centralnego serwera, w którym każdy z modułów jest zarejestrowany. Pakiet serwera jest odpowiedzialny za uwierzytelnianie, autoryzację, rejestrowanie, routing itd.

Istotą tej odpowiedzi nie jest doradztwo w zakresie konstruowania dużej aplikacji React, ale poinformowanie o tym, że React może być (i jest bycie) używane do tworzenia aplikacji podobnych do tego, co opisujesz.

+0

Wow, to dobry punkt wyjścia. Dobrze jest usłyszeć, że ktoś to zrozumiał. Dziękuję za podzielenie się swoimi doświadczeniami. Czy mógłbyś wyjaśnić nieco głębiej, w jaki sposób wdrożyłeś tę oddzielną koncepcję SPA? Jak połączyć je w jedną jednostkę (aplikację)? Czy są one częścią niektórych większych aplikacji lub całkowicie oddzielnych aplikacji? Czy jest możliwe, aby komunikowali się ze sobą, jeśli zajdzie taka potrzeba? – Salivan

+0

W jaki sposób strona internetowa może mieć 100 SPA? Czy masz na myśli złożony interfejs użytkownika, który ładuje wiele elementów iframe zawierających SPA? W przeciwnym razie twoja terminologia jest prawdopodobnie błędna w stosunku do tego, co opisujesz. – plalx

+0

Każde SPA ma swój własny URL. "Strona internetowa" może nie być właściwym terminem do opisania tego, co to jest. Bardziej przypomina kolekcję SPA, które stanowi obecność online organizacji. –

2

Jestem teraz w podobnej sytuacji. Mam doświadczenie w dużych aplikacjach komputerowych (ERP, LOB - WinForms, WPF) - ponad 1000 modułów, bardzo dynamicznych (ponad 70% UI było generowanych przez dane wejściowe/konfigurację), dodawanie nowych funkcji było tylko rozszerzeniem niektórych konfiguracji (bez dotykania kodu źródłowego).

Głęboko badam obecne technologie internetowe i jestem coraz bardziej przekonany, że React nie jest do tego odpowiedni. React naprawdę świeci w małych/średnich aplikacjach, w których ty (i inni członkowie zespołu) rozwijasz każdą stronę/komponent "ręcznie" (nie generowane dynamicznie) i chcesz mieć jeden stan globalny. Ale to nie pomaga w budowaniu wielkoskalowej aplikacji po wyjęciu z pudełka - jest to tylko biblioteka UI (więc nie ma wsparcia dla modułów, routingu, formularzy, powiązań, żądań http, pisania statycznego (maszynopis), itp.) I mojego niespodzianka, nie ma wsparcia dla shadowingu/enkapsulacji stylu (musisz na przykład zintegrować, na przykład, moduły CSS). I na koniec musisz ciągle martwić się wersjami bibliotek (aby zawsze współpracować, to naprawdę czas i energochłonne).

Mam duże doświadczenie z kątowy 2/4 + i myślę, że na razie jest to najlepsza technologia do tego rodzaju zastosowań (jeśli wiesz WPF, to jest bardzo podobny). Jest to pełna struktura, która jest przygotowana na skalowanie po wyjęciu z pudełka.Możesz podzielić swoją aplikację na niezależne moduły (określając, które komponenty będą widoczne dla świata zewnętrznego), każdy komponent ma publiczne api (statycznie wpisane, wejścia/wyjścia) i enkapsulowane style CSS (nie ma interferencji między innymi). Dla stanu globalnego (zalogowany użytkownik, konfiguracja globalna itp.) Nadal można korzystać z biblioteki ngrx/store (która implementuje wzorzec Redux i zawiera dodatkowe fajne rzeczy, takie jak "efekty" i integruje się naprawdę dobrze z ekosystemem Angular).

Próbowałem zrobić w Angular naprawdę szalone rzeczy (dynamicznie generując całą aplikację z konfiguracji backendu) i wszystko działało idealnie, zgodnie z oczekiwaniami.

0

Całkowicie zrozum swoje uczucia, gdy zaczynasz od React i Redux. W tej samej sytuacji, gdy zaczynamy z React w naszej firmie. Na początku React ma inne podejście niż inne ramy. Tak, oczywiście, że nie jest ramową biblioteką. Musisz zacząć myśleć w sposób React i to jest: Reaguj na składniki tylko renderuj stan (to tak, jak renderujesz scenę na swojej karcie graficznej, najpierw musisz przygotować scenę, niż jesteś w stanie renderować), wszystko, co komponent może zrobić, to wysyłać akcje, lub lepiej wywołać tylko twórców akcji.

Potrzebujesz inteligentnego sposobu na zachowanie stanu w tym miejscu. Sugeruję użycie Redux.

Używamy również TypeScript z kombinacją React, Redux. musisz napisać więcej kodu niż czysty JS, ale kontrola typu statycznego jest bezcenna podczas pracy nad dużym projektem.

Logika komponentów oddzielających to natywne podejście do reagowania ... musisz oddzielić zapis logiczny "Dummy components", a następnie użyć go ponownie z connect. Lub przekazując wartości jako rekwizyty.

Używamy Thunk Middleware jako twórcy akcji, dlatego, że połączony komponent wywoła tylko metodę, a logika jest w twórcach akcji. Masz tam dostęp do całego stanu aplikacji, niż możesz pobrać coś i bazować na wyniku, możesz wysyłać różne akcje.

Co lubię na reagują/Redux jest sposób realizacji połączeń async itp pierwszy składnik projekt odwzorować wszystkie stany

1) jak mam nie dane 2) ładowanie danych 3) Ładowanie odbywa 4) błąd ładowania

Do tego potrzebny jest tylko jeden semafor w stanie i kilka metod renderowania. Niż jeden twórca akcji, który ładuje dane i bazuje na akcji wysyłania postępu opisującej postęp.

Co jest również fajne, że w aplikacji respond/redux mamy pojedyncze dane, które płyną dobrze, gdy nowy dev wchodzi do projektu.

Dla UI używamy Materialnego interfejsu użytkownika, tak, ta praca ramowa ma pewne problemy, ale nic, z czym nie będziesz w stanie sobie poradzić.

Używamy również routera do nawigacji w aplikacji.

Na początku uniknę renderowania po stronie serwera, ponieważ znacznie łatwiej będzie zacząć od renderowania po stronie klienta i ze stanem początkowym.

Kiedy zaczynamy był dla nas użyteczny szablon gdzie to wszystko działa w jednym projekcie JavaScriptServices

niż OFF Oczywiście wielkich Abramov samouczków.

Dla elementów konstrukcyjnych bardzo przydatnych Storybook

Możemy napisać dlaczego używany lub nie reagują na długi czas ... ale co mogę powiedzieć ... dla nas to był dobry wybór, z pewnym bólem w żebranie ale teraz mamy dobry zwrot.

1

React, Redux będzie to łatwiejsze, ponieważ gdy chodzi o złożonych aplikacji można stworzyć dobrze zorganizowany obiekt danych. Następnie można zarządzać Kompletna UI poprzez React i jego Materiały ... Istnieje kilka powodów, dlaczego jest to właściwy wybór

  1. State Management
  2. Drzewo przetwarzanie danych Struktura,
  3. Zredukuj kod,
  4. Będziesz wiedzieć, gdzie dokonano zmian (Akcje, Redukatory)
  5. Twój komponent wil l tylko dbanie o rzeczy UI

rzeczy, które trzeba zrobić, to Kształtowanie danych