Ionic Framework: bộ UI cho iOS, Android, web

Ionic Framework là gì

Ionic Framework là bộ công cụ phát triển ứng dụng mã nguồn mở, dùng để xây ứng dụng native đa nền tảng và Progressive Web App từ một codebase JavaScript duy nhất. Nó được xây trên Web Components, nên cùng một bộ component Ionic hoạt động được dù bạn dùng Angular, React hay Vue để bọc nó. Kết hợp với Capacitor để biên dịch codebase đó thành app iOS hoặc Android cài đặt được, hoặc deploy thẳng lên trình duyệt dưới dạng PWA.

Tính năng cốt lõi của Ionic Framework

• ✓Có lõi là thư viện Web Components (@ionic/core), nên cùng một bộ UI component chạy được trong app Angular, React hoặc Vue mà không phải viết lại cho từng framework.
• ✓Các gói riêng theo framework — @ionic/angular, @ionic/react, @ionic/vue — bọc component gốc bằng binding đúng chất của từng hệ sinh thái (directive, hook, hoặc composable).
• ✓Thư viện component phủ tab, modal, action sheet, card, list và form control, có theme thích ứng để trông giống native trên iOS và Android.
• ✓Được build bằng Stencil, trình biên dịch riêng của ionic-team để sinh Web Components độc lập, đây là lý do lớp render không bị khoá cứng vào một framework.
• ✓Kết hợp với Capacitor, một dự án riêng của ionic-team, để bọc web app trong vỏ native và expose các API thiết bị native cho JavaScript.
• ✓Viết hoàn toàn bằng TypeScript, nên editor có type checking và autocomplete cho props của component.
• ✓Cấp phép MIT, nên không tốn phí bản quyền khi đưa vào sản phẩm closed-source thương mại.

Bạn có thể xây gì với Ionic

• •Ứng dụng mobile đa nền tảng, phát hành lên cả Apple App Store và Google Play từ một codebase, dùng Capacitor để tạo bản build native.
• •Progressive Web App cài lên màn hình chính của điện thoại và chạy offline, dùng chung bộ component với bản mobile.
• •Công cụ nội bộ và dashboard quản trị, khi team đã quen Angular, React hoặc Vue và cần UI sẵn sàng cho mobile mà không viết lại native.
• •App nội dung hoặc thương mại điện tử cần điều hướng kiểu native như tab bar, modal vuốt mà không phải tự viết CSS riêng cho từng nền tảng.

Thiết lập project Ionic đầu tiên

README ở thư mục gốc không có lệnh cài đặt cụ thể — nó trỏ sang trang tài liệu Ionic để hướng dẫn khởi tạo project, và trỏ tới các repo ionic-conference-app (bản Angular, React, Vue) làm project mẫu. Trong monorepo này, từng package được publish lên npm dưới tên @ionic/core, @ionic/angular, @ionic/react và @ionic/vue — đây là thứ bạn thêm vào project sẵn có, thay vì clone thẳng repo này.

Xây một app Ionic cơ bản

Cách dùng cũng không được minh hoạ trong README của repo này — đây là monorepo chứa mã nguồn thư viện, không phải hướng dẫn bắt đầu. README trỏ ra ba app tham khảo, Ionic Conference App bản Angular, React và Vue, làm ví dụ đầy đủ về cách nối routing, tab và plugin native quanh thư viện component.

Ionic so với React Native và Flutter

Câu hỏi thường gặp

Vấn đề mà nó giải quyết

Team làm app cho iOS, Android và web trước đây thường cần ba codebase và ba bộ pattern UI riêng. Cách Ionic Framework giải quyết cụ thể là đặt lớp UI vào Web Components, để team Angular, React và Vue dùng chung một thư viện component, sau đó dùng Capacitor biến web app dùng chung đó thành binary native cài đặt được, thay vì viết tay từng màn hình native cho từng nền tảng.

Nên thử — và nên bỏ qua khi nào

Thử Ionic Framework nếu team bạn đã build bằng Angular, React hoặc Vue và cần app mobile cài đặt được mà không phải viết codebase native riêng — thư viện component dùng chung cộng với cầu nối Capacitor là đường đi nhanh nhất. Bỏ qua nếu app cần nhiều tính năng native ngoài phạm vi plugin của Capacitor, hoặc khi hiệu năng cuộn/animation thuần native là ưu tiên hàng đầu, hơn cả việc dùng chung code.

Repo liên quan