Vietnamese / Ja / En  🧑‍💻 blog

✅ Check-list và 📝 note khi tạo base source-code cho Angular - phần 1 - CLI packages và Unit Test

✅ Check-list và 📝 note khi tạo base source-code cho Angular - phần 1 - CLI packages và Unit Test

LuuVinhLoc's photo
LuuVinhLoc
·

5 min read

Những ghi chú mà có thể bạn phải rút kinh nghiệm sâu sắc, vì dự án không có thì giờ để refactor và test lại khi số lượng màn hình quá lớn.

Sai 1 ly đi 1 dặm.

Khi khởi tạo dự án với Angular CLI

Angular CLI kể từ Angular 12 sẽ defalt bật strict mode nên bạn không cần lo lắng gì với v12 trở lên. Còn nếu trong 1 số ít trường hợp, tạo version < v12 thì mới cần chú ý là phải set thêm tham số cho strict-mode thôi.

À nói ngắn gon về cái strict-mode thì nó giúp hạn chế lỗi lặt vặt về kiểu do type checking quyết liệt hơn, làm chặt hơn ngay cả ở code bên Template.

Do Angular thường xuyên được update nên cứ cài lại - tương đương với upgrade CLI cho chắc cú, mà cũng đỡ phải chạy ng --version để kiểm tra phiên bản mới nhất hay không:

pnpm i -g @angular/cli
# output: Progress: resolved 237, reused 237, downloaded 0, added 0, done

Ở đây mình dùng pnpm thay vì npm để tiết kiệm dung lượng ổ cứng và cho hiệu năng tốt hơn.

ng new test-pnpm --skip-install

Nếu không có option --skip-install thì tự động ng sẽ cài packages bằng npm, mà mình thì đang không muốn dùng npm. Do không cài packages nên khởi tạo dự án cực nhanh.

ng sẽ hỏi bạn muốn:

? Would you like to add Angular routing? Yes

Tùy nhu cầu của bạn mà hầu hết dự án nào cũng cần routing thôi, nên chọn Yes.

? Which stylesheet format would you like to use? SCSS

Tùy sở thích của bạn tuy nhiên để hợp với cả team nhiều người thì nên chọn phổ biến nhất là SCSS.

Packages manager

Khi không dùng npm làm packages manager thì ta phải set lại:

ng config cli.packageManager pnpm

Kết quả là file angular.json được tự động sửa lại:

+  "cli": {
+    "packageManager": "pnpm"
+  },

yarn cũng là 1 trong những packageManager phổ biến thay thế npm. Tuy nhiên nếu ổ cứng lưu trữ của bạn bị giới hạn như trên cloud service như AWS thì nên nghĩ lại, bạn không nên dùng yarn. Theo như issue yêu cầu yarn cho phép bỏ qua global cache, thì yarn sẽ mặc định cài packages vào thư mục global cache rồi mới copy sang node_modules của dự án.

Điều này làm tăng gấp đôi bộ nhớ cho ổ cứng khi cần thiết để cài đặt packages. Đừng nghĩ dung lượng node_modules là nhỏ nhé, mình đã từng có dự án 833,9 MB on disk cho 82.987 items. Và thế là dự án phải tăng chi phí bộ nhớ cho con server dùng để test. Đúng là:

Mọi sai lầm đều phải trả giá bằng tiền mặt - thằng bạn nói.

node_modules-meme.jpeg

Nguồn ảnh tại Google với từ khóa node_modules jokes.

Như 1 comment như sau:

I'm trying to install a package inside of AWS Lambda, which has a 512 MB disk limit and only allows me to write to /tmp. If I just install my package, I'm well under the disk limit, but the yarn cache is making me exceed the disk limit by doubling the amount of disk used. I can't just remove the cache afterwards as it causes the yarn install to fail.

Update packages

Về chuyện update packages thì update luôn từ đầu cho đỡ mệt, sau này code nhiều lên mà update version thì phải test lại hết đấy.

Trong nhiều trường hợp ng update không thực sự update các dependencies. Thế nên chốt luôn là dùng command của package manager cho nhanh:

pnpm up

Dùng cache khi build

Set option này khi build để Angular CLI tự động tạo ra thư mục .cache nằm trong thư mục node_modules. Đây là cách set dựa vào package.json:

{
  "scripts": {
    "start": "NG_PERSISTENT_BUILD_CACHE=1 ng serve",
    "build": "NG_PERSISTENT_BUILD_CACHE=1 ng build",
  }
}

Đối với Windows thì:

{
  "scripts": {
    "start-w": "set NG_PERSISTENT_BUILD_CACHE=1 && ng build",
  }
}

Tham khảo:

Unit Test

Mặc định, Karma + jasmine sẽ được cài đặt vào phần devDependencies của package.json. Tuy nhiên, cái dự án dài 1 năm của mình đã chứng minh rằng với số lượng Test case cự lớn, tương ứng với số lượng màn hình khoảng 600 màn thì nó phải chạy mất 25 phút. Thử tưởng tượng xem nếu có cái CI/CD nào chạy Unit test mỗi lần có pull request xem. Phải đợi bao lâu để pull request được review đây?!

cry

Như vậy tốc độ chạy test cũng rất quan trọng. Theo như các bài viết trên mạng như Make your Angular tests 1000% better by switching from Karma to Jest thì Jest nhanh hơn. Nguyên nhân có thể là Jest dùng jsDOM có hiệu năng cao hơn targeted browser. Tuy có rủi ro khi không dùng targeted browser và jsDOM không trực quan bằng khi debugging, nhưng đại đa số dự án có thể dùng Jest thay thế được.

Ngoài ra còn 1 lý do nữa nên dùng Jest đó là nó được cộng đồng sử dụng nhiều hơn, dùng được với React, Vue, Svelte... luôn. Ta chỉ mất công học tool cho Unit test 1 lần thôi. Hơn nữa eslint-plugin-jest cũng ngon nữa. Để phần sau mình sẽ nói về eslint cho Angular.

Thay Karma bằng Jest thì nên tham khảo bài Replace Karma With Jest. Còn nếu dự án không có kế hoạch viết Unit test thì ta nên xóa Karma + jasmine cho gọn.

Photo by Dayne Topkin on Unsplash

Angular