MobiConf 2021 - SwiftUI.View: Codable

Transcript

1. Transforming SwiftUI to JSON (and Vice-Versa) 
 for a fully backend driven UI MobiConf Summit 2021 - Florian Harr - Betterment “When you need that extra bit of f lexibility”
2. Hi👋 • i(Phone)OS since 2008/2009 • Remote @ Betterment • Hates to work on “Move the UIButton 5px left” stories • DMs open: @CaffeineFlo • Obvious Dog Fanatic! I’m Florian!
3. • Investment, IRA and 401(k) Provider with best-in-class automated investing strategies (and human advisors!) • Strong engineering team and culture with > 100 Engineers across the US • Of f ices in NY, Philly, Denver • Remote positions available • We’re hiring (https://www.betterment.com/careers/current-openings/)
4. Transforming SwiftUI to JSON (and Vice-Versa) 
 for a fully backend driven UI “When you need that extra bit of f lexibility” Entertaining Informative FUN
5. Florian Harr
6. +
7. +
8. Parameterized SwiftUI Views
9. Parameterized SwiftUI Views • Initializes Views from backing Data Structure (e.g. Codable JSON Models) • Works nicely with screens that don’t have many layout variations • Clear implementation experience
10. Parameterized SwiftUI Views Follow Up Resources • Con f iguring SwiftUI Views - SwiftBySundell • How to create and compose custom views • Getting started with UIKit in SwiftUI and vice versa
11. Dynamic Screens with shipped Views Based on Input: 
 Logic or API
12. • Evolution to parameterized SwiftUI Views • Compose different screens from sets of shipped Views remotely • Can be as “dynamic” as consuming another API at runtime to describe full screens HackingWithSwift - iDine Dynamic Screens with shipped Views
13. Dynamic Screens with shipped Views Follow Up Resources • Optional SwiftUI Views - SwiftBySundell • 5 Steps to Better SwiftUI Views - HackingWithSwift • Managing scenes in SwiftUI - Swift with Majid
14. Parameterized SwiftUI Views
15. Dynamic Screens with shipped Views
16. Do you hate UI Bugs?
17. Wouldn’t you like to 
 update your UI 
 without releasing 
 a new version? … and rather watch football instead?
18. Would you rather 
 spend your time 
 on actual features 
 that you 
 interviewed for?
19. Apple certainly does ——-> …and I’ll show you how you can do it better…
20. This one weird SwiftUI Trick …
21. General Speci f ic
22. 1. Static Screens with parameterized Views 2. Dynamic Screens composed of shipped Views 3. SwiftUI.View: Codable
23. Live Demo
24. JSON Deserializer/ 
 ViewFactory Decoded 
 SwiftUI View
25. JSON Deserializer/ 
 ViewFactory Decoded 
 SwiftUI View API Server User Input Requests Sends Receives Shows Page/ Device Type/ Version etc.
26. List Stack SwiftUI.View: Codable - 
 Transforming SwiftUI to JSON (and vice-versa) for a fully backend driven UI
28. Bonus: Abstraction CodableView Allows for Model Variants with dynamicMemberLookup
29. Deserializer ViewFactory https://www.swiftbysundell.com/articles/handling-model-variants-in-swift/
30. Live Demo
31. Creating Valid SwiftUI JSON Code
33. • Encode what you need • Encodable extensions for standard views • Grab the JSON output form the console • What You See Is What You Get (WYSIWYG) Editor for more advanced scenarios
34. Pros Cons &
35. Re-imagine Screens On-The-Fly Server Side Rendering isn’t a brand-new technology and has been used on (reactive) web for a long time. There are many use-cases and bene f its where this architecture enables a f lexibility that is hard to replicate otherwise. It comes with trade-offs though and SwiftUI (in it’s current state) requires a good bit of boilerplate code to make it work.
36. • Excellent opportunity for mostly “static” content to be represented natively on mobile • WebViews have their own challenges and often lacking accessibility that SwiftUI/Jetpack compose overcome easily • Use-Cases: • Consumable Media (e.g. News) • Account/User Pro f iles with many edge-cases • Forms
38. • Versioning will eventually add another layer of complexity on top • “Actions” or function calls can be complex and dangerous • Technologies often solve speci f ic problems 
 -> double check your use-cases
39. judo.app jasonette.com Spotify HUB Framework
40. Thank You Enjoy the 
 rest of the 
 conference
41. • @CaffeineFlo on Twitter • GitHub Repo - 
 https://github.com/caffeine f lo/SwiftUI-SSR Questions ?