Phần 1 - React JS là gì và 5 Best Practices về kiến trúc khi làm việc với React JS
Đối với 1 lập trình viên chuyên nghiệp thì việc tạo ra giao diện thân thiện với người dùng là điều vô cùng quan trọng cho sự thành công của dự án. React JS là thư viện JavaScript cho phép bạn tạo ra những component có thể sử dụng lại được ở nhiều chỗ và góp phần đồng nhất giao diện website của mình.
Tuy nhiên React JS lại không bắt buộc ta phải tuân theo một kiến trúc cụ thể nào nên có thể khiến cho các Dev gặp khó trong việc giữ cho code được tổ chức và sắp xếp 1 cách hợp lý, đặc biệt là khi Project React JS có quy mô lớn. Chính vì lẽ đó nên các nhà phát triển ứng dụng React JS hàng đầu trên thế giới đã đúc kết ra được rất nhiều Best Practices để cho lập trình viên build dự án React JS đúng ngay từ đầu. Cùng với Bizfly Cloud tìm hiểu về 5 Best Practices về kiến trúc khi làm việc với React JS trong bài viết này nhé.
React JS là gì
Trước khi khám phá 5 Best Practices về kiến trúc khi làm việc với React JS, chúng ta cùng tìm hiểu đôi nét về React JS là gì nhé. React JS được xem như là thư viện JavaScript để xây dựng giao diện người dùng phổ biến nhất hiện nay. Tốc độ phản hồi của React JS khi user nhập liệu bằng cách sử dụng phương pháp mới để Render trang web cực kỳ nhanh chóng.
Vào năm 2013, Facebook đã cho ra đời công cụ JavaScript mã nguồn mở này với nhiều components được phát triển bởi chính Facebook đã tạo ra một cuộc cách mạng lớn cho các Dev xây dựng các giao diện cho người dùng. React JS đã có những bước đi đột phá và vượt trội hơn hẳn 2 thư viện JavaScript nổi tiếng nhất thời bấy giờ là Angular và Bootstrap và xứng đáng là công cụ hỗ trợ tốt nhất cho các nhà phát triển Front-End cho đến thời điểm hiện nay.
5 Best Practices về kiến trúc khi làm việc với React JS
Bây giờ chúng ta cùng đi vào trọng tâm của bài viết để phân tích 5 Best Practices về kiến trúc khi làm việc với React JS nhé.
1. Kiến trúc cho thư mục dự án
Kiến trúc cho thư mục dự án sao cho phù hợp ngay từ ban đầu là 1 trong 5 Best Practices về kiến trúc khi làm việc với React JS quan trọng được đề cập đầu tiên. Thường thì các style được viết vào một file CSS dùng chung chia sẻ trong Project trong khi component được tách rời khỏi file chứa style của nó.
Ví dụ như component FilterSlider được để ở thư mục component còn style của nó thì được viết vào file photo-editor-sdk.scss và đặt ở thư mục styles.
├── components
│ └── FilterSlider
│ ├── __tests__
│ │ └── FilterSlider-test.js
│ └── FilterSlider.jsx
└── styles
└── photo-editor-sdk.scss
Phương pháp tiếp cận này sẽ không tốt khi dự án ngày càng được mở rộng bởi vì trong tương lai các component cần phải được chia sẻ giữa các module trong dự án, hay giữa các dự án có liên quan với nhau. Đây là lý do các nhà phát triển đã chuyển sang cách tổ chức thư mục lấy component làm trung tâm, code như sau:
components
└── FilterSlider
├── __tests__
│ └── FilterSlider-test.js
├── FilterSlider.jsx
└── FilterSlider.scss
Cách tổ chức thư mục này giúp cho những đoạn code, style thuộc về 1 component duy nhất và giúp cho việc tách code để gói thành một npm module trở nên dễ dàng hơn. Tuy nhiên nó phát sinh 1 nhược điểm là khi phải import 1 component nào đó thì Dev phải import đầy đủ đường dẫn sao cho hợp lệ. Code như sau:
import FilterSlider from 'components/FilterSlider/FilterSlider'
Hoặc viết kiểu khác như sau
import FilterSlider from 'components/FilterSlider'
Cũng có thể giải quyết vấn đề này bằng việc đơn giản đổi tên file chính của component thành index.js:
components
└── FilterSlider
├── __tests__
│ └── FilterSlider-test.js
├── FilterSlider.scss
└── index.jsx
Bằng cách sử dụng giải pháp này thì khi debug các React JS Component trên trình duyệt Chrome mà khi có lỗi xảy ra thì Debugger sẽ show ra cho bạn hàng loạt các file cùng tên index.js rất dễ gây nhầm lẫn nên đây cũng không phải là phương pháp nên áp dụng.
Bạn có thể dùng directory-named-webpack-plugin để tạo ra một quy luật nhỏ cho webpack resolver nhằm giúp webpack có thể tìm thấy một file JavaScript hoặc JSX có cùng tên thư mục mà nó đang được import. Tuy nhiên các thư mục vendor sẽ bị gắn liền với webpack và gây ra vấn đề cho những người sử dụng Rollup để bundle các library, đồng thời sẽ tạo khó khăn cho việc update lên các phiên bản webpack mới nhất.
Giải pháp tốt nhất khi kiến trúc cho thư mục dự án là sử dụng một cơ chế resolve tiêu chuẩn của Node.js. Điều này sẽ khiến mọi thứ trở nên chắc chắn hơn và tránh được các rủi ro tương lai. Để làm điều này, bạn cần thêm một file package.json vào trong kiến trúc thư mục:
components
└── FilterSlider
├── __tests__
│ └── FilterSlider-test.js
├── FilterSlider.jsx
├── FilterSlider.scss
└── package.json
Và hãy sử dụng thuộc tính main ngay bên trong file package.json, để set đầu vào cho component, như sau:
{
"main": "FilterSlider.jsx"
}
Nhờ việc thêm như trên mà ta đã có thể import component như sau:
import FilterSlider from 'components/FilterSlider'
2. CSS trong Javascript
CSS trong Javascript là Best Practice mà chúng tôi muốn nhắc đến tiếp theo trong 5 Best Practices về kiến trúc khi làm việc với React JS. Thông thường thì các Dev hay sử dụng 1 file CSS (SCSS) để chứa tất cả các Class CSS. Sau đó thường sử dụng các prefix toàn cục và tuân theo BEM convention đặt tên class để tránh trùng lặp tên. Nhưng khi ứng dụng phát triển thì phương pháp này không còn phù hợp nữa.
Bạn có thể thay thế bằng cách sử dụng CSS modules nhưng nó lại gây ra những vấn đề về hiệu năng. Nếu sử dụng Extract Text plugin của webpack để tách CSS thì sẽ tạo ra sự phụ thuộc lớn vào webpack và gây ra khó khăn rất lớn cho việc test sau này.
Một vài giải pháp CSS-in-JS mới cũng đã được xem xét qua sau đó:
Styled Components: Phổ biến với nhiều người và cộng đồng lớn mạnh.
EmotionJS: Đối thủ cạnh tranh không hề kém cạnh với Styled Components.
Glamorous: Giải pháp này cũng khá phổ biến để lựa chọn
Tùy vào từng trường hợp sử dụng của dự án mà có thể chọn 1 trong số các thư viện trên. EmotionJS có thể xuất ra một file CSS đã được compile cho môi trường production. Ngược lại thì Styled Components và Glamorous rất đơn giản trong việc tạo theme. Thêm nữa bạn sẽ không cần phải lo lắng vì đối với các phiên bản mới nhất của các loại thư viện trên thì dự án sẽ hoạt động rất tốt trên server. Tuy nhiên Styled Components vẫn là thư viện được lựa chọn nhiều nhất vì tính năng mạnh mẽ, cộng đồng to lớn và có thể giải quyết được các vấn đề phức tạp khi tạo theme.
>> Đọc tiếp: 5 Best Practices về kiến trúc khi làm việc với React JS - Phần 2
