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
190

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
600
Alexa, can you help me?
Avatar for Alessandro Calzavara dral3x
1
720
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
720
Android 101 - Hackatron.org
Avatar for Alessandro Calzavara dral3x
0
770

Other Decks in Programming

See All in Programming
2分台で1500examples完走！爆速CIを支える環境構築術 - Kaigi on Rails 2025
Avatar for Hayato OKUMOTO falcon8823
3
3.7k
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
1k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
Avatar for Swimmy reoandroider
0
120
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT
Avatar for Masayuki Izumi izumin5210
3
550
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
32k
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
690
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
340
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
360
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
180
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
3.3k
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
1.1k

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k

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!