MobiConf 2021 - SwiftUI.View: Codable

Slide 1

Slide 1 text

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”

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

• 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/)

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Florian Harr

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Parameterized SwiftUI Views

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Dynamic Screens with shipped Views Based on Input:   Logic or API

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Parameterized SwiftUI Views

Slide 15

Slide 15 text

Dynamic Screens with shipped Views

Slide 16

Slide 16 text

Do you hate UI Bugs?

Slide 17

Slide 17 text

Wouldn’t you like to   update your UI   without releasing   a new version? … and rather watch football instead?

Slide 18

Slide 18 text

Would you rather   spend your time   on actual features   that you   interviewed for?

Slide 19

Slide 19 text

Apple certainly does ——-> …and I’ll show you how you can do it better…

Slide 20

Slide 20 text

This one weird SwiftUI Trick …

Slide 21

Slide 21 text

General Speci f ic

Slide 22

Slide 22 text

1. Static Screens with parameterized Views 2. Dynamic Screens composed of shipped Views 3. SwiftUI.View: Codable

Slide 23

Slide 23 text

Live Demo

Slide 24

Slide 24 text

JSON Deserializer/   ViewFactory Decoded   SwiftUI View

Slide 25

Slide 25 text

JSON Deserializer/   ViewFactory Decoded   SwiftUI View API Server User Input Requests Sends Receives Shows Page/ Device Type/ Version etc.

Slide 26

Slide 26 text

List Stack SwiftUI.View: Codable -   Transforming SwiftUI to JSON (and vice-versa) for a fully backend driven UI

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Bonus: Abstraction CodableView Allows for Model Variants with dynamicMemberLookup

Slide 29

Slide 29 text

Deserializer ViewFactory https://www.swiftbysundell.com/articles/handling-model-variants-in-swift/

Slide 30

Slide 30 text

Live Demo

Slide 31

Slide 31 text

Creating Valid SwiftUI JSON Code

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

Pros Cons &

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

• 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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

• 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

Slide 39

Slide 39 text

judo.app jasonette.com Spotify HUB Framework

Slide 40

Slide 40 text

Thank You Enjoy the   rest of the   conference

Slide 41

Slide 41 text

• @CaffeineFlo on Twitter • GitHub Repo -   https://github.com/caffeine f lo/SwiftUI-SSR Questions ?