00:00:00.040
and today the talk is going to be about Hotwire which is the new rails technology that's been around for a while now uh that's about uh automating
00:00:07.000
a lot of uh server side rendering work in ruvy as well so uh I'm going to be
00:00:12.840
presenting Helmer the presenter today uh so he's a senior software developer with over nine years of experience in full
00:00:18.720
stack web development he has a bachelor's degree in computer science uh he has a comprehensive experience gained
00:00:25.760
from full-time and freelance roles uh which equipped him uh with a deep
00:00:30.840
understanding for various Market Frameworks like rails and Lille which are his favorites he also co-founded a
00:00:38.200
food delivery uh startup in Peru his hobbies include biking traveling riding
00:00:43.640
and learning new languages like Italian and Portuguese so without further Ado I'll present to you hmer yeah thank you
00:00:54.879
Andre thank you to the Ruby Community for coming here uh to the Montreal my
00:01:00.280
presentation uh today we are going to talk about Hardware in a very brief way
00:01:05.760
so this T Target I would say to beginners and advanced uh people developers and yeah we try to explain it
00:01:13.360
as clear as possible and I'm going to try to cover the different things and you would see some cod demonstration as
00:01:19.520
well along with the slides and yeah then at the end we we will I will answer any
00:01:26.680
of your question that you might have uh and um okay so since the first slide
00:01:33.119
probably you know howw was a creation from the also from the creator of race
00:01:39.040
uh and the goal is to avoid using JavaScript and to having this bundle
00:01:44.719
steps uh into the pipeline something that it's really useful especially if
00:01:50.840
you are creating a new project and also some people will discourage we say uh
00:01:56.600
but that anyways in the future you we need to learn JavaScript would say it's okay but you have the tools you have
00:02:04.479
everything from scratch why you don't follow the framework conventions I think
00:02:09.759
that in my opinion ra and also L try to follow that they would try to force you
00:02:14.840
to those things so you won't uh spend or or waste any time uh and you will focus
00:02:21.640
on creating your product and creating features so yeah to start a little bit
00:02:26.959
about me my profile and also told talk to you so we engineer with nine years of
00:02:32.440
exp and plus uh mainly my three main language Spanish English and trying to learn French as well uh backhand
00:02:39.480
developer uh I work with do language PHP Pon know and a lot a lot of AWS and as a
00:02:46.480
front developer I even work with the with the three main Frameworks re angular 2 and plus versions and vs and
00:02:53.560
also react native um fun fact uh many people ask me
00:02:59.480
how do can you understand some computer engineering things and this is also because when I was n year nine years old
00:03:06.680
I got my first computer I think that that helped me to understand how a computer uh behaves I would say for for
00:03:13.840
any kind of user and also former Technical cunder startup in Peru we try
00:03:19.720
it uh two collect and me uh we tried to be the market but probably you know what
00:03:26.239
happened at 2020 so we needed to close operations uh and then after that I I came here to Canada with all the
00:03:32.519
knowledge that I got from founded for that startup H next one goals of this
00:03:39.280
presentation learn how H white turbo Works uh especially these three main topics dry frames and streams and number
00:03:47.799
two avoid using JavaScript probably Andy likes that uh until you really need it
00:03:53.680
uh until it's really necessary and so then we will see we
00:04:00.079
have for Hotwire uh the three main components are
00:04:05.200
turbo stimulus estata today I only covering turbo covering stimulus and
00:04:11.200
Strada it's out of the scope and Al and also because you can use the the power
00:04:17.680
of hot wire in any other project as well but that will require using JavaScript
00:04:23.080
but with turbo you can use using a gem uh follow the the Ruby weight I would
00:04:28.639
say right so here we can see the turbo component Turbo Drive uh in theory what
00:04:36.120
it does accelerates links and form submissions by negating the need for full page reloads and this content that
00:04:43.639
you can read over there I took them from the page of H work and I would try to
00:04:49.440
comess it in a single sentence then we will see to ref frames which is decompos page into independent contest which is
00:04:56.440
com navigation and also can be lazily load and also we have t strings delivery page
00:05:03.000
changes over web socket I think that depending on your need you might or
00:05:08.039
might not require or in respon to for submission use HTML and a set of curlik actions and
00:05:16.639
also this is out of the scope of this slid it's turbo native which in theory
00:05:22.039
with that you can build also your IOS and Android applications are very
00:05:27.280
similar uh what it react does and you can read this it creates
00:05:33.280
simless transition between web and Native sections and now let's see about Turbo
00:05:39.360
Drive which in theory replace HTM elements with a current page with a corresponding element from the response
00:05:46.280
um then we will see uh following demo looking at the behavior of the code uh
00:05:53.240
you will see uh this is some sort of similar of uh git uh diff
00:06:00.520
and this is because in the first render uh it will paint what is in red and then
00:06:05.919
B then when you receive the content back from the server it's going to try to
00:06:11.160
replace that content with the things coming in that response uh if it's a
00:06:16.240
little bit complicated to understand it you will see it more clearly in the demo H so the green content is the new thing
00:06:23.840
coming in the request so it doesn't come the full HTML response it only comes the things that it needs to render
00:06:30.880
um yeah uh here we have the trio try actions as you can see as JavaScript uh
00:06:38.520
also you can in your JavaScript files do the same actions as you will do with the
00:06:45.319
rubby jam and for this one we have navigate we have replace and also
00:06:51.919
restore but here it's very clear that in theory you shouldn't be using the the
00:06:57.360
restor action because it's for internal use and then you want to write it in
00:07:04.280
the in your HTML in your IRB files uh
00:07:09.840
this is the way to do it you can read it over here uh you have a special property
00:07:15.000
that you can use dato action and then you specify the action in the same way
00:07:21.080
as you did it before either you can use each of these ways so you follow the JavaScript way you want to complicate
00:07:28.720
yourself or you want to follow the HTML way
00:07:33.919
right all right Turbo Drive reload assets when they change um one thing
00:07:39.639
that we can do is we can add data turbo track uh reload the link and script TX
00:07:46.759
and once you do you do that by default is going to um the your whole application is going
00:07:54.319
to behave like that it's going to try to pre-render anything the the content when
00:07:59.680
you start for example hovering any link or when you want to visit any other link
00:08:05.159
it will do a pre-render uh same is the previous slide you have the two ways you have the HTML
00:08:13.720
wave and which is a little bit complicated because in theory you should take care of specify the unique has I
00:08:21.479
won't recommend that so try to follow over with the right way and with the help of the gem as well in theory behind
00:08:29.080
the SC every time that you create a new compilation of your JavaScript assets it's going to generate a new cash so you
00:08:35.760
don't need to worry about it um now uh just briefly talking about
00:08:42.080
morphing this is how you can configure pay refreshes using turbo drive you can
00:08:47.640
specify that all the refreshes will behave like this and for example for this one it's the content it will morph
00:08:54.680
which it will say like uh you saw it in some slides before
00:09:00.120
uh the red versus the Green content it would try to transform everything that
00:09:05.360
you have into the new thing similar in some sort of similar what react is doing
00:09:10.680
we try to compare what do you have your HTML and then what it can transform and of course you have the two
00:09:18.519
different uh behaviors that you can specify for the content uh property U
00:09:25.079
for that meta HTML T you have replace which is by default which is replace the
00:09:30.560
entire body of the page or you can use more which only replace the elements that have
00:09:36.560
changed uh next one St preservation this is pretty useful if let's say you are
00:09:41.920
you have a Blog and read it in rails and then you have a lot of content and if
00:09:47.720
you want to go back and preser where I was looking when I was reading a really long pause you can also send preserve as
00:09:57.240
value of the property content um next one you can exclude some HTML
00:10:05.160
elements out of morphine and for that you need to use the property data turbo
00:10:10.560
permanent as well and one example of Turbo dve uh
00:10:16.040
this is a simple form code as you might see you don't in theory if you are using
00:10:21.320
Ruby 7 if I am right uh new project will come with this by default you probably
00:10:28.480
need to do a couple couple of extra steps but when I look at the G file uh it was hot wire was already installed So
00:10:37.040
in theory for using try you shouldn't be configuring a lot of things this comes
00:10:42.120
by default and that's what you will see you write this in the right in the race
00:10:48.279
way uh it's going to behave uh it's going to try to use dry as
00:10:54.920
possible uh this is a little bit of configuration uh probably you remember in the past we
00:11:02.040
have the progress bar when you try to to loog a new page it will show a bar and
00:11:08.240
onto the top and for that with uh with turbo and
00:11:13.639
dry uh we are going to miss that uh that feature if you want to add it back for
00:11:20.480
example uh you can set a delay uh to zero as you might see this is in in your
00:11:27.200
main Javascript file uh when you create a new project you will always have at least
00:11:33.079
one and for then then you can see uh this code it's unrated to this
00:11:41.160
this is only for configure the progress bar so you can start to see it this is unrelated and this code is another way
00:11:49.120
that you can see how you can use turbo but from ja from JavaScript from inas
00:11:54.720
files as well and you can see for example that you can you click a
00:12:00.360
specific button let's say then you can use turbo to pre-render that content as
00:12:06.600
well but again try to avoid using JavaScript this is only for demonstration purposes you know that
00:12:14.040
behind the scenes everything it's already configured um so let's yeah
00:12:20.920
yeah can you enter into full screen mode maybe it would Zoom things in a bit the code is a bit small
00:12:27.639
to uh let me see what if if
00:12:36.519
I it's because I can see it over
00:12:42.240
here let me check Zoom it any further it's
00:12:47.399
okay yeah because I am also trying to increment the zoom but it doesn't seem like uh it is working
00:13:06.480
you use that uh it seems like the slid has no
00:13:12.800
feature to to increase the the zoom as well
00:13:30.399
does that help a little bit
00:13:39.800
yeah yeah we still have some seats uh over here on the
00:13:45.519
top and then let me get back to my main
00:13:52.519
slides okay so if you you like to use the turbo gem then in such case what you
00:14:01.079
need to do is do first what to work you need to put a for for the head so it's
00:14:07.480
going to inject hold over there and then you can start using for example
00:14:14.079
some some pre-made HTML content uh for that you you will
00:14:21.880
see that we have a lot of already pre-made functions that we can use for
00:14:27.839
example you can see replace and then the St reset the same things that we saw as
00:14:35.240
HTML then it's going be premade also with pure Ruby code and that's a cool
00:14:42.399
thing so you don't need to Cod these things by yourself so moving to the next one uh
00:14:49.639
then testing in Turbo Drive uh I know that sometimes in different Ruby meetings I try to ask about testing and
00:14:56.279
we will see that in theory everything should work by default this is it's not
00:15:10.000
second yes there okay so you will see that these are normal Ruby test and in
00:15:16.560
theory you will see then in my application I will try to do the normal
00:15:21.600
things get a newl and ier that the first one was s and then for example try to
00:15:29.920
test if using my form I can create let's say I am trying to create some job job C
00:15:36.839
and then we can fill the content and then after that now once you created a
00:15:42.920
new job then you will have a number of total jobs plus one and then Asser that
00:15:49.639
I was redirected and then you can do similar test by the way I'm using for this one I think the frame that by defa
00:15:56.880
with red which has the many tests if I am right and
00:16:03.959
now did you go back to the previous screen the one that had all the helpers this one the previous screen
00:16:12.240
it's not loading again I think that I break somehow the connection Let me
00:16:17.279
refresh it yeah this one this one yes sorry could you explain again what
00:16:22.720
each one of those helpers does yeah with this helper you
00:16:28.480
can are creating like in the same way your HTML content so rather than writing
00:16:34.040
raw HTML and not the property by yourself you can put the method and
00:16:39.759
let's say you write normal Rubik Cod so then you write do and then the end and
00:16:45.759
then it will put uh ined HTML content inside or rubby code as well so this is
00:16:52.000
some sort of wrapper around HTML content got it all of them expect be blocks
00:16:57.880
basically yeah those are Ruby blocks inside your earb yeah yeah yeah that's
00:17:04.559
totally right so all right so let's see the demo I'm
00:17:10.839
going to share it quickly uh this one oh this looks better
00:17:18.079
okay so we will see the first link uh we will beit how we can view a list of jobs
00:17:24.839
using turbo Race drive and and now you might see this is
00:17:30.320
a full square but in theory everything of this should work with uh with uh triple
00:17:38.480
Dy I'm going to decrease a little bit just for demo purposes and
00:17:47.320
then um I think that I forget to add some tax uh let's
00:17:54.000
see probably because
00:17:59.679
um just give me a second name t
00:18:12.360
the future create new job let's say you are looking for a senior developer
00:18:17.720
JavaScript and the job JavaScript whole point
00:18:26.200
stoping yeah yeah let's see uh well let's see over there uh status the job
00:18:32.000
let's say it's open and with that probably you saw a little bar on the top
00:18:37.960
that's with the with the JavaScript code that I edited as
00:18:43.000
well and also something that I want to
00:18:48.080
demo to you let me see if I can show
00:18:54.559
it okay it's too small
00:18:59.919
maybe Comm on plus plus plus plus plus think that's enough when we hover of any
00:19:07.320
of these links you will see it's trying to get uh especially a an xhr request uh
00:19:16.240
this is something that's going to the backend and even if I didn't click uh
00:19:21.640
this link it's going to try to pre-render it and this is done by drive so in theory when you will go back to
00:19:28.919
this one you already have the content pre-rendered uh in your browser so for
00:19:34.640
example if we click here in edit uh we will see that the request was pretty suful and you are really calling the the
00:19:43.679
edit URL and as a preview you can see this is a simple form without
00:19:50.480
Styles and this is because it's expecting to pre-render that content that also means she probably your link
00:19:59.159
that you want to visit is broken by somehow by your backend code uh those
00:20:04.600
requests are going to fade as way and that happening while I was trying to develop this
00:20:09.880
demonstration and if we we go to jobs then we will see the list of jobs without any kind of styling but if we
00:20:16.760
click it the the navigation is going to be uh instantly got some questions you just
00:20:24.000
want to catch yeah I was just wondering does it C cash at all like it seems like it's
00:20:30.360
preloading it every single time you buffer over like is it like like
00:20:36.280
pre-rendering once and then caching it so that you're not like reloading it every single time does it do any caching
00:20:42.720
like that uh I am not 100% sure and confident to respond that answer because
00:20:49.640
what I see when every time that I try to hover this link it's doing a new call so
00:20:55.480
probably whe when you click this one it would try and go to to what your browser
00:21:01.559
is stored as well otherwise it it won't make any sense why is trying to call that link so probably storing let's say
00:21:08.679
in the local stage or somehow to know who to send back that content and so
00:21:13.760
it's not it's not going to do another backend call in the future uh because
00:21:19.039
it's already rendered in the browser yeah
00:21:25.159
Auntie yeah just I was just looking at
00:21:45.039
thing because since it's pre-rendering a lot of things before even click on it um I know this is a very simplified version
00:21:52.360
but like let's see we said that was a lot more complicated um wouldn't that eventually like have some slow downs
00:22:00.240
like if you have a lot of users who are want it at the same time you know even if they're not really interacting with
00:22:05.919
it there actions that's already Tak place on the backround uh your question
00:22:12.360
is if that's going to be complicated once you start growing in your user Bas it's mine so you need to be very
00:22:21.440
careful how about which URLs are going to be pre-render that's why you have
00:22:27.919
their r Ruby helper from the gy so you can avoid uh doing this prefects as well
00:22:34.480
and this is because yeah because you could have let's say a a report URL right for report you need
00:22:41.960
to do a lot of joints a lot to different things um prefetching that is going to be complicated to do it but also at the
00:22:49.159
same time if you have a huge you user based probably you shouldn't be using
00:22:54.600
that unless uh you know that uh report you is going to be used let's say for 10
00:23:00.480
users and even 100 user it seems pretty low to me uh but the benefit is that
00:23:06.600
even if let's say any person is trying to go to that heavy URL it's going to be prefetched in the background so when
00:23:13.559
when they click that URL it's going to be already uh like um pre-rendered as
00:23:19.720
well so that will speed up your your web page as well uh can I add another
00:23:25.760
question yeah all right so um so sensor saying if you're really big this is
00:23:31.120
probably not something you should be using um because the idea was like turbo
00:23:36.159
this is going to be great to get you started but then if you're looking to scale
00:23:42.840
um then um because then at what point you have
00:23:48.080
to decide when you have to transition to something else you know so you don't need to change the technology or
00:23:54.720
anything you can turn off the prefet okay yeah but uh if I can answer this is not
00:24:01.799
a 100% answer depending on the case and most of your uh heavy heavy pages I
00:24:10.600
would say that takes time to answer they are not uh they are slow not
00:24:17.799
because the language they are slow because probably your queries needs to be optimized so yeah it's going to be a
00:24:23.760
query problem and you rather than use the um the action record orm in the you
00:24:31.159
should try to do an optimized query and prefetch it or otherwise if it's really
00:24:36.640
really use uh for example in uh where I work what we do is we put all the
00:24:42.640
content into the r cash right so we avoid to have this problem so it's going
00:24:48.039
to call first the cach we have content that is not change it so often then pre-render that content otherwise at
00:24:55.240
that time recently do a database call because database call they are going to be always expensive uh that's but of
00:25:02.080
course that doesn't apply for startups because they probably they're looking to create more features at that time uh so
00:25:09.039
yeah that were really good question and now I going to get back to my slides uh
00:25:16.120
so then I come back to home I'm going to I will leave it open and let's say okay
00:25:24.640
so yeah slides are still working give me one second
00:25:31.640
15 16 17 I have a question yep you mind
00:25:36.919
demo go back to the demo and demo a few more clicks just to see it very fast I
00:25:42.559
just want to see it again yep think I only saw one click I wanted to see more clicks if possible yeah for sure demand
00:25:49.760
more clicks yeah so you can see by every click let's see I'm am trying to hover
00:25:56.679
look for every hover is trying to do a network call and then we click it and it's pretty fast now then it did this
00:26:04.240
job then I cancel I go back but it it was always try to pre-render that page
00:26:10.200
as well and my understanding is that with turbo when you click it doesn't refresh the whole page it only does an
00:26:17.399
xhr call it replace the part that changed in the page yeah and then and
00:26:23.120
then you can start using the replace which is we saw it's by default so it's going to try to replace the whole body
00:26:29.720
or you can use more with it's going to do a comparison of the
00:26:43.720
HTML yeah that's what it comes with by default by the gem so that's why my
00:26:48.840
recommendation is always try to use the the gem rather than use Uh custom implementations so to understand
00:26:55.520
basically it's updating the URLs to maintain the browser
00:27:06.279
prods what can make this demo really interesting is if you put a sleep the contr some of the views where like to
00:27:13.760
artificially slow down the rendering of the page because then you would actually see the Improvement Because by the time
00:27:18.919
you recover it would actually take the extra1 second and then you click still
00:27:25.360
right because that's what you're trying to all that to say yeah yeah yeah thank
00:27:30.960
you uh I'm going to put it over this because probably in the future I going to uh release an updated version of this
00:27:38.279
slides they're going to have a fixed URL so you can go back to to that
00:27:52.640
content okay so thank you for the comments and going back to this lights again and now we are
00:27:59.720
going to see turbo frames which is kind of
00:28:04.919
interesting let me go back to my custom
00:28:11.080
slides okay so you can see here an example of a turbo frame what do you need only need an HTML tag called turbo
00:28:19.799
frame and with had a specific ID and then the behavior as well same as dry we
00:28:26.360
have more and we will see what other things we do we have and this is pretty
00:28:31.880
useful because with this you can specify which content specifically from that
00:28:37.120
page can be uh rendered uh let's say for
00:28:44.679
example uh this one uh for basic frames we have like uh we have a simple link
00:28:51.840
and you have we have also a for Action as well and you can using Ruby we will
00:28:57.200
see in the next slide whom you can Target and replace all the content from
00:29:02.880
that turbo frame for example right now you will see you have two elements but depending let's say you use that form
00:29:10.080
and you can set back content that modifies the whole content of Turbo
00:29:15.679
frame and it will update it uh it will make more sense as well when I show the
00:29:22.200
demo and you have also eager loader frame you can specify uh you that you
00:29:28.720
want to preload so in theory the content it doesn't matter so you can put it at
00:29:34.200
empty but when you specify that Source property then it's going to go to using
00:29:40.000
ra and try to prefetch that URL and render all the content inside of the
00:29:45.240
turbo frame and also you can specify that the
00:29:51.240
that this content can be lazy loaded at the same
00:29:56.320
time we have different attributes for that turbo frame HTML T for example uh Source loading
00:30:05.279
loading lazy busy this is managed by turbos so try to avoid using it disable
00:30:11.880
you want to disable the frame navigation complete as well which is an an internal
00:30:17.200
property used by Turbo and aut to scroll also managed by Turbo and those
00:30:23.679
who who are managed by Turbo try to avoid using it and for the other ones you can be pretty flexible for example
00:30:31.200
loading uh for example Source uh you can put whatever thing that you like to to
00:30:37.240
write and now if you are using turbo frame using JavaScript you have all
00:30:42.679
these properties in theory uh so this is just for reference you have the same
00:30:48.880
properties as the HTML if you want to do some Dynamic content specific Uh custom
00:30:55.399
implementation uh you can use it as well for um from JavaScript as we saw as well
00:31:02.200
for Turbo try but with the gem this is going to be way way easier so for this one I triy to
00:31:10.880
put uh the the Ruby tax as you might see in the views and down here is how it's
00:31:18.000
going to be rendered uh let's say for example we are trying to pass a specific
00:31:24.279
path to that sour using the Ruby and then it's going to be rendered like that
00:31:29.399
so at the end is the same for dry you don't need to use HTML custom
00:31:34.600
implementation everything is coming within the gem and also for more complex
00:31:41.399
cases uh let's say for this one for example you can also do it as well and you will have embedded your HTML
00:31:50.240
content um what else uh you can also for passing an IG you can specify any of
00:31:58.120
records ID and you will send it and that uh that Ruby function is going
00:32:04.880
to generate and put an specific ID you might see over here uh combin it for
00:32:10.639
example we are combining here the user ID uh with trade and Ruby is going to do
00:32:16.720
these things behind the scene it's going to generate an unique ID this is useful if let's say you want to create an edit
00:32:25.799
form and yeah that's cool we can also send uh uh shortcuts to the to the RS
00:32:34.639
URLs and you don't need to put the full URL you can take advantage of rails and
00:32:39.760
then it's going to be rendered as well as you would expect and next
00:32:45.679
one for example this is an example using the gem functions uh take a look over here the
00:32:53.159
turbo frame tag and this is um custom
00:32:58.440
thing that I did for the for this specific demo um I know
00:33:06.080
100% sure if this is the right way to put some IDs but this is because I wanted to read that specific HTML ID
00:33:15.919
it's going to be connected to an specific ra controller so this is coming from the job frame controller and it's
00:33:23.279
stored like a constant over there like for example job frame ID and so I will
00:33:28.600
know then which uh which ID is going to be rendering in my Turbo
00:33:36.159
frame and let's see the next one and with HTML you will see you will
00:33:43.399
need to do this things by yourself as you might see it's the turbo frame without
00:33:49.720
using Ruby and even you can use the the same things over here you can embed the
00:33:56.799
IDS and then the functions but that's way for me it's more complicated so try
00:34:02.919
to use all the function. by default from the
00:34:08.280
gy uh next one testing is going to be basically the same uh we will try to do
00:34:16.320
to confirm that we are getting the content and Asser it was a 200 response
00:34:21.760
that's okay and also the the form that we are going to create um
00:34:28.599
it's going to redirect us to another URL and now we have a
00:34:35.520
demo and for this one let me go
00:34:43.320
back we clean and we are going to visit this one the list of jobs but right now
00:34:49.359
using turbo race frame and you might
00:34:54.639
see that this content is already rendered but then I will need to compare
00:35:00.520
it with the current code and one thing that you might notice it's even if I
00:35:05.960
click in create new job this header with a hammer which is a jobs it never
00:35:11.760
disappeared and why is that you will see in the views this is outside of the
00:35:17.200
frame so what is doing the behind the scenes it's only changing the
00:35:22.640
content which it will be shown let me fetch it over here you
00:35:30.520
might see it this tro frame is going to be rendered every time that I try to
00:35:36.680
visit any new page so jobs is never changing uh because it's already out of
00:35:43.359
the turbo frame and only is changing the content inside of the turbo frame so we
00:35:50.760
can click console as well and we will say the same thing uh you might see it this is never disappearing and maybe I
00:35:58.440
can show a little bit of the code I hope it doesn't take so much
00:36:04.200
time give me one
00:36:09.560
second and
00:36:16.640
share in
00:36:35.000
see this is good enough uh this is the job frame controller and you might see I
00:36:41.160
am storing the ID that are going to reuse between my different views in the controller so it's going to be easier
00:36:47.440
for me at least to share those uh between the different views so if we we
00:36:52.640
see the uh this function index and then we
00:36:57.880
go to the view you might see over here that I'm trying to utilize that uh
00:37:04.760
the we have the turbo frame tag also coming from from Ruby and if I hovering with
00:37:12.400
the editor you might see the different implementations already that comes where the editor is able to read that and here
00:37:19.400
is the Hammer with the jobs and then yeah I'm trying to re to
00:37:25.800
render the all the jobs that I have in my database and then if we go to an specific view let me see
00:37:35.359
it think was new yeah for the new view you will see
00:37:42.000
that I don't need to put the whole the whole HTML I only
00:37:47.480
specifying for for this turbo frame tag uh with
00:37:54.599
this ID uh put this content and replace it
00:38:00.800
into the other one into the index one that's why you won't see over here the
00:38:06.000
Hammer with the jobs title because I not touching that already rendered HTML so
00:38:12.880
if we go back to the other view yeah over here so as long between
00:38:19.520
your different views you have the same turbo frame tab with the same ID the
00:38:25.280
different operation are going to try to Place only the HTML inside and within
00:38:31.640
this turbo frame tab is that clear to to specify all
00:38:38.839
right question yep so if you go directly to the new view how do you specify that
00:38:46.000
this is sort of the the base here whatever this the index or whatever that
00:38:52.359
has the the jobs camer on the top how does it
00:38:58.319
yeah so at the end what only you need to do it's you will have you will see this
00:39:04.680
is for example the new action that is going to render the form right and here
00:39:10.960
we can go directly to the view attach or to that function so you only need to
00:39:16.760
specify and you only have to render the turbo frame tag nothing else so what
00:39:22.920
it's going to do Hotwire it's going to understand that you are trying to replace a turbo frame tag in another
00:39:29.640
view as long you only send this uh whole tag is going to replace that content as
00:39:37.440
well so in yeah you are navigating uh also the URL uh is changing as well but
00:39:44.839
it will try to replace that content but it's full page like I'm a recruiter like
00:39:51.520
creates jobs yeah and I've got job new book yeah and you go there know to to
00:39:59.760
render the Hammer with the jobs first or is it going to render just the the form no it will saying the same page you will
00:40:06.839
see it over here okay I don't know if you can see it oh sorry I'm not sharing
00:40:12.319
that um I'm going to change again to the
00:40:18.839
browser so are you able to see the URL so it says your frame right even if
00:40:26.800
I do this is the URL is never changing so basically you are going basically to
00:40:32.800
the first URL available I would say the entry point URL and then the content it
00:40:38.359
will be replaced similar things that let's say if we do in any frontend framework I only try to replace this
00:40:46.079
content and the URL is never changing you might say it so you stay a single URL that you can do this uh interaction
00:40:54.280
as well but behind the scenes if we go back to
00:41:01.160
network then we click back to the list and then you will see it's try to pre- render again this content behind the SC
00:41:08.240
same as a drive as well but only the content with with that turbo Turbo frame
00:41:14.200
is going to be replaced uh this is a similar Behavior to different front and Frameworks uh all right so yeah that was
00:41:21.599
also a very good question as well that I forgot to explain and now we go back we have an
00:41:29.359
alternative implementation with frames and let's say we have a ruby over here
00:41:35.640
and we will see the code over there because this is a little bit more complex so what is doing in this
00:41:45.760
form it's I am sending back once I
00:41:50.800
process this this form from the left where it says new tag and the result it's it's going to be
00:41:57.599
rendered in another turbo frame so if we go to the code let me find this
00:42:06.560
one that you will see over here this is a turbo frame which is also taking
00:42:12.280
content from another view from another URL let's say from the new URL as you might see it over here I
00:42:19.520
think and this one
00:42:28.160
this is another turbo frame and if we compare it uh they they don't have the
00:42:33.839
same uh the same ID this is tax frame form and this is
00:42:40.160
only tax frame so with that in my code I can specify once you process the result
00:42:46.400
of this form please render this Frame uh similar thing that you do in front end
00:42:52.240
framework with the components as well so let's say if we create the tag and it
00:43:04.440
with that but yeah it's it's true like you can do it uh that without changing
00:43:09.480
the URL and we might see the content that is rerender it again it's from the
00:43:15.680
tax one all right and let me go back to the code so
00:43:21.680
you might read what's going on behind the scenes
00:43:35.440
I don't see I don't see Ruby
00:43:43.960
M all right okay for that we are going to go
00:43:56.640
here are the two IDs uh we have the the list the list ID and we also
00:44:05.760
have the form ID for the turbo frame and you might see the code is pretty normal
00:44:11.040
it's like any other uh ruon race application of course what it changed
00:44:16.200
it's also in
00:44:22.920
View and here you might see this is the list the new tag uh the thing that you
00:44:28.280
saw some moments ago and you might see I don't put any HTML over here I say take
00:44:33.960
this content from this URL so behind the scen is going to go to the to the new
00:44:39.559
form URL and it's going to put it over here once this gets rendered and
00:44:46.720
then we have the form uh sorry the list over here and for this one just for
00:44:53.359
demonstrate I can also do the same I can put uh this table content in a do View
00:44:58.720
and use it Source it try to reender it once this gets sent back to the
00:45:04.640
browser and it's already over there and how this gets rendered from the form let
00:45:10.599
me go back to my controller and then we will go to let me
00:45:18.640
think about it it's new and for the new observe this
00:45:25.440
property data when you send data uh that will mean
00:45:31.040
that's going to be taken by by Turbo and the result once the this form is
00:45:38.720
processed is the result is going to be sent to this turbo frame in a specific this
00:45:46.359
is like uh to to avoid sharing things within the same view so with this you
00:45:52.000
specify the turbo frame Target and if the turbo uh turbo frame Target is
00:45:57.200
within the same view is going to try to reender this is how you can I would say
00:46:03.640
trigger a reender of any frame from another different frame because right now as you might see we are located in
00:46:10.240
the form in the form frame but this one is the list frame so the result is going
00:46:16.160
to be sent back and that's how the render happens once this form is
00:46:22.520
processed and this is how you can do it in in the turbo Rubik way now going back
00:46:29.040
to the
00:46:39.440
slides yep I think we had a question before yeah just just a question about
00:46:45.000
like uh so inar that we have like a big page like dasb yeah and we have uh like
00:46:52.240
two sections that are unrelated for example like a top part and one middle
00:46:57.280
between the footer so they are unrelated in a symetrical way uh and like if we
00:47:03.319
have user Behavior we change only the content of those two sections so in that
00:47:08.960
case should we have like different turbo frames in terms of ID for those sections
00:47:14.079
or like the turbo frame needs to you know uh pretty much like reload
00:47:19.559
everything that you are setting up per section so how does it work it is per
00:47:25.599
turbo frame uh tag that you reload a Content or like per U let's say
00:47:34.240
ID uh So based on your question you want to trigger a render yeah rer for
00:47:39.880
specific sections based on yeah you you should be doing based on
00:47:47.720
actions so every time that you try to do an action let's say to click a button to
00:47:53.119
I don't know uh let's say once the page finisher loading that's why also you
00:47:59.680
have frames into JavaScript you can use it from JavaScript once of anything
00:48:05.119
those seven happens you should trigger the RAR render this not happening like automatically I mean like for example in
00:48:11.319
the top bar the if we reloading the turo frame by
00:48:18.200
database so those two tribo frame F Trio
00:48:23.720
frame T of the same ID or they are no they should be different ID the ID is
00:48:30.319
like if we have an ID for right we pretty much like the section that if we trigger it only
00:48:37.640
reloads that se right so the ID yeah what you want to reload uh yeah yeah uh as you might see
00:48:47.319
I I didn't try like a demo uh to make them render two different
00:48:53.599
frames in theory the first thing that I came to my mind is probably if you can use typers script maybe sorry JavaScript
00:49:02.160
you can trigger multiple R renders and maybe there is a Rubik wi but there is I
00:49:08.240
couldn't find in the documentation any similar to that but in theory it should be
00:49:13.920
possible okay another good question as
00:49:20.799
well for this question y um normally you
00:49:35.559
if you have multiple elements on the page that let's say you have one model that when you update it there's other
00:49:42.040
models that get affected by it um quite often you'll pair this with hot wire and
00:49:48.200
on the hot wire where you have an update of the model you can use the Dom ID for
00:49:53.960
the given uh um frames and those frames can be reloaded from The Wire um so it's
00:50:00.680
not part of this D but it's it's like the most common Paradigm that you'll see
00:50:06.160
it's it's the pattern that they use for um ha.com so they use Dom ID almost
00:50:12.160
everywhere Dom it this Dom it this and they they update multiple elements
00:50:18.880
thanks to the hot wire that that just like on and and there's like a huge API
00:50:26.040
on on like you know it uses action cable but you have the same replace and all of
00:50:31.880
that that you can you can append you can do all kinds
00:50:38.599
of it is okay thank you for for answering as
00:50:45.799
well was really useful implementation and now to string to try to finish we
00:50:59.640
um turbo the turbo documentation it says that um you should avoid TBO
00:51:06.480
strings uh because that's of the L resources that you should want to implement
00:51:14.079
um because over the time I think that they are trying to prevent you to make your code complicated and also to do
00:51:21.079
like a lot of different extra what's say string call so to to your backing as
00:51:28.119
well uh so it was the recommendation by them uh not not by me and we will see
00:51:35.480
also how this is going to update your HTML as
00:51:40.839
well um yeah for Turbo stream we have
00:51:46.040
different actions uh we have more options more cloes I would say to um to
00:51:52.319
a front framewor for example a pen Preen uh which is insert before insert after
00:51:57.960
replace update remot and refresh you want to trigger additional behavior um
00:52:04.920
then you should attach Behavior using a stimulus controller which is out of this to as well uh because with the stimulus
00:52:12.079
controller then you will need to deal with JavaScript again uh now we have a pen with that
00:52:19.720
means that uh to you already rendered content it's going to be put into the
00:52:27.599
into the bottom right so this is the way how you can use a t string using HTML
00:52:33.400
raw HTML you can send the the action that how you want to add the new content
00:52:39.280
that is coming on and also the target as well
00:52:44.559
um yeah you also depend on IDs as well we will see more of this on the on
00:52:51.160
the demo right now we are talking about Theory and also you can specify Preen as
00:52:56.200
well uh you have you have also replay which let's say you are trying to render in a
00:53:03.079
table and render the pening or prepending things you can replace an specific object as long you know the
00:53:11.160
ID and this is pretty similar to to the answer before that we should be using a
00:53:18.319
specific ID or we'll say model like this you also have food
00:53:24.079
date and also you have REM as well this is useful when you are deleting
00:53:30.040
content and you want to disappear let's say you are deleting any of these
00:53:36.280
jobs and also we have
00:53:41.319
before uh which says insert the content with the template tab before the element designated uh this is uh this is not
00:53:49.040
like a pen or Preen this is to let's say you have 20 different RADS with a
00:53:54.520
specific ID so it's going to put it before that specific ID only before of
00:54:00.640
that and then there after after that element with the specific
00:54:05.760
ID you also have refresh with you want to let's say we are rendering 20
00:54:12.760
different routs you can refresh the content of all of that and yeah you also
00:54:19.280
can specify a request ID to make some debounce
00:54:24.440
effect for the testing there are a little things that might change and we
00:54:29.920
will see them over there specifically in this part you will see in this T I am
00:54:36.520
trying to create a job application all right but at the end I don't send any
00:54:42.839
parameter that will be interpreted as HTML request uh we will call it like a
00:54:48.559
back request if you want to test uh turbo stream request we will need to
00:54:54.799
specify uh when we we do the post call to this URL we send same as HTML backend
00:55:01.920
request the parameters but for this one we need to send it as turo
00:55:07.720
string and then you going do the the similar test as you did it
00:55:13.000
before and next slide and then we will see
00:55:19.400
demo of this one give me a second
00:55:33.240
so this is a bigger one and now let's say we are going to create job applications uh we have some
00:55:40.039
taxs we have some jobs as well and now the jobs are display over here we only
00:55:46.119
created one uh we can put the applicant's name the
00:55:51.640
cover letter and then it's going to send a turbo stream request
00:55:56.760
that is going to be displayed on the right and this is similar to what we did
00:56:03.880
with frams but here you have plenty more options about how you can photo order
00:56:10.280
your HTML rendered content and as different frame where you render uh the
00:56:15.799
whole new view I would say here you can render only specific HTML Parts um the
00:56:23.079
same way as similar as frontend Frameworks so now let's going to apply
00:56:29.079
to this job so let's say that my name is Santi and I would say I love
00:56:37.520
JavaScript I'm going to apply into senior developer JavaScript and then we send a jav
00:56:43.920
application and let's see now check into the content we will
00:56:50.880
have by default a Preen action that I put into the code and it's only sending
00:56:57.280
back the results of this content you might see over here and it send us it is
00:57:04.359
s us yeah you might see the content type over here it's very specific it's a text
00:57:10.799
and turbo stream as well and the payload it's only sorry the payload is only the
00:57:18.079
content of that HTML but um it's not the same as the other one which it was as a
00:57:25.799
h content send it back uh this is more like HTML content that it's going to be
00:57:31.920
rendered uh once it get back to the to the application because it's you could
00:57:38.839
have multiple action let's say prep a pen or thing like that and turbo string is going to take care of that it's going
00:57:45.440
to try to put the the elements in in the order as you would like
00:57:51.280
um I can put also my name as well Helmer
00:57:57.280
I also JavaScript and then you might see since
00:58:02.319
we have the prep action it's going to put the element on the top on the other
00:58:07.400
one and this might have be chain if I use uh a pen then in such case and it's
00:58:14.480
going to be first and then I'm going to be put after him uh this is because you can specify how you can how the turbo
00:58:23.440
strings can put the elements as well you call we have also reload we call uh
00:58:29.160
before after so let's say we have 10 different Road and I will put any other
00:58:36.640
candidate after me then I can be very specific using the turbo strings as well
00:58:43.039
so I'm going to share the code of this one
00:59:02.000
okay for this one J applications and the different thing is
00:59:08.480
going to be specifically in the create method and you might see over here that
00:59:13.640
uh yeah I do the same as as any other common race application but you can have
00:59:21.760
different uh respon kind of responses over here so you are going to use the
00:59:27.760
turbo string you can specify over here which view you want to use for example
00:59:34.000
you are using a partial and then how it's going to be put it into
00:59:40.119
the uh the HTML you might see over here in this line I also commented uh this
00:59:46.680
one this is if I want to be put in into the into the bottom uh with the aen
00:59:59.920
um yep yeah so it's just for the r is prepend and pending the only options or
01:00:06.280
you like insert it somewhere in the middle like say you're you're starting buy some kind of column and it's not
01:00:12.799
always going to be always at the start or always at the end it might end up somewhere in between or it could be at
01:00:19.520
the start like it's depend on what Val is that possible is that possible as
01:00:25.720
long you know the ID of the element where you want to put the content let's
01:00:32.079
say if you want to use replace of course you will need to have the idea of the element that you want to replace but if
01:00:38.319
you want to use before or after then anyway you might need to have that uh
01:00:43.920
that element HTML element iding something like I mean like a
01:00:49.680
sorted insert like inserting something brand new but you don't necess want it
01:00:56.280
strictly at the top or strictly at the bottom it might end up somewhere in between based on some like I mentioned some col value
01:01:04.799
of some sort that whatever sting by yeah um that's also the the same answer as
01:01:11.240
long you know the element ID or if you specify specify that element ID that's
01:01:17.440
perfectly possible another way to do it it's let me go back to the to the view
01:01:26.960
so over here you might see that I'm trying to render a partial so in theory I should modify the code so every Row
01:01:34.960
for example let me see if I can directly navigate so you might see every row it's
01:01:42.240
having an ID right uh basic with Dome ID so as long
01:01:47.520
you could have this ID in the back end you can do such an action like that so
01:01:54.400
then you can send an specif specific thing uh we can just briefly uh try it
01:02:00.079
over here yeah I'm just like TR think edge
01:02:10.119
cases just add something I had the same
01:02:15.160
problem once and my way to solve it was I just used CSS property position and so
01:02:22.720
everything had a position I had the order there and I could pend or prepend
01:02:27.760
or anything the browser will just take care of the
01:02:33.319
so I was trying to demonstrate that we have all the options over here but for some reason it's not showing up into the
01:02:41.640
into the sharing screen uh uh let's see if I can just briefly
01:02:49.000
demonstrate this what happen with the pen and then we save I think that we are
01:02:55.279
forgetting
01:03:16.599
it it's okay the start of the line there still the turbo
01:03:21.760
something turbo stre the very yep you're
01:03:29.559
right it's already an an ID an ID bar I
01:03:39.799
think uh yeah they we have the same ID probably is the is the
01:03:46.079
editor which yeah aoma I'm checking on to the terminal if
01:03:53.520
everything it's all right and then if I go
01:04:04.039
back this one we're going to try to reender and now let's see if if I can
01:04:11.119
see it at the bottom um you will see why it changed the order this is because by default uh when I refresh the page now
01:04:18.640
it's executing the the real action record method and for that one I am not
01:04:25.160
making any kind of order the previous one it was only uh the turbo stream
01:04:30.319
putting the element on the top but when I rerender it at that time it really executed the the method from the back
01:04:37.319
end and it didn't put on it didn't do any operation I would say at a at a
01:04:42.920
Brower level uh so now let's say any random like uh I don't know billgates
01:04:51.200
or letter I don't like yes but anyway is
01:04:56.279
applying so if we see a pen yeah it's now put it into the bottom uh so with
01:05:02.640
this we can demonstrate that you have control over your
01:05:15.720
and then the target is is this one yeah and I think I saw you I have a question
01:05:21.039
uh could you show us the view code for the turbo streaming
01:05:26.440
for
01:05:37.200
sure okay for the turbo stream the all of the code is over here this is only a
01:05:43.000
partial that I that I did um let me see yeah it's this
01:05:50.640
one and also for this one it has to have like a an an it as you might see I don't
01:05:57.160
need to create in like the other case like
01:06:02.440
uh like a turbo frame I'm only sending an specific ID for that and with that uh
01:06:09.880
when I send back this turbo stream uh content it will always try to look for
01:06:15.920
this ID and it's going to try to do the operation as as it is now as well
01:06:22.400
because my question was you mentioned that it's recommended that we layer streams on top of a basic turbo
01:06:29.279
implementation so the view does not change you just have an ID on the element that's and then the controller
01:06:35.240
you tell turbo stream do a prepend or an append or whatever yeah the operation is got it yeah every action is specified in
01:06:42.440
the controller uh you might see that I change it from Preen to a pen over here and it's like a in this ID please use
01:06:50.599
this partial and send back this uh variables as well to try to put a to do
01:06:57.039
a render and put the content where I specified to you so so about the format
01:07:03.400
uh if you're layering turbo stream on top of an app that started without turbo stream are you saying you would have
01:07:10.839
another format as well for rendering things the normal way yes yeah okay yeah
01:07:17.640
yeah you have also by default for example and this one is is try to render
01:07:22.839
the things uh by default I'm only implemented turbo string in they create in theory you can you should be able to
01:07:29.520
do it also for for index as well but for that I don't know I will prefer to use
01:07:35.119
maybe a turbo frame and only turbo stream when I need to let's say if I
01:07:40.680
already render in 1,000 records I only need to add one so I don't send it back
01:07:45.920
the 1,000 rendering again rows I only send it the new one that I created using my for that's where turo string it's
01:07:52.880
pretty useful um yeah that's pretty much uh it doesn't change at all as well let me go
01:08:00.079
back over here you can also pass things just
01:08:06.039
another compan so if you have like can have
01:08:11.920
stre whatever synx is so you you don't actually have to change your contr
01:08:18.319
that yeah that is to totally true uh thank you for the comment and yeah you
01:08:24.159
might see over here this only to display the the content in this specific idea as
01:08:31.640
well um yeah uh no nothing so different to what
01:08:38.239
you are really uh I would say used to used to use uh into your common ra
01:08:45.239
application uh without using JavaScript at all the only thing that I use
01:08:50.640
JavaScript was only a thing for showing the bar and just quickly go over
01:08:58.000
here uh this thing that it was in another slide but you might see in this
01:09:03.560
application JS file you can also use turbo and I bet that you can use use frame and different things it's not
01:09:10.199
loing right now for some reason but uh yeah you should be able to do the same behavior from this one but as long you
01:09:17.080
have the gem which is over over here and this is by default
01:09:24.799
with already came when I created the project so in theory you should be should be able to use this and now going
01:09:32.199
back to the
01:09:47.880
slides okay this one uh turbo strings so by the way I'm
01:09:55.440
to make a comment yep so two months ago I demonstrated glimmer DSL for web it actually supports all of those features
01:10:01.960
but in my opinion in a much simpler way also in Ruby code in a much simpler abstraction than turbo and hot fire so I
01:10:09.960
recommend that you guys check out the talk from two months ago it's in the app Montreal DB Channel on YouTube yeah yeah
01:10:18.199
I will also recommend as well looking at the and this um presentation that we
01:10:23.719
have that way is the I would say the 100% yeah uh your weight it's 100% Ruby
01:10:32.199
I would say simpler and a lot simpler actually
01:10:37.920
and all that and this way is uh if you still want to have a chance to use your
01:10:43.400
JavaScript knowledge as well and you might see on the links uh I will leave all the the slides as well so you can
01:10:50.960
see how I prepare my slide and also the demo repo which already has the I'm not
01:10:57.040
sharing this one let me go
01:11:02.800
back oh for sure yeah it also has some test over
01:11:09.080
here and you might see the green check uh so if you want to go in some way how
01:11:14.760
I prepar the test they already over there into the test
01:11:20.120
folder and then any questions uh apart
01:11:31.880
made yeah I think I was pretty clear uh also we asked you a lot of
01:11:39.280
questions yeah
