2017-02-10 32 views
7

Vì vậy, gần đây chúng tôi đã chọn React trong công ty của chúng tôi làm công nghệ front-end để xây dựng ứng dụng web doanh nghiệp lớn của chúng tôi. Bằng cách nói gần đây, tôi có nghĩa là chúng ta không có kinh nghiệm trước đó với React (chúng ta có một nền tảng lớn của AngularJS), và bằng cách nói ứng dụng rất lớn, ý tôi là nó rất lớn và rất năng động với rất nhiều và nhiều phần và chức năng khác nhau.Kiến trúc phản ứng cho một ứng dụng kinh doanh lớn

Bởi vì chúng tôi sẽ có rất nhiều thành phần lớn, tất cả đều đóng vai trò rất quan trọng và có logic phức tạp bên trong chúng, và bởi vì chúng tôi muốn chúng dễ dàng cắm và sử dụng lại được, chúng tôi muốn chúng càng tách biệt càng tốt bên ngoài thế giới và các phần khác của ứng dụng của chúng tôi, bởi vì nếu không vì kích thước và chức năng phức tạp của nó, nó sẽ là khá nhiều không thể phát triển và duy trì chúng. Đó là lý do tại sao chúng tôi quyết định KHÔNG sử dụng Redux, ít nhất là ngay từ đầu, trong khi chúng tôi chỉ phát triển các thành phần riêng biệt, vì nó thỏa hiệp cách ly thành phần và làm cho toàn bộ luồng dữ liệu ứng dụng không thể hiểu được khi có quá nhiều phức tạp các thành phần. Mặc dù tôi tin rằng lựa chọn của chúng tôi có thể sai, bởi vì như tôi đã đề cập, chúng tôi không có kinh nghiệm với React.

Như tôi đã đề cập, ứng dụng rất năng động. Bằng cách đó, tôi có nghĩa là các thành phần thực sự được kết xuất bởi dữ liệu. Chúng tôi sử dụng các lớp nhà cung cấp cấu hình khác nhau tương tác với các điểm cuối API của chúng tôi để có được các phần cấu hình của ứng dụng, như cấu hình điều hướng, trang, các biểu mẫu khác nhau, danh sách, v.v, và cố gắng hiển thị các thành phần được đọc từ cấu hình đó. Vấn đề là, sau một vài tuần đấu tranh để có được động lượng với React và khám phá các mô hình phù hợp và giải pháp chung cho các vấn đề của chúng tôi, chúng tôi đã nói chuyện với phi hành đoàn của chúng tôi, có thể React không phải là công nghệ phù hợp chúng ta, vì nó là một thư viện UI, không phải là một khung công tác và nó không giúp ích gì cho chúng ta, nhưng chỉ thêm các quy tắc dựng hình mà chúng ta phải phá vỡ vào những thời điểm để đạt được tính năng động và độc lập thành phần mà chúng ta muốn.

Xem xét cách ly thành phần và quản lý lưu lượng dữ liệu, cá nhân tôi đã nghe nói rằng có một ngôn ngữ để phát triển front-end Elm có cấu trúc luồng dữ liệu khá mạnh. không biết liệu nó có đáng để thử không, vì nó có thể rơi sau yêu cầu lớn của chúng tôi khá sớm.

Lý do tôi viết câu hỏi này ở đây là tôi hy vọng sẽ có được thông tin chi tiết từ những người có nền tảng vững chắc về làm việc với các ứng dụng đầu cuối lớn. Tôi muốn biết liệu có thể phát triển một ứng dụng như vậy với React hay không, liệu React có phù hợp với sự phức tạp và động lực hay không, cho dù chúng ta thực sự cần Redux hay cái gì khác, con đường, thực hành, ý thức hệ nào chúng ta nên làm theo. Nếu bạn hiểu câu hỏi của tôi một cách chính xác, đó là khía cạnh kiến ​​trúc mà chúng tôi đang đấu tranh, hơn là công nghệ. Có lẽ chúng ta đang đi trên con đường dẫn đến ngày càng khó khăn và phức tạp hơn nhưng không hướng tới sản xuất.

Trả lời

3

Bắt đầu viết các ứng dụng phức tạp hơn trong React thực sự có thể là một cuộc đấu tranh, tôi biết chính xác cảm giác của nó!

Như bạn nói, React là một giao diện người dùng và không phải là khung sự kiện. Đó là lý do tại sao bạn thường cần một thư viện để xử lý các sự kiện, ví dụ như Redux. Bạn nêu rõ rằng bạn quyết định không sử dụng Redux (bạn thậm chí còn sử dụng các chữ cái viết hoa cho không :)). Tôi sẽ lùi lại một bước nếu tôi là bạn và xem xét lại quyết định đó. Bạn nói lý do không sử dụng Redux là bạn không thể giữ cho các thành phần của bạn dễ dàng cắm và sử dụng lại được khi sử dụng Redux. Tôi cho rằng điều đó không đúng. Redux hoàn toàn tách rời khỏi các thành phần React của bạn. Redux chỉ xử lý việc nhận sự kiện và quản lý trạng thái. Từ quan điểm của các thành phần React, nó chỉ nhận dữ liệu trong các đạo cụ và gửi các sự kiện bằng cách gọi các hàm thông thường. Có thể vẫn kiểm tra đơn vị, tái sử dụng, v.v.

Tôi khuyên bạn nên xem xét lại Redux với điều này. Vui lòng trợ giúp nếu bạn có thêm câu hỏi!

+0

Vui mừng khi biết rằng ai đó ở đây đã biết những gì chúng ta đang trải qua. Nói về 'Redux', tôi đã cố gắng viết một thành phần dạng động với nó và đã rất bối rối ngay khi tôi cần cung cấp cấu hình và dữ liệu cho tiểu bang từ nhiều nguồn khác nhau và sau đó biểu mẫu chính xác và nhận các phần khác nhau của nó đồng bộ . Và sau đó phần xác thực cũng khởi động, và sau đó variuos tạo ra các kiểu trường, như tự động hoàn thành tải các lựa chọn của nó từ một API trực tuyến. Tuy nhiên, tôi vẫn nghĩ rằng sự nhầm lẫn có thể là do sự thiếu kinh nghiệm và kiến ​​thức của tôi về thư viện/khung công tác. – Salivan

6

Hoàn toàn không có câu hỏi mà React/Redux có thể (và được sử dụng rộng rãi) được sử dụng để phát triển các loại ứng dụng mà bạn mô tả. Không có gì trong mô tả của bạn làm cho những gì bạn đang xây dựng độc đáo đến nỗi nó không bao gồm React làm nền tảng để xây dựng nó. Chúng tôi đang tích cực làm việc với một khách hàng doanh nghiệp lớn đang xây dựng toàn bộ giao diện người dùng của họ - với 100 + SPA (các ứng dụng trang đơn) trong React. Đây là một nhóm gồm hơn 100 nhà phát triển trong một dự án 2-3 năm.

Cách chúng tôi cấu trúc điều này là rất quan trọng -

Trước tiên, bạn muốn chọn thư viện thành phần giao diện người dùng. Một vài ví dụ dưới đây:

Chúng tôi về cơ bản mất một trong số này và xây dựng một thư viện thành phần tắt chúng, bởi vì các thành phần của chúng tôi rất tùy chỉnh theo kiểu.

Thứ hai, chúng tôi tạo ra một kiến ​​trúc mô-đun, trong đó mỗi mô-đun (SPA) là một gói npm với một thành phần container chính và lưu trữ redux.

Cuối cùng, chúng tôi có gói máy chủ trung tâm, nơi mỗi mô-đun được đăng ký. Gói máy chủ chịu trách nhiệm xác thực, ủy quyền, ghi nhật ký, định tuyến, v.v.

Bản chất của câu trả lời này không phải là tư vấn về cách cấu trúc một ứng dụng React lớn, nhưng để cho bạn biết rằng React có thể (và đang được sử dụng để phát triển các ứng dụng tương tự như những gì bạn mô tả.

+0

Wow, đó là một số điểm khởi đầu tốt đẹp. Thật tốt khi biết rằng ai đó đã làm đúng. Cảm ơn vì đã chia sẻ kinh nghiệm của bạn. Bạn có thể giải thích sâu hơn một chút về cách bạn thực hiện khái niệm SPA riêng biệt đó không? Làm thế nào để bạn kết hợp chúng với một đơn vị (ứng dụng)? Họ có thích các phần của một số ứng dụng lớn hơn hoặc các ứng dụng hoàn toàn riêng biệt không? Liệu họ có thể giao tiếp với nhau nếu có nhu cầu không? – Salivan

+0

Làm cách nào để một trang web có 100 SPA? Bạn có nghĩa là bạn có giao diện người dùng tổng hợp tải nhiều iframe chứa SPA? Nếu không, thuật ngữ của bạn có thể sai đối với những gì bạn mô tả. – plalx

+0

Mỗi SPA có URL riêng. "Trang web" có thể không phải là thuật ngữ đúng để mô tả nó là gì. Nó giống như một bộ sưu tập của SPA tạo nên sự hiện diện trực tuyến của tổ chức. –

2

Tôi đang ở tình huống tương tự ngay bây giờ. Tôi có nền tảng trong các ứng dụng máy tính để bàn lớn (ERP, LOB - WinForms, WPF) - 1000+ mô-đun, rất năng động (hơn 70% giao diện người dùng được tạo bởi dữ liệu/cấu hình đầu vào), thêm chức năng mới chỉ là mở rộng một số cấu hình (mà không cần chạm vào mã nguồn).

Tôi đang điều tra sâu về các công nghệ web hiện tại và tôi càng tin chắc rằng React không phù hợp với điều đó. Phản ứng thực sự tỏa sáng trong các ứng dụng kích thước nhỏ/trung bình, nơi bạn (và các thành viên khác) phát triển mọi trang/thành phần 'thủ công' (không được tạo động) và bạn muốn có một trạng thái toàn cầu. Nhưng nó không giúp bạn xây dựng ứng dụng quy mô lớn ngoài hộp - nó chỉ là thư viện UI (vì vậy không hỗ trợ cho các mô-đun, định tuyến, biểu mẫu, ràng buộc, yêu cầu http, kiểu gõ tĩnh (kiểu chữ), v.v.) bất ngờ, không có sự hỗ trợ cho phong cách đổ bóng/đóng gói (bạn phải tích hợp, ví dụ, CSS Modules, bởi chính bạn). Và cuối cùng, bạn phải liên tục làm phiền với các phiên bản thư viện (để làm cho chúng luôn luôn làm việc cùng nhau thực sự là thời gian và tiêu thụ năng lượng).

Tôi có một kinh nghiệm tuyệt vời với góc 2/4 + và tôi nghĩ rằng, bây giờ, nó là công nghệ tốt nhất cho rằng loại các ứng dụng (nếu bạn biết WPF, nó là rất tương tự). Nó là một khuôn khổ đầy đủ, được chuẩn bị để mở rộng quy mô ra khỏi hộp.Bạn có thể chia ứng dụng của bạn thành các mô-đun độc lập (chỉ định thành phần nào sẽ hiển thị với thế giới bên ngoài), mọi thành phần đều có api công khai (kiểu tĩnh, đầu vào/đầu ra) và kiểu css đóng gói (không có sự can thiệp giữa các thành phần khác). Đối với trạng thái toàn cầu (người dùng đã đăng nhập, cấu hình chung, v.v.), bạn vẫn có thể sử dụng thư viện ngrx/store (thực hiện mô hình Redux và đi kèm với những thứ tốt đẹp hơn, như 'hiệu ứng' và tích hợp thực sự tốt vào hệ sinh thái Góc).

Tôi đã cố gắng làm trong công cụ thực sự điên cuồng (tự động tạo toàn bộ ứng dụng từ cấu hình phụ trợ) và mọi thứ hoạt động hoàn hảo như mong đợi.

0

Hoàn toàn hiểu cảm xúc của bạn khi bạn bắt đầu với React và Redux. Chúng tôi ở trong tình huống tương tự khi chúng tôi bắt đầu với React trong công ty của chúng tôi. Lúc đầu React có cách tiếp cận khác với khung công tác khác. Có tắt khóa học của nó không khuôn khổ thư viện chỉ của nó. Bạn phải bắt đầu suy nghĩ theo cách React và đó là: React components chỉ render state (giống như bạn render scene trên card đồ họa của bạn lúc đầu bạn phải chuẩn bị scene hơn bạn có thể render), tất cả những gì component có thể làm là gửi các action, hoặc tốt hơn là chỉ gọi người tạo hành động.

Bạn cần một số cách thông minh để lưu trữ trạng thái tại thời điểm đó, tôi sẽ đề xuất sử dụng Redux.

Chúng tôi cũng sử dụng TypeScript với sự kết hợp React, Redux. bạn phải viết nhiều mã hơn JS thuần túy nhưng điều khiển kiểu tĩnh là vô giá khi bạn làm việc trên dự án lớn.

Tách logic thành phần là phương pháp tiếp cận gốc của phản ứng ... bạn phải tách logic ghi "thành phần giả" và sử dụng lại điều này với kết nối. Hoặc chuyển các giá trị dưới dạng đạo cụ.

Chúng tôi đang sử dụng phần mềm trung gian Thunk làm người sáng tạo hành động vì thành phần được kết nối sẽ chỉ gọi phương thức và logic là người sáng tạo hành động. Bạn có quyền truy cập ở đó cho toàn bộ trạng thái của ứng dụng hơn là bạn có thể tìm nạp thứ gì đó và dựa trên kết quả bạn có thể gửi các hành động khác nhau.

Những gì tôi thích về phản ứng/Redux là làm thế nào để thực hiện các cuộc gọi async, vv thành phần thiết kế đầu tiên để lập bản đồ tất cả các nước

1) như tôi không có dữ liệu 2) dữ liệu tải 3) tải thực hiện 4) tải lỗi

Vì điều đó bạn chỉ cần một semaphore trong trạng thái của bạn và một vài phương thức hiển thị. Hơn một người tạo hành động sẽ tải dữ liệu và dựa trên hành động gửi tiến độ mô tả tiến trình.

Điều gì cũng tuyệt vời trong ứng dụng phản ứng/redux mà bạn có một luồng dữ liệu duy nhất tốt khi bước nhảy mới vào dự án.

Đối với giao diện người dùng, chúng tôi đang sử dụng giao diện người dùng Material, công việc khung này có một số vấn đề nhưng không có gì bạn sẽ không thể xử lý.

Chúng tôi cũng đang sử dụng Bộ định tuyến để điều hướng trong ứng dụng.

Ban đầu, tôi sẽ tránh hiển thị phía máy chủ vì nó sẽ dễ dàng hơn nhiều cho bạn bắt đầu chỉ với hiển thị phía khách hàng và với trạng thái ban đầu.

Khi chúng tôi bắt đầu đối với chúng tôi là hữu ích mẫu này, nơi mọi thứ hoạt động trong một dự án JavaScriptServices

Thần Abramov hướng dẫn tắt khóa học tuyệt vời.

Đối với các thành phần thiết kế rất hữu ích Storybook

Chúng tôi có thể viết lý do tại sao sử dụng hoặc không phản ứng cho thời gian dài ... nhưng gì tôi có thể nói ... đối với chúng tôi đó là sự lựa chọn tốt, với một số đau ở van xin nhưng bây giờ chúng tôi có hoàn vốn tốt.

1

Phản ứng, Redux sẽ làm cho mọi việc dễ dàng hơn vì Khi nói đến ứng dụng phức tạp bạn có thể tạo đối tượng dữ liệu có cấu trúc Vâng. sau đó bạn có thể quản lý giao diện người dùng hoàn toàn thông qua Phản ứngcủa nó liệu ... Có một số lý do tại sao đây là lựa chọn đúng đắn

  1. quản lý nhà nước,
  2. Tree xử lý dữ liệu Cấu trúc,
  3. Giảm mã,
  4. Bạn sẽ biết những thay đổi được thực hiện (Hành động, Hộp số)
  5. Thành phần của bạn wil l chỉ chăm sóc UI điều

Những điều mà bạn phải làm là Cấu trúc dữ liệu của bạn

Các vấn đề liên quan