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

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!