LINE Shopping App with Flutter

by Evan Fang @ LINE Developer Meetup 13 https://linegroup.kktix.cc/events/20200918

Transcript

2. Evan Android Engineer evan.fang@linecorp.com Avatar Flutter Engineer
3. LINE Client Team LINE TODAY Taiwan Indonesia LINE SDK Taiwan Japan LINE APP Taiwan Japan Korea
4. LINE TODAY Taiwan Indonesia LINE SDK Taiwan Japan LINE APP Taiwan Japan Korea LINE Shopping Taiwan LINE Client Team
5. Introduction l LINE Shopping Background l Planning l About Flutter l Why Choose Flutter Challenges l WebView Issue l Memory Issue Wrap up l Pros & Cons l Advises Agenda
6. INTRODUCTION
7. About LINE搳ᇔ ʼn ض L I N E 搳 ᇔ ٚ 搳 ᇔ Ŋ
8. Search & Compare Redirect LINE Points Reward Flow LINEߪ෺
9. SEARCH & COMPARE
10. REDIRECT Yahoo!ೌ搚 PCHome Shopee Watsons
11. LINE POINTS REWARD
12. BACKGROUND
13. Planning Plan l Spec l iOS & Android Resources l iOS developers l Android developers Goal l Fail-fast
14. Fasten by reducing development time Plan l Spec l iOS & Android Resources l iOS developers l Android developers Goal l Fail-fast
16. About Flutter
17. UI SDK l Google l Open-Source l Cross-Platform Dart l Google
18. l Google l Grab l Alibaba l Tencent l IKEA l … Trending
19. Why Choose Flutter
20. Why Choose Flutter Performance l Native performance Fast Development l UI development l Single Codebase l Hot reload Resources l Official Tutorial l Dart DevTools l pub.dev
21. Performance l Native performance Fast Development l UI development l Single Codebase l Hot reload Resources l Official Tutorial l Dart DevTools l pub.dev Why Choose Flutter
22. Using bridge and OEM Widgets Rendering — React Native *Source from Devbridge
23. Drawing on canvas directly Rendering — Flutter *Source from Devbridge
24. Performance l Native performance Fast Development l UI development l Single Codebase l Hot reload Resources l Official Tutorial l Dart DevTools l pub.dev Why Choose Flutter
25. UI Development using Cross-Platform Toolkit Android iOS
26. // Declarative style return ViewA( color: red, child: ViewB(…), ) // Imperative style ViewA a = new ViewA(…) a.setColor(red) ViewB b = new ViewB(…) a.add(b) Declarative UI ViewA a ViewB b
27. Single Codebase Write once, run everywhere
28. Hot Reload
29. Why Choose Flutter Performance l Native performance Fast Development l UI development l Single Codebase l Hot reload Resources l Official Tutorial l Dart DevTools l pub.dev
30. Official Tutorial
31. UI Debugging Memory Dart DevTools
32. Dart DevTools Performance Network
33. Packages
34. Why Choose Flutter Performance l Native performance Fast Development l UI development l Single Codebase l Hot reload Resources l Official Tutorial l Dart DevTools l pub.dev
35. It works!
36. 6 People Developer s Final Results Android iOS
37. 6 People Developer s Final Results Android iOS Flutter Cost 3 Months Android/iOS 2 Platforms Downloads 1st Rank
38. CHALLENGES
39. Architecture APP Layer
40. Challenges Flutter Issues (Framework / Engine) l WebView APP Layer Issues l Memory
41. Challenges Flutter Issues (Framework / Engine) l WebView APP Layer Issues l Memory
42. WebView [Android] Can’t change keyboard language
43. WebView Solution
44. WebView Side effect after adopting Hybrid Composition
45. WebView Side effect after adopting Hybrid Composition
46. WebView Solved
47. Challenges Flutter Issues (Framework / Engine) l WebView APP Layer Issues l Memory
48. Memory issue Out of memory
49. Memory issue Root cause A B C D Viewport Initialize too early Not release resource
50. Memory issue Solution
51. Memory issue Solution A B C D Viewport Not initialize before entering viewport Release resource after out of viewport
52. Memory issue Low memory usage
53. WRAP UP
54. Could we use Flutter to develop our apps?
55. Yes. But there is something to be aware of…
56. APPs without complex components like WebView / Player / Google map Native performance Fast development Easy to learn No need to learn both iOS/Android knowledge Lots of resources
57. Ability to trace Framework / Engine / Packages code ! APPs with complex components like WebView / Player / Google map Not totally supported. !
58. Thank you Android iOS