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
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
300
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k
Laravel Boost 超入門
Avatar for Arlo fire_arlo
3
220
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
Avatar for nokomoro3 nokomoro3
0
180
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
440
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.3k
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
510
Cache Me If You Can
Avatar for RyuNen344 ryunen344
2
1.4k
アセットのコンパイルについて
Avatar for ojun ojun9
0
130
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
320
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
540
AI Coding Agentのセキュリティリスク：PRの自己承認とメルカリの対策
Avatar for さうす s3h
0
230

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
It's Worth the Effort
Avatar for 3n 3n
187
28k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k

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!