×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
STATE OF DECLARATIVE UI on Mobile Development
Slide 2
Slide 2 text
Hello π Iβm Alessandro Calzavara π± Mobile Tech Lead @ Spreaker.com πΊ Marca User Group meetup organizer π₯© BBQ Grill Master
Slide 3
Slide 3 text
Table of Contents 1. Imperative UI 2. The Rise of Declarative UI 3. The Challenges 4. Wrap Up
Slide 4
Slide 4 text
Imperative UI
Slide 5
Slide 5 text
βA sequence of instructions that synchronize the UI with the state.β Imperative UI
Slide 6
Slide 6 text
Example
Slide 7
Slide 7 text
Imperative Approach Simple to understand π Verbose π Manual sync between UI and state π
Slide 8
Slide 8 text
The Rise of Declarative UI
Slide 9
Slide 9 text
The Rise of Declarative UI 2013: React
Slide 10
Slide 10 text
βthe UI is function of the stateβ Declarative UI
Slide 11
Slide 11 text
Foundational blocks Explicit state properties When state changes, the UI changes automatically Create views by combining several components
Slide 12
Slide 12 text
Declarative Approach Less Code to Write π Automatic UI Updates π Mental Shift Required β More CPU Demanding π€·
Slide 13
Slide 13 text
The Rise of Declarative UI 2013: React
Slide 14
Slide 14 text
The Rise of Declarative UI 2013: React 2015: React Native
Slide 15
Slide 15 text
React Native Cross platform, but Native π Hot swap code π Performance ππ€· Customization π
Slide 16
Slide 16 text
The Rise of Declarative UI 2013: React 2015: React Native
Slide 17
Slide 17 text
The Rise of Declarative UI 2013: React 2015: React Native 2017: Flutter
Slide 18
Slide 18 text
Flutter Declarative π Multi platform π No native UI components π
Slide 19
Slide 19 text
The Rise of Declarative UI 2013: React 2015: React Native 2017: Flutter
Slide 20
Slide 20 text
The Rise of Declarative UI 2013: React 2015: React Native 2017: Flutter 2019: SwiftUI & Jetpack Compose
Slide 21
Slide 21 text
Declarative π Swift π Slow to improve π SwiftUI
Slide 22
Slide 22 text
Jetpack Compose Declarative π Wide OS support π IDE integration π
Slide 23
Slide 23 text
SwiftUI vs Jetpack Compose
Slide 24
Slide 24 text
The Challenges
Slide 25
Slide 25 text
State Handling
Slide 26
Slide 26 text
State Handling β State Hoisting β Architecture β .equals(...)
Slide 27
Slide 27 text
Testing
Slide 28
Slide 28 text
Testing β View tests β Demo screens as test
Slide 29
Slide 29 text
Integration with Imperative UI
Slide 30
Slide 30 text
Integration with Imperative UI Theming Navigation Incremental Deploy
Slide 31
Slide 31 text
Wrap Up
Slide 32
Slide 32 text
βDeclarative UI is the future.β From: Random Dev from the Internet
Slide 33
Slide 33 text
Thanks!