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

State of Declarative UI on Mobile Development

Avatar for Alessandro Calzavara Alessandro Calzavara
December 02, 2023
Programming
0
160

State of Declarative UI on Mobile Development

A bit of history to understand how we got here, and what we have now and what we want in our future
Avatar for Alessandro Calzavara

Alessandro Calzavara

December 02, 2023
Tweet

More Decks by Alessandro Calzavara

See All by Alessandro Calzavara
Remote working: 9 years of lessons learnt
Avatar for Alessandro Calzavara dral3x
1
570
Alexa, can you help me?
Avatar for Alessandro Calzavara dral3x
1
690
Deploy mobile apps with fastlane
Avatar for Alessandro Calzavara dral3x
0
220
RxJava: a Java implementation of Reactive Extentions
Avatar for Alessandro Calzavara dral3x
0
700
Android 101 - Hackatron.org
Avatar for Alessandro Calzavara dral3x
0
750

Other Decks in Programming

See All in Programming
Zennの運営完全に理解した #完全に理解したTalk
Avatar for Yusuke Wada wadayusuke
1
180
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
510
"使いづらい" をリバースエンジニアリングする UI の読み解き方
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
130
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
Avatar for にー兄さん drumath2237
0
120
KotlinConf 2025 現地で感じたServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
140
実はすごいスピードで進化しているCSS
Avatar for Hayato Yokoyama hayato_yokoyama
0
100
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
520
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
150
関数型まつり2025登壇資料「関数プログラミングと再帰」
Avatar for Taison Tsukada taisontsukada
2
670
事業戦略を理解してソフトウェアを設計する
Avatar for 増田 亨 masuda220
PRO
20
5.7k
インターフェース設計のコツとツボ
Avatar for おぎ togishima
2
680
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
Avatar for Naoya Ito naoya
15
3.2k

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
454
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
470
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k

Transcript

  1. STATE OF DECLARATIVE UI on Mobile Development

  2. Hello 👋 I’m Alessandro Calzavara 📱 Mobile Tech Lead @

    Spreaker.com 🍺 Marca User Group meetup organizer 🥩 BBQ Grill Master

  3. Table of Contents 1. Imperative UI 2. The Rise of

    Declarative UI 3. The Challenges 4. Wrap Up

  4. Imperative UI

  5. “A sequence of instructions that synchronize the UI with the

    state.” Imperative UI

  6. Example

  7. Imperative Approach Simple to understand 👍 Verbose 👎 Manual sync

    between UI and state 👎

  8. The Rise of Declarative UI

  9. The Rise of Declarative UI 2013: React

  10. “the UI is function of the state” Declarative UI

  11. Foundational blocks Explicit state properties When state changes, the UI

    changes automatically Create views by combining several components

  12. Declarative Approach Less Code to Write 👍 Automatic UI Updates

    👍 Mental Shift Required ⚠ More CPU Demanding 🤷

  13. The Rise of Declarative UI 2013: React

  14. The Rise of Declarative UI 2013: React 2015: React Native

  15. React Native Cross platform, but Native 👍 Hot swap code

    🚀 Performance 👎🤷 Customization 👎

  16. The Rise of Declarative UI 2013: React 2015: React Native

  17. The Rise of Declarative UI 2013: React 2015: React Native

    2017: Flutter

  18. Flutter Declarative 👍 Multi platform 👍 No native UI components

    👎

  19. The Rise of Declarative UI 2013: React 2015: React Native

    2017: Flutter

  20. The Rise of Declarative UI 2013: React 2015: React Native

    2017: Flutter 2019: SwiftUI & Jetpack Compose

  21. Declarative 👍 Swift 👍 Slow to improve 👎 SwiftUI

  22. Jetpack Compose Declarative 👍 Wide OS support 👍 IDE integration

    👎

  23. SwiftUI vs Jetpack Compose

  24. The Challenges

  25. State Handling

  26. State Handling • State Hoisting • Architecture • .equals(...)

  27. Testing

  28. Testing • View tests • Demo screens as test

  29. Integration with Imperative UI

  30. Integration with Imperative UI Theming Navigation Incremental Deploy

  31. Wrap Up

  32. “Declarative UI is the future.” From: Random Dev from the

    Internet

  33. Thanks!