Introduction to Server Driven UI in iOS, Swift & SwiftUI

Explore server driven UI, where the server defines both data and the components to render. Learn how JSON dictates layout changes without app store updates.

Learn how server driven ui updates the interface via json without app review, enabling cross-platform sync, reordering, ab testing, and server controlled navigation.

Explore the core architecture of server driven UI, where a server returns JSON that the iPhone app maps to UI models and renders via components selected by model type.

Explore building a server driven UI for iOS that renders a featured image, a carousel, and a list, with a details screen showing image, description, and rating.

Learn to initialize a Node and Express project, install Express with npm, and run a server that returns a hello world JSON message on the root route.

Learn to return a JSON template from the server that represents a screen as a components array, starting with a featured image and its URL, enabling cross-platform rendering.

Implement a web service for a server-driven iOS app by fetching a url resource asynchronously, handling errors and success responses, and outlining json decoding into screen and component models.

Create and decode user interface models to map the server json template into a screen model and component model, enabling decoding of a featured image component.

Define a UI component protocol and implement a featured image component that renders a URL-based image in SwiftUI using a dedicated featured image UI model and an any-view extension.

Implement a pet list view model that fetches data from the web service, maps it to a screen model, builds components (including featured image), and publishes updates to the UI.

Render server-driven ui components by iterating fetched components and invoking their render functions to display the featured image within a navigation and scroll view.

Implement a local JSON file reader and a network service protocol to swap between local and web data sources, decoding JSON for a SwiftUI iOS app.

Explore the json decoding problem in a server driven ui, where string keys map to mixed primitive types and decoding can fail, and learn about implementing a custom json type.

Create a custom JSON type that decodes into string and any, using coding keys and containers to build a dictionary, handle single values and arrays, and test decoding.

Integrate the new JSON type into the app, decode the type and data with a custom decoding strategy, and test in a playground before moving to the server.

Add a carousel component to a server-driven iOS app, render multiple images from a JSON carousel data model, and enable swipe navigation and dynamic reordering via JSON.

Explore actions in server driven UI, from tap, scroll, drag, and swipe events to navigation, sheet and push destinations, defined via JSON.

Create and wire actions for the carousel by adding an action type and destination, enabling a sheet action to open the pet detail view with a light web navigation engine.

Implement a lightweight navigator to centralize navigation logic, using perform navigation with an action and destination view. Choose sheet or push navigation to present the detail destination.

Explore implementing navigation with a lightweight navigator, trigger actions from server data, and navigate from a carousel to a detail view with payloads.

Learn to pass payloads between views with a navigator in iOS server-driven UI, using an optional any payload to send a URL and fetch detailed data on the destination.

Pass the pet id as a parameter to the pet detail screen by restructuring carousel items into id and image url objects, enabling server-driven data fetching.

Explore how a server driven UI renders different controls by changing the JSON, swapping in a new featured image URL, and generating true unique IDs with the id property.

Host a json template on a server and return a focused pet image array via a web service, then fetch and display it in the iOS carousel.

Implement a pet detail endpoint that returns a pet's image, description, and rating by id via a get request. Assemble a model with image, text, and rating components from data.

Build a pet detail screen by wiring a detail view model with a network service, passing the pet id, and rendering the image, text, and rating.

Build a text row in a server driven UI for iOS by defining a text row UI model, creating a text component, decoding data, and applying padding.

Model a server-driven rating UI by creating a rating roll, a rating UI model, and a rating component, then bind to a rating view for interactive stars.

Learn to render lists and rows with server driven UI by returning a list template in JSON, enabling push navigation to detail screens and JSON decoding in iOS.

design a server driven ui by creating a generic item model with id, title, subtitle, image, and description, and map it to a ui model for list rows.

Implement list and row components for a server driven UI in iOS, using the list UI model to render rules with optional image, subtitle, and description, and enable push navigation.

Learn server driven ui navigation by wiring the navigator to pass a ui model payload to a detail screen and render layouts controlled by json.

Explore how server-driven UI handles new components, showing how to avoid crashes when the client lacks updates by making new components optional and using an empty component.