LINE Shopping App with Flutter

LINE Shopping App with Flutter

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

2102a6b8760bd6f57f672805723dd83a?s=128

line_developers_tw

September 18, 2020
Tweet

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