Với những bạn là dân chuyên Back End nhưng chưa bao giờ làm Front End hay đã từng làm Front End nhưng chỉ cho những dự án nhỏ, chạy vài tháng, team size 5 đến 10 người… Bạn đã bao giờ đặt câu hỏi là: làm Front End ở một đội tầm 50+ người, dự án chạy trong vài năm thì người ta làm như thế nào? Phải chăng họ chỉ dùng các tools được cung cấp sẵn để generate ra project rồi code và code,…

Bài viết này sẽ trình bày, thảo luận về quy trình phát triển phần mềm, các skills, cách tư duy mà một Dev Front End nên có để làm tốt công việc của mình.

Chúng ta sẽ đi qua từng nội dung sau:

  1. Khởi tạo dự án ReactJS với Webpack.
  2. Unit Test ở Front End với Karma.
  3. Code coverage với Istanbul.
  4. Ứng dụng mẫu User Management, Build và Deploy với Firebase Hosting.
  5. Automation Test (AUT) với Puppeteer.

Một số khái niệm bạn nên có trước khi đọc tiếp bài viết:

  • Single Page Application: hay còn gọi là SPA, đây là một khái niệm mới về phát triển ứng dụng web, khác biệt cơ bản với cách truyền thống trước đây là ở trang web SPA bạn sẽ không thấy trang bị load lại khi thực hiện một thao tác nào đó như trước kia. Thực chất mọi thao tác của người dùng được thực hiện ở phía sau, nội dung mới sẽ được hiển thị khi có kết quả trả về từ phía server.
  • NodeJS: là môi trường chạy code Javascript ở phía server.
  • ReactJS: là một thư viện để làm ứng dụng web dạng SPA được phát triển bởi Facebook.
  • Create React App: là một tool để khởi tạo ứng dụng SPA với ReactJS cho những bạn mới làm quen với ReactJS.
  • Webpack: là một thư viện để đóng gói mã nguồn, nén mã nguồn, mã hóa mã nguồn, lazy loading,…
  • Babel: là một trình chuyển đổi code từ định dạng cao ES6+ về định dạng thấp hơn để cho các trình duyệt có thể hiểu và thực thi tốt nhất.

Khởi tạo dự án với ReactJS và Webpack

Thông thường khi bắt đầu một dự án ReactJS thì bạn nghĩ ngay đến các tools hỗ trợ bạn tạo dự án ngay những bước đầu tiên như: create-react-app,… việc sử dụng công cụ nó thuận lợi cho người bắt đầu nhưng không thực sự cần cho các dự án lớn.

Ưu điểm: Nó giúp bạn tạo 1 dự án ReactJS rất nhanh, chỉ một dòng lệnh là xong, nó sẽ đóng gói tất cả những thư viện mà tool đó cho là cần thiết để giúp bạn bắt đầu dự án, cũng như cung cấp các scripts để dev, build dự án.

Nhược điểm: Rất khó tùy biến, phức tạp và cần nhiều thời gian để tùy biến. Tool chỉ tạo code cho cấu hình chung, không cho 1 trường hợp cụ thể nào đó, nên để làm cho dự án chạy được với môi trường công ty, khách hàng thì chúng ta cần tùy biến nhiều thứ nữa.

Do đó trong các dự án lớn người ta thường xây dựng từ đầu tất cả những gì họ cần thay vì dựa vào một tool nào đó. Phần này bài viết sẽ trình bày cách dựng dự án ReactJS từ đầu với Webpack, một trong những thư viện đình đám trong việc đóng gói mã nguồn ở thời điểm viết bài này. Ngoài Webpack ra thì bạn cũng có thể tìm hiểu thêm nhiều lựa chọn khác như Browserify, Gulp, Grunt,…

Khởi tạo và cài đặt thư viện

Tips: Tách ra từng lệnh để tiện giải thích, bạn có thể gom các thư viện vào cùng một câu lệnh install để tiết kiệm thời gian.

Sau đó, cấu hình:

Cấu hình Babel

Việc cấu hình Babel khá đơn giản, bạn tạo 1 file .babelrc ở thư mục gốc của dự án $PROJECT_HOME với nội dung sau:

Cấu hình webpack

File cấu hình chính của webpack là webpack.config.js, bạn tạo ra file này và đặt ngay thư mục $PROJECT_HOME của dự án với nội dung sau:

Thêm scripts vào package.json

  • start: Dùng để chạy server phía local, nó sẽ tự động biên dịch, deploy mã nguồn và server tạm cho bạn kiểm thử.
  • build: Dùng để đóng gói dự án chạy ở môi trường thực, các file sẽ được mã hóa, nén,… bởi webpack.

Sau đó, bạn thử tạo ra một file src/index.js rồi chạy thử xem nó hoạt động thế nào hoặc có thể clone bài mẫu ở đây:

Chạy thử ở local

Sau khi chạy server xong bạn bật browser ở địa chỉ http://localhost:8080/ để xem kết quả:

Tips:

  • Nếu bạn muốn tự bật Browser thì thêm tham số –open
  • Nếu bạn muốn chỉ rebuild những module được thay đổi thôi thì thêm tham số –hot

Build ứng dụng

Các file output sẽ được tạo ra trong thư mục dist:

Tạm kết

Vậy là quá trình khởi tạo dự án với webpack tạm thời hoàn thành. Chúc các bạn thành công!

Trần Hữu Lập
Theo CodeLearn

Tin liên quan: