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