Bí kíp học Front-end của Grab (Phần 2)

3864

Nối tiếp PHẦN 1, chúng ta sẽ tiếp tục đi sâu hơn những tool chúng ta cần biết để làm được một React project một cách dễ dàng nhất.

Quản lí State  — Flux/Redux

Khi app của bạn bắt đầu phát triển và bành trướng, bạn có thể sẽ thấy cấu trúc của app bắt đầu trở nên quá lộn xộn. Cho dù Components trong React vẫn hoạt động tốt nhưng cách làm lại khá “thô”. Bời dù sao đi nữa, React vẫn chỉ là view layer, nó không h liên quan hay ảnh hưởng lên cấu trúc của các layer khác trong app, như model và controller. Để giải quyết vấn đề trên, Facebook đã tạo ra Flux, một kiến trúc app bổ trợ cho React bằng cách dùng một dòng data không hướng (unidirectional). Nói tóm gọn thì Flux có những đặc điểm sau:

  • Dòng data không hướng (Unidirectional data flow) – Giúp cho theo dõi app hoạt động dễ dàng vì có thể check update tùy ý.
  • Hoạt động độc lập – Mỗi phần trông kết cấu của Flux đều có chức năng rõ ràng và hoạt động độc lập.
  • Phù hợp với lập trình declarative – updates được truyền thẳng tới view mà không cần phải chuyển đổi giữa các state.

Xem thêm các việc làm front end lương cao cho bạn

Vì Flux không phải là framework nên các developers đã thử nhiều cách thức khác nhau để lợi dụng những đặc điểm ở trên của Flux. Nhờ đó mà Redux ra đời. Redux kết hợp ý tưởng từ Flux, Command pattern và Elm architecture cùng với state management library mà các developer thường dùng cho React:

  • App state được miêu tả bởi một JavaScript object đơn (POJO).
  • Dispatch một action (cũng là POJO) để chỉnh sửa state.
  • Reducer là một pure function với khả năng nhận một state vào và tạo ra một state mới.

Nghe có vẻ đơn giản nhưng thật sự chúng rất mạnh mẽ bởi cho phép apps:

  • render state trên server và bootup trên client
  • Trace, log và backtrack những thay đổi trong app
  • Sử dụng undo/redo function dễ dàng

Cha đẻ của Redux, Dan Abramov, bỏ nhiều công sức để viết tài liệu hướng dẫn đầy chi tiết cho Redux, ngoài ra còn có cả video chỉ cách sử dụng nó với hai level khác nhau là cơ bản và nâng cao. Chúng đều là những nguồn học Redux vô cùng tuyệt vời mà bạn không nên bỏ qua.  

Kết hợp view và state

Tuy Redux không bắt buộc phải dùng cùng với React, nhưng bạn nên làm như vậy bởi chúng giúp cải thiện cho nhau rất nhiều. Cả React và Redux đều có những điểm chung như:

  • Có những chức năng giống nhau – React tạo ra views (pure functions) trong khi Redux tạo ra pure reducers (cũng là pure functions)
  • Dễ đọc dễ hiểu – Bạn có khả năng kiểm soát và khi có vấn đề thì việc xác định chúng cũng dễ dàng. Với kinh nghiệm của chúng tôi, debug luôn khỏe hơn với React và Redux. Bởi dòng data không hướng (unidirectional data flow) nên việc trace hướng đi của data rất dễ cũng như xác định được nhanh chóng layer nào có lỗi.
  • Cấu trúc layer (tầng) – từng layer trong cấu trúc của app/ Flux đều được xem là pure function và có chức năng rõ ràng. Nhờ đó mà việc test các layer này cũng khá là nhẹ nhàng.
  • Trải nghiệm phát triển – Rất nhiều công sức bỏ ra để tạo ra những tools giúp debug cũng như kiểm tra và theo dõi app trong quá trình phát triển như Redux DevTools.

App của bạn sẽ phải đối mặt với những vấn đề từ async calls như API requests. redux-thunk và redux-saga được tạo ra để giải quyết những vấn đề này. Tuy vậy bạn sẽ cần bỏ nhiều thời gian để tìm hiểu về nó nên bạn chỉ nên đụng tới nó khi cần thiết thôi.

react-redux chính là kết hợp React giữa redux và rất dễ học.

Khoảng thời gian để hoàn thành: 4 ngày. Các khóa học sẽ khó xơi hơn nhưng nó hoàn toàn xứng đáng với những gì bạn bỏ ra. Sau khi đã hiểu về  Redux thì bạn đã có thể áp dụng nó ngay vào một số React project. Liệu Redux có giải quyết được những vấn đề liên quan tới quản lí state mà bạn gặp phải trước đó.

Lựa chọn thay thế

Coding với Style — CSS Modules

CSS (Cascading Style Sheets) là những tiêu chí mô tả cách hiển thị của HTML. Và viết CSS tốt luôn không phải là chuyện dễ dàng. Thường mất vài năm kinh nghiệm gian khổ mới có thể viết và quản lí CSS ở mức độ cao. CSS, với namespace toàn cầu, vốn được thiết kế cho web documents, chứ không dành cho web app với kiến trúc component. Do đó mà các front end developers lão làng đã tạo ra nhiều phương thức khác nhau để hướng dẫn người mới cách viết CSS dành cho những project khủng như SMACSS, BEM, SUIT CSS, etc.

Có lẽ bạn cũng đã nhận ra, front end ecosystem thật sự bão hòa với tools, và không có gì ngạc nhiên khi tools được tạo ra để giải quyết vấn đề của CSS khi dùng trong những project lớn. Nói cách khác là mỗi người có cách dùng CSS khác nhau và trong thời điểm hiện tại vẫn chưa có cách chính thức để viết CSS trong JS, hi vọng trong tương lai sẽ có cải thiện giống như sự ra đời của Redux. Còn hiện tại thì chúng ta vẫn phải dựa vào CSS Modules. CSS modules là phiên bản nâng cao của CSS nhằm khác phục vấn đề về namespace; nó cho phép bạn viết theo style của mình và encapsulated cho component. Đây là tính năng thông qua sử dụng tool CSS modules, giúp cho team phát triển có thể thoải mái làm modular và reuse CSS mà không phải lo bị xung đột hoặc override các phần khác của app. Tuy vậy, CSS modules vẫn sẽ được compiled thành globally-namespaced CSS để trình duyệt web có thể nhận diện được nên rất quan trọng việc hiểu rõ cách thức hoạt động của CSS.  

Nếu bạn hoàn toàn là tay mơ với CSS thì khóa học online HTML & CSS course của Codecademy sẽ là điểm khỏi đầu lí tưởng. Tiếp theo bạn cần đọc Sass preprocessor, một bài viết nâng cao về ngôn ngữ CSS.  

Khoảng thời gian để hoàn thành: 3 ngày. Hãy thử nghiệm nhiều style khác nhau như SMACSS/BEM hoặc CSS modules.

Lựa chọn thay thế

Bảo trì

Chúng ta dành nhiều thời gian để Code hơn là viết chúng. Điều đó càng đúng đối với Grab, khi mà qui mô team rất lớn lại có nhiều project khác nhau. Chúng tôi rất đề cao khả năng dễ đọc trong code, dễ bảo trì cũng như ổn định. Để đạt được những mục tiêu trên thì ta sẽ cần có vài cách sau: “Test mở rộng”, “style code nhất quán” và “type checking”

Testing — Jest + Enzyme

Jest là một testing library của Facebook với mục tiêu đơn giản hóa quá trình testing. Với các project của Facebook, Jest giúp trải nghiệm phát triển trở nên dễ thở hơn rất nhiều. Các bài test được chạy đồng loạt nhằm giúp rút ngắn thời gian. Trong watch mode, được đặt default, chỉ có tests cho những files bị thay đổi là được phép chạy. Một tính năng mà chúng tôi rất thích là “Snapshot Testing”. Jest có thể lưu trữ output của React component và Redux state dưới dạng files nên bạn không phải mất công lo những việc đó. Jest còn có tính năng như built-in mocking, assertion và test coverage. Có thể nói là một “soái ca” lo hết mọi việc.

React có tích hợp sẵn một số testing utilities, nhưng Enzyme bởi Airbnb giúp generate, assert, manipulate và traverse React components’ output dễ dàng hơn với API tương tự như trong jQuery. Vì thế mà chúng tôi khuyến khích bạn dùng Enzyme để test React components.

Jest và Enzyme giúp front end test trở nên nhẹ nhàng và “vui vẻ” hơn. Nó cũng giúp cho các developer bỏ công ra test kĩ lưỡng hơn. Mặt khác, React components và Redux actions/reducers cũng đã khá là dễ cho quá trình test bởi vai trò rõ ràng cũng như interface dễ nhìn. Với React components, chúng ta có thể test  props, khi đó DOM sẽ được render, và callbacks sẽ cho phép hiển thị kết quả của user interaction. Với Redux reducers, chúng ta có thể test bằng state và action, với kết quả là một  state mới được tạo ra.

Các tài liệu về Jest và Enzyme đều khá là chi tiết nên bạn cứ thoải mái tìm hiểu.

Khoảng thời gian để hoàn thành: 2-3 ngày. Hãy thử dùng Jest + Enzyme tests cho các React + Redux app của bạn!

Thay thế

Linting JavaScript — ESLint

Linter là một tool chuyên về phân tích code và xác định lỗi trong chúng cũng như bugs/runtime errors. Ngoài ra, Linter còn giúp coding style được nhất quán. Thời gian cũng được rút ngắn khi Pull request reviews với reviewer không phải mất công ghi comments trên coding style. ESLint là một tool để lint cho JavaScript code với khả năng mở rộng và tính tùy chỉnh. Các team đều có những luật về lint của riêng mình. Tại Grab, chúng tôi dùng Airbnb’s eslint-config-airbnb preset, đã được tinh chỉnh với style coding khá chất lượng trong Airbnb JavaScript style guide.

ESLint thật sự rất đơn giản, cứ như là chỉnh sửa một configuration file vậy. Bãn sẽ không phải học thêm gì nhiều ngoài mấy cái luật do mình đưa ra. Nhưng hãy lưu ý một số lỗi và google style nào tốt nhất.

Khoảng thời gian để hoàn thành: ½ ngày – Chả có gì nhiều phải học cứ cài ESLint vào project của bạn và quất thôi.

Lựa chọn thay thế

Nguồn: topdev.vn via Medium

Xem ngay những tin đăng tuyển dụng IT mới nhất trên TopDev

RELATED ARTICLESMORE FROM AUTHOR