Kiến thức thiết kế website

09 Tháng 10

Ông lớn thương mại điện tử đang sử dụng ReactJS như thế nào?

Sau một thời gian làm 1 vài project với ReactJS mình mới thấy được sử phổ biến và bá đạo của nó. Tiện hôm nay rảnh rỗi và lướt xem mấy ông lớn có sử dụng ReactJS không nhé? Cụ thể ở đây thì mình đưa 1 những trang lớn về thương mại điện tử đã sử dụng ReactJS cho web app của họ.

reactjs

Ở 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ì 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.

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

Đã có 8248 người xem bài viết này
Đánh giá bài viết
(3 Đánh giá)
Thiết kế Website - Monster Design

Monster Design là công ty chuyên thiết kế website theo yêu cầu của doanh nghiệp cũng như cung cấp các dịch vụ liên quan đến thiết kế website. Tất cả các ý tưởng kinh doanh tuyệt vời với sự ra mắt của một trang web được thiết kế chuyên nghiệp phù hợp với xu hướng phát triển thế giới công nghệ và hiệu quả cao. Internet đã định nghĩa lại cách thức kinh doanh và trang web của bạn là cửa ngõ để tiếp cận các cơ hội kinh doanh và biến cơ hội kinh doanh trên website thành lợi nhuận.

Về chúng tôi

Công ty TNHH Monster Design được thành lập từ năm 2012 được quản lý và giám sát bởi Công ty Tin Học Nhật Quang là công ty chuyên viết phần mềm và thiết kế website bởi các chuyên gia, kỹ sư tin học giàu kinh nghiệm và uy tín. Đội ngũ quản lý, nhân sự của Công ty phần lớn được đào tạo từ nước ngoài cũng như được quy tụ từ các Công ty lớn trong và ngoài nước.

Kiến thức Thiết kế Website

Xem tất cả bài viết về Thiết kế Website

Thông tin liên hệ

Số 4 Nguyễn Đình Chiểu, Q.1

+84 909 333 021

+8428 62789 508

contact@monsterdesign.vn