Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

State of Declarative UI on Mobile Development

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

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
620
Alexa, can you help me?
Avatar for Alessandro Calzavara dral3x
1
740
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
730
Android 101 - Hackatron.org
Avatar for Alessandro Calzavara dral3x
0
790

Other Decks in Programming

See All in Programming
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1.2k
AI時代もSEOを頑張っている話
Avatar for しらはま shirahama_x
0
260
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
360
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
6
1.2k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
670
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
Avatar for Agata Naomichi agatan
2
6.7k
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
Avatar for IKEDA Yasunobu clockmaker
18
7k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
120
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
5
19k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
無秩序からの脱却 / Emergence from chaos
Avatar for nrs nrslib
2
12k

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
480
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.8k

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!