Just enough Turbo Native to be dangerous

Turbo Native gives Rails developers superpowers. It enables us to launch low maintenance but high-fidelity hybrid apps across multiple platforms. All while keeping the core business logic where it matters - in the Ruby code running on the server.

The framework renders your existing mobile web HTML inside of a native “shell.” But getting started isn’t easy. You still have to write some native Swift code in Xcode. And there isn’t much documentation available about the right way to do things.

During this talk I’ll walk you through all of that. You’ll learn how to build a Turbo Native iOS app from scratch along with the benefits and pain points that come with it. We’ll dive into ways to make the app feel more native, how to integrate with native Swift SDKs, and more.

Transcript

1. Just enough Turbo Native to be dangerous Rails World 2023 1
2. Turbo Native gives Rails developers superpowers 2
3. Transform your Rails codebase into iOS and Android apps… 3
4. …by rendering server-side HTML in a native mobile app. 4
5. I was a hybrid skeptic 5
6. I was a hybrid skeptic Launched iOS and Android apps 5.1
7. I was a hybrid skeptic Launched iOS and Android apps as the only developer. 5.2
8. I was a hybrid skeptic Launched iOS and Android apps as the only developer. What should have taken years 5.3
9. I was a hybrid skeptic Launched iOS and Android apps as the only developer. What should have taken years took months. 5.4
10. I was a hybrid skeptic Launched iOS and Android apps as the only developer. What should have taken years took months. My world changed that day. 5.5
11. All in on Turbo Native 6
12. All in on Turbo Native Tutorials, 6.1
13. All in on Turbo Native Tutorials, YouTube videos, 6.2
14. All in on Turbo Native Tutorials, YouTube videos, upcoming book, 6.3
15. All in on Turbo Native Tutorials, YouTube videos, upcoming book, and dozens of App Store apps. 6.4
17. Hybrid will never be as good as native. 7.1
18. Web UI is good enough 8
19. Web UI is good enough most of the time. 8.1
20. Why Turbo Native? 9
21. Why Turbo Native? Write once, deploy everywhere 9.1
22. Why Turbo Native? Write once, deploy everywhere Maximize Rails skills 9.2
23. Why Turbo Native? Write once, deploy everywhere Maximize Rails skills Skip expensive development cycles 9.3
24. Why Turbo Native? Write once, deploy everywhere Maximize Rails skills Skip expensive development cycles Upgrade screens when needed 9.4
26. Today we will… 11
27. Today we will… 1. Build an app from scratch 11.1
28. Today we will… 1. Build an app from scratch 2. Make it feel more native 11.2
29. Today we will… 1. Build an app from scratch 2. Make it feel more native 3. Integrate native screens 11.3
30. Today we will… 1. Build an app from scratch 2. Make it feel more native 3. Integrate native screens 4. Preview new features 11.4
31. Turbo Native 101 Your Rails-powered iOS app 12
33. (live demo) 14
34. Turbo Native 102 Making the app feel more native 15
35. Something looks a bit… off
37. Something looks a bit… off
39. Something looks a bit… off
41. Something looks a bit… off
43. Turbo Native specific content 20
44. Set the user agent 21
45. Set the user agent private lazy var session { let session Session() session.delegate self return session }() 1 = 2 = 3 = 4 5 21.1
46. Set the user agent let config WKWebViewConfiguration() config.applicationNameForUserAgent "Turbo Native iOS" private lazy var session { 1 = 2 = 3 = 4 let session Session(webViewConfiguration: config) 5 = session.delegate self 6 = return session 7 }() 8 22
47. Set the user agent let config WKWebViewConfiguration() config.applicationNameForUserAgent "Turbo Native iOS" private lazy var session { 1 = 2 = 3 = 4 let session Session(webViewConfiguration: config) 5 = session.delegate self 6 = return session 7 }() 8 let session Session(webViewConfiguration: config) private lazy var session { 1 = let config WKWebViewConfiguration() 2 = config.applicationNameForUserAgent "Turbo Native iOS" 3 = 4 5 = session.delegate self 6 = return session 7 }() 8 22.1
48. turbo-rails helper 23
49. turbo-rails helper # turbo-rails/app/controllers/turbo/native/navigation.rb def turbo_native_app? request.user_agent.to_s.match?(/Turbo Native/) end 23.1
50. Hide the nav bar 24
51. Hide the nav bar <%# app/views/shared/_navbar.html.erb %> <nav class="navbar"> <%= link_to "Hiking journal", root_path %> </nav> 1 2 3 4 5 24.1
52. Hide the nav bar <% unless turbo_native_app? %> <% end %> <%# app/views/shared/_navbar.html.erb %> 1 2 3 <nav class="navbar"> 4 <%= link_to "Hiking journal", root_path %> 5 </nav> 6 7 25
53. turbo_native_app? in views 26
54. turbo_native_app? in views Conditional logic is harder to maintain 26.1
55. turbo_native_app? in views Conditional logic is harder to maintain Can break Russian doll caching 26.2
56. Turbo Native styles 27
57. Turbo Native styles <%# app/views/shared/_navbar.html.erb %> <nav class="navbar"> <%= link_to "Home", root_path %> </nav> 1 2 3 4 5 27.1
58. Turbo Native styles 28
59. Turbo Native styles <nav class="navbar turbo-native-hidden"> <%# app/views/shared/_navbar.html.erb %> 1 2 3 <%= link_to "Home", root_path %> 4 </nav> 5 28.1
60. Turbo Native styles <nav class="navbar turbo-native-hidden"> <%# app/views/shared/_navbar.html.erb %> 1 2 3 <%= link_to "Home", root_path %> 4 </nav> 5 /* app/assets/stylesheets/native.css */ .turbo-native-hidden { display: hidden !important; } 1 2 3 4 5 29
61. Turbo Native styles <nav class="navbar turbo-native-hidden"> <%# app/views/shared/_navbar.html.erb %> 1 2 3 <%= link_to "Home", root_path %> 4 </nav> 5 /* app/assets/stylesheets/native.css */ .turbo-native-hidden { display: hidden !important; } 1 2 3 4 5 <%# app/views/layouts/application.html.erb %> <head> <%= stylesheet_include_tag "application" %> </head> 1 2 3 4 5 30
62. Turbo Native styles <nav class="navbar turbo-native-hidden"> <%# app/views/shared/_navbar.html.erb %> 1 2 3 <%= link_to "Home", root_path %> 4 </nav> 5 /* app/assets/stylesheets/native.css */ .turbo-native-hidden { display: hidden !important; } 1 2 3 4 5 <%= stylesheet_include_tag "native" if turbo_native_app? %> <%# app/views/layouts/application.html.erb %> 1 2 <head> 3 <%= stylesheet_include_tag "application" %> 4 5 </head> 6 31
65. Turbo Native specific content 33
66. Turbo Native specific content configured entirely via Rails! 33.1
67. Native titles
69. Native titles Set automatically from <title>
71. Native titles <%# app/views/layouts/application.html.erb %> <head> <title>Hiking Journal</title> </head> 1 2 3 4 5 36
72. Native titles <title><%= content_for(:title) || "Hiking Journal" %></title> <%# app/views/layouts/application.html.erb %> 1 2 <head> 3 4 </head> 5 37
73. Native titles <title><%= content_for(:title) || "Hiking Journal" %></title> <%# app/views/layouts/application.html.erb %> 1 2 <head> 3 4 </head> 5 <%# app/views/hikes/show.html.erb %> <h1><%= @hike.name %></h1> 1 2 3 38
74. Native titles <title><%= content_for(:title) || "Hiking Journal" %></title> <%# app/views/layouts/application.html.erb %> 1 2 <head> 3 4 </head> 5 <% content_for :title, @hike.name %> <%# app/views/hikes/show.html.erb %> 1 2 3 4 <h1><%= @hike.name %></h1> 5 39
75. Native titles <title><%= content_for(:title) || "Hiking Journal" %></title> <%# app/views/layouts/application.html.erb %> 1 2 <head> 3 4 </head> 5 <h1 class="turbo-native-hidden"><%= @hike.name %></h1> <%# app/views/hikes/show.html.erb %> 1 2 <% content_for :title, @hike.name %> 3 4 5 40
76. Native titles
78. Native titles 42
79. Native titles with only Ruby! 42.1
80. Native image uploads 43
81. Native image uploads
83. Native image uploads
85. Native image uploads 46
86. Native image uploads Step 1: 46.1
87. Native image uploads Step 1: <%= form.file_field :image %> 46.2
88. Native image uploads Step 1: Step 2: <%= form.file_field :image %> 47
89. Native image uploads Step 1: Step 2: <%= form.file_field :image %> …there is no step 2. 47.1
92. Logic stays on the server. 50
93. Logic stays on the server. You keep writing Ruby. 50.1
94. Advanced Turbo Native Native screens 51
99. URL routing 56
100. URL routing /hikes/:hike_id/map → native map 56.1
101. URL routing /hikes/:hike_id/map → native map Need to remain flexible 56.2
102. URL routing /hikes/:hike_id/map → native map Need to remain flexible Enter path configuration 56.3
103. Path configuration 57
104. Path configuration Server-hosted JSON file to remotely configure app 57.1
105. Path configuration Server-hosted JSON file to remotely configure app { "settings": {}, "rules": [] } 1 2 3 4 57.2
106. Path configuration Server-hosted JSON file to remotely configure app { "patterns": ["/hikes/[0-9]+/map"], "properties": { "controller": "map" } } { 1 "settings": {}, 2 "rules": [ 3 4 5 6 7 8 9 ] 10 } 11 58
107. Path configuration Server-hosted JSON file to remotely configure app { "patterns": ["/hikes/[0-9]+/map"], "properties": { "controller": "map" } } { 1 "settings": {}, 2 "rules": [ 3 4 5 6 7 8 9 ] 10 } 11 "patterns": ["/hikes/[0-9]+/map"], { 1 "settings": {}, 2 "rules": [ 3 { 4 5 "properties": { 6 "controller": "map" 7 } 8 } 9 ] 10 } 11 58.1
108. Path configuration Server-hosted JSON file to remotely configure app { "patterns": ["/hikes/[0-9]+/map"], "properties": { "controller": "map" } } { 1 "settings": {}, 2 "rules": [ 3 4 5 6 7 8 9 ] 10 } 11 "patterns": ["/hikes/[0-9]+/map"], { 1 "settings": {}, 2 "rules": [ 3 { 4 5 "properties": { 6 "controller": "map" 7 } 8 } 9 ] 10 } 11 "properties": { "controller": "map" } { 1 "settings": {}, 2 "rules": [ 3 { 4 "patterns": ["/hikes/[0-9]+/map"], 5 6 7 8 } 9 ] 10 } 11 58.2
109. Path configuration Server-hosted JSON file to remotely configure app "properties": { "controller": "map" } { 1 "settings": {}, 2 "rules": [ 3 { 4 "patterns": ["/hikes/[0-9]+/map"], 5 6 7 8 } 9 ] 10 } 11 struct VisitProposal { let url: URL let options: VisitOptions let properties: PathProperties } 1 2 3 4 5 59
110. Path configuration Server-hosted JSON file to remotely configure app "properties": { "controller": "map" } { 1 "settings": {}, 2 "rules": [ 3 { 4 "patterns": ["/hikes/[0-9]+/map"], 5 6 7 8 } 9 ] 10 } 11 let properties: [String: AnyHashable] struct VisitProposal { 1 let url: URL 2 let options: VisitOptions 3 4 } 5 60
111. Path configuration # config/routes.rb Rails.application.routes.draw do get "/configurations/ios-v1", to: "configurations#ios_v1" end 1 2 3 4 5 61
112. Path configuration # app/controllers/configurations/ios_controller.rb class ConfigurationsController < ApplicationController def ios_v1 render json: { settings: {}, rules: [ { patterns: ["/hikes/[0-9]+/map"], properties: { controller: "map" } } ] } end end 62
113. Path configuration let rootURL URL(string: "http://localhost:3000") let session Session() 1 = ! 2 3 = 63
114. Path configuration session.pathConfiguration PathConfiguration(sources: []) let rootURL URL(string: "http://localhost:3000") 1 = ! 2 let session Session() 3 = 4 = 64
115. Path configuration .server(rootURL.appending(path: "configurations/ios-v1.json")) let rootURL URL(string: "http://localhost:3000") 1 = ! 2 let session Session() 3 = session.pathConfiguration PathConfiguration(sources: [ 4 = 5 ]) 6 65
116. Path configuration .server(rootURL.appending(path: "configurations/ios-v1.json")) let rootURL URL(string: "http://localhost:3000") 1 = ! 2 let session Session() 3 = session.pathConfiguration PathConfiguration(sources: [ 4 = 5 ]) 6 Rails.application.routes.draw do get "/configurations/ios-v1", to: "configurations#ios_v1" end 66
117. Route the screen func visit(proposal: VisitProposal) { let visitable VisitableViewController(url: proposal.url) navigationController.pushViewController(visitable) session.visit(visitable, options: proposal.options) } 1 2 = 3 4 5 67
118. Route the screen if /* ... */ { } else { } func visit(proposal: VisitProposal) { 1 2 3 4 let visitable VisitableViewController(url: proposal.url) 5 = navigationController.pushViewController(visitable) 6 session.visit(visitable, options: proposal.options) 7 8 } 9 68
119. Route the screen if proposal.properties["controller"] as? String "map" { func visit(proposal: VisitProposal) { 1 2 == 3 } else { 4 let visitable VisitableViewController(url: proposal.url) 5 = navigationController.pushViewController(visitable) 6 session.visit(visitable, options: proposal.options) 7 } 8 } 9 69
120. Route the screen if proposal.properties["controller"] as? String "map" { func visit(proposal: VisitProposal) { 1 2 == 3 } else { 4 let visitable VisitableViewController(url: proposal.url) 5 = navigationController.pushViewController(visitable) 6 session.visit(visitable, options: proposal.options) 7 } 8 } 9 "properties": { "controller": "map" } { 1 "patterns": ["/hikes/[0-9]+/map"], 2 3 4 5 } 6 70
121. Route the screen let controller MapViewController(url: proposal.url) navigationController.pushViewController(controller) func visit(proposal: VisitProposal) { 1 if proposal.properties["controller"] as? String "map" { 2 == 3 = 4 } else { 5 let visitable VisitableViewController(url: proposal.url) 6 = navigationController.pushViewController(visitable) 7 session.visit(visitable, options: proposal.options) 8 } 9 } 10 71
122. Path configuration 72
123. Path configuration Keeps logic on the server 72.1
124. Path configuration Keeps logic on the server Disconnects from App Store releases 72.2
125. Path configuration Keeps logic on the server Disconnects from App Store releases Grants backwards compatibility 72.3
126. Looking ahead What's next for Turbo Native 73
127. Strada 74
128. Strada Native components 74.1
129. Strada Native components Bridges web 㲗 native gap 74.2
130. Strada Native components Bridges web 㲗 native gap Powered by your HTML 74.3
134. Turbo Navigator 78
135. Turbo Navigator Handles 15+ navigation flows 78.1
137. Turbo Navigator Handles 15+ navigation flows 80
138. Turbo Navigator Handles 15+ navigation flows Removes 100+ lines of boilerplate 80.1
139. Turbo Navigator Handles 15+ navigation flows Removes 100+ lines of boilerplate Upstreaming into turbo-ios soon! 80.2
140. Turbo Navigator Handles 15+ navigation flows Removes 100+ lines of boilerplate Upstreaming into turbo-ios soon! github.com/joemasilotti/TurboNavigator 80.3
141. Your Turbo Native app 81
142. Your Turbo Native app I help folks launch Turbo Native apps. 81.1
143. Your Turbo Native app I help folks launch Turbo Native apps. And I’d love to do the same for you. 81.2
144. Your Turbo Native app I help folks launch Turbo Native apps. And I’d love to do the same for you. Say hi and see if Turbo Native is right for you. 81.3
145. Joe Masilotti 82
146. Joe Masilotti Email me a question – joe@masilotti.com 82.1
147. Joe Masilotti Email me a question – joe@masilotti.com Learn more Turbo Native – Masilotti.com 82.2
148. Joe Masilotti Email me a question – joe@masilotti.com Learn more Turbo Native – Masilotti.com Thank you! 82.3