Đừng đổ lỗi cho Framework: Kinh nghiệm khi làm việc với AngularJS và ReactJS
Trong vài năm qua, các trang web đã phát triển thành các ứng dụng web phức tạp hơn. Ví dụ điển hình chính là trang chủ Facebook đã thay thế cho những trang thông tin về doanh nghiệp đơn giản; Slack, Spotify and Netflix đã thay đổi cách bạn giao tiếp, nghe nhạc và xem phim. Front-end ...
Trong vài năm qua, các trang web đã phát triển thành các ứng dụng web phức tạp hơn. Ví dụ điển hình chính là trang chủ Facebook đã thay thế cho những trang thông tin về doanh nghiệp đơn giản; Slack, Spotify and Netflix đã thay đổi cách bạn giao tiếp, nghe nhạc và xem phim. Front-end đã phát triển đến một cấp độ mới, đòi hỏi bạn phải thường xuyên cập nhật và học hỏi nhiều hơn trước.
Tương tự như nhiều developer frontend khác, stack của chúng tôi sử dụng bao gồm HTML và jQuery. Chúng tôi đã thực hiện các requests AJAX với back-end, render UI bằng JavaScript và chèn nó vào DOM. Hành động sử dụng được theo dõi bằng các binding events và callbacks tới mỗi element. Tất cả đều áp dụng được trên hầu hết các ứng dụng.
Tuy nhiên, khi một ứng dụng phát triển nhanh chóng sẽ có một vài lỗi xảy ra thường xuyên so hơn với dự kiến như sau: bạn sẽ quên cập nhật tất cả những nơi có 1 giá trị được hiển thị trong UI, không có sự kiện nào được liên kết với content do AJAX thêm vào… Đây là những dấu hiệu cho thấy code của bạn không thể maintain, đặc biệt khi phát triển trong cùng một nhóm. Sử dụng một front-end framework là cách chính thức để viết được các đoạn code phối hợp (collaborative code) mà bạn có thể đọc, viết và update.
1/ Khởi đầu mới của React
Khi lần đầu thấy được sự cần thiết của việc áp dụng front-end framework, chúng tôi cân nhắc một số lựa chọn để xem xét và đoán xem điều gì xảy ra?
Angular được xem là “ứng cử viên” trưởng thành nhất: Angular có một cộng đồng vững mạnh, bạn có thể học hỏi các tình huống thường xảy ra và cách sử dụng từ module thứ ba.
Sự kiện Làm chủ ReactJS trong 3 giờ
giúp bạn hệ thống các kiến thức cơ bản – nâng cao về ReactJS & có thể tự mình demo 1 trang web hoàn chỉnh bằng ReactJS.*Hồ Chí Minh: 8h30 – 12h ngày 17/06/2017
*Hà Nội: 8h30 – 12h ngày 01/07/2017
React có bước đi lớn đầu tiên, code JavaScript-centric của React hoạt động nhanh chóng, đầy hứa hẹn. Mặc dù vẫn còn trên phiên bản beta, nhưng được dán nhãn “phát triển bởi Facebook” đã giúp React được tin tưởng nhiều hơn. Chúng tôi đã quyết định thử sử dụng React.
Ban đầu, React có thể đáp ứng được tất cả mọi thứ sử dụng Javascript: dù có hiển thị một đoạn mã HTML hay không, vẫn render danh sách bằng cách iterate qua một array thực sự. React cũng làm tốt việc thay đổi một varuable value và lan truyền đến tất cả phần của code thông qua props (một trong những component attributes của React), phá vỡ thành các reusable components và stop and think trước khi tham gia làm tất cả các công việc liên quan đến code. React đã đem lại tính nhất quán cần thiết để phát triển code maintain được.
- React + Flux = <3
Thử thách lớn đầu tiên mà chúng ta đối mặt chính là: liệu React có đáng để sử dụng – hay chỉ là một mớ callback hỗn độn.
Do bản chất luồng dữ liệu một chiều của React, một component con cần nhận callback để kích hoạt 1 thay đổi về state từ component bố mẹ. Có vẻ đây không phải là một vấn đề to lớn cho tới khi bạn nhận ra rằng: component con đang suy giảm đi từng chút một, bây giờ cần phải update trạng thái của component gốc. Bạn phải xem qua tất cả các tập tin và dán cụm “this.props.updateCallback” dưới dòng stream.
Mặc dù vậy, chúng tôi vẫn thích React và vẫn đang tiếp tục làm việc với nó. Đền đáp cho nỗ lực ấy: chúng tôi bắt gặp Flux, một cấu trúc formalize và thực thi các luồng dữ liệu theo một hướng duy nhất. Nó bao gồm 4 yếu tố chính sau:
- Store: nơi dữ liệu (trạng thái ứng dụng) được lưu trữ;
- Action: kích khởi 1 state change;
- Dispatcher: quản lý và hướng các actions đến những nơi lưu trữ đúng;
- View: hiển thị dữ liệu trong store và gửi đi các actions
Với Flux, duy trì trạng thái ở component gốc và dán lệnh update callback cho component con là điều không cần thiết. Component React lấy trực tiếp dữ liệu từ trên store và call actions để thay đổi state: cách này vừa đơn giản vừa rõ ràng. Flux thêm một behavior dự đoán trước được và tiêu chuẩn để nâng cao tính linh hoạt của code React.
- Một Angular nổi loạn xuất hiện…
Angular sử dụng code hướng HTML và có vẻ nó KHÔNG đạt hiệu quả tối đa.
Gần đây, tôi bắt đầu làm việc với một dự án Angular. Phần lớn dự án đã được hoàn thành, nên tôi phải hoàn thiện phần còn lại. Là một developer trung thành với React, tôi cảm thấy không thoải mái lắm với Angular. Sau tất cả, nếu bạn yêu mến React, bạn sẽ không thích Angular.
Tôi không thể tự lừa dối mình, trong thời gian đầu tôi thích thú làm việc trên code Angular. Nhúng tất cả các attributes theo từng framework cụ thể (hay tốt hơn là các directive) vào trong đoạn mã HTML dường như không ổn. Tôi đã phải rất vất vả để hoàn tất những công việc đơn giản như thay đổi URL mà không cần đến reloading controller hay làm các template cơ bản.
Khó khăn lại tiếp tục xảy ra khi template của tôi gặp vấn đề bởi vì ngIf directive tạo nên một phạm vi con mới cho chính nó. Hay khi tôi loại bỏ các field trống từ một JSON được gửi đến máy chủ và việc này đồng thời loại bỏ luôn các dữ liệu từ UI – đây chính là two-way data binding. Hoặc khi muốn sử dụng ngShow và ngHide để hiển thị HTML bị block và ẩn khác, khoảng 1/100 giây, cả hai đều được hiển thị cùng một lúc. Tôi hiểu rất nhiều vấn đề gây ra là do lỗi của tôi nhưng tôi làm rõ rằng Angular không thể đoán trước được, nó chứa đầy những bất ngờ như thế.
Nhưng tất nhiên, làm việc Angular cũng có những ưu điểm riêng. HTTP built-in requests module rất tốt. Một yếu tố khác khiến tôi không thể phàn nàn chính là form controller built-in! Các trường input có các cơ chế mặc định để format, phân tích cú pháp và validate các trường, đồng thời cũng là 1 plugin tốt để hiển thị các tin nhắn lỗi.
Bằng cách sử dụng Angular, bạn sẽ dễ dàng làm việc cùng với design team hơn. Trong team của chúng tôi, có một engineer chuyên viết HTML và CSS, Angular cho phép chúng tôi làm việc cùng nhau thật hoàn hảo: anh ấy lovề HTML và một số extra tag, trong khi tôi xử lý về logic. Nếu sử dụng React, anh ấy viết component khá dễ dàng, bởi vì anh ấy đã học các kiến thức cơ bản của JSX.
Bạn có nhớ vấn đề URL-replacing và templating mà tôi đã nhắc phía trên? Đừng bận tâm nữa, mọi người thường sử dụng các thư viện routing khác nhau (ui-router) hơn là chỉ dùng 1 thư viện routing chuẩn (ngRoute). Cuối cùng, Angular không tệ như tôi tưởng.
- Điểm mấu chốt: AngularJS và ReactJS
React sử dụng chức năng native JavaScript cho phép developer tạo ra component tái sử dụng với lifecycle dự đoán được và luồng dữ liệu một chiều. Về lâu dài, sẽ đáng tin cậy hơn khi kết hợp với mô hình Flux (hoặc phiên bản biến thể của Flux như Redux) giúp làm việc theo team dễ dàng hơn mà không cần lo lắng đến việc xử lý bug hay tạo ra thêm 10 con khác. Nếu bạn có được ai đó chuyên về HTML và CSS thì sẽ tốn 1 mức phí nào đó bởi vì nó làm thay đổi flow lập trình truyền thống. Việc này còn tuỳ thuộc vào module bạn chọn để compose stack.
Mặt khác Angular tập trung vào tính đơn giản về design của two-way data binding – những gì bạn thay đổi trên controller scope (tự động) sẽ xuất hiện trên UI. Bản chất “ngoan cố” của Angular giúp tiết kiệm thời gian setup bằng cách thiết lập 1 số pattern lên trong cách tổ chức code, khi đó việc lựa chọn core module từ hàng trăm lựa chọn khác không cần thiết nữa. Tuy nhiên, tương tự với two-way data binding, tuy việc lập trình trở nên đơn giản hơn nhưng cũng dễ tạo bug bất ngờ khi thay đổi một số phần của code trong thời gian dài – đặc biệt nếu các đoạn code mà đồng nghiệp của bạn viết chưa được đụng tới trong vài tháng qua.
Sau tất cả, tôi nên chọn cái nào để xây dựng app ngay từ lúc đầu?
Sự kiện Làm chủ ReactJS trong 3 giờ
giúp bạn hệ thống các kiến thức cơ bản – nâng cao về ReactJS & có thể tự mình demo 1 trang web hoàn chỉnh bằng ReactJS.*Hồ Chí Minh: 8h30 – 12h ngày 17/06/2017
*Hà Nội: 8h30 – 12h ngày 01/07/2017
Nếu xét về mặt lâu dài, cá nhân tôi sẽ chọn React, sử dụng architecture Redux, Axios cho các requests HTTP và react-router. Nhưng lựa chọn này vẫn phụ thuộc nhiều vào kinh nghiệm của team: nếu có người chuyên về viết HTML và CSS, tôi chắc chắn sẽ chon Angular. Cả hai framework đều có ưu điểm và khuyết điểm, điều cần nhất để duy trì một dự án là sự cam kết của developer để viết và quản lý code tốt.
Nguồn: Techtalk via ckl.io
