Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Backend-Driven UI: Making Screens Dynamic
yhkaplan
October 16, 2020
Programming
1
1k
Backend-Driven UI: Making Screens Dynamic
yhkaplan
October 16, 2020
Tweet
Share
More Decks by yhkaplan
See All by yhkaplan
Using the latest UICollectionView APIs
yhkaplan
0
820
Swift and Concurrency: The Plan for World Domination
yhkaplan
0
71
Migrating from UIKit to SwiftUI efficiently
yhkaplan
4
2k
Property Wrappers
yhkaplan
0
240
Parser Combinators
yhkaplan
0
170
The Great Swift Migration
yhkaplan
1
2.8k
Speeding Up Your CI
yhkaplan
0
260
Automate All the Things
yhkaplan
4
1.7k
Other Decks in Programming
See All in Programming
From Java 11 to 17 and beyond
josepaumard
0
290
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
830
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
300
Explore Java 17 and beyond
josepaumard
3
640
mrubyを1300円のボードで動かそう
yuuu
0
180
Reactでアプリケーションを構築する多様化
sakito
4
3.2k
Loom is Blooming
josepaumard
3
530
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.5k
Groovy Roadmap
paulk
7
13k
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
LOWYAの信頼性向上とNew Relic
kazumax55
4
340
Android入門
hn410
0
300
Featured
See All Featured
Navigating Team Friction
lara
175
11k
Clear Off the Table
cherdarchuk
79
280k
A designer walks into a library…
pauljervisheath
196
16k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Debugging Ruby Performance
tmm1
65
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Rails Girls Zürich Keynote
gr2m
86
12k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Building Applications with DynamoDB
mza
83
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Transcript
Backend-Driven UI: Making Screens Dynamic 1
Self-intro — Name: Joshua Kaplan (@yhkaplan) — Work: minne @
GMO Pepabo — Interests: ! CI/CD, " frameworks, and more — Hobbies: # bread, $ history, and running 2
What is a backend driven UI? — Extreme end: every
individual view defined by backend — Less extreme: order of and type of view defined by backend — Why JSON? 3
Purpose — Change content for each customer — A/B testing
— Feature flags — Less work to make changes 4
Demo 5
How I made it — Prototype in sample app —
Use compositional layout and diffable data sources — Define each section type as JSON w/ a title and subtitle — Firebase Remote Config 6
Code Example let homeReducer = Reducer<HomeState, HomeAction, HomeEnvironment> { state,
action, environment in switch action { case .loadSectionData: state.isSectionLoading = true return environment.homeService.homeContentPublisher() .replaceError(with: []) .receive(on: DispatchQueue.main) .map { HomeAction.loadItemData(sections: $0) } .eraseToEffect() case let .loadItemData(sections): state.isSectionLoading = true return environment.homeService.sectionItemsPublisher(sections: sections) .replaceError(with: [:]) .receive(on: DispatchQueue.main) .map { HomeAction.setSections(sections: $0) } .eraseToEffect() } return .none } 7
Challenges/risks — App Review risks (AKA don’t pull a Fortnite)
— Server unavailable 8
Other possible approaches — Defining more in JSON — microsoft/AdaptiveCards
— spotify/HubFramework — Web views 9
Conclusion — Easy to strike a balance w/ compositional layout
— Think of important, frequently changing screens — Worth it for minne — Try it out in a prototype! — yhkaplan/Shop 10