Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LINE Shopping App with Flutter
Search
LINE Developers Taiwan
PRO
September 18, 2020
Technology
0
50k
LINE Shopping App with Flutter
by Evan Fang @ LINE Developer Meetup 13
https://linegroup.kktix.cc/events/20200918
LINE Developers Taiwan
PRO
September 18, 2020
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
就讓AI幫你帶LINE好運
line_developers_tw
PRO
1
15
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2.3k
LINE 台灣實習計畫 2024 - TECH FRESH 介紹
line_developers_tw
PRO
0
380
LINE 台灣實習計畫 - 相關福利與面試流程
line_developers_tw
PRO
0
380
Navigating My Internship: A 5W1H Perspective
line_developers_tw
PRO
0
9
1001 號 到 333 號
line_developers_tw
PRO
0
9
關於我連線三年半的故事
line_developers_tw
PRO
0
600
LINE 電商部門實習分享
line_developers_tw
PRO
0
36
大學六年,我差點忘了畢業
line_developers_tw
PRO
0
99
Other Decks in Technology
See All in Technology
やっていきテスト
k6s4i53rx
0
160
オブジェクト指向宗教史
tanakahisateru
14
12k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
Code Smells @Voxxed Bucharest 24
victorrentea
2
220
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.7k
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
SREsのためのSRE定着ガイド
netmarkjp
10
1.7k
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
1
710
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
500
コードレビューを支援するAI技術の応用
akkie76
2
180
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
260
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Navigating Team Friction
lara
177
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Clear Off the Table
cherdarchuk
82
310k
Faster Mobile Websites
deanohume
296
30k
Building Your Own Lightsaber
phodgson
97
5.6k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
A better future with KSS
kneath
230
16k
Git: the NoSQL Database
bkeepers
PRO
421
63k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Transcript
None
Evan Android Engineer
[email protected]
Avatar Flutter Engineer
LINE Client Team LINE TODAY Taiwan Indonesia LINE SDK Taiwan
Japan LINE APP Taiwan Japan Korea
LINE TODAY Taiwan Indonesia LINE SDK Taiwan Japan LINE APP
Taiwan Japan Korea LINE Shopping Taiwan LINE Client Team
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
INTRODUCTION
About LINE搳ᇔ ʼn ض L I N E 搳 ᇔ
ٚ 搳 ᇔ Ŋ
Search & Compare Redirect LINE Points Reward Flow LINEߪ
SEARCH & COMPARE
REDIRECT Yahoo!ೌ搚 PCHome Shopee Watsons
LINE POINTS REWARD
BACKGROUND
Planning Plan l Spec l iOS & Android Resources l
iOS developers l Android developers Goal l Fail-fast
Fasten by reducing development time Plan l Spec l iOS
& Android Resources l iOS developers l Android developers Goal l Fail-fast
None
About Flutter
UI SDK l Google l Open-Source l Cross-Platform Dart l
Google
l Google l Grab l Alibaba l Tencent l IKEA
l … Trending
Why Choose Flutter
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
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
Using bridge and OEM Widgets Rendering — React Native *Source
from Devbridge
Drawing on canvas directly Rendering — Flutter *Source from Devbridge
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
UI Development using Cross-Platform Toolkit Android iOS
// 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
Single Codebase Write once, run everywhere
Hot Reload
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
Official Tutorial
UI Debugging Memory Dart DevTools
Dart DevTools Performance Network
Packages
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
It works!
6 People Developer s Final Results Android iOS
6 People Developer s Final Results Android iOS Flutter Cost
3 Months Android/iOS 2 Platforms Downloads 1st Rank
CHALLENGES
Architecture APP Layer
Challenges Flutter Issues (Framework / Engine) l WebView APP Layer
Issues l Memory
Challenges Flutter Issues (Framework / Engine) l WebView APP Layer
Issues l Memory
WebView [Android] Can’t change keyboard language
WebView Solution
WebView Side effect after adopting Hybrid Composition
WebView Side effect after adopting Hybrid Composition
WebView Solved
Challenges Flutter Issues (Framework / Engine) l WebView APP Layer
Issues l Memory
Memory issue Out of memory
Memory issue Root cause A B C D Viewport Initialize
too early Not release resource
Memory issue Solution
Memory issue Solution A B C D Viewport Not initialize
before entering viewport Release resource after out of viewport
Memory issue Low memory usage
WRAP UP
Could we use Flutter to develop our apps?
Yes. But there is something to be aware of…
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
Ability to trace Framework / Engine / Packages code !
APPs with complex components like WebView / Player / Google map Not totally supported. !
Thank you Android iOS