🌈 UI Library

Chọn theo hệ thống design gần nhất với design của designer, ví dụ 10 Best Design Systems and How to Learn (and Steal) From Them. Khi đó designer phải tuân thủ các luật của UI lib đó.

Nếu designer không quyết thì mặc định mình chọn taiga-ui hoặc Angular Material.

Chọn Material vì:

• Lib này có những người đóng góp là từ Angular team - những người hiểu rõ nhất về triết lý Angular.
• Chỉ thông qua duy nhất Angular chứ không pha tạp hỗ trợ cả React, Vue như 1 số Lib.
• component điểm mạnh là list drag/drop - trong 1 số trường hợp thì đây là điều kiện tiên quyết có chọn Material hay không.

Chọn taiga-ui vì:

• Hiệu ứng animation được chăm chút từng component nhỏ.
• Import cái mình cần mà không gây dư thừa code trong bundle. giảm bundle-size.

• Điểm mạnh:

  • Có các service cơ bản dùng nhiều như notifications-service, dialog service, scroll service... Nếu không thì rất có thể bạn sẽ phải tự tạo service như thế này.
  • Component loader focus vào chỗ nào đang loading data thay vì toàn bộ màn hình như nhiều lib.

• Custom style dễ dàng để phù hợp với ngôn ngữ designer, điều mà 1 số lib ít chú trọng.

• components đều sử dụng OnPush, cả dự án được quảng cáo là đung với strict TypeScript mode, tuy nhiên tsconfig chưa dùng Angular strict mode, eslint.
• Điểm cộng trên quna điểm cá nhân: Web docs thiết kế tối giản, có tên miền yêu thích của developer là .dev, số lượng Contributor trên github nhiều.

Trong trường hợp design không khớp với các UI lib có sẵn thì có thể tạo ra bộ style riêng thay vì đi custom lại. Tuy nhiên, nếu dùng những component phức tạp như date-picker chẳng hạn, bạn thà dùng date-picker của Material với custom style thay vì đi viết lại cả cái date-picker đúng không!

🌗 State management

Hiện tại thì mình chưa gặp bài toán nào cần thiết phải dùng lib về state management.

Một số cách thông thường là dùng 1 singleton service để link giữa các component với nhau, state thì lưu tại bản thân component, 1 biến đẩy ra ngoài template để emit event. Hoặc lưu state đó ở chính singleton service nếu dùng ở nhiều component. Service đó được inject vào chỗ nào cần lấy state.

Ngoài ra, bài viết này có hướng dẫn làm thế nào dùng RxJS để tự tạo ra 1 state management. Cách này thì mình cũng chưa thử dùng thực tế.

Typed Forms

@ngneat/reactive-forms

Charts

Nếu dùng charts: ngx-charts tương tự công năng d3 nhưng viết bằng Angular, output trên DOM là thẻ svg.

Tính năng đa ngôn ngữ

• transloco: tính năng chuyển ngôn ngữ không reload lại trang dựa trên HTTP request. Sau khi HTTP request được cache lại lần 2 vào web thì hiệu năng không đáng ngại nữa.
• Angular Internationalization (i18n) chính chủ: có bao nhiêu ngôn ngữ thì gen ra bấy nhiêu web. Nên đặc thì của nó là lúc build prod lâu hơn.

Mà có 1 lưu ý quan trọng khi dùng transloco, dùng chính tiếng Anh làm key cho 1 từ, thì thời gian để translate từ text tiếng Anh sang Nhật (ví dụ ngôn ngữ thứ 2 là Nhật) là có nhé. Nó chỉ mất khoảng mấy % giây thôi (vì đc cache lại), nhưng mà thời điểm khởi tạo thì vẫn là tiếng Anh. Nên dự án trước gặp 1 vấn đề là cái tên cột của Grid nó render chỉ đúng size với text tiếng Anh thôi, còn sau đó tiếng Nhật đc hiển thị thì size ko còn đúng nữa. Nên theo mình là dùng hàng chính chủ Angular vẫn hơn dùng transloco nếu như không yêu cầu tính năng chuyển ngôn ngữ không reload lại trang.

Làm việc với bảng biểu (Grid) tựa Excel

ignite-ui-angular mất phí, tuy nhiên lại opensource tại đây. ignite-ui-angular's grid cung cấp data grid, tree grid, hierarchical (cấp bậc) grid với excel-style filtering, live-data, sorting, draggable row và các toolbar khác.

Bảng biểu với dữ liệu lớn

ngx-datatable

🧪 Unit Test

Test dùng thêm package:

• ng-mocks: mock Components, Directives, Pipes, Modules, Services and Tokens, bỏ đi lượng code dư thừa khi tạo mock, tăng tốc chạy test.
• observer-spy: giúp test RxJS observables dễ dàng hơn.
• @ngneat/spectator: tool khủng để tương tác với UI - component là chính.

input-mask

@ngneat/input-mask 's type:

• IP Address
• Currency
• Date
• License Plate
• Email

Notifications UI

@ngneat/hot-toast: popup nhỏ với hiệu ứng chạy ra màn hình.

Loading UI

@ngneat/content-loader: Giống hiệu ứng loading các bài post (Newsfeeds) của Facebook - các bài post rỗng và kèm theo animation.

Unsubscribe from observables khi component destroyed

@ngneat/until-destroy

Copy to clipboard

@ngneat/copy-to-clipboard

Hotkeys

@ngneat/hotkeys

🪟 Dialog

@ngneat/dialog

Caches HTTP requests

@ngneat/cashew

Tránh lặp đi lặp lại các mẫu hiển thị error trên form

@ngneat/error-tailor

Dirty Check Forms

@ngneat/dirty-check-forms: có tính năng rất hay là khi bạn muốn navigate tới đâu đó trong App thì vẫn check được forms đã dirty - có data chưa được lưu hay chưa.

@ngneat/forms-manager

Convert JS to CSS variables

variabless: Ngoài Angular ra vẫn dùng được.

Dynamic View

@ngneat/overview: Tránh lặp đi lặp lại phần template, giúp dêx bảo trì, được module hóa.

Đồng bộ URL params với form realtime

@ngneat/bind-query-params

Icon

angular-fontawesome

Animation 🪃

ng-animate: không phải là 1 wrapper của 1 js lib thuần nào đó hay cốt lõi được viết bằng Angular Animations.

ngx-interactive-paycard: Mô hình hóa credit card hay paycard như thật với animation.

Docs

compodoc: Dễ dàng nhìn thấy quan hệ giữa các thành phần trong App.

OpenAPI

• ng-openapi-gen: chuyển từ thiết kế API được viết dưới dạng OpenAPI 3.0 sang source-code bao gồm model interfaces và web service.

linter

Angular eslint

Cách viết CSS-in-JS

Tham khảo bài viết này.

Cách viết source template và styles cùng file với source component không?

Cá nhân mình thì thích viết source template và styles cùng file với source component, điều này giúp không phải chuyển file quá nhiều. Còn việc highlight template, styles đã có editor extention lo.

Tham khảo

• Team @ngneat
• Angular resources
• Tổng hợp mọi thứ (seed repos, starters, boilerplates, examples, tutorials, components, modules, videos...) hữu ích trong Angular ecosystem: Awesome Angular

---

Photo by Braden Collum on Unsplash