LINE Shopping App with Flutter

Transcript

1. None

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
15. None

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