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
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
730
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
780

Other Decks in Programming

See All in Programming
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
2026年向け会社紹介資料
Avatar for Yasutaka misu
0
150
エンジニアに事業やプロダクトを理解してもらうためにやってること
Avatar for bayashi murabayashi
0
140
Introducing RemoteCompose: break your UI out of the app sandbox.
Avatar for Nicolas Roard camaelon
2
530
SUZURIの規約違反チェックにおけるクリエイタフィードバックの試⾏錯誤/Trial and Error in Creator Feedback for SUZURI's Terms of Service Violation Checks
Avatar for watasan ae14watanabe
1
140
詳細の決定を遅らせつつ実装を早くする
Avatar for shimabox shimabox
1
960
CloudflareのSandbox SDKを試してみた
Avatar for syumai syumai
0
120
Kotlin 2.2が切り拓く: コンテキストパラメータで書く関数型DSLと新しい依存管理のかたち
Avatar for Kenichi SUZUKI knih
0
390
CSC509 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280
AI POSにおけるLLM Observability基盤の導入 ― サイバーエージェントDXインターン成果報告
Avatar for ♛Heitor Hirose hekuchan
0
450
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
0
510
Inside of Swift Export
Avatar for giginet giginet
PRO
1
520

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
24
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
970
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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!