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