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
180

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
590
Alexa, can you help me?
Avatar for Alessandro Calzavara dral3x
1
710
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
ワープロって実は計算機で
Avatar for Chiharu Shirasaka pepepper
2
1.4k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
830
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
140
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
Avatar for r-kagaya rkaga
13
2.8k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
Avatar for technuma technuma
2
230
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.5k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
Avatar for Itaru Ota ota1022
5
1.8k
兎に角、コードレビュー
Avatar for mitohato14 mitohato14
0
150
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
3
1.2k
AHC051解法紹介
Avatar for eijirou eijirou
0
620
オープンセミナー2025@広島 「君はどこで動かすか？」 アンケート結果
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
210
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
170

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
183
54k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k

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!