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
250

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
660
Alexa, can you help me?
Avatar for Alessandro Calzavara dral3x
1
780
Deploy mobile apps with fastlane
Avatar for Alessandro Calzavara dral3x
0
230
RxJava: a Java implementation of Reactive Extentions
Avatar for Alessandro Calzavara dral3x
0
760
Android 101 - Hackatron.org
Avatar for Alessandro Calzavara dral3x
0
820

Other Decks in Programming

See All in Programming
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
120
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
670
文字コードの話
Avatar for Masaki Hara qnighy
43
16k
AHC061解説
Avatar for Shun_PI shun_pi
0
290
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
340
atmaCup #23でAIコーディングを活用した話
Avatar for ML_Bear ml_bear
4
720
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
180
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
120
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
370
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
420
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310

Featured

See All Featured
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
250
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
240
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k

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!