Group gần như không ai nói về Angular nên mình sẽ giới thiệu Angular qua kinh nghiệm bản thân đã và đang làm project to của công ty bằng Angular và React để một số bác đang học front-end có thể đề xuất học framework này.
Nhược điểm lớn của React nằm chính sự đơn giản ngắn gọn đó, các bác sẽ rất khó mà scale project nếu chỉ dùng React chay, và dẫn đến vấn đề tiếp theo là phụ thuộc vào library bên thứ 3, các library này thường được phát triển bởi một nhóm cá nhân, library có thể đáp ứng từng bộ phận, nhu cầu trong project của bạn, nhưng việc dùng nhiều library cũng sẽ dẫn đến project nặng và khó maintain, mỗi khi update library sẽ có tỷ lệ gây xung đột và có thể break project của bạn. Chưa kể mỗi library code 1 kiểu nên bạn phải học từng document của từng library. React không gò bó nhiều về code practice nên có thể dẫn đến dev code freestyle theo bản thân, bạn có thể hiểu code của chính mình, nhưng người khác đọc code sẽ khó mà hiểu được (đã xảy ra ngay trong project công ty, một ông làm React xong nghỉ việc, để lại code mà mình đọc khó hiểu, đến mức phải dành thời gian refactor code lại), nếu trong team không ai thống nhất code practice là project sẽ trở thành đống lộn xộn.
Bản thân mình xuất thân từ làm web chay HTML, CSS, JS, jQuery, PHP được hơn 4 năm nhưng chưa bao giờ đụng framework, lúc đầu cũng thấy người ta kêu Angular khó, React dễ. Nhưng cuối cùng tìm chỗ thực tập khó quá xong may được công ty nhận nhưng họ muốn mình học Angular, thế là mình học luôn. Sau khoảng 2 tuần học mình thấy Angular không hề khó như người ta đồn.
Angular thiên về xử lý data và event dễ dàng, nhưng về UI thì không bằng React.
Với Angular, bạn chỉ cần khai báo biến ở class của component, xong bạn đã tạo 1 biến có state, nếu bạn muốn thay đổi giá trị của biến đó và state sẽ thay đổi theo thì bạn chỉ việc... thay đổi giá trị biến đó là xong, không cần phải có một method riêng để thay đổi state. Và cũng dễ dàng với array và object, chỉ việc thay đổi giá trị trong array/object là bên UI cũng sẽ update theo.
Angular có [ngClass] để bạn có thể đặt điều kiện để class đó có hiển thị hay không, rất phù hợp cho animation, hoặc ẩn hiện UI tuỳ theo data.
Nguồn Cộng đồng Front-end(HTML/CSS/JS) Việt Nam
Tại sao React phổ biến và nhược điểm React?
React dễ học, bạn có thể mở documentation của React và main concept ngắn gọn dễ hiểu: JSX, state, component, prop, hooks,... Từ đó nó cũng là lựa chọn hàng đầu cho các bác mới bước chân vào Front-end, và cũng vì lí do đó nên việc làm React cũng nhiều không kém, và cộng đồng đông đảo.Nhược điểm lớn của React nằm chính sự đơn giản ngắn gọn đó, các bác sẽ rất khó mà scale project nếu chỉ dùng React chay, và dẫn đến vấn đề tiếp theo là phụ thuộc vào library bên thứ 3, các library này thường được phát triển bởi một nhóm cá nhân, library có thể đáp ứng từng bộ phận, nhu cầu trong project của bạn, nhưng việc dùng nhiều library cũng sẽ dẫn đến project nặng và khó maintain, mỗi khi update library sẽ có tỷ lệ gây xung đột và có thể break project của bạn. Chưa kể mỗi library code 1 kiểu nên bạn phải học từng document của từng library. React không gò bó nhiều về code practice nên có thể dẫn đến dev code freestyle theo bản thân, bạn có thể hiểu code của chính mình, nhưng người khác đọc code sẽ khó mà hiểu được (đã xảy ra ngay trong project công ty, một ông làm React xong nghỉ việc, để lại code mà mình đọc khó hiểu, đến mức phải dành thời gian refactor code lại), nếu trong team không ai thống nhất code practice là project sẽ trở thành đống lộn xộn.
Về Angular
Khi các bác tìm hiểu về Angular hay đặc biệt các bài so sánh Angular với React, thứ đầu tiên họ sẽ bảo là rất khó học cho người mới. Nhưng thật sự không hẳn.Bản thân mình xuất thân từ làm web chay HTML, CSS, JS, jQuery, PHP được hơn 4 năm nhưng chưa bao giờ đụng framework, lúc đầu cũng thấy người ta kêu Angular khó, React dễ. Nhưng cuối cùng tìm chỗ thực tập khó quá xong may được công ty nhận nhưng họ muốn mình học Angular, thế là mình học luôn. Sau khoảng 2 tuần học mình thấy Angular không hề khó như người ta đồn.
FRAMEWORK GẦN NHƯ ĐẦY ĐỦ VÀ ĐI THEO CODE PRACTICE NHẤT ĐỊNH
Angular có nhiều concept nhất định để giúp các bác phát triển dễ dàng hơn và đặc biệt là code có thể maintain bởi bất cứ ai. Mình đã tham gia project upgrade từ angularJS cũ kỹ lên angular hiện đại, và mình vẫn có thể đọc được code của người cũ để viết ở dạng angular mới. Hơn nữa qua các update lớn project chưa khi nào break cả.Angular thiên về xử lý data và event dễ dàng, nhưng về UI thì không bằng React.
GẦN GŨI HTML, JS, CSS CHAY
Với React, bạn sẽ phải phụ thuộc Javascript 99%, thì với Angular bạn vẫn có thể làm việc như đang làm project HTML, JS, CSS chay, vì 1 component nó sẽ chia ra 3 file là Typescript, HTML và CSS và các bạn có thể viết code như mình đang viết chay, xào thêm thành phần Angular là xong.CLI TỐT NHẤT
Angular có bộ lệnh CLI để có thể tạo các thành phần của Angular như component, service, directive, pipe và nó sẽ tự setup sẵn code Angular, và việc còn lại của bạn là viết code ngay, không cần setup gì thêm.QUẢN LÝ STATE DỄ
Như các bác thấy ở bài trước về Download UI, mình dùng Angular thay vì React vì cơ chế quản lý state dễ dàng để timing đúng cho animation, hơn nữa state có thể áp dụng để add/remove class css, ẩn/hiện element,...Với Angular, bạn chỉ cần khai báo biến ở class của component, xong bạn đã tạo 1 biến có state, nếu bạn muốn thay đổi giá trị của biến đó và state sẽ thay đổi theo thì bạn chỉ việc... thay đổi giá trị biến đó là xong, không cần phải có một method riêng để thay đổi state. Và cũng dễ dàng với array và object, chỉ việc thay đổi giá trị trong array/object là bên UI cũng sẽ update theo.
Angular có [ngClass] để bạn có thể đặt điều kiện để class đó có hiển thị hay không, rất phù hợp cho animation, hoặc ẩn hiện UI tuỳ theo data.
CÓ SẴN ROUTING
Khi làm SPA (Single page application) thì routing là thành phần quan trọng để có thể chuyển trang mà không reload lại, tiếc là React không có và phải tìm thư viện bên thứ 3, còn Angular là có sẵn, khi tạo app angular bạn có thể tuỳ chọn để setup sẵn routing, và các công cụ cho Routing cũng có như việc phân tích URL để lấy parameter, redirect,...MAIN CONCEPT QUAN TRỌNG
Angular có các concept quan trọng nhưng cũng giúp cho phát triển dễ dàng hơn:- Component: Cái này ai cũng hiểu
- Service: Như cái tên, các bác sẽ làm dịch vụ với các function custom để có thể phục vụ xử lý code bên component của các bác.
- Directive: Các bác có thể làm custom directive và gọi vào 1 thành phần HTML để có thể thay đổi behavior của nó (như giao diện, data, validate,...). Đồng thời các built in Directive như ngClass, ngFor, ngModel sẽ giúp việc xử lý data trên HTML dễ dàng.
- FormControl: Quản lý form toàn diện với validation, lấy data từ biểu mẫu dễ dàng
- HTTP Client: Kết hợp với RxJS các bác có thể lấy data từ API dễ dàng mà không cần dùng library ngoài.
- Lifecycle: Xử lý tuỳ theo quá trình component render, như ngOnInit khi component bắt đầu render, ngOnChange khi component thay đổi, ngOnDestroy khi component được xoá đi,... Các bác đọc document để thấy danh sách lifecycle hook đầy đủ để tận dụng.
- Pipe: Các bác tạo custom pipe để có thể thay đổi cách hiển thị của data trên HTML (VD như: data | pipe, thì pipe sẽ thay đổi format hiển thị của data và return về value mới, như USD 199.2 thì sửa thành $199,20 chẳng hạn) mà không thay đổi giá trị gốc của data.
KẾT LUẬN
Angular còn nhiều nữa nhưng mình liệt kê những thành phần chính đã giúp mình làm project lớn của công ty suôn sẻ nhưng vẫn có thể đảm bảo code maintain được bởi người khác. Qua bài này mình mong các bác có thể suy nghĩ đến Angular cho project của mình. Đương nhiên React cũng có cái đặc biệt của riêng nó nhưng mình nhường cho group về React vốn cũng đã phổ biến trong group rồi.Nguồn Cộng đồng Front-end(HTML/CSS/JS) Việt Nam
