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
53k
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
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
19
在 GCP 運用 Parse 全家餐管理那堆 AI 應用的資料
line_developers_tw
PRO
0
22
40歲的我會給20歲的自己,關於軟體開發的7個建議
line_developers_tw
PRO
0
7.5k
從零到一:轉碼仔的實習攻略
line_developers_tw
PRO
0
31
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
44
做Data超讚的 誰懂?
line_developers_tw
PRO
0
33
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
770
Other Decks in Technology
See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
事業継続を支える自動テストの考え方
tsuemura
0
300
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
For a Future-Friendly Web
brad_frost
176
9.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Making Projects Easy
brettharned
116
6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
98
5.3k
Being A Developer After 40
akosma
89
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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