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
55k
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
LLM 商品規格萃取大冒險- Vila
line_developers_tw
PRO
0
9
Playwright/MCP/AI -Winter
line_developers_tw
PRO
0
9
LINE EC Product Catalog Development- Rei
line_developers_tw
PRO
0
8
LINE 與 AI 機器人技術應用現況
line_developers_tw
PRO
0
6
QA Testing
line_developers_tw
PRO
0
3
jcconf_datadev_prod
line_developers_tw
PRO
0
7
jcconf_SPM_prod
line_developers_tw
PRO
0
4
jcconf_LINEPay_prod
line_developers_tw
PRO
0
4
Live Activities in LINE
line_developers_tw
PRO
0
13
Other Decks in Technology
See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
250
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
200
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
330
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
450
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
17k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
840
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
260
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
170
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
450
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Writing Fast Ruby
sferik
629
62k
BBQ
matthewcrist
89
9.8k
KATA
mclloyd
PRO
32
15k
The Language of Interfaces
destraynor
162
25k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Building an army of robots
kneath
305
46k
We Have a Design System, Now What?
morganepeng
53
7.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
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