AngularJS: Angular - Frontend Framework tuyệt vời

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Angular là một Frontend Framework dùng để viết giao diện web (Frontend), được phát triển bởi Google. Hiện nay, Angular đang được sử dụng bởi rất nhiều các công ty lớn: Forbes, General Motors, Upwork…

Muốn trở thành Frontend Developer giỏi, bạn không thể không biết đến sự tồn tại của Angular. 

Đọc bài phỏng vấn anh Trần Thuận Nghĩa - Software Engineer để biết:

  • Angular là gì? Cách phân biệt AngularJS và Angular là gì?
  • Có nên bắt đầu sự nghiệp ở vị trí Frontend Developer?
  • Tố chất cần thiết để trở thành Frontend Developer?
  • Tài liệu tham khảo về Angular và lời khuyên cho Frontend Developer

Chào anh Nghĩa. Em khá ngạc nhiên với background của anh, anh có thể nói một chút về nó?

Trước đây anh từng học lớp Cử nhân tài năng, ngành Công nghệ thông tin tại trường Đại học Khoa học tự nhiên. Trong thời gian học ở trường, anh cũng tham gia một số cuộc thi lập trình và mang về một số giải thưởng. Ví dụ như giải 3 cuộc thi lập trình ACM toàn quốc.

Nhưng vì cảm thấy chán và một phần ham chơi (cười) nên anh đã bỏ học giữa chừng để đi làm luôn.

Thời gian đó anh bị mọi người chỉ trích rất nhiều, ai cũng bảo anh không làm được gì đâu. Anh đã cố gắng rất nhiều để chứng minh cho họ thấy rằng không có bằng Đại học thì vẫn có thể thăng tiến trong công việc, người ta tuyển mình vì năng lực chứ không phải vì tấm bằng.

Và như em thấy đó, anh không thất nghiệp mà vẫn theo đuổi công việc Developer cho đến tận bây giờ.

Công việc đầu tiên sau khi anh dừng sự nghiệp học tập?

Anh làm Partner cho một công ty. Công ty này bán các sản phẩm về mã vạch (barcode), nhiệm vụ của anh là viết phần mềm đi kèm giúp sử dụng sản phẩm. Đây cũng là lần đầu anh tiếp xúc với Angular.

Angular là gì vậy anh?

Angular là một Frontend Framework dùng để viết giao diện web (Frontend), được phát triển bởi Google.

Anh lấy ví dụ: bình thường nếu chỉ làm bằng tay, em sẽ làm ra được 10 cây viết/ngày nhưng nếu sử dụng công cụ máy móc, em sẽ làm ra được 100, thậm chí 1000 cây viết/ngày.

Angular đối với Developer cũng như công cụ ở trên vậy, nếu không sử dụng framework này thì sẽ mất rất nhiều thời gian để hoàn thiện giao diện web.

Đây có phải là lý do duy nhất khiến Developer sử dụng Angular?

Anh nghĩ ngoài tiết kiệm thời gian thì Developer còn sử dụng Angular vì một số lý do:

  • Angular được "chống lưng" bởi Google, nó khiến Developer có cảm giác được đảm bảo. Mặc nhiên, họ sẽ ám thị rằng Framework này khó mà bị "khai tử", vì vậy cứ yên tâm sử dụng.
  • Cộng đồng người dùng lớn nên nếu có thắc mắc gì cũng sẽ nhanh chóng được giải đáp.
  • Giúp phát triển Ứng dụng trang đơn (Single Page Application). Đây là ứng dụng chạy trên browser mà không bắt buộc phải tải lại trang khi sử dụng.

Cá nhân anh thích Angular còn bởi vì Framework này được viết bằng ngôn ngữ TypeScript do Microsoft phát triển, dễ đọc (readable), dễ bảo trì (maintainable).

Sự khác biệt giữa AngularJS và Angular là gì vậy anh?

AngularJS là từ được được dùng để nói về Angular 1 (ra đời năm 2009-2010), được viết bằng JavaScript.

Còn Angular là từ gọi chung cho Angular 2 trở lên (ra đời năm 2016), được viết bằng TypeScript - phiên bản nâng cao của JavaScript.

Kiến trúc của Angular và AngularJS khác nhau hoàn toàn và hiện tại AngularJS cũng không còn được Google hỗ trợ nâng cấp nữa.

Công việc thường ngày của anh khi ở vị trí Front-end Developer?

Cũng như những công ty theo mô hình Scrum, bên anh tổ chức họp mỗi ngày để nói về các vấn đề đang gặp phải.

Chẳng hạn: chưa nhận được API từ team Backend hay API chưa có đủ thông tin. Sau đó anh bắt tay vào giải quyết các công việc:

  • Viết và chỉnh sửa giao diện theo yêu cầu. Chẳng hạn: viết xử lý cho các hiệu ứng (animations), thay đổi các yếu tố (elements), các nút (buttons)…
  • Sử dụng Git để quản lý source code.
  • Review code, review UI/UX.
  • Viết component có thể tái sử dụng.
  • Định nghĩa bộ style button, icon, color … cho hệ thống và áp dụng.
  • Tối ưu performance của website: tốc độ load trang, hình ảnh…

Anh thấy nếu so sánh với Back-end Developer thì công việc của Front-end Developer khó hơn vì Back-end chỉ cần đảm bảo “code chạy là được”, input cái này sẽ output ra cái kia. Trong khi đối với Frontend, code chạy được là một chuyện, còn đưa lên giao diện như thế nào lại là chuyện khác.

Sai lầm đáng nhớ nhất và bài học anh rút ra?

Trước đây, anh mắc phải sai lầm khi viết code ở phía giao diện dẫn đến trang đó bị crash - nghĩa là khi một trang phải xử lý quá nhiều dữ liệu thì bộ nhớ (memory) không chạy nổi.

Khi các bạn báo bug thì anh mới phát hiện code của anh trong lưới (grid) bị loop - tình trạng vòng lặp, cứ nửa giây lại gọi hàm kiểm tra dữ liệu trong lưới.

Đối với lưới chỉ có 2-3 dòng thì không sao nhưng khi tăng lên 100 dòng thì bị crash. Cụ thể thì khi Tester kiểm thử, họ test chi tiết đơn hàng quá ít nên không thấy xảy ra vấn đề gì cả. Nhưng khi release và bắt đầu cho khách hàng sử dụng, chi tiết đơn hàng lên đến hàng trăm, hàng ngàn dòng thì xảy ra lỗi.

Tuy không gây ra hậu quả gì nghiêm trọng, khách hàng cũng không phàn nàn gì nhưng dù sao, cũng là lỗi của anh khi không lường trước được điều này. Anh đã đổi lại syntax trong code, mất thêm 2 ngày để sửa lỗi.

Sau này, anh có đọc các đề xuất (recommend) từ trang chủ của Angular thì cũng thấy nói là không nên viết vậy. Phải chi anh biết sớm thì tốt hơn rồi.

Rút kinh nghiệm, anh theo dõi các bài viết về Angular thường xuyên hơn, cứ 8h sáng hàng ngày anh lại nhận được bài viết mới liên quan đến các tiêu chí mà anh đã chọn.

Anh đọc các bài chia sẻ kinh nghiệm về Angular để biết vấn đề có tồn tại. Tất nhiên không thể thuộc nỗi tất cả các trường hợp (case) nhưng khi cần, mình biết là nó có tồn tại để tìm lại.

Ví dụ: Em đọc báo và biết đến sự tồn tại của máy hút bụi. Sau này khi em có nhu cầu làm sạch bụi bẩn mà không tốn nhiều thời gian và công sức, em nhớ ngay là có công cụ với tính năng đó để tìm kiếm và mua nó.

Ngoài ra, khi test, anh không chỉ quan tâm đến tính năng mà còn xét cả khả năng xảy ra vấn đề. Ví dụ: thay vì test trên số đơn hàng, anh sẽ quan tâm hơn đến số chi tiết đơn hàng…

Có điều gì về nghề Frontend Developer mà anh cảm thấy ngạc nhiên?

Anh thấy nhiều bạn đang hiểu sai về Frontend Developer. Họ nghĩ bọn anh ngoài code, còn phải biết cắt file photoshop ra file HTML nữa (cười).

Kỹ năng và tố chất cần thiết với Front-end Developer?

Có trách nhiệm với công việc.

Chưa biết mình làm tốt hay không tốt nhưng hãy cố gắng đi đã. Đừng chỉ làm đối phó, làm với suy nghĩ "code chạy là được". Nếu biết các rủi ro tiềm ẩn thì hãy giải quyết nó trước và luôn tìm cách để tăng hiệu suất làm việc.

Trước kia, anh chỉ viết component dùng chung cho dự án (A) mà anh đang làm. Sau này, khi chuyển sang dự án (B) khác, anh muốn sử dụng lại các component này thì anh phải copy rồi paste sang. Khá mất thời gian và trong trường hợp các component ở A có thay đổi thì B cũng không cập nhật được.

Vậy nên anh đã chuyển các component này thành các package trên npm, chỉ cần tải (install) package và phiên bản tương ứng là có thể sử dụng được.

Có chút kiến thức về UI, UX.

Ở một số công ty nhỏ, không có kinh phí thuê Designer thì Front-end Developer phải làm luôn nhiệm vụ thiết kế UI, UX. Vậy nên bạn phải tự học hỏi mà rút kinh nghiệm từ những phần mềm xung quanh, xem vì sao phần giá thì người ta hay sử dụng màu đỏ, nút này để màu xám, thông tin kia được in đậm….

Như khi anh tham khảo phần mềm kế toán MISA, anh thấy người dùng không muốn bấm quá nhiều nút và hiển thị quá nhiều thông tin không cần thiết. Nếu sau này, anh có làm phần mềm tương tự thì anh sẽ không mắc phải lỗi đó.

Anh nhớ ngày xưa có một lần anh tự ý đổi giao diện Frontend vì thấy không hợp lý, khi đó anh còn làm Technical Leader cho một công ty. Đa số cấp dưới của anh đều phản ứng lại, nói rằng: đổi giao diện mà không báo với khách hàng thì không được, giao diện mới khó nhìn, nhìn không quen… Nhưng anh vẫn giữ nguyên ý kiến.

Như Facebook đó, họ đổi giao diện đâu có báo trước với mình, những người dùng sau cũng không biết giao diện trước như thế nào…

Sau đó thì khách hàng vẫn dùng giao diện mới bình thường. Thực tế là ai cũng có xu hướng phản ứng với những thay đổi nên đôi khi mình phải phân biệt xem cái nào hợp lý và giữ quan điểm.

Luôn luôn cập nhật công nghệ, phiên bản mới với những cái mình đang làm.

Ứng dụng/phần mềm của mình viết bằng Angular 4 nhưng phiên bản mới nhất đã lên đến Angular 8, Angular 9 mà vẫn không cập nhật (upgrade) vì ngại rủi ro thì cũng không tốt.

Anh có nghĩ Frontend Developer là khởi đầu tốt cho một bạn mới bước vào ngành IT?

Cái đó còn tuỳ vào sở thích của mỗi người. Nếu bạn không muốn làm sâu về data hay phân tích hệ thống thì có thể chọn Frontend.

Nhưng nếu muốn tiến xa hơn trong sự nghiệp, anh khuyên các bạn nên theo học chính quy để được dạy về cách tư duy logic như lập trình hướng đối tượng, cấu trúc dữ liệu và giải thuật…, giúp bạn hiểu bản chất của ngôn ngữ lập trình.

Còn nếu chỉ xem Frontend như một công việc tay ngang, chỉ đơn giản copy và paste rồi làm tương tự miễn sao ra được giao diện thì sự nghiệp sẽ có giới hạn.

Một bạn mới trở thành Front-end Developer (chưa có kinh nghiệm thực tế) nên làm gì nếu dự án đầu tiên quá phức tạp?

Nếu dự án phức tạp, bạn ấy nên đặt câu hỏi với những người đi trước trong team, lưu ý không nên hỏi quá nhiều. Hãy đặt mình vào vị trí người được hỏi, họ còn có công việc riêng, không thể ngồi giải đáp cho bạn mãi được.

Bản thân anh cũng vậy, anh chỉ hỏi những ý chính (theo kiểu từ khóa) rồi sau đó tự tìm hiểu thêm.

Chẳng hạn, anh hỏi:

  • ở Frontend đang xài những thư viện gì?
  • tổ chức các thư mục (module) như thế nào?
  • chức năng từng thư mục là gì?
  • có gì cần lưu ý hay không?

Chứ không hỏi: “Code chỗ này nghĩa là gì vậy anh?” nhiều lần.

Những tài liệu anh đã từng tham khảo về Angular và Front-end?

Anh tham khảo khá nhiều tài liệu nhưng anh đánh giá cao nhất những nguồn này:

  • Angular.io: website giúp người mới tìm hiểu và làm quen với Angular. Bạn sẽ biết những khái niệm, syntax cơ bản trong Angular và cách tạo 1 project Angular ra sao.
  • Angular 2 Notes for Professionals: ebook miễn phí, được tổng hợp và biên soạn dựa trên những chia sẻ của các chuyên gia Angular trên Stack Overflow. Trình bày tất tần tật các tính năng của Angular cũng như các mẹo hữu ích để làm việc hiệu quả với chúng.

Bạn có phải là Frontend Developer và là “fan” của Angular? Bạn nghĩ bài viết này có thể giúp ích cho các Developer khác? Chia sẻ ngay để giúp cộng đồng Developer cùng phát triển.

» Tiếp: Practical 1
« Trước: Tạo app Angular đơn giản (app shopping cart)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!