Ở dưới đây mình sẽ liệt kê và đưa ra phân tích công nghệ họ đã sử dụng, các stack họ đã dùng dựa trên cấu trúc app và source code mình phân tích được.
1. Chotot.com
Đứng đầu danh sách là Chợ tốt, chỉ đơn giản là vì nó chính là nguồn cảm hứng để mình viết bài này. Từ chotot.com mình mới biết được hàng đống trang thương mại điện tử ở Việt Nam cũng đang sử dụng ReactJS. Hay thật!
Công nghệ sử dụng:
- ReactJS -> Cái này mặc định mình ko thêm nhé ;)
- React Router -> Routing trong ReactJS khỏi nghĩ ngợi nhiều.
- Redux -> Quản lý state tập trung dựa trên mô hình FLUX của Facebook.
- NodeJS + Next.JS -> Để render ReactJS ở phía server, giúp trang web hỗ trợ SEO, cái này thì hiển nhiên cần vì trang thương mại điện tử nào mà chả cần lên top Google phải không nào.
- Styled Components và CSS Modules để xử lý các vấn đề về styles trong app.
- Sử dụng Fetch để request API.
Một số kỹ thuật mình phân tích được:
- Có sử dụng cách chia các components sử dụng chung cho toàn project thành các package riêng, ví dụ như là: ct-react-common và universal_components giúp giảm tải code ở trong 1 project quá lớn và có thể chia nhỏ cho các team nhỏ hơn và giúp các team làm việc độc lập được với nhau.
- Có sử dụng kĩ thuật Code splitting để layzy load 1 số module mà chưa cần load luôn ở màn hình đầu, việc này giúp giảm tải thời gian tải và render trang trong lần đầu người dùng vào ứng dụng. React-Loadable là 1 công cụ hoàn hảo để làm việc này.
- Tạm thế! Nếu biết thêm cái gì thì sẽ bổ sung.
2. Shopee
Một tên tuổi mới nổi đó chính là Shopee với sự đỡ đầu của công ty mẹ Garena.
Công nghệ sử dụng:
- ReactJS, React Router
- Redux kết hợp với ImmutableJS giúp việc quản lý state vô cùng dễ dàng.
- Không sử dụng Styled Components hay CSS Modules mà chỉ sử dụng kiểu viết css thông thường (Có sử dụng SASS).
3. Tiki
Với Tiki thì họ không sử dụng cho tất cả project mà họ chạy 1 phần ReactJS trong project với những chỗ cố xử lý nhiều liên quan đến UI như chỗ thanh tìm kiếm, giỏ hàng, tài khoản, thanh thông báo, và 1 số section khác nữa.
Các phần này chạy gần như độc lập với nhau và như 1 project ReactJS riêng biệt. Còn cả page hầu như được render hầu hết content ở phía Server, chỉ có những phần như mình nói ở trên (không phải phần quan trọng của page) sử dụng ReactJS.
4. Lazada
Lazada cũng là 1 trang thương mại điện tử rất to và lâu đời (đã bị Alibaba thâu tóm). Dễ dàng thấy là Lazada thành lập từ cái ngày mà ReactJS còn chưa đẻ ra thì dễ gì mà nó dùng.
Ấy thế mà Lazada đã áp dụng ReactJS vào site họ rồi đấy! Hẳn 1 cái thanh search luôn. Tất cả chỉ vỏn vẹn trong thanh tìm kiếm sản phẩm. Dễ hiểu là cái thanh tìm kiếm sản phẩm đó là một trong những thứ quan trọng nhất của site nên nó đã được áp dụng hẳn ReactJS vào, còn những thành phần khác thì không nhé, vẫn render bình thường ở phía server như cái thời mà ông cha ta vẫn thường làm (tương tự Tiki).
Ngoài ra Lazada còn sử dụng thêm: React Intl để hỗ trợ đa ngôn ngữ, vì Lazada nó bán cho cả cái Đông Nam Á này rồi.
Mở rộng
Ngoài ra mình còn có thể kể tên 1 số site nổi tiếng đã sử dụng ReactJS để bạn có thể biết được sự bá đạo và phổ biến của ReactJS.
- Bitbucket
- Uber
- Traveloka
- Spotify
- Paypal
- Dropbox
- Coursera
- WordPress.com
- Udemy
- Walmart
- Auth0
- Discord
Tổng kết
Đấy! Nếu bạn nào có góp ý gì thêm thì có thể bình luận ở phía dưới nhé. Bài này chủ yếu là giới thiệu nên sẽ không có gì gọi là chắt lọc ở đây cả, chỉ mang tính chất tham khảo và có cái nhìn về ReactJS trong các dự án thực tế.
P/S: À hôm trước thấy bọn Linode nó mới update cái trang quản trị của nó và nó còn public source code trên GitHub luôn, ae có thể lôi về tham khảo. Đây là dự án thực tế và của 1 công ty khá to nên cũng là 1 nguồn tham khảo rất tốt.
Nguồn Medium
