Xin chào các bạn, bài viết này mình xin chia sẻ về tư duy khi lập trình nên giao diện người dùng. Cùng tìm hiểu nhé…
Hẳn anh em dev chúng ta, có người làm backend, có người làm frontend, … nhưng ít nhất 1 lần trong sự nghiệp dài đằng đẵng của mình chắc hẳn sẽ có lúc mình sẽ đụng đến 1 vấn đề khá hay ho đó là: Lập trình giao diện người dùng (Programming User Interface). Trong khuôn khổ bài viết này, mình xin phép được chia sẻ 1 khía cạnh nhỏ đó là khi làm việc với các UI Framework sử dụng state. Hai trong số đó chính là 2 công nghệ chính mà ae công ty mình có sử dụng hằng ngày đó là:
- React: để xây dựng Web Application. Chúng ra có 2 đại diện là ReactJS và React Native
- Flutter: để xây dựng Mobile Application (https://flutter.dev/)
I. Back to the Future
Cũng ko cần phải nói nhiều về câu chuyện tại sao lại lựa chọn 2 framework này để làm main stack cho việc phát triển UI. Chúng ta có VueJS, AngularJS, Svelte, React Native, … nhưng chúng ta lại chọn React và Flutter. Và đây là một vài lý do:
- Cộng đồng phát triển rất mạnh (rất nhiều topic support, nhiều packages)
- Cả 2 framework này đều tối ưu về performace rất tốt. (Flutter còn tự tin với FPS có thể đạt được là 60fps)
- Phát triển theo hướng Component.
- One-way Data Binding.
- Hỗ trợ đa nền tảng.
- Dễ học (cái này là quan điểm cá nhân mình vì hiện tại thời gian để onboard 1 dev có thể vào code dự án bằng React và Flutter chắc chỉ khoảng 1-2 tuần hoặc thậm chí nhanh hơn ^^)
- …
OK, anh em mình sẽ chuyển qua bước tiếp theo đó là: Vào code luôn!! :)))
II. Chuẩn bị các nguyên liệu cần thiết (Preparing the materials)
Nghe giống trong sách dạy nấu ăn đúng ko anh em, vì đúng nó là cook book đó. Sau khi nhận được các đầu bài từ các buổi Refinement như tài liệu đặc tả tính năng, thiết kế giao diện, các tài liệu tích hợp (API docs, SDK docs, …) và đặc biệt là kỳ vọng của team Product :))) chúng ta cùng đi vào các bước cụ thể.
| Lấy ví dụ với dữ liệu mẫu sau: | … chúng ta sẽ xây dựng một giao diện trong như thế này: |
 |  |
Bước 1: Chia UI thành hệ thống phân cấp các thành phần (component hierarchy)
- Programming: Dựa trên nguyên tắc Single Responsibility
- Mỗi component chỉ nên đảm nhiệm 1 việc duy nhất
- Nếu component đó phát triển lên, nó sẽ được phân rã thành các component nhỏ hơn.
- Decoration:
- CSS
- Colors, decorators, …
- Design:
- Figma
Chúng ta sẽ phân chia ra được các thành phần trên giao diện như hình dưới:
… sau đó tiến hành phân cấp các thành phần
Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.
https://react.dev/learn/thinking-in-react
Bước 2: Dựng UI tĩnh (Static UI version)
Có thể trong thực tế, anh em sẽ bỏ qua bước này nhưng cá nhân mình thì thấy bước này khá quan trọng giúp cho việc định hình thành phần (component) nào sẽ bị re-render mà chúng ta sẽ nói đến ở các bước tiếp theo. Việc này cũng nhằm mục đích tối ưu hoá hiệu năng cho UI.
Ở bước này, anh em mình sẽ cố gắng tuân theo các nguyên tắc sau:
- Dựng từ trên xuống dưới, hoặc từ dưới lên trên theo cấu trúc đã phân tích ở bước 1.
- Dựng các component có tính tái sử dụng cao nhất.
- Truyền dữ liệu vào component bằng props.
Bước 3: Tìm sự thể hiện tối thiểu nhưng đầy đủ của UI state
Sau khi có UI tĩnh rồi thì đây chính là bước làm việc với state. Anh em nhớ các câu thần chú khi làm việc với sự magic này nhé Change state để cập nhật lại giao diện (re-render UI). Để dễ hơn trong việc xác định cái nào là state, cùng xem qua các thứ không phải là state nhé.
- Dữ liệu không thay đổi theo thời gian -> Không phải là state
- Nhận từ props -> Không phải là state
- Dữ liệu được tính toán từ props hoặc state trong component -> Không phải là state
Ngoài các điều trên thì phần còn lại, chúng ta sẽ sử dụng state.
Góc câu hỏi phỏng vấn: Sự khác nhau giữa props và state trong React là gì?
* Props: giống như params truyền vào function. Cho phép component cha truyền dữ liệu vào component con và làm thay đổi việc hiển thị của component con.
* State: Giống như bộ nhớ trong 1 component. Giúp cho chính component đó theo dõi thông tin và thay đổi việc hiển thị để đáp ứng với các tương tác lên state đó
Còn tiếp…
