Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MobiConf 2021 - SwiftUI.View: Codable

MobiConf 2021 - SwiftUI.View: Codable


Florian Harr

October 08, 2021


  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: 

    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 

 a new version? … and rather watch football instead?
  18. Would you rather 
 spend your time 
 on actual

 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
  27. None
  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

  32. None
  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
  37. None
  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 

  41. • @CaffeineFlo on Twitter • GitHub Repo - 

    f lo/SwiftUI-SSR Questions ?