React là một trong những View library đang khá hot hiện nay. Những điểm mạnh của nó là:
- Có tính năng declarative: dễ dàng khai báo những gì chúng ta muốn, và React sẽ làm phần việc còn lại cho chúng ta.
- Được xây dựng dựa vào component, tất cả trong React đều là component.
- Học một lần và có thể viết được nhiều nền tảng khác nhau: web apps, native mobile, server side rendering, …
- State hiệu quả hơn với top-down data flow: giúp chúng ta dễ dàng control state trong app.
- Dễ dàng kết hợp những component để tạo nên một Component Tree.
- Giải quyết đươc bài toán cập nhật DOM hiệu quả.
Hôm nay, chúng ta cùng tìm hiểu những khía cạnh then chốt để mở rộng dự án(how to scale) với React một cách hiệu quả nhất. Đầu tiên chúng ta tìm hiểu thế nào là Scalability nhé.
Scalability là gì?
Scalability là khả năng một dự án có thể mở rộng lớn hơn, phục vụ người nhiều user hơn(hàng trăm ngàn, hàng triệu user), có nhiều feature hơn, có thể maintain với nhiều developer hơn.
Bài toán State Management cho app lớn.
Bạn có thể tưởng tượng nếu phát triển một web apps mà data đều tĩnh(không thay đổi) thì thật là dễ dàng phải không nào. React web là một dynamic app, do đó tất cả các state đều có thể thay đổi. State là tất cả những dữ liệu trong app của chúng ta như string, boolean, number, array, object, …
Và một điều lưu ý là state sẽ thay đổi theo thời gian, và từ đây app của chúng ta mới bắt đầu sinh ra nhiều vấn đề đau đầu, chúng thay đổi và bạn không biết chúng ta đổi ở đâu?
State Management là một pattern, hay là một mô hình để chúng ta quản lí state hiệu quả hơn, dễ dự đoán sự thay đổi hơn(predictable).
Có thể bạn cần đến Redux cho những app phức tạp.
Redux là một công cụ cung cấp cho chúng ta cách thức để quản lí state hiệu quả hơn, theo một cách dễ predict nhất. Mô hình đó gọi là luồng dữ liệu một chiều.(single directional data flow). Với mô hình này, cách thay đổi state chỉ theo một hướng duy nhất. Do đó, chúng ta sẽ dễ hiểu và tiên đoán cách state thay đổi hơn.
Tổ chức app theo mô hình Container và Components
Container(smart, stateful, central) là những component xử lí dữ liệu và quản lí tất cả các state. Nó quan tâm đễn việc cách component hoạt động như thế nào. Ngược lại, components( presentational, dumb, stateless) là những component chỉ có nhiệm vụ hiển thị data, và emit event cho Container.
React by feature vs React by type
Bạn hãy tưởng tượng khi app của bạn lơn lên và có nhiều feature hơn, thì mỗi lần một phát triển một tính năng mới cho app, bạn có phải mất thời gian move qua nhiều thư mục khác nhau. Tất cả các file bạn làm việc liên quan tới feature đó nằm rải rác và phân tán ở những folder khác nhau. Một file nằm trên đầu source code, một file khác lại nằm cuối cây folder.
Bạn hãy xem xét tổ chức cây thư mục của app theo feature, và có thể chúng ta kết hợp thêm group by type trong feature đó.
Bạn đang bị conflict name cho CSS?
Styling trong React là global styles, cho nên nếu chúng ta không có hệ thống naming phù hợp cho class trong css thì quả thật đau đầu đúng ko nào. Bạn có thể tham khảo CSS Module và BEM nhé.
Vấn đề Performance cho những app lớn?
Đây là một trong những vấn đề quan trọng cho web app hiện nay, tôi thường thấy tất cả các app đều phải giải quyết bài toán hiệu năng này. Thật may, phía sau React nó đã làm dùm chúng ta khá nhiều việc. Facebook có hàng trăm developer giỏi và rảnh rổi 🙂 nên sinh nông nỗi, đã tạo ra React giúp giải quyết vấn đề performance cho SPA. Hiện nay, có lẽ React đang làm tốtnhiệm vụ của mình và tạo ra một library khá tuyệt vời. Đó là nhờ các kỹ thuật như Virtual DOM, top-down data flow, giải thuật cập nhật DOM thông minh giúp giảm tối đa việc phải render app quá nhiều lần và dư thừa.
Nhưng nó vẫn chưa giải quyết hết các bài toán performance của chúng ta. Một trong những cải thiện đáng giá gần đây là PureComponent và shouldComponentUpdate. Và hơn thế nữa bạn có thể cần Immutable.js.
Việc mở rộng một hệ thống như một thách thức lớn lao đối với nhiều dự án. Một sản phẩm phục vụ vài trăm người là một vấn đề đơn giản, nhưng bạn hãy tưởng tưởng các ứng dụng bây giờ đáp ứng được cho bao nhiêu người? Các e-commerce app như Tiki, Lazada, Shopee, hằng ngày có hàng triệu người dùng. Hay Facebook, Google, Youtube đạt đến hàng tỉ người dùng.
Việc scale một app không phải làm một ngày một bữa. Đó là nhiệm vụ khó khăn và tiêu tốn thời gian, tiền bạc nhất của công ty. Để có một sản phẩm thành công chúng ta cần nhiều thứ như: UI/UX tốt, hiệu năng cao ở cả client và server(bài toán scalability cho server cũng là một cuộc chơi khốc liệt không kém), marketing tốt, SEO tốt, security cao, …
Tham khảo: Scaling React Application
test