IT Blog #2 | Các bài học then chốt khi phát triển ứng dụng mobile quy mô lớn với Flutter Framework

Giới thiệu
 

Flutter là một cross-platform framework cho phép developer xây dựng mobile app với performance cao và UI đẹp chỉ với một codebase duy nhất. Flutter ngày càng trở nên phổ biến nhờ nhiều ưu điểm như hot reload/hot restart, widget library phong phú, UI dễ tùy biến, hiệu năng gần như native. Tuy nhiên, Flutter cũng không tránh khỏi thách thức – đặc biệt khi xây dựng ứng dụng lớn (large-scale) với business logic phức tạp.

Theo https://flutter.dev/showcase  và nhiều nguồn tham khảo, Flutter hiện đang được sử dụng bởi nhiều doanh nghiệp lớn toàn cầu như BMW, Google Pay, eBay, ByteDance, NuBank, Amazon, Toyota… Tại Việt Nam, nhiều doanh nghiệp lớn cũng đã chọn Flutter, tiêu biểu: Sendo, Be, Cake, FE Credit, MSB, Vietcombank, Viettel, Vingroup…

Trong bài viết này, chúng tôi chia sẻ những key takeaways rút ra sau khi phát triển một large-scale mobile app sử dụng Flutter Framework. Nội dung sẽ được hệ thống thành từng nhóm chính giúp bạn dễ theo dõi, tránh các rủi ro thường gặp và áp dụng best-practice khi build dự án Flutter ở quy mô lớn.

Bài toán đặt ra
 

1. Mục tiêu ban đầu là xây dựng mobile app dùng single codebase, hỗ trợ nhiều tính năng chuyên sâu và vận hành tại nhiều quốc gia.
2. Việc phát triển dạng ứng dụng này rất phức tạp: lượng data lớn, nhiều feature, yêu cầu customize theo thị trường; đồng thời phải chạy ổn định trên đa nền tảng, đa thiết bị, điều kiện mạng khác nhau, và được phát triển bởi nhiều team ở nhiều quốc gia.
3. Để giải bài toán này, chúng tôi xây dựng giải pháp cross-country mobile development, nhằm:

• Xây app scalable – maintainable – reliable với chi phí code & bảo trì tối ưu.
• Đảm bảo trải nghiệm UI/UX nhất quán, adaptive theo screen/resolution khác nhau.
• Test & release nhanh hơn nhờ automation và CI/CD.

Key points
 

Thiết lập kiến trúc & cấu trúc dự án

1. Package Dependency

1.1. Chia từng nhóm chức năng thành package/plugin module riêng.

1.2. Module bao gồm những gì?

1.2.1. Core module:

1. Có thể chia thành nhiều core nhỏ theo domain chức năng.
2. Chứa logic & service dùng chung cho hầu hết Feature module (networking, logging, messaging, …)

1.2.2.    A Feature module:

a.    A Feature Core module:

i.    Triển khai chức năng chính như authentication, profile, onboarding, rewards…

ii.    Mức độ chi tiết phụ thuộc vào requirement.

b.    A Feature Country-specific module:

i.   Mở rộng Feature Core với customization theo từng quốc gia.

ii.    Ví dụ, trong Authentication Feature, có màn hình InputPhoneNumberScreen.

• Với Việt Nam, cần hiển thị prefix số điện thoại +84.
• Với Ấn Độ, cần hiển thị prefix số điện thoại +91.

2. Project Structure and Architecture

2.1.    Kết hợp Clean Architecture & Domain Driven Design & State Management by BLoC.

2.2.   Một module gồm 4 layer:

2.2.1.    Domain: Business Entities & Rules.

2.2.2.    Infrastructure: Describes and implements how the application communicates with the Back-End to save and retrieve data.

2.2.3.    Application: Describes and implements Application Entities & Rules & Functionality, including BLoC.

2.2.4.    Presentation: UI components & screens.

2.3.     Ví dụ:

Code Analysis & Convention

Linter là một công cụ hữu ích giúp phát hiện và highlight lỗi, cảnh báo cũng như các vấn đề về coding style trong codebase, từ đó hỗ trợ developer xử lý và chỉnh sửa kịp thời.

Khi làm việc với Flutter, việc tích hợp linter khá đơn giản và giúp giữ cho codebase luôn sạch và dễ maintain.

Related links:

• https://dart.dev/tools/linter-rules
• https://pub.dev/packages/flutter_lints
• https://pub.dev/packages/dart_code_metrics

Localization - Internationalization

Localization là việc điều chỉnh sản phẩm/dịch vụ để phù hợp với ngôn ngữ, văn hóa và trải nghiệm ("look-and-feel") của từng nhóm người dùng cụ thể. - TechTarget

Hãy định nghĩa wording riêng biệt cho từng chức năng để dễ quản lý thay đổi và tránh tình trạng feature này ảnh hưởng feature khác.
Để hạn chế việc nhiều team sửa cùng một wording và gây xung đột, hãy tuân thủ:

-   Đặt tên wording theo giá trị & ngữ cảnh sử dụng
-   Luôn kiểm tra xem wording đó đã tồn tại trong hệ thống hay chưa

Related links:  https://docs.flutter.dev/development/accessibility-and-localization/internationalization

Design System

Một số định nghĩa:

• https://atlassian.design/
• https://www.figma.com/design-systems/

Design System phải được implement như Core Module

Các Feature Module sử dụng nó để build giao diện theo business logic tại Presentation Layer

Storybook Flutter is a great tool to document how to use and test UI components in Design System.

Related links: https://pub.dev/packages/storybook_flutter

Environments x Flavors

Có nhiều cách mô tả và áp dụng đa môi trường trong quy trình phát triển phần mềm.
Nhìn chung, tối thiểu chúng ta cần 3 môi trường:

• Development: sử dụng trong quá trình phát triển
• Beta/Staging: dùng để kiểm thử sau khi phát triển
• Production: dành cho người dùng thực tế (public release)

Thiết kế Single Environment cũng là một lựa chọn tốt khi áp dụng mô hình Feature Flags.

Flutter flavors rất hữu ích trong việc quản lý cấu hình build theo quốc gia và môi trường.

Related links:

• https://www.atlassian.com/continuous-delivery/principles/feature-flags
• https://flagsmith.com/
• https://docs.flutter.dev/deployment/flavors
   

Integrating Back-End by Code Generation

Chúng tôi từng tốn rất nhiều giờ để triển khai các method gọi REST API từ Back-End. Làm sao tối ưu việc viết code và hạn chế lỗi do thiếu logic xử lý? Với giải pháp mới, chúng tôi đã giảm chi phí effort & thời gian phát triển gần 10 lần, đồng thời giúp sản phẩm đến tay khách hàng nhanh hơn.

Với cách tiếp cận này, chúng tôi tối ưu việc phát triển API service trên cả client lẫn backend. Dựa trên cùng một file YAML mô tả API method và data schema, chúng tôi có thể generate ra service hoàn chỉnh 100% để giao tiếp với application server. Nếu làm theo cách thủ công, developer phải lặp lại cùng một thao tác — vừa tốn thời gian, vừa dễ phát sinh lỗi vì khối lượng công việc lặp lại gây mệt mỏi.

Mục tiêu chính là tạo ra một tool có thể generate toàn bộ method gọi REST API từ backend, bằng cách sử dụng:

• OpenAPI Specification - chuẩn định nghĩa API
• Retrofit & Dio - implement method gọi REST API
• retrofit_generator + dart-source_gen - tự động generate implementation code
• Ngoài ra cần tinh chỉnh thêm với Mustache template

Related links:

• https://spec.openapis.org/oas/v3.0.3
• https://openapi-generator.tech/
• https://github.com/trevorwang/retrofit.dart
• https://github.com/dart-lang/source_gen
• https://mustache.github.io/
• https://pub.dev/packages/retrofit
• https://pub.dev/packages/dio
   

Testing

Việc bao phủ code bằng test luôn là một điều rất hữu ích - càng nhiều vùng tối trong code được test, bạn càng cảm thấy tự tin khi phát triển thêm tính năng mới.

Chúng tôi đã viết rất nhiều test.

• Business logic (services, repositories, BLoCs) nên đạt coverage từ 85–100% trong Unit Test.
  Việc tạo Mock data và quản lý chúng cẩn thận giúp tiết kiệm thời gian khi implement và thay đổi logic sau này.
• Widget Test dành cho Design System (các UI component tái sử dụng) và các lớp Presentation trong Feature Module.
• Integration Test nên thực hiện nhiều nhất có thể để giảm chi phí Regression Test.
  Chỉ cần test qua các workflow quan trọng — càng nhiều màn hình nằm trong flow test, càng tốt.

Alice cũng là một công cụ hữu ích trong việc kiểm tra và debug HTTP Request.

Related links:

• https://docs.flutter.dev/testing
• https://pub.dev/packages/alice

Continuous Integration and Continuous Delivery (CI/CD)

Một bước tiếp theo tất yếu là tự động hóa quy trình build, test và release ứng dụng.

We have tried to automate as much as we can to save time during development by reducing repeat and manual work.

We also use CI/CD to manage source code quality by combining with GitFlow and Trunk-base.

At HomeCredit, we choose Azure Devops.

Related links:

• https://azure.microsoft.com/en-us/products/devops/pipelines
• https://learn.microsoft.com/en-us/azure/devops/repos/git/git-branching-guidance?view=azure-devops
• https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development
   

Wiki

Documentation as Code là một lựa chọn rất tốt. Bạn có thể áp dụng cách mà team Flutter quản lý tài liệu trong chính source code của Flutter framework - và thực tế đây cũng là tiêu chuẩn chung cho hầu hết các Dart package và plugin trên pub.dev.

README là tài liệu quan trọng nhất của project, đặc biệt khi làm việc theo team. Ví dụ, README nên chứa: các lệnh để generate / test / run code, quyết định về cấu trúc thư mục, sơ đồ kiến trúc, các dịch vụ & tool tích hợp bên ngoài, thông tin về môi trường deploy

Đây có thể là công việc hơi “chán”, nhưng cực kỳ đáng giá!

Related link:

• https://dart.dev/guides/libraries/create-library-packages#documenting-a-library
• https://dart.dev/effective-dart/documentation#doc-comments

Kết luận
 

Trong bài viết này, chúng tôi đã chia sẻ những điểm chính khi xây dựng một mobile application quy mô lớn với Flutter Framework. Chúng tôi cũng đã đưa ra một số kinh nghiệm, tips và best practices để giúp bạn sử dụng Flutter hiệu quả hơn trong quá trình phát triển.

Hy vọng rằng nội dung trên đã mang đến cho bạn thêm góc nhìn, kinh nghiệm và kỹ năng để áp dụng cho các dự án Flutter tiếp theo của mình.

Bài viết được thực hiện bởi một "romantic developer". 💙