Flutter Fast Development Practice in LINE Shopping App

Chia Cheng Chu
LINE Taiwan Engineering 6 - Android Dev Android Developer
https://linedevday.linecorp.com/2020/ja/sessions/3279
https://linedevday.linecorp.com/2020/en/sessions/3279

Transcript

2. › LINE Shopping App Overview › Fast Development Background and Solution › What We’ve Used? › Challenges › Wrap-up and Summary Agenda
3. › LINE Shopping App Overview › Fast Development Background and Solution › What We’ve Used? › Challenges › Wrap-up and Summary Agenda
4. One Stop Shopping Looking for food Looking to travel Looking for product
5. Smart Price Comparison Looking for when a product has the best price Looking for which shop has the best price
6. LINE POINTs Reward
7. › LINE Shopping App Overview › Fast Development Background and Solution › What we’ve used? › Challenges › Wrap-up and Summary Agenda
8. Fast Development Background Limited Resources Tight Schedule Limited resources and tight schedule
9. Fast Development Solution Flutter comes to rescue
10. Fast Development Solution The benefits of Flutter Stateful Hot Reload Built-in Material and Cupertino Design Widgets 60 FPS Expressive and Flexible UI Native Performance Fast Development Fast Development
11. › LINE Shopping App Overview › Fast Development Background and Solution › What We’ve Used? › Challenges › Wrap-up and Summary Agenda
12. What We’ve Used? Dependency Injection Provider State Management Business Logic Component (BLoC) Architecture Clean Architecture
13. Provider Dependency Injection What We’ve Used? State Management Business Logic Component (BLoC) Architecture Clean Architecture
14. Provider A wrapper around InheritedWidget to make them easier to use and more reusable https://pub.dev/packages?q=provider
15. Example: Inject Dependency Root Widget Intermediate Widget Leaf Widget Intermediate Widget Leaf Widget
16. What We’ve Used? Dependency Injection Provider State Management Business Logic Component (BLoC) Architecture Clean Architecture
17. Business Logic Component (BLoC) Widget StreamSink Stream Event State(s) BLoC
18. bloc: State Management Library for Dart https://bloclibrary.dev/
19. Example: Search Products ProductSearchResultPage ProductSearchBloc StreamSink Stream BLoC SearchProductEvent SearchProductState
20. ProductSearchBloc Defines input events and output states
21. ProductSearchBloc Give initial state and use cases
22. ProductSearchBloc Process events and emit states
23. ProductSearchBloc Convert data model to view model
24. ProductSearchResultPage Add events, and listen to state changes and update widgets
25. What We’ve Used? Dependency Injection Provider State Management Business Logic Component (BLoC) Architecture Clean Architecture
26. Clean Architecture › Separation of Concerns › The Dependency Rule https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html “Source code dependencies must point only inward, toward higher-level policies.” - The Dependency Rule
27. Flow of Control in the Shopping App Product ProductSearch Repository ProductSearch ResultPage GraphQL SQLite ProductSearch Bloc ProductSearch Dao ProductSearch ApiService SearchProduct UseCase Dependency Inversion Principle Enterprise Business Rules Application Business Rules Interface Adapters Frameworks & Drivers Take Search Products as Example
28. › LINE Shopping App Overview › Fast Development Background and Solution › What We’ve Used? › Challenges › Wrap-up and Summary Agenda
29. • Unsupported HTTP Cookie SameSite in InAppWebview Plugin Issues • Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues Challenges Development Issues • Scrolling Performance Improvement in StaggerGridView
30. Development Issues • Scrolling Performance Improvement in StaggerGridView • Unsupported HTTP Cookie SameSite in InAppWebview Plugin Issues • Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues Challenges
31. › Scrolling Performance Improvement in StaggerGridView Development Issues
32. › Scrolling Performance Improvement in StaggerGridView Development Issues
33. Plugin Issues • Unsupported HTTP Cookie SameSite in InAppWebview • Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues Challenges Development Issues • Scrolling Performance Improvement in StaggerGridView
34. › Unsupported HTTP Cookie SameSite in InAppWebview 3.0.0 Plugin Issues › File an issue › File a pull request › Clone and customize InAppWebview
35. • Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues Plugin Issues • Unsupported HTTP Cookie SameSite in InAppWebview Challenges Development Issues • Scrolling Performance Improvement in StaggerGridView
36. › Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues InAppWebview
37. Hybrid Composition Hybrid composition refers to the ability of composing native views alongside Flutter widgets https://github.com/flutter/flutter/wiki/Hybrid-Composition
38. Hybrid Composition Side Effect App is prone to crash while switching between foreground and background https://github.com/flutter/flutter/issues/63897
39. Hybrid Composition Side Effect Beta channel is fine to use if necessary https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
40. › LINE Shopping App Overview › Fast Development Background and Solution › What We’ve Used? › Challenges › Wrap-up and Summary Agenda
41. Wrap Up › One Stop Shopping › Smart Price Comparison › LINE POINTs Reward LINE Shopping App Overview › Limited Resources and Tight Schedule › Flutter Comes to Rescue › The Benefits of Flutter Fast Development Background and Solution › Dependency Injection: Provider › State Management: BLoC › Architecture: Clean Architecture What We’ve Used? › Development Issues › Plugin Issues › Framework/Engine Issues Challenges
42. Summary › Integration of native views and Flutter widgets is still unstable on Android › Pay attention to Flutter plugin, framework/engine issues › Flutter is an efficient cross-platform UI toolkit
43. Thank you