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
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Unsuck your backbone
ammeep
669
57k
4 Signs Your Business is Dying
shpigford
182
22k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
A better future with KSS
kneath
238
17k
A Tale of Four Properties
chriscoyier
158
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Music & Morning Musume
bryan
46
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building Your Own Lightsaber
phodgson
104
6.2k
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