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
54k
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 Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.2k
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
1.2k
DB 醬,嗨!哪泥嘎斯基?
line_developers_tw
PRO
0
1.3k
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
1.3k
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
line_developers_tw
PRO
0
1.2k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
1.1k
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
1.2k
你想成為什麼樣的開發者?
line_developers_tw
PRO
0
26
研究生的 LINER生活
line_developers_tw
PRO
0
27
Other Decks in Technology
See All in Technology
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.9k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
520
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
100
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
140
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
OPENLOGI Company Profile
hr01
0
67k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
Operating Operator
shhnjk
1
540
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
26
9k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
250
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Docker and Python
trallard
44
3.5k
The Cult of Friendly URLs
andyhume
79
6.5k
The Language of Interfaces
destraynor
158
25k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Navigating Team Friction
lara
187
15k
GitHub's CSS Performance
jonrohan
1031
460k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
RailsConf 2023
tenderlove
30
1.1k
Transcript
None
Evan Android Engineer evan.fang@linecorp.com 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