Ionic là gì?

Ionic không chỉ là một framework; nó là cầu nối giữa phát triển ứng dụng web và ứng dụng di động gốc. Được thành lập vào năm 2013 như một SDK mã nguồn mở cho ứng dụng di động hybrid, Ionic đã phát triển thành một công cụ mạnh mẽ với hơn 5 triệu ứng dụng được xây dựng trên nền tảng của nó. Cốt lõi của Ionic là sử dụng các công nghệ frontend như HTML, CSS, JavaScript, và Angular để tạo ra các ứng dụng di động cross-platform với một codebase duy nhất.

Những thành phần chính cần biết để hiểu ionic hoạt động như thế nào

  • Ionic Capacitor: Nếu bạn hiện tại có codebase chạy trên web (js, html,css hoặc js framework) bây giờ bạn muốn tận dụng chúng để tạo ra ứng dụng di động chạy được trên iOS và Android. Capacitor như là cầu nối giữa chúng giúp Web app có thể thực hiện được các chứ năng như camera, thông báo,... thông qua các plugin . Capacitor hỗ trợ truy cập dễ dàng các tính năng của thiết bị thông qua JavaScript cơ bản, mở rộng quyền truy cập khi cần thiết. Tìm hiểu chi tiết

  • Ionic Framework: Một phần mở rộng của Capacitor, cung cấp một thư viện phong phú các thành phần UI tối ưu hóa cho di động, bao gồm Router, Navigation,… Tương thích với các framework JavaScript như React, Angular và Vue.

  • Ionic Portals: Hỗ trợ tạo các micro frontend di động có thể triển khai Web App (Phát triển bằng Js, css, html và framework JS) vào các Native App (Phát triển bằng Android hoặc Swift) khác nhau. Lý tưởng cho các doanh nghiệp muốn mở rộng quy mô phát triển bằng cách cho phép làm việc đồng thời của nhiều nhóm hoặc triển khai một micro app cho nhiều ứng dụng. Tìm hiểu chi tiết
  • Ionic Appflow: Một giải pháp CI/CD di động trên đám mây giúp xây dựng, xuất bản và cập nhật ứng dụng theo thời gian. Tích hợp mượt mà với các công cụ CI/CD phổ biến, làm đơn giản hóa quy trình làm việc và tự động hóa các bước.
  • Ionic Native: Một bộ plugin Cordova được thiết kế để hỗ trợ các API chuẩn và tích hợp, cung cấp các khả năng mở rộng cho các ứng dụng Ionic.

Lợi ích của phát triển Ionic:

  1. Codebase duy nhất trên nhiều nền tảng:
    • Giảm chi phí, thời gian ra mắt nhanh hơn và dễ dàng bảo trì.
    • Chuyển đổi ứng dụng Ionic thành ứng dụng desktop hoặc Progressive Web Apps (PWAs).
  2. Khả năng tích hợp rộng rãi:
    • Tích hợp mượt mà với nhiều công cụ và plugin cho các công cụ phân tích, hệ thống thanh toán, bảo mật và kiểm thử.
  3. Chọn lựa phong phú các thành phần UI và tạo prototype nhanh chóng:
    • Thư viện thành phần UI giúp tăng tốc quá trình phát triển, cho phép tạo prototype nhanh.
    • Ionic Creator cung cấp giao diện kéo và thả cho prototype tương tác.

Nhược điểm của phát triển Ionic:

  1. Hạn chế hiệu suất đối với các ứng dụng nặng:
    • Không phù hợp cho các ứng dụng đồ họa nặng hoặc thực tế ảo tăng cường (AR).
    • Tối ưu hóa hiệu suất có thể yêu cầu kiến thức sâu hơn.
  2. Hệ thống phụ thuộc vào plugin:
    • Phụ thuộc vào plugin để truy cập tính năng gốc.
    • Có thể cần phát triển plugin tùy chỉnh cho các yêu cầu đặc biệt.
  3. Thiếu tính năng Hot Reloading:
    • Live reloading thay vì hot reloading có thể làm chậm quá trình phát triển.
  4. Vấn đề bảo mật tiềm ẩn:
    • Các mối quan ngại về bảo mật, bao gồm nguy cơ reverse engineering.
    • Khuyến nghị sử dụng công cụ làm rối mã nguồn (uglification) để tăng cường bảo mật.
  5. Kích thước ứng dụng:
    • Ứng dụng Ionic có thể có kích thước lớn hơn so với ứng dụng gốc.
    • Các kỹ thuật tối ưu hóa mã nguồn và nén có thể giảm thiểu vấn đề này.

Ionic Page Life Cycle

Tóm tắt Ionic Page Events

1. Các sự kiện vòng đời của trang trong Ionic

Ngoài các sự kiện vòng đời của Angular, Ionic cung cấp các sự kiện bổ sung như sau:

  • ionViewWillEnter và ionViewDidEnter:
    • ionViewWillEnter: Kích hoạt ngay sau ngOnInit, trước khi bắt đầu chuyển trang.
    • ionViewDidEnter: Kích hoạt ngay sau khi kết thúc chuyển trang.
  • ionViewWillLeave và ionViewDidLeave:
    • ionViewWillLeave: Kích hoạt ngay trước khi rời trang.
    • ionViewDidLeave: Kích hoạt sau khi trang mới hiển thị hoàn tất.

2. Cách Ionic xử lý vòng đời của trang

  • <ion-router-outlet /> mở rộng <router-outlet /> của Angular với tính năng cải tiến trải nghiệm trên thiết bị di động.
  • Ionic giữ nguyên trạng thái của trang cũ trong DOM nhưng ẩn nó và hiển thị trang mới. Điều này giúp:
    • Duy trì trạng thái trang cũ (dữ liệu, vị trí cuộn, v.v.).
    • Chuyển tiếp mượt mà khi quay lại trang cũ.
  • Trang chỉ bị xóa khỏi DOM khi bị “popped” (ví dụ: khi nhấn nút quay lại).

Lưu ý:

  • ngOnInit chỉ kích hoạt khi trang được tạo mới hoàn toàn.
  • ngOnDestroy chỉ kích hoạt khi trang bị xóa khỏi DOM.

3. Route Guards

  • Trong Ionic 4, các sự kiện ionViewCanEnter và ionViewCanLeave được thay thế bằng Angular Route Guards.
  • Route Guard kiểm soát quyền truy cập vào một route bằng cách triển khai các interface CanActivate và CanDeactivate.

Ví dụ về AuthGuard:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.isAuthenticated();
  }
}

4. Hướng dẫn sử dụng các phương thức Life Cycle

  1. ngOnInit: Khởi tạo và tải dữ liệu không cần làm mới khi quay lại trang.
  2. ionViewWillEnter: Dùng để tải dữ liệu cần cập nhật mỗi lần truy cập.
    • Nếu việc tải dữ liệu gây ảnh hưởng đến hiệu suất, nên dùng ionViewDidEnter.
  3. ionViewDidEnter: Tốt khi gặp vấn đề hiệu suất với ionViewWillEnter, nhưng cần hiển thị bộ tải hoặc skeleton.
  4. ionViewWillLeave: Dùng để dọn dẹp (hủy đăng ký observable) khi rời trang.
  5. ionViewDidLeave: Thực hiện logic không cần khi trang hiển thị.
  6. ngOnDestroy: Dọn dẹp khi trang bị loại bỏ hoàn toàn khỏi DOM.