Bài giảng Phát triển ứng dụng đa nền tảng - Chương 8: Đánh giá hiệu năng ứng dụng đa nền tảng

Chia sẻ: Dương Hoàng Lạc Nhi | Ngày: | Loại File: PDF | Số trang:66

Thêm vào BST

Báo xấu

22
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phát triển ứng dụng đa nền tảng - Chương 8: Đánh giá hiệu năng ứng dụng đa nền tảng. Chương này cung cấp cho học viên những nội dung về: tổng quan và giải thích được các vấn đề hiệu năng của React Native cùng Flutter trên cả hai nền tảng; nắm được nguyên lý chung để thực hiện việc so sánh hiệu năng giữa hai nền tảng bất kỳ;... Mời các bạn cùng tham khảo chi tiết nội dung bài giảng!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Phát triển ứng dụng đa nền tảng - Chương 8: Đánh giá hiệu năng ứng dụng đa nền tảng

CHƯƠNG 8 ĐÁNH GIÁ HIỆU NĂNG ỨNG DỤNG ĐA NỀN TẢNG 1
Mục tiêu Sau bài học này sinh viên sẽ: + Có cái nhìn tổng quan và giải thích được các vấn đề hiệu năng của React Native cùng Flutter trên cả hai nền tảng + Nắm được nguyên lý chung để thực hiện việc so sánh hiệu năng giữa hai nền tảng bất kỳ + Biết được các ứng viên xuất sắc nhất để đo đạc hiệu năng ứng dụng 2
Mục lục 1. Giới thiệu 2. Các cách phát triển ứng dụng di động 3. Implementations 4. So sánh hiệu năng 5. Tóm lược 6. Kết luận 3
Mục lục 1. Giới thiệu 2. Các cách phát triển ứng dụng di động 3. Implementations 4. So sánh hiệu năng 5. Tóm lược 6. Kết luận 4
1. Giới thiệu ▪ Các thiết bị di động sử dụng các nền tảng khác nhau. Các nền tảng phổ biến nhất hiện nay là Android, Apple iOS. ▪ Sự đa dạng này trong các nền tảng là một thách thức đối với các doanh nghiệp trong việc phát triển các ứng dụng nhắm mục tiêu tất cả hoặc hầu hết các nền tảng từ một cơ sở mã duy nhất. ▪ Do đó, phát triển ứng dụng đa nền tảng là một giải pháp thay thế để nhắm mục tiêu vào hầu hết các nền tảng hơn là chạy theo phát triển ứng dụng native. 5
1.1. Background Hiện có nhiều framework phát triển ứng dụng đa nền tảng trên thị trường. Framework/Tool Development Uses Xamarin C# React Native JavaScript Flutter Dart PhoneGap HTML5, JavaScript Ionic AngularJS, JavaScript Native Script AngularJS, Vue.js, TypeScript, JavaScript 6
1.2. Mục tiêu Ta sẽ so sánh hai bộ phát triển ứng dụng đa nền tảng được sử dụng rộng rãi nhất là React Native và Flutter. Cụ thể là mức sử dụng CPU, GPU và bộ nhớ của một ứng dụng được phát triển bởi React Native và Flutter chạy trên nền tảng iOS và Android. Hầu hết, các bộ công cụ phát triển ứng dụng đa nền tảng cung cấp bộ core của việc biên dịch mã ứng dụng sang mã native, nhưng vẫn có sự khác biệt giữa các bộ công cụ này. 7
Mục lục 1. Giới thiệu 2. React Native vs Flutter 3. Implementations 4. So sánh hiệu năng 5. Tóm lược 6. Kết luận 8
2. React Native vs Flutter Hầu hết các framework phát triển ứng dụng di động đa nền tảng không thể cung cấp trải nghiệm người dùng liền mạch ở mọi khía cạnh. Nhiều app nổi tiếng đã được xây dựng bằng Flutter và RN. Do đó, React Native và Flutter đều có những ưu và nhược điểm riêng. Ta đi so sánh vài trường hợp cụ thể: 9
2. React Native vs Flutter Audio và Video: + React Native không cung cấp các core component hoạt động với các API Audio và Video của nền tảng. Tuy nhiên cộng đồng cung cấp các thư viện hỗ trợ, phổ biến nhất là reactnative-sound và react-native-video. + Flutter: Flutter core team không cung cấp plugin cho âm thanh, thư viện ngoài phổ biến nhất là flutter_sound, Flutter core team đang phát triển video_player plugin để hiển thị video. 10
2. React Native vs Flutter Đồ họa 3D: + React Native không cung cấp các core component để hỗ trợ kết xuất 3D. Tuy nhiên cộng đồng cung cấp các thư viện hỗ trợ, phổ biến nhất là react-native-glmodel-view, expo-three. + Flutter: Theo tài liệu chính thức, Flutter không hỗ trợ 3D thông qua OpenGL (Open Graphics Library) hoặc các thư viện tương tự và Flutter tập trung vào kết xuất 2D. Tuy nhiên, tài liệu đã đề cập có một kế hoạch dài hạn để đưa ra một API 3D được tối ưu hóa. 11
2. React Native vs Flutter Truy cập tệp: + React Native không cung cấp các core component để truy cập tệp. Tuy nhiên cộng đồng cung cấp các thư viện hỗ trợ, phổ biến nhất là react-native-fs. Cần có cấu hình nền tảng cụ thể để có quyền thiết lập truy cập hệ thống tệp. + Flutter: Flutter core team cung cấp plugin path_provider để tương tác với các vị trí thường được sử dụng trên hệ thống tệp Android và iOS. 12
2. React Native vs Flutter React Native Flutter Programming Language JavaScript (most popular among web Dart (rarely used and less developer developers and easy to adopt to community) React Native) Architecture Flux (uses JavaScript bridge to SKia (often does not require bridge communicate with native APIs) to communicate with native APIs but bigger in size) Installation Via package manager (NPM, Binary Download from source HomeBrew) API (UI and beyond) Less core components Rich in Widgets Developer productivity Depends on JavaScript skill Depends on Dart skill Community support Very high Rapidly growing Testing support Relies on third party for integration Rich set of packages for integration or UI testing or UI testing Build & release automation support iOS deployment manual from Xcode Command line interface for deployment (Android, iOS) DevOps and CI/CD support Not so easy CI/CD setup and relies Rich command line interface for on third party easy CI/CD setup 13
Mục lục 1. Giới thiệu 2. Các cách phát triển ứng dụng di động 3. Implementations 4. So sánh hiệu năng 5. Tóm lược 6. Kết luận 14
3. Implementations ▪ Ta sẽ triển khai ứng dụng di động theo dõi đại dịch COVID-19. ▪ Ứng dụng được khuyên nên dùng để khảo sát hiệu năng chủ yếu vì có các nhà cung cấp REST API miễn phí về chủ đề này. ▪ Ứng dụng có hai màn hình điều hướng, cụ thể là “NCOV19 SUMMARY” làm landing page và “COUNTRY STATS”. ▪ 15
16
3.1. Ứng dụng di động React Native Một số phần tử giao diện tương đương của React Native trong các nền tảng khác nhau 17
3.1. Ứng dụng di động React Native Màn hình “NCOV19 SUMMARY” được xây dựng bằng một số core component do React Native cung cấp 18
3.1. Ứng dụng di động React Native Màn hình “COUNTRY STATS” được xây dựng bằng một số core component do React Native cung cấp 19
3.1. Ứng dụng di động React Native Cách cấu hình trình điều hướng (navigator) Provider là một Redux component, nó cung cấp thuộc tính store để lưu trạng thái ứng dụng 20