Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design System at scale

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Kajornsak Peerapathananont Kajornsak Peerapathananont
December 20, 2020
Technology
140
0

Mobile Design System at scale

Android Bangkok Conference 2020

Avatar for Kajornsak Peerapathananont

Kajornsak Peerapathananont

December 20, 2020

More Decks by Kajornsak Peerapathananont

See All by Kajornsak Peerapathananont
Full-Stack Development with FlutterFire
Avatar for Kajornsak Peerapathananont kajornsakp
0
13
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
16
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
46
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
57
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
87
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
76
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
43
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
62
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
30

Other Decks in Technology

See All in Technology
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
2
280
プロダクトを育てるように生成AIによる開発プロセスを育てよう
Avatar for KAKEHASHI kakehashi
PRO
1
620
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
2
200
AWS DevOps Agent or Kiro の使いどころを考える_20260402
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
170
Claude Teamプランの選定と、できること/できないこと
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
580
Even G2 クイックスタートガイド（日本語版）
Avatar for vrshinobi vrshinobi1
0
200
レガシーシステムをどう次世代に受け継ぐか
Avatar for 立入 tachiiri
0
260
ASTのGitHub CopilotとCopilot CLIの現在地をお話しします/How AST Operates GitHub Copilot and Copilot CLI
Avatar for AEON aeonpeople
1
120
Podcast配信で広がったアウトプットの輪～70人と音声発信してきた7年間～/outputconf_01
Avatar for FORTE fortegp05
0
230
Cortex Codeでデータの仕事を全部Agenticにやりきろう！
Avatar for harry gappy50
0
290
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
62k
Oracle AI Databaseデータベース・サービス: BaseDB/ExaDB-Dの可用性
Avatar for oracle4engineer oracle4engineer
PRO
1
120

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
160
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
410
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k

Transcript

  1. © 2020 Agoda. All rights reserved. Mobile Design System at

    scale Kajornsak Peerapathananont Mobile Developer

  2. Agenda © 2020 Agoda. All rights reserved. • Problem s

    • What is design syste m • Agoda Design Syste m • How did we achieve i t • Summary 2

  3. © 2020 Agoda. All rights reserved. 3 Meet Agoda app

  4. © 2020 Agoda. All rights reserved. Problems

  5. © 2020 Agoda. All rights reserved. 5 UI Inconsistency

  6. © 2020 Agoda. All rights reserved. 6 Duplicated resources

  7. © 2020 Agoda. All rights reserved. 7 Duplicated code •

    res/values/dimens.xm l • Duplicated padding, margi n • res/ values/colors.xm l • Duplicated color s • Multiple shades of colors

  8. © 2020 Agoda. All rights reserved. Design Systems

  9. © 2020 Agoda. All rights reserved. 9 What is design

    system? https://bradfrost.com/blog/post/atomic-web-design

  10. © 2020 Agoda. All rights reserved. 10 Android Design System

  11. © 2020 Agoda. All rights reserved. Material Guidelines

  12. © 2020 Agoda. All rights reserved.

  13. © 2020 Agoda. All rights reserved. 13 Android Material Theming

    Google I/O 2019 App

  14. © 2020 Agoda. All rights reserved. Agoda Design System

  15. © 2020 Agoda. All rights reserved. 15 Da Vinci

  16. © 2020 Agoda. All rights reserved. 16 Agoda Design System

  17. © 2020 Agoda. All rights reserved. 17 Reusability & Consistency

  18. © 2020 Agoda. All rights reserved. Android Frameworks

  19. © 2020 Agoda. All rights reserved. 19 Requirements • Reusability

    & Consistenc y • No XM L • No Android-coupled syste m • Declarative U I • Domain Specific Language (DSL ) • Testing (Kakao), Network stack, Bootstrapping, etc . • Aligned with other platforms

  20. © 2020 Agoda. All rights reserved. 20 Introducing DaVinci for

    Android

  21. © 2020 Agoda. All rights reserved. 21 Problems solved •

    Reusability ✅ • Consistency ✅ • Easier way to create custom view ✅ • No XML ✅ • No boilerplate code ✅ • Flexibility ✅ • Aligned with iOS ✅ ✅

  22. © 2020 Agoda. All rights reserved.

  23. © 2020 Agoda. All rights reserved. Workflow Design specs Badge

    Component Reusable component

  24. © 2020 Agoda. All rights reserved. 24 DaVinci App

  25. © 2020 Agoda. All rights reserved. 25 Snapshot Testing •

    Screenshot Tests for Androi d • facebook/screenshot-tests-for-android

  26. © 2020 Agoda. All rights reserved. 26 Why not Jetpack

    Compose? • Launched at Google I/O 201 9 • Not suitable to our usecase s • More abstraction with our DSL

  27. © 2020 Agoda. All rights reserved. Summary

  28. © 2020 Agoda. All rights reserved. 28 Everybody is happy

    Designer Developer

  29. © 2020 Agoda. All rights reserved. Interested now? • https://material.io

    • https://agoda.design • https://designsystemsforfigma.com • https://bradfrost.com/blog/post/atomic-web-design • https://speakerdeck.com/line_devday2019/line-design-system-making-line- product- faster-without-losing-consistency

  30. © 2020 Agoda. All rights reserved. 30 Join us!

  31. Thank you