Jeffrey Hicks

Jeffrey Hicks

Platform Eng @R360

Stanford CS193p 2023: Lecture 01 Notes

My notes from Lecture 1 of Stanford's CS193p course covering SwiftUI fundamentals, functional programming foundation, and compositional UI architecture

By Stanford CS193p • Sep 1, 2025
Lecture 1 | Stanford CS193p 2023
by Stanford CS193p
Published Aug 25, 2023

Introduction to and screen capture of Lecture 1 of Stanford's CS193p course (Developing iOS Applications using SwiftUI) from Spring quarter 2023. The basics of SwiftUI.

An in-depth exploration of SwiftUI’s core architectural principles, demonstrating the shift from object-oriented to functional programming paradigms in iOS development.

Functional Programming Foundation

SwiftUI represents a paradigm shift from traditional object-oriented UI programming to functional programming. The core principle revolves around behavior encapsulation rather than data encapsulation.

The “Behaves Like” Concept

The fundamental building block in SwiftUI is the concept that structs “behave like” something:

struct ContentView: View {
    // This struct behaves like a View
}

This : View syntax means ContentView conforms to the View protocol, gaining access to hundreds of built-in functions and modifiers while only requiring one implementation.

Struct-Centric Architecture

Why Structs, Not Classes

SwiftUI is built entirely around structs, not classes:

  • Structs can contain both variables and functions
  • No inheritance - this is not object-oriented programming
  • Value types that promote immutability
  • The class keyword is rarely used in SwiftUI development

The View Protocol Requirements

To “behave like a View,” a struct needs only one requirement:

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

This single computed property body unlocks massive functionality - hundreds of functions and capabilities built into View.

Computed Properties and “some View”

Understanding Computed Properties

The var body is a computed property:

  • Not stored anywhere - calculated every time it’s accessed
  • Runs the code inside the braces each time
  • Allows for dynamic UI updates
  • Read-only but still var because the computed result may change

The “some View” Type

some View is an opaque type that means:

  • “Any struct that behaves like a View”
  • Swift determines the specific type by executing the code
  • Ensures type safety while providing flexibility
  • The compiler figures out what View type is returned

The Lego Composition Model

Building Complex UIs from Simple Components

SwiftUI follows a compositional architecture similar to Lego building:

VStack {
    Text("Hello")
    Image(systemName: "globe")
    Text("World")
}
  • Small, simple Views combine to create complex interfaces
  • Container Views (VStack, HStack, ZStack) arrange other Views
  • Each View’s body returns “some other View,” enabling infinite composition

SwiftUI Syntax Essentials

Basic Structure

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
                .foregroundColor(.blue)
            
            Image(systemName: "globe")
                .imageScale(.large)
        }
        .padding()
    }
}

Key Syntax Elements

Import Statement:

import SwiftUI  // Required for UI components

View Declaration:

struct ContentView: View  // Struct name: Protocol conformance

View Modifiers:

Text("Hello")
    .font(.title)        // Chained modifiers
    .foregroundColor(.blue)
    .padding()

Container Views:

VStack { /* vertical arrangement */ }
HStack { /* horizontal arrangement */ }  
ZStack { /* layered arrangement */ }

Advanced SwiftUI Concepts

ViewBuilder and Trailing Closures

Container Views use trailing closures with @ViewBuilder:

VStack {  // This is a trailing closure
    Text("First")
    Text("Second") 
    Text("Third")
}

The @ViewBuilder transforms multiple Views into a TupleView automatically.

Conditional Views

Views can include conditional logic:

var body: some View {
    VStack {
        if isVisible {
            Text("I'm visible!")
        }
        Text("Always visible")
    }
}

Separation of Concerns

SwiftUI promotes clean architecture:

  • UI layer: Imports SwiftUI, handles presentation
  • Logic layer: Imports Foundation, handles business logic
  • Clear separation between visual and functional code

Live Development Features

Preview Canvas

SwiftUI provides real-time preview capabilities:

  • Code changes update instantly in the preview
  • Multiple device simulations
  • Dark/light mode testing
  • Different orientations and sizes

Inspector Integration

The Xcode Inspector allows:

  • Visual editing of View properties
  • Changes sync between code and visual editor
  • Useful for designers and non-programmers
  • Code remains the source of truth

Core Principles Summary

  1. Declarative Syntax: Describe what you want, not how to build it
  2. Composition Over Inheritance: Build complex UIs from simple, reusable components
  3. Functional Programming: Focus on behavior and data flow
  4. Value Types: Structs promote predictable, immutable UI updates
  5. Protocol-Oriented: Gain functionality through protocol conformance
  6. Reactive Updates: UI automatically updates when underlying data changes

SwiftUI represents a modern approach to UI development that emphasizes simplicity, reusability, and declarative programming patterns. Understanding these foundational concepts is essential for building robust, maintainable iOS applications.

Related

#swiftui