Mã số của chúng tôi chỉ là * TỐT NHẤT *

Lượt xem từ 6 tuần trong địa ngục tôi đã dành để viết lại các bộ đệm trong phản ứng.

Tôi hoàn toàn viết lại ứng dụng web Bumpers bằng phản ứng. (Nếu bạn không biết bộ đệm là gì, thì đây là ứng dụng siêu lạnh này để ghi / chia sẻ các câu chuyện âm thanh trên điện thoại của bạn. Tải xuống, nó thực sự sẽ khiến bạn mất cả cuộc đời. Đây là ứng dụng tuyệt vời nhất từng được tạo ra. Phản ứng? Tầm nhìn của nó.)

Ở bất cứ giá nào, những gì sau đây là tất cả các ghi chú, suy nghĩ của tôi, v.v. về quá trình này. (Những điều tôi ước tôi đã đọc trước khi tôi bắt đầu). Hy vọng bạn sẽ nhận được một cái gì đó từ nó.

Lời nói đầu

THƯỢNG ĐẾ. Tôi ghét khuôn khổ. Rất nhiều.

Tôi cũng ghét việc không có một khung công tác, và bất cứ ai, người đã cuộn cuộn vào khung hình của riêng họ. Tôi cũng chỉ ghét mã hóa, nói chung. Và hầu hết tôi ghét viết về code.

Vì vậy, chịu đựng với tôi.

Gần đây, phong cách mã hóa của tôi là một kiểu xã hội học, dao động giữa sự nghi ngờ bản thân què quặt và một phức tạp thần giống như kanye - nơi tôi đang diễu hành quanh apt một mình suốt ngày khóc hoặc tôi đang gọi mẹ tôi để cho tôi Cô ấy biết đứa con trai 30 tuổi của mình là người đang chơi trò chơi (theo cách tốt). Vì vậy, tự nhiên có vẻ như một thời gian tốt để nghỉ ngơi và viết về nó.

(tinh thần trong vòng đời dự án, ghi chú màu đỏ của tôi) - https://medium.com/@iano/moral-over-a-project-lifecycle-975792b54c12#.uwkzt7x4v)

Chọn phản ứng

Một chút lịch sử: Các trang web ốp lưng hấp dẫn. Có khoảng 7 lớp es6, không có phụ thuộc bên ngoài và chỉ có khoảng 759 dòng mã. Toàn bộ.

Bố cục của nó được hiển thị trên máy chủ bằng ứng dụng Go của chúng tôi. Chúng tôi đã sử dụng postcss. Chúng tôi đã có một thư mục tài sản thực sự đơn giản, nơi chúng tôi đặt tất cả các Svss của chúng tôi và một hoặc hai video. Thật tuyệt vời Chúng tôi đã viết một số javascript. Chúng tôi quên mất nó.

Thật tuyệt vời Chúng tôi đã viết một số javascript. Chúng tôi quên mất nó.

Trong khi đó, Nicolas Gallagher là một phần của nhóm vừa hoàn thành một dự án dài một năm viết lại sản phẩm web di động Twitter Hồi trong React.

Tôi đã biết Nicolas trong một thời gian dài. Và anh ấy dễ dàng là một trong những người chu đáo hơn mà tôi biết. Vì vậy, sau đó, anh ấy nói với tôi rằng React đã giải quyết được tất cả các vấn đề trong không gian Phát triển Front End và anh ấy đã chuyển sang lo lắng về những thứ khác, tôi đã nói với anh ấy ngay lập tức.

Theo mệnh giá, React có những thứ này dành cho nó:

  • được chứng thực bởi những người bạn thông minh hơn thì tôi như Nicolas Gallagher, Alex MacCaw, Guillermo Rauch
  • kết xuất phía máy khách (tốt cho các ứng dụng âm thanh, vì vậy bạn có thể tiếp tục phát lại trên các điều hướng)
  • mô hình thành phần chu đáo
  • mọi người đang di chuyển khỏi (hoặc ít nhất là thử thách) CSS
  • mọt sách facebook đã viết nó
  • ứng dụng sản xuất ~ như instagram, twitter, v.v ~ đang sử dụng nó
  • mọi người dường như cuối cùng đã giải quyết xung quanh một mô hình dữ liệu trong redux (và thích nó)

Nhưng đồng thời, phản ứng có một số điều tôi cảm thấy phấn khích:

  • Gói javascript 700 dòng của tôi sắp trở thành ~ 1,5mb
  • kết xuất phía máy chủ sản xuất yêu cầu máy chủ nút (và thậm chí sau đó các giải pháp dường như được nướng một nửa)
  • thực hành kiểu dáng là siêu phân mảnh trên toàn cộng đồng (bạn có sử dụng aphrodite, css-mô-đun, thẻ kiểu, v.v. - còn phụ thuộc của bạn thì sao?)
  • mọt sách facebook đã viết nó
  • webpack → babel → jsx → tải nóng → bản đồ nguồn → công cụ chrome như một ngăn xếp làm tê liệt macbook nhỏ tội nghiệp của tôi
  • Tôi đã phải xem những video này.
  • dụng cụ dường như rời rạc và trên đỉnh giáo dục

Mặc dù tất cả điều này, chúng tôi quyết định đi cho nó. (Hy vọng chính được phản ứng bằng cách nào đó sẽ thiết lập cho chúng tôi để xây dựng một cái gì đó cảm thấy nhiều ứng dụng khác hơn-ứng dụng).

Lựa chọn phần còn lại

Hóa ra sau khi bạn quyết định phản ứng (lib của bạn), bạn đã thực sự rời đi với một số quyết định khác: Bạn sẽ quản lý nhà nước như thế nào? Làm thế nào bạn sẽ phong cách các thành phần của bạn? Bạn sẽ sử dụng es6? es7? es2015? jsx? Những điều đó có nghĩa là gì? Bạn sẽ sử dụng webpack? hay trình duyệt? Mọi thứ sẽ sống ở đâu? Giáo dục

Tôi đã bắt đầu bằng cách kết hợp repo bản tóm tắt của TJ Holowaychuk (https://github.com/tj/frontend-boilerplate/tree/master/client) (mà anh ta thừa nhận về cơ bản đã bị lỗi thời trong readme) và email dài này Nicolas đã viết cho tôi biết nơi twitter đã hạ cánh (một nửa trong số đó tôi không hiểu vào thời điểm đó, nhưng bất kể, bạn có thể đọc toàn bộ email ở đây: https://gist.github.com/fat/9ab5325ab39acfe242bc7849eb9512c4).

Tôi cũng đã xem xét một vài trong số nhiều repos nồi hơi phổ quát-phản ứng-redux-glahblbhalkd trên github, nhưng tất cả chúng đều khiến tôi hoảng loạn.

Bằng mọi giá, bằng cách nào đó, tôi đã xoay sở để đến được một nơi mà tôi có thể hài lòng, trông giống như:

  • Babel (với các cài đặt trước của Cameron, [: es es2015,, giai đoạn-0, một phản ứng,] vì vậy tôi có thể sử dụng tất cả các shit mới điên rồ như toán tử lây lan, hàm mũi tên, v.v.
  • Webpack với các trình tải nóng, mà (khi nó đang hoạt động) tôi thấy tiện dụng khi cập nhật kiểu ở các trạng thái ứng dụng cụ thể. Nhưng chắc chắn gây ra cho tôi rất nhiều lo lắng. Thành thật mà nói, tôi cảm thấy như không ai thực sự hiểu cách thức hoạt động của webpack. Và tất cả chúng ta chỉ cần tiếp tục ném các thuộc tính và plugin ngẫu nhiên vào nó để cầu nguyện rằng tất cả sẽ tắt. Ag xâmiveMergingPlugin? chắc chắn rồi. Xảy raOrderPlugin? đồng ý. DedupePlugin? khỏe.
  • Redux kết hợp với Normilzr và den normalizr để giúp phá hủy và sau đó bù nước cho các phản ứng api.
  • Aphrodite / phong cách js không quan trọng, không phải css, nhưng không có tất cả những thứ đó! Quan trọng ở mọi nơi.
  • Svg-Reac-loader tải Svg lệch như các thành phần phản ứng nội tuyến.
  • Một số ít người khác nếu bạn thấy một cái gì đó khác trong danh sách phụ thuộc mà bạn tò mò về, hãy để lại một ghi chú và tôi sẽ giải thích nó.

Cấu trúc thư mục

ĐƯỢC CHỨ. Khi tôi đã giải quyết được 38 phần phụ thuộc. Chúng tôi đã yêu cầu trang web này, đã đến lúc viết một số mã thực tế.

Cấu trúc thư mục của chúng tôi được tổ chức xung quanh hai điểm nhập cảnh:

  • index.js khởi tạo bộ định tuyến và lưu trữ cho gói ứng dụng cốt lõi của chúng tôi.
  • embed.js chịu trách nhiệm cho gói nhúng nhỏ hơn của chúng tôi (như được thấy trong slack, twitter, Medium, v.v.).

Từ đó, chúng tôi lấy các tuyến đường của mình từ thư mục có tên là lộ tuyến, hiện chỉ là một thành phần bộ định tuyến phản ứng đơn giản, trông giống như sau:

Lưu ý các tuyến đường này chỉ đến những gì chúng ta gọi là container container.

Trong Bumpers, các thành phần phản ứng của chúng tôi thực sự được chia thành 3 thư mục khác nhau, tùy thuộc vào chức năng của chúng (4 nếu bạn bao gồm thư mục tuyến đường). Cách thức tổ chức các thành phần này về cơ bản chỉ là bị đánh cắp trực tiếp từ Twitter, đến lượt tôi nghĩ rằng đã mượn nó từ Facebook và vô số dự án khác. Nó có vẻ như:

  • các thành phần này là nơi các thành phần chức năng của chúng tôi sống
  • container đây là nơi xử lý hành động cho các thành phần ui của chúng tôi sống
  • về mặt kỹ thuật, đây chỉ là các thùng chứa - nhưng thường thực hiện tìm nạp trang cấp cao hơn và ít quan tâm đến việc xử lý hành động.
GHI CHÚ Tôi thực sự bắt đầu chỉ với một thư mục container, không có màn hình trên màn hình (điều khá phổ biến so với những gì tôi đã thấy xung quanh cộng đồng phản ứng). Tôi đã chuyển đi từ đề xuất này của Nicolas, và bởi vì nhìn thấy một loạt các tập tin có hậu tố màn hình, trộn lẫn với các tập tin không có màn hình không phải của tôi, làm phiền tôi.

Hai thư mục cuối cùng là thư mục lưu trữ trên mạng và thư mục trực tuyến. Cửa hàng lưu trữ trên mạng có chứa tất cả logic chuyển hướng của chúng tôi như hành động, bộ giảm tốc, bộ chọn, điểm cuối api, v.v.

Thành phần UI

Các thành phần UI của chúng tôi là các thành phần khá chuẩn, chức năng, không trạng thái, trình bày, phản ứng. Ở đây, một thành phần tập tiêu chuẩn (được tạo thành từ nhiều thành phần nhỏ hơn, tiêu chuẩn, chức năng, không trạng thái, trình bày, phản ứng).

Như tôi đã đề cập ở trên, chúng tôi sử dụng Khan Academy Aphrodite để tạo css của chúng tôi.

LƯU Ý NHANH Ban đầu, tôi đã viết ứng dụng bằng gói tải kiểu, nhưng nó không có khả năng cung cấp chiến lược máy chủ thuyết phục (thứ mà cuối cùng tôi muốn khám phá), là đủ để tôi thử thứ khác. (Tôi cũng thường xuyên xem React-Native, điều mà Nicolas sẽ liên tục nhắc nhở tôi là tốt hơn sau đó bất cứ giải pháp nào tôi đã độc lập đưa ra vì anh ấy đã viết nó).

Tuy nhiên, việc viết các phong cách của tôi trong javascript khá tự nhiên và với sự trợ giúp của các tính năng ES6 mới, nó có thể được thực hiện khá thanh lịch.

Tôi đã có thể đạt được một phong cách tương tự như những gì chúng tôi đã làm khi tôi làm việc ở Medium, tạo thang đo kiểu, thang màu, thang đo z Index, v.v. Và thậm chí có thể sử dụng tính năng tên thuộc tính được tính toán ES6 để trừu tượng các truy vấn phương tiện của tôi thành các biến .

Một điều tôi không thể nhận được là đặt tên cho tất cả các tên lớp của mình một cách khái quát, như hộp box, hay hộp đựng thức ăn chính hay chữ chính hay chữ gốc. Tôi nhận được toàn bộ phạm vi địa phương css meme nhưng nó dường như có giá của khả năng gỡ lỗi. Thay vào đó, tôi thực sự đã đạt được một ngữ nghĩa đặt tên không xa so với những gì được nêu trong SuitCSS, chỉ được sửa đổi một chút cho javascript (sử dụng một cách khác thay vì sử dụng - Thay). Trong thực tế, cái này trông giống như thế này:

Một điều cuối cùng tôi nhắc đến nhanh chóng là tất cả các tệp có liên quan của chúng tôi đều nằm trong các thư mục thành phần tương ứng của chúng.

Các kiểu được đặt trong một tệp riêng có tên style.js, bên cạnh các tài sản svg có liên quan được nhập trực tiếp bằng cách sử dụng trình tải Svg-Reac-loader. Làm điều này giúp dễ dàng xóa các thành phần / tính năng và không bị bỏ lại liên tục tự hỏi: chờ đã, tôi vẫn cần css này chứ? tôi vẫn cần Svg này chứ?

Chặn container

Thành thật mà nói, tôi sẽ không nói gì nhiều về container ™. Chúng tôi không làm gì đặc biệt ở đây ngoài việc tách các thư mục màn hình / container (mà tôi đã trình bày ở trên).

Tuy nhiên tôi đã vẽ một bức tranh khác cho bạn (wow, ngay ở đó) bởi vì tôi cảm thấy tồi tệ vì không có nhiều điều để nói về container. Và tôi nghĩ rằng đây là thời điểm tốt để bạn nghỉ ngơi có lẽ. Căng ra?

Lấy làm tiếc.

Cửa hàng

~ TRỞ LẠI ~. Phần cửa hàng này có thể dễ dàng là RIÊNG KIẾM BÀI VIẾT, nhưng tôi sẽ cố gắng vượt qua nó cho yellallall vì vậy hãy đồng ý với tôi. Cũng cảnh báo công bằng - nó sắp sửa có được DENSE.

GHI CHÚ những gì sau đây có lẽ sẽ hoàn toàn không có ý nghĩa gì trừ khi bạn quen thuộc với redux (http://redux.js.org/). Nếu bạn quan tâm đến việc tìm hiểu thêm về Redux và sử dụng nó để quản lý trạng thái trong các ứng dụng phản ứng của bạn - Tôi khuyên bạn nên xem các hướng dẫn ví dụ này, chúng đều miễn phí và tất cả đều được xem là khá tốt: https://egghead.io/cifts/getting -started-with-redux

Cửa hàng của chúng tôi được tạo thành từ 4 tệp cấp cao nhất (tôi đi sâu vào chi tiết hơn về từng tệp bên dưới, nhưng thực sự nhanh chóng)

  • index.js - trình khởi tạo cửa hàng của chúng tôi
  • lesser.js - kéo tất cả các bộ giảm tốc từ các đối tượng khác nhau vào một phương thức kết hợpRRucucers khổng lồ
  • lược đồ - tất cả các mô hình normalizr của chúng tôi
  • api.js - một người trợ giúp api cho cửa hàng của chúng tôi

Ngoài ra, cửa hàng của chúng tôi được cấu trúc xung quanh các mô hình, với các thư mục như người dùng, lời nhắc, v.v. - chứ không phải là hệ thống phân cấp thư mục chức năng cấp cao nhất của redux truyền thống /, bộ giảm /, bộ chọn /, bleh.

Tất nhiên chúng ta vẫn có sự phân tách hành động, bộ giảm tốc truyền thống, v.v. mà redux yêu cầu, nhưng điều này được thực hiện ở cấp độ tệp, được lồng trong thư mục mô hình của nó (hãy xem thư mục người dùng mở rộng trong hình ảnh bên trái một minh họa về những gì tôi đang cố gắng nói).

OKAY, nhưng tại sao tho? Khi xây dựng ứng dụng này, tôi thấy mình liên tục nói những điều như: hung dang tôi thực sự muốn làm việc với người dùng rnith và hầu như không bao giờ nói điều gì đó như: xông dang, tôi thực sự muốn thay đổi một loạt các bộ giảm tốc cùng một lúc, chắc chắn rất vui tất cả chúng đều nằm trong thư mục giảm tốc khổng lồ này.

GHI CHÚ Tôi có thể nhớ được nơi mà lần đầu tiên tôi thực sự nhìn thấy chiến lược này nhưng tôi đã tự tin rằng tôi đã không phát minh ra nó. Nếu bạn biết ai đó đã làm, hoặc người giải thích rõ, hãy để lại một ghi chú và tôi sẽ rất vui khi chỉ cho mọi người điều đó. Ngoài ra tôi ~ nghĩ ~ twitter làm một cái gì đó tương tự. Nhưng tôi có thể làm điều đó lên.

Nitty gritty của các tập tin cấp gốc

Được rồi, do đó, cửa hàng Index.js (được đề cập ngắn gọn ở trên) chịu trách nhiệm cho 3 nhiệm vụ chính:

  1. Nhập dữ liệu được tìm nạp trước, được nhúng vào cửa hàng redux của chúng tôi và đặt trạng thái ban đầu của cửa hàng (Phần phụ trợ của chúng tôi tìm nạp dữ liệu khi người dùng truy cập vào một cái gì đó như là bers.fm/fat để khi ứng dụng phản ứng tải, nó không phải lập tức thực hiện xhr yêu cầu dữ liệu người dùng và thay vào đó, nó có thể nhanh chóng điền trang).
  2. khởi tạo cửa hàng redux của chúng tôi với bộ giảm gốc của chúng tôi.
  3. áp dụng phần mềm trung gian như thunk, phản ứng bộ định tuyến, trình duyệt, trình điều khiển, và nhiều hơn nữa

Trong thực tế, tất cả điều này cuối cùng trông giống như phương pháp dưới đây - nhưng vì bất kỳ lý do gì khiến tôi rất đau buồn:

Tiếp theo, hãy nhanh chóng truy cập vào tập tin lessers.js của chúng tôi, về cơ bản chỉ là một phương thức kết hợp đơn lẻ, kéo các bộ giảm tốc từ các thư mục khác của chúng tôi và hiển thị chúng như một thác nước giảm tốc khổng lồ duy nhất. tbqh, tập tin này khá nhàm chán và có lẽ tôi đã có thể đặt nó vào index.js. Rất tiếc.

Tuy nhiên! Một điều đáng để gọi ra ở đây là bộ giảm tốc thực thể của chúng tôi (xem ở trên) hoạt động giống như bộ nhớ cache của cửa hàng của chúng tôi.

Để thực hiện điều này, chúng tôi đã sử dụng một dự án có tên là normalizr (https://github.com/paularmstrong/n normalizr) để ép buộc các phản hồi api JSON được lồng sâu của chúng tôi vào các đối tượng được lập chỉ mục ID có thể quản lý / lưu trữ nhiều hơn. Điều đó có nghĩa là, chúng tôi bắt đầu với một phản hồi api truyền thống hơn và sau đó chuyển đổi nó thành hàm băm thực thể được lập chỉ mục ID:

Như bạn có thể tưởng tượng, kỹ thuật bộ đệm này là ~ siêu hữu ích ~ khi bạn bắt đầu điều hướng xung quanh một ứng dụng phản ứng - inasmuch như thể bạn tìm nạp một tập mà bạn có thể đã tìm nạp người dùng (với tư cách là tác giả), giờ đây bạn có thể tra cứu bằng ID bằng cách sử dụng một trong những phương pháp chọn, mà không cần phải nhấn vào phụ trợ của bạn (đọc: điều hướng gần như tức thời. wow).

Lược đồ của chúng tôi sau đó là nơi chúng tôi chỉ định logic để loại bỏ các biến đổi thực thể ở trên cho bộ đệm của chúng tôi (và cho normalizr). Những ánh xạ mối quan hệ này kết thúc khá đơn giản để viết - nhưng chắc chắn dễ quên. Nếu bạn có thể đi theo lộ trình bộ nhớ cache, thì đó là giá trị của nó.

GHI CHÚ Bên cạnh Không được mô tả ở trên, Schema.js cũng chứa một mergeStrargety tùy chỉnh mà chúng tôi đã viết đặc biệt cho các bộ đệm. Vì bất kỳ lý do gì, mergeStrargety mặc định được cung cấp bởi normalizr đã tự vấp ngã, nhưng tôi sẽ không đi sâu vào vấn đề này vì đây gần như chắc chắn là lỗi người dùng. (Điều đó nói rằng, nếu bạn đang gặp vấn đề tương tự, hãy để lại một ghi chú và tôi vui lòng chia sẻ nơi chúng tôi hạ cánh.)

Tệp gốc cuối cùng của chúng tôi trong thư mục cửa hàng là api.js.

Sau nhiều lần đập đầu tôi, tôi nhận thấy rằng phần mềm trung gian (mà chúng tôi dựa vào các hành động không đồng bộ) cho phép chúng tôi chuyển một đối số bổ sung cho tất cả các hành động chuyển hướng của bạn (trên đầu công văn và getState).

Hãy nhớ điều này từ store / index.js

Điều này là vô cùng mạnh mẽ, và cuối cùng tôi đã sử dụng nó để vượt qua một người trợ giúp api toàn cầu vào tất cả các hành động của chúng tôi. Trình trợ giúp api này (được xác định trong api.js) cung cấp quyền truy cập nhanh vào tất cả các điểm cuối api của chúng tôi, với các trợ giúp bổ sung để phân tích cú pháp JSON, kiểm tra lỗi và hơn thế nữa. Bạn sẽ thấy điều này trong hành động bên dưới, khi chúng tôi tham gia vào các tập tin hành động của chương trình.

Hộp giảm tốc

Bộ giảm tốc redux của chúng tôi phát triển để có 3 chức năng chính.

  1. Xác định trạng thái ban đầu
  2. Xác định trình xử lý preloadData (cho dữ liệu nhúng của chúng tôi)
  3. Tiếp xúc giảm tốc xử lý

Trạng thái ban đầu của chúng tôi thường trông giống như thế này, với các hằng trạng thái cho trạng thái yêu cầu và id hoạt động:

Trình xử lý tải trước của chúng tôi lấy các đối tượng dữ liệu thô của chúng tôi và giải nén các thực thể dữ liệu, trong trường hợp này đặt người dùng hoạt động mặc định:

Và một bộ giảm điển hình trông giống như thế này (lưu ý việc sử dụng tên thuộc tính được tính toán (Es2015). Chúng tôi lấy chúng trực tiếp từ các định nghĩa hành động, được đề cập dưới đây).

Hành động

Có một số điều kỳ diệu xảy ra trong các tập tin hành động của chúng tôi. Trước tiên, chúng tôi sử dụng phương thức redux-hành động của lòng đỏ

Chúng tôi làm điều này để trong tệp giảm tốc của chúng tôi, chúng tôi có thể sử dụng tên thuộc tính được tính toán (đã đề cập trước đó) để chỉ có tên hành động được xác định ở một nơi. Ngoài ra hãy xem cách chúng tôi đặt tên cho hành động của mình: phương thức + đối tượng + thuộc tính. Điều này là ~ siêu ~ quan trọng để giữ cho tất cả các phím giảm tốc của bạn có thể đọc được và duy nhất. Tôi đã thấy rất nhiều ví dụ trên web của những người sử dụng các tên lười biếng, chung chung như tên người dùng, tên người dùng, tên người dùng, tên người dùng, ví dụ như tên người dùng, bạn sẽ có một thời gian thực sự tồi tệ nếu bạn làm điều đó (hãy nhớ rằng, các khóa là toàn cầu và lỗi gây ra bởi xung đột đặt tên là một pita chính để theo dõi).

Đối với các hành động không đồng bộ, chúng tôi sử dụng redux thunk và trình trợ giúp api mà chúng tôi đã đề cập ở trên. Điều này giúp giữ cho các phương thức async của chúng tôi siêu chặt chẽ và tập trung.

Trong ví dụ trên, chúng tôi đặt isFetching trên đối tượng người dùng, gửi yêu cầu đến api của chúng tôi, kiểm tra phản hồi cho mã trạng thái lỗi, đặt mã thông báo jwt của chúng tôi, chuyển đổi phản hồi thành json, bình thường hóa phản hồi bằng cách sử dụng bộ nhớ cache) và sau đó đặt trạng thái người dùng hoạt động.

Đây là cách xử lý sạch nhất các phương thức async trong redux mà tôi đã từng thấy (don lồng @ me).

Điểm cuối

Tôi đã thấy bất cứ ai khác thực hiện các tệp điểm cuối này - nhưng tôi thấy đó là một cách thực sự sạch sẽ để giữ cho các cuộc gọi api có liên quan của bạn tất cả sống ở một nơi (không đề cập đến việc kiểm tra sơ khai siêu dễ dàng). Cũng lưu ý rằng, isom định hình-tìm nạp - tôi thề một ngày nào đó chúng tôi sẽ kết xuất nội dung này trên máy chủ. Trong khi đó, điều thú vị khi sử dụng tìm nạp là nó trả lại một lời hứa và tạo ra một api khá sạch sẽ khi bị kéo vào các hành động không đồng bộ của chúng tôi.

Bộ chọn

Cuối cùng, tệp bộ chọn của chúng tôi sử dụng thư viện den normalizr (https://github.com/gpbl/den normalizr) (dự án chị em bình thường) để xây dựng lại dữ liệu khả thi hơn từ bộ đệm của chúng tôi. Về cơ bản, nó chỉ sử dụng các mô hình tên để tái tạo một đối tượng lồng nhau lớn - bạn don ~ có ~ để làm điều này, nhưng tôi thấy việc làm việc với dữ liệu theo cách này thú vị hơn / có thể dự đoán được.

Ngoài ra, các phương thức chọn của chúng tôi trông khá giống như bạn mong đợi:

Phần kết luận

Ôi. Được rồi yallall mà cảm thấy như một hành trình nghiêm túc. Và những thứ ở cửa hàng đó có lẽ đã quá nhàm chán và mất đến 90% độc giả, vì vậy tôi xin lỗi.

Cảm ơn rất nhiều vì đã đọc, và xin lỗi nếu bài đăng này không thể đọc được. Tôi chỉ tự hứa với bản thân mình rằng tôi sẽ xuất bản một cái gì đó như thế này bởi vì tôi thấy việc học tất cả những thứ tồi tệ này sẽ rất phân tán / khó khăn.

Nếu bạn có bất kỳ câu hỏi nào về bất cứ điều gì, hãy để lại nhận xét hoặc ghi chú và tôi sẽ cố hết sức để trả lời.

Béo

MỘT SỐ Q / A

Ya, tôi chắc chắn hạnh phúc! Tôi sẽ nói dối nếu tôi đã nói rằng đó là một pita lớn, nhưng về cơ bản, Bumpers chỉ là một ứng dụng trình phát âm thanh lớn - và quản lý trạng thái qua các điều hướng và trong suốt nhiều yếu tố phản hồi mà chúng ta có sẽ rất khó khăn.

Tôi nghĩ cũng có điều gì đó để nói về việc sử dụng các công cụ quen thuộc của trực tuyến khi bạn có chúng - và tôi hy vọng nếu chúng ta có thể thuê thêm frontend's tại Bumpers, rằng họ sẽ có thể lặn khá dễ dàng mà không cảm thấy hoàn toàn choáng ngợp (và giống như họ cần học mọi thứ từ đầu).

Đúng, khá nhiều. Chúng tôi đã làm một điều tương tự ở Medium khi tôi cũng ở đó. Bạn phải cẩn thận với cách bạn thực hiện, vì bị hack script script, nhưng nó là một cách khá hay để tiếp cận một cái gì đó như phía máy chủ của trò chơi kết xuất cảm giác, mà không phải hiển thị các mẫu phản ứng trên máy chủ.