Turbo Native in 15 Minutes

Overview

This are my notes while watching Joe Masilotti's youtube video on "Turbo Native in 15 minutes"

Resources

Turbo Native in 15 minutes - Joe Masilotti - Learn how to get up and running with Turbo Native on iOS in 15 minutes. All you need to get started is a free copy of Xcode downloaded from the App Store.

Create Barebones Xcode Project

Open Xcode
File - New Project
- Select Interface "Story Board"

Should launch to blank app.

Remove Boiler Plate

From File Navigator, Delete main.storyboard

From Info PList, Expand keys, Delete Storyboard Name

Remove Storyboard Reference From Build Settings
- From Navigator Pane, Open Project
- Click Target
- Build Settings Tab
- Delete UIKit Main Storybaord

Setup Scene

Open SceneDelegte from Navigation Pane
Delete everything except func scene

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    self.window = UIWindow(windowScene: windowScene)
    self.window?.rootViewController = UIViewController()
    self.window?.rootViewController?.view.backgroundColor = .orange
    self.window?.makeKeyAndVisible()
}

Build TurboNative App

Get TurboNative Dependency

Alternatively to CocoaPods or Carpet? this is built into Xcode. Similar to Gems.

Open File Explorer
Click on Project in File Explorer
- Click Project (Not Target)
- Package Dependencies
- Click +

Enter URL in top right Search Box
https://github.com/hotwired/turbo-ios

Use TurboNative Package in Scene

Update SceneDelegate to use NavigationController and Introduce concept of pushViewController

private let navigationController = UINavigationController()

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    self.window = UIWindow(windowScene: windowScene)
    self.window?.rootViewController = navigationController
    self.window?.rootViewController?.view.backgroundColor = .orange
    self.window?.makeKeyAndVisible()

    visit()
}

private func visit() {
    let controller = UIViewController()
    controller.view.backgroundColor = .green
    navigationController.pushViewController(controller, animated: true)
}

Now instead of UIViewController, let's use Turbo's VisitableViewController

private func visit() {
    let url = URL(string: "http://localhost:3000")!
    let controller = VisitableViewController(url: url)
    navigationController.pushViewController(controller, animated: true)
}

But we also need Turbo's Session. Next to the navigationController at top of file add:

private let session = Session()

And update func visit

private func visit() {
    let url = URL(string: "http://localhost:3000")!
    let controller = VisibleViewController(url: url)
    session.visit(controller, .advance)
  navigationController.pushViewController(controller, animated: true)
}

Activate Links

Update session

private lazy var session: Session = {
    let session = Session()
    session.delegate = self
    return session
}()

But that will warn, because self doesn't quack like a delegate.

So we an use extensions to extend SceneDelegate. For some reason, you gotta click fix twice.

    func session(_ session: Turbo.Session, didProposeVisit proposal: Turbo.VisitProposal) {
        let controller = VisitableViewController(url: proposal.url)
        session.visit(controller, action: .advance)
        navigationController.pushViewController(controller, animated: true)
    }

Remove WebView Elements Not Relevant to TurboNative

The strategy here is to let Rails know we are TurboNative app by setting the UserAgent Name.

private lazy var session: Session = {
    let configuration = WKWebViewConfiguration()
    configuration.applicationNameForUserAgent = "Turbo Native iOS"
    let session = Session()
    session.delegate = self
    return session
}()

In Rails app you can conditionally render content based on turbo_native_app?

Blog