Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Dungeons and Dragons and Rails
Slide 8
Slide 8 text
Our Goal: Build a D&D
character sheet
Using Turbo
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Basic Bio
Rails Classic
Slide 12
Slide 12 text
Basic character show page
Classic Rails CRUD
# app/views/characters/show.html.erb
<%= @character.name %>'s Character Sheet
Bio
- Level
- <%= @character.level %>
- Race
- <%= @character.race %>
<%= @character.bio %>
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Bonus speed with Turbo Drive
Not the point of this talk
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Make a Dexterity Saving Throw
Slide 17
Slide 17 text
???
Slide 18
Slide 18 text
D&D Abilities
Slide 19
Slide 19 text
Strength
bodily power, athletic training, and the extend you can
exert raw physical force
Slide 20
Slide 20 text
Dexterity
agility, reflexes, and balance
Slide 21
Slide 21 text
Constitution
health, stamina, and vital force
Slide 22
Slide 22 text
Intelligence
mental acuity, accuracy of recall, and the ability to
reason
Slide 23
Slide 23 text
Wisdom
how attuned you are to the world around you,
perceptiveness, and intuition
Slide 24
Slide 24 text
Charisma
ability to interact effectively with others, confidence,
eloquence, can represent a charming or commanding
personality
Slide 25
Slide 25 text
6 D&D Core Abilities
Range: 1-20
STRENGTH DEXTERITY CONSTITUTION
INTELLIGENCE WISDOM CHARISMA
Slide 26
Slide 26 text
Before we roll dice, let's represent this on a character sheet
Slide 27
Slide 27 text
Time to bring in Turbo!!!
Slide 28
Slide 28 text
Pretend Turbo doesn't exist
SAGEFIRE'S ADVICE
Slide 29
Slide 29 text
Think RESTfully
SAGEFIRE'S ADVICE
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
CLASSIC RAILS
Add Abilities Section
# app/views/characters/show.html.erb
Abilities
- <%= render @character.abilities %>
Slide 32
Slide 32 text
CLASSIC RAILS
Ability Partial
# app/views/abilities/_ability.html.erb
<%= ability.name %>
-
<%= ability.value %>
<%= link_to "Edit", [:edit, ability.character, ability] %>
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
What if you want to edit inline?
Slide 37
Slide 37 text
Pages in pages with frames
Slide 38
Slide 38 text
Ability Partial
Classic Rails
# app/views/abilities/_ability.html.erb
<%= turbo_frame_tag dom_id(ability) do %>
<%= ability.name %>
-
<%= ability.value %>
<%= link_to "Edit", [:edit, ability.character, ability] %>
Slide 39
Slide 39 text
Editing an attribute
Now with Turbo
# app/views/abilities/edit.html.erb
Edit <%= @ability.name %> for <%= @character.name %>
<%= @ability.description %>
<%= turbo_frame_tag dom_id(@ability) do %> # form in here <% end %>Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
What happens when
you submit the form?
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
So how does one do a
dexterity saving throw?
Slide 46
Slide 46 text
Roll 20-sided die (d20) and add modifier
Slide 47
Slide 47 text
(skill - 10) / 2
MODIFIER FORMULA
Slide 48
Slide 48 text
Modifiers Based on Ability Scores
ABILITY SCORE
MODIFIER
Skill modifier
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
-6
-4
-2
0
2
4
6
0
AVERAGE
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Glittersense has a 14 DEX (+2)
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Adding Weapons
Controlling other frames
Slide 55
Slide 55 text
Weapons Index
Extract a partial
# app/views/weapons/index.html.erb
Weapons
<%= render "weapons/weapons_table", weapons: @weapons %>Slide 56
Slide 56 text
Add Weapons to Character Sheet
Reuse a partial
# app/views/characters/show.html.erb
Weapons
<%= render "weapons/weapons_table", weapons: @character.weapons %>Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Layer in some Turbo
Slide 59
Slide 59 text
Weapons: Dynamic List
Single frame
# app/views/characters/show.html.erb
<%= turbo_frame_tag :weapons_table do %>
<%= render "weapons/weapons_table", weapons: @character.weapons %>
<%= render "weapons/form", character: @character, weapon: Weapon.new %>
<% end %>
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Controlling other frames
Slide 63
Slide 63 text
Weapons: Dynamic List
Two frames
# app/views/characters/show.html.erb
<%= turbo_frame_tag :weapons_table do %>
<%= render "weapons/weapons_table", weapons: @character.weapons %>
<% end %>
<%= turbo_frame_tag :weapons_form, target: :weapons_table do %>
<%= render "weapons/form", character: @character, weapon: Weapon.new %>
<% end %>
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
What's an athletics check?
Slide 68
Slide 68 text
6 D&D Core Abilities
STRENGTH DEXTERITY CONSTITUTION
INTELLIGENCE WISDOM CHARISMA
Slide 69
Slide 69 text
Skills
These depend on one of the core abilities
STRENGTH
Athletics
DEXTERITY
Acrobatics
Sleight of Hand
Stealth
CONSTITUTION
INTELLIGENCE
Arcana
History
Investigation
Nature
Religion
WISDOM
Animal Handling
Insight
Medicine
Perception
Survival
CHARISMA
Deception
Intimidation
Performance
Persuasion
Slide 70
Slide 70 text
CLASSIC RAILS
Add Skills Section
# app/views/characters/show.html.erb
Skills
- <%= render @character.skills %>
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Updates that modify
multiple frames
Slide 74
Slide 74 text
Controlling the parent frame
Slide 75
Slide 75 text
Two Turbo facts
YOU CAN NEST FRAMES WITHIN FRAMES
YOU CAN TARGET ANY OTHER FRAME
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Draw Boxes
Stop coding and start drawing!
SAGEFIRE'S ADVICE
Slide 78
Slide 78 text
Works best when frames are
related or sit next to each other
Slide 79
Slide 79 text
At an extreme, target the
whole page with _top
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
We get to try again on our
turn (instead of attacking)
Slide 82
Slide 82 text
Try again with our character sheet
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Custom mode with turbo-stream
Slide 85
Slide 85 text
Think of this as "custom mode"
not "streaming updates"
Slide 86
Slide 86 text
Controller rendering turbo stream
# app/controllers/abilities_controller.rb
def update
# actually update the ability
respond_to do |response|
response.turbo_stream
end
end
Slide 87
Slide 87 text
Turbo Stream template
Replace both ability and skills
# app/views/abilities/update.turbo_stream.erb
<%= turbo_stream.replace dom_id(@ability), @ability %>
<% @ability.skills.each do |skill| %>
<%= turbo_stream.replace dom_id(skill), skill %>
<% end %>
Slide 88
Slide 88 text
Use dom_id to ensure consistent ids
SAGEFIRE'S ADVICE
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
What if JS is disabled?
Progressive Enhancement
Slide 92
Slide 92 text
Controller rendering turbo stream
# app/controllers/abilities_controller.rb
def update
# actually update the ability
respond_to do |response|
response.html { redirect_to [@character, @ability] }
response.turbo_stream
end
end
Slide 93
Slide 93 text
This kind of slicing makes
you mobile-ready
Slide 94
Slide 94 text
The fight is getting to be too much!
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Sharing with others
with ActionCable
Slide 97
Slide 97 text
ActionCable
Broadcasting stream in controller
# app/controllers/abilities_controller.rb
def update
# actually update the ability
Turbo::StreamsChannel.broadcast_render_to(
@character,
template: "abilities/update",
locals: {ability: @ability}
)
# respond
end
Slide 98
Slide 98 text
ActionCable
Subscribe to updates in view
# app/views/characters/show.html.erb
<%= turbo_stream_from @character %>
Slide 99
Slide 99 text
No JavaScript Required!
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Together we could take
on the bandit chieftain
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
What Turbo can do
EMBED OTHER FRAGMENTS
WITH FRAMES
FRAMES CAN TARGET
OTHER FRAMES
CUSTOM MODIFY THE DOM
WITH TURBO-STREAM
SYNCHRONIZE CHANGES
WITH ACTION CABLE
Optional
Slide 105
Slide 105 text
Tips for working with Turbo
Tips from Sagefire
PRETEND TURBO
DOESN'T EXIST
EMPHASIZE REST LEAN ON DOM_ID
DRAW BOXES
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
Joël Quenneville
PRINCIPAL DEVELOPER
thoughtbot
CO-HOST
bikeshed.fm
@JOELQUEN
X
JOËL QUENNEVILLE