While Swift is typically known as a programming language for iOS and macOS apps, it’s quickly gaining traction for web development and other platforms. New capabilities are opening  the door for developers to create static websites and dynamic web applications using Swift. Modern tools for Swift on the web include Tokamak, OpenSwiftUI, Ignite, Publish and Swift Web Assembly.

Creating Websites with Swift

For static websites, many Swift developers have already encountered a website implemented in Swift: swiftbysundell.com. The website's author John Sundell shared the open source framework used to build static sSwift websites as "Publish" on GitHub.

The Ignite framework is a newcomer to the static web world. It is currently under active development by Paul Hudson of hackingwithswift.com. Current momentum is quickly growing the project into something exciting!

For dynamic web apps, the Swift WebAssembly (SwiftWasm) toolchain compiles Swift code into WebAssembly (Wasm), enabling it to run in web browsers. Tokamak extends SwiftWasmsto enable cross-compiling SwiftUI into functioning dynamic web apps.

Challenges and Progress with Swift WebAssembly

Current progress with SwiftWasm shows promising results. Bare Swift code without imports compiles fine. Additionally, major portions of the Foundation framework compile to Wasm. However, Grand Central Dispatch does not compile, and run-time issues exist for persistence code. Another critical limitation is the inability to directly pass non-numeric value types by parameter in function calls between JavaScript and Swift.

Despite these hurdles, the community is very actively developing SwiftWasm into a production-ready system. Recent improvements include compiling Swift NIO Core, which showcases the potential for SwiftWasm.

Demos

Perhaps the easiest way to grasp the capability of SwiftWasm is by example. There are two primary ways Swift Wasm can be used, 1) as a self-contained app with its own UI, or 2) as a library with exported Swift functions that can be called from JavaScript.

Swift UI on the Web Using Tokamak

The first demo details creating a basic website using Swift UI, including a header, body, and buttons. It then evolves to create reusable components that perform stateful mutation of the web page body when activated.

The demo concludes by setting dynamic text for the button labels and applying styling, such as headline fonts and background colors. These real-time effects showcase the power of Swift UI in web development.

The full details of the SwiftUI Tokamak example can be found here.

Swift and JavaScript Interoperation

The final demo addressed the limitations of Swift when used as a library for JavaScript, specifically in passing non-numeric types such as strings. A workaround uses JavaScriptKit to allow interaction directly with the DOM and other JavaScript features from Swift. This approach enabled expanded integration between Swift and JavaScript, a necessary step for building more complex web applications where Swift provides the underlying implementation for a JavaScript-based Web UI.

The full details of the SwiftUI Tokamak example can be found here.

Final Thoughts

This exploration of Swift for the web underscores the versatility of the language. While challenges remain, the potential for Swift in web development is quickly evolving from a pipe dream to reality. Tools like Tokamak, SwiftWasm, and Vapor are paving the way for a more unified development experience, allowing developers to leverage their Swift skills across the entire ecosystem of software products. This evolving capability presents an exciting opportunity for developers to explore Swift beyond its traditional use cases.

Learning Resources

• SwiftWasm book, the starting point: https://book.swiftwasm.org
• Examples demonstrated in this presentation: https://github.com/PassiveLogic/swift-web-examples
• SwiftWasm Examples: https://github.com/swiftwasm/awesome-swiftwasm
• Apple Example: https://github.com/apple/swift-for-wasm-examples
• Point Free Example: https://www.pointfree.co/episodes/ep291-cross-platform-swift-webassembly
• Tokamak, leading framework for SwiftUI on the web: https://github.com/TokamakUI/Tokamak
• JavaScriptKit, the SwiftWasm tool for JavaScript and DOM interoperation: https://github.com/swiftwasm/JavaScriptKit
• Swift Carton, a command line tool for developing with SwiftWasm: https://github.com/swiftwasm/carton
• Publish, static site framework by John Sundell: https://github.com/johnsundell/publish
• Ignite, swiftui-inspired static side builder: https://github.com/twostraws/Ignite
• OpenSwiftui, open source implementation of SwiftUI for iOS, macOS, Linux, Wasm, and Windows: https://github.com/OpenSwiftUIProject/OpenSwiftUI