Hotwire Native Tony Messias Hotwire Native fo L ve D s 

Agenda ➔ What's new in Turbo 8 ➔ Hotwire Starter Kit for Laravel ➔ Intro to Hotwire Native ◆ Getting Started ◆ Navigation ◆ Web Forms ◆ Our First Bridge Component ◆ Native Screens 

but first… 

Hotwire in 5 mins-is 

No content

Turbo 

Turbo Drive 

Turbo Frames (...) 

Turbo Streams (...) 

What's new in Turbo 8 

Page Refreshes 

View Transitions 

Prefetching Links on Hover 

Stimulus 

Stimulus 101 

Stimulus 101 

Stimulus 101 import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = [ "source" ] copy() { navigator.clipboard.writeText(this.sourceTarget.value) } } 

Stimulus 101 

Stimulus 101 

Stimulus 101 

No content

it was well received… but there were some folks confused… 

Hotwire Native 

Getting Started 1. Create Project 2. Add Dependency 3. Set Permissions 4. Replace Activity 

Getting Started 1. Create Project 2. Add Dependency 3. Set Permissions 4. Replace Activity class MainActivity : HotwireActivity() { override fun onCreate(savedInstanceState : Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState ) setContentView(R.layout.activity_main) findViewById (R.id.main_nav_host) .applyDefaultImeWindowInsets() } override fun navigatorConfigurations() = listOf( NavigatorConfiguration( name = "main", startLocation = "http://10.0.2.2:8000" , navigatorHostId = R.id.main_nav_host ) ) } 

Getting Started 1. Create Project 2. Add Dependency 3. Add Scene Delegate 

Getting Started 1. Create Project 2. Add Dependency 3. Add Scene Delegate let rootURL = URL(string: "http://localhost:8000")! class SceneDelegate: UIResponder, UIWindowSceneDelegate { var window: UIWindow? private let navigator = Navigator() func scene(_ scene: UIScene, ...) { window?.rootViewController = navigator.rootVi... navigator.route(rootURL) } } 

Navigation Web Native 

Path Configuration { "settings": {}, "rules": [ { "patterns": [".*"], "properties": { "context": "default", "uri": "hotwire://fragment/web", "pull_to_refresh_enabled": true } }, { "patterns": ["/create$", "/edit$", "/delete$"], "properties": { "context": "modal", "uri": "hotwire://fragment/web/modal/sheet", "pull_to_refresh_enabled": false } 

Native Integrations ✨ 

Accessing Camera 

Date Picker 

Time Picker 

Web Forms 

Bridge Components ✨ 

Bridge Components ✨ ➔ Component-based framework ➔ All about messaging: The Native App doesn't know anything about the markup on the page ➔ Native app should opt-in for native components 

Bridge Components 

Bridge Components 

1) php artisan stimulus:make \ bridge/form --bridge=form Bridge Components 

2) import { BridgeComponent, BridgeElement } from "@hotwired/hotwire-native-bridge" export default class extends BridgeComponent { static component = "form" static targets = ["submit"] connect() { super.connect() const element = new BridgeElement(this.submitTarget) const title = element.bridgeAttribute("title") this.send("connect", { title }, () => { this.submitTarget.click() }) } } Bridge Components 

3)

4) [data-bridge-components~="form"] [data-controller~="bridge--form"] [type="submit"] { display: none; } Bridge Components 

5) class FormComponent( name: String, private val delegate: BridgeDelegate ) : BridgeComponent(name, delegate) { override fun onReceive(message: Message) { // Handle incoming messages based on the message `event`. when (message.event) { "connect" -> handleConnectEvent(message) else -> Log.w("FormComponent", "Unknown event for: $message") } } // ... } Bridge Components 

5) class FormComponent( name: String, private val delegate: BridgeDelegate ) : BridgeComponent(name, delegate) { private fun handleConnectEvent(message: Message) { val data = message.data() ?: return // Write native code to add create button and add to toolbar… btn.formSubmit.apply { text = data.title setOnClickListener { replyTo("connect") } } } } Bridge Components 

6) Hotwire.registerBridgeComponents( BridgeComponentFactory("form", ::FormComponent), ); Bridge Components 

Bridge Components 

Bridge Components 

Bridge Components 

Native Screens ✨ 

{ "settings": {}, "rules": [ { "patterns": ["/numbers$"], "properties": { "uri": "hotwire://fragment/numbers", "title": "Numbers" } } ] } @HotwireDestinationDeepLink (uri = "hotwire://fragment/numbers" ) class NumbersFragment : HotwireFragment() { // ... } 1) 2) Bridge Components 3) Hotwire.registerFragmentDestinations( WebFragment:: class, NumbersFragment:: class, ) 

Demo ➔ Navigation ➔ Web Forms ➔ Lifting Form Submits ➔ Native Toast Messages ➔ Native Screens 

Advantages ➔ Small teams ➔ Very little native code needed (at least initially) ➔ Low maintenance ➔ Web controls how/when native components or screens are accessed 

Disadvantages ➔ No offline story (you gotta go native for offline support) ➔ We must know a little bit about native development to build the native app (Kotlin on Android and Swift on iOS) 

Links ➔ The Hotwire Starter Kit: https://github.com/hotwired-laravel/hotwire-starter-kit ➔ The Hotwire Native Android Example for the Hotwire Starter Kit: https://github.com/hotwired-laravel/hotwire-starter-kit-android-example ➔ Joe Masilotti's Bridge Components library: https://github.com/joemasilotti/bridge-components ➔ The Hotwire Native Demo Web App: https://github.com/hotwired/hotwire-native-demo ➔ The Hotwire Native Demo Android App: https://github.com/hotwired/hotwire-native-android/tree/main/demo ➔ The Hotwire Native Demo iOS App: https://github.com/hotwired/hotwire-native-ios/tree/main/Demo ➔ Jay Ohms introduction to Strada (now Bridge Components, still applies): https://youtu.be/LKBMXqc43Q8?si=ohA7n7-jJtpJJwxV ➔ Joe Masilotti's introduction to Turbo Native (still applies): https://youtu.be/hAq05KSra2g?si=sOA3etvFImrpk3sP ➔ Sam Stephenson's "Turbolinks 5: I can't believe it's not native" talk: https://youtu.be/SWEts0rlezA?si=TU8AfgXQPoS-51mq 

Fim.