Search
EuRuKo 2024
Leveling Up Developer Tooling For The Modern Rails & Hotwire Era
Edit
#developer-experience-dx
#developer-tooling
#language-server-protocol-lsp
#stimulus-js
#hotwire
#ruby-on-rails
Summarized using AI

Leveling Up Developer Tooling For The Modern Rails & Hotwire Era

Marco Roth • September 12, 2024 • Sarajevo, Bosnia and Herzegovina • Talk

In the talk titled "Leveling Up Developer Tooling For The Modern Rails & Hotwire Era" presented by Marco Roth at EuRuKo 2024, the focus is on enhancing the developer experience (DX) in the Ruby on Rails ecosystem, particularly through the implementation of Language Server Protocols (LSP) for Hotwire components such as Stimulus and Turbo. Roth shares his transition from a React-focused background back to Ruby and Rails, advocating for the richer tooling experience that's becoming more prevalent in the JavaScript realm, which he felt was lacking in the Rails environment. He emphasizes the following key points throughout the talk:

  • Developer Experience in Rails: Roth highlights the gap in developer tooling in Ruby compared to JavaScript frameworks, describing his personal motivation to improve this through open-source contributions.
  • Introduction to LSP: He breaks down what Language Server Protocols are and how they can provide language intelligence to applications without needing an Integrated Development Environment (IDE).
  • Building a Stimulus LSP: Roth presents the concept of the Stimulus LSP, aimed at enhancing code completion and diagnostics while coding with Stimulus. He discusses challenges faced in achieving accurate autocompletion for data attributes in HTML, providing examples of how data attributes are related to Stimulus controllers and targets.
  • Examples and Proof of Concept: The talk includes a discussion on building a proof of concept for LSP, how it analyzes and understands JavaScript and HTML, and how it improves coding efficiency.
  • Future Directions: Roth concludes by discussing future plans for expanding tooling support and robustness, including the creation of a new parsing strategy for better handling of JavaScript and ERB, as well as potential collaborative developments with existing tooling like Ruby LSP.

Ultimately, Roth stresses the importance of enhancing the DX for modern Rails applications to ensure they remain competitive and intuitive for developers, advocating for ongoing development of useful tools and rich developer ecosystems. He encourages community engagement and feedback to continuously improve the Hotwire and Rails experience. Roth also alludes to a future of interconnected tools that streamline productivity in the Rails framework, inviting listeners to join discussions and contribute to the evolution of this tooling landscape.

Leveling Up Developer Tooling For The Modern Rails & Hotwire Era
Marco Roth • Sarajevo, Bosnia and Herzegovina • Talk

Date: September 12, 2024
Published: January 13, 2025
Announced: unknown

The evolution of developer experience (DX) tooling has been a game-changer in how we build, debug, and enhance web applications.

This talk aims to illuminate the path toward enriching the Ruby on Rails ecosystem with advanced DX tools, focusing on the implementation of Language Server Protocols (LSP) for Stimulus and Turbo.

Drawing inspiration from the rapid advancements in JavaScript tooling, we explore the horizon of possibilities for Rails developers, including how advanced browser extensions and tools specifically designed for the Hotwire ecosystem can level up your developer experience.

EuRuKo 2024

00:00:10.360 yeah good morning my name is Marco um I'm a full stack developer and open source contributor and if you haven't
00:00:16.199 met already let's connect after the talk today I want to talk about devop
00:00:22.039 tooling for the modern hot and rails era and I want to see what we can do to level up the game in the hot ecosystem
00:00:31.560 so I want to talk about what it means to build an LSP we want to understand them I want to showcase with the simulus LSP
00:00:39.360 what it means to have an LSP or how to build one and then what's next for Tooling in that
00:00:45.960 space so I've been maintaining simulus reflex and cap ready for the past few years and I've also been maintaining
00:00:51.800 stimulus over the past couple of years and personally I love open source I am
00:00:57.920 really delighted to do get the honor to open source and contribute and maintain
00:01:04.320 libraries that's why I've been trying to help out with anything that's Hotwire
00:01:09.640 related or front end or rails any of that sort so if you see a project here
00:01:15.560 that you are using in your any of your projects I would love to hear how you're using
00:01:20.720 them so I actively started to contribute back in 2019 um and I the time was using
00:01:27.320 react at a company and I personally like react it's more about
00:01:32.640 the architecture around it usually that's really what bothers me or what makes it super complex for me to
00:01:38.520 understand what's going on so quite frankly I had enough of doing that kind of work and I want to get back to Ruby
00:01:45.680 and writing actual Ruby codes writing rails codes and also more importantly
00:01:51.399 writing rails and hot wire code in the same code base because to me it feels like it
00:01:57.000 gives me some kind of superpower to just build whatever I want or needs and that's really what I'm all
00:02:03.240 after and I think it's a modern the future of modern rail apps in a way now
00:02:08.759 that there also default in rail 7 and forward so it's really cool to see this
00:02:14.040 approach get getting more attraction so I went fulltime to work on
00:02:20.440 these projects from like 2022 to 2023 for one and a half years or so just
00:02:25.720 because I had fun doing it and yeah to just work on these projects and help wherever I
00:02:33.080 can but while doing so I noticed something react had a bunch of awesome
00:02:39.800 Tooling in JavaScript in general as well so the developer experience in JavaScript tooling is really
00:02:45.879 awesome and I was quite missing that in rails in a way it didn't seem like we
00:02:51.280 had anything like that in Ruby yes there was solra but I never got
00:02:57.560 it to work really properly in my application on my setup so I always kind of left this left this out I couldn't
00:03:04.599 really get it to work for me for me so I started to miss these awesome
00:03:10.200 tools that I saw in JavaScript but I was wondering if we can bring those back to rails or make rails better I'm one of
00:03:16.680 these people who doesn't use an IDE somehow they always felt clunky and heavyweight for me to use I don't know
00:03:22.959 why and somehow they made me feel like I'm less productive in a way I don't know it's very weird I don't know
00:03:30.599 but in the last few years it quite changed a bit I think we had some kind
00:03:35.680 of Ed Evolution going on and I think that's thanks to the language protocol or LSP for
00:03:42.560 short so what is LSP and why would you want to use it it's a way of providing language
00:03:49.920 intelligence to our application or our tooling without the need for an actual
00:03:56.159 IDE so we can um build one intell on server and have it
00:04:03.879 consumed in all our editors as previously you would have to build a plugin for vs code Adam viim or whatever
00:04:10.439 you were using and the combination of plugins and tools you had to build was
00:04:15.879 really high and the speed this is all pretty much simplified to one implementation and everybody who speaks
00:04:22.000 the protocol can just use it as well so how does it work whenever you
00:04:29.560 open open a file in your editor your editor starts a process per language once and it keeps running in the
00:04:35.800 background as long as this file or this project is open it usually communicates over standard in standard out there's also an
00:04:42.680 option to do it over tcpip but usually it's standard in standard out and it uses um a protocol called Json RPC if
00:04:50.840 you aren't familiar with Jason RPC it's somewhat similar to http in the way that you also have the content length the
00:04:58.000 headers up up top and then a body in this case it's ajacent blob that you can um send back and
00:05:04.919 forth so coming back to stimulus I want to build stimus LSP but what do we
00:05:10.880 actually want to solve here so this is the most basic example of a stimulus um
00:05:16.960 snipp it from the homepage and what we want to look at is the data attributes here so the data controllers the targets
00:05:23.680 the actions and so on these are the ones that we want to help build help the
00:05:29.160 developer with by providing autocomplete auto diagnostics and so
00:05:36.919 on so whenever you are writing a diff or any kind of template you want to get a
00:05:43.680 complete for all the attributes you have available and for some of them we might need more information for the identify
00:05:50.560 order the classes and so on so you got complete an attribute and when you did that you want to get the
00:05:56.880 possible values for this attribute now so you get something like this where you
00:06:02.880 also a complete this but if you have been using stimulus you might know that
00:06:09.120 there's some conventions and sometimes they are not as straight forward as you would think so this is actually not
00:06:14.880 valid in simulus it's technically an underscore that you have to use for this
00:06:20.280 and to me that happened so many times that I felt like we have to improve that and how we build this these applications
00:06:29.000 so I thought we can do better and back in 2021 I just had this idea of yeah
00:06:35.080 let's try to build one and see what it might take to make this work so I looked it up on online and
00:06:42.319 found this guide for building an extension they had really awesome examples on GitHub really documented
00:06:49.520 well and I looked at this basic example where it just gave you a basic text
00:06:55.080 document and another complete for just some elements here in a text
00:07:00.680 file so let's see how this example works so when you open this file your clients
00:07:07.039 or your editor will send a request to the server in this case it's a completion um request and alongside it
00:07:14.240 sends some attributes like the path the file you have open where the current purer is and a few more
00:07:21.280 things and then the server can do pretty much anything but in the end it has to return ajacent response and this case it
00:07:28.639 returns a blop of Jason here where we have results and some static items in
00:07:34.280 here and by receiving this from the client again we get this autocomplete
00:07:40.080 popup as you probably know it from vs code so coming back to stimulus we have
00:07:46.240 a very similar idea here but we have the difference that we are in HTML we need to have the context in where we are in
00:07:53.000 the current documents and you need to know what we are trying to complete at any given time
00:07:59.879 and this is a little bit different because we are using HTML and we are trying to embed a language into HTML
00:08:06.680 because stimulus like all the attributes are not part of the HTML spec so vs code
00:08:12.680 doesn't know anything about this and how it might be used so we need a way to extend the HTML
00:08:19.400 handling in vs code or HTML like documents because we using most of the time HTML Erb
00:08:26.400 right and luckily we can do this with language services
00:08:31.719 um and the question now comes which language do you write this language service in there's some obvious choices
00:08:37.680 like typescript or JavaScript but since we all are Rubi we would love to write this in Ruby
00:08:44.080 right um the reality is though that stimulus or I guess hot in general can
00:08:50.080 be used across many stacks and it always felt weird to me that you would have to have Ruby installed in your system just
00:08:56.040 to use the language server and because I wanted to have this portability aspect I wanted to reuse the
00:09:02.560 existing tools that are available I in the end opted for typescript and because we want to reuse
00:09:09.600 stuff that already exists um vs code provides this um language service for HTML we can use and what it does it it
00:09:17.680 gives us a data provider what they call a data provider is pretty much just a JavaScript class that you can Implement
00:09:25.360 and by implementing this it will do the kind of magic behind the scenes for for you so let's try to implement this for
00:09:33.560 stimulus there a there's a provide tax method meaning we can extend the tax at
00:09:38.760 HTML for HTML that it knows about but since we are using stimulus we don't use any special taxs because we just use the
00:09:47.160 attributes we can just implement this um with returning an Mt we don't really
00:09:52.240 care about this part of the implementation but we care about the attributes there are available and we
00:09:59.079 get the tag but then again we don't really care about the tag necessarily but we want to complete these kind of
00:10:05.480 attributes let's look at the first two because they are static they are easy and straightforward to
00:10:10.760 implement so what you want to do is we want to return a list of the attributes we know about so in this case we just
00:10:18.040 return an array with items like the data controller and data action and now we want to look at how we
00:10:25.680 can implement the rest of them they are some Dynamic parts we need to eight so we need to parse JavaScript or more
00:10:32.040 specifically we need to parse the Ste controllers in our app so we know what exists and what we can provide as
00:10:37.600 autocomplete values so I'm going to add a new class to my project it's called the controller
00:10:44.440 definition it's a representation of a controller in my app and we have a path
00:10:50.000 of where the controller is we have the meit targets and so on whatever simil
00:10:55.440 apis provides and this holds a representation of one of these controllers
00:11:00.760 and we're going to use Acorn a jasp parser for passing our jasp files and what we do is we implement the
00:11:07.399 new pars class we Implement a parse controller method which takes in the whole file content and the path of where
00:11:14.000 this file is and if you look at an example controller here this hello
00:11:19.440 controller we have this um controller here and what we really care about is
00:11:24.920 the targets up top and the methods or the actions in the control itself
00:11:30.880 so we write a script to Loop over all our controls in our app jaas controlers
00:11:36.200 directory and then Loop over them read them out one by one and then pass in the
00:11:41.639 content and the path into our pass class and controll Pa Pa controll
00:11:48.320 method and then in our methods we are going to par the code so we get back an
00:11:53.760 abstract syn Tre which you then can Traverse to see what is in that file so
00:11:59.480 we create a new instance of a control definition the class we made earlier and then we try to Traverse the
00:12:04.920 whole tree and look for method definitions and whenever we find one of these definitions we take the name of it
00:12:11.920 of that and push it into our control methods array and with that we have pretty much
00:12:19.320 pared all the actions in our controller we use something very similar for our
00:12:25.440 targets and what we get for this controller then instance that looks like this where we have the path the methods
00:12:31.600 the targets and so on so now we have the basic representation that we can use to
00:12:37.880 interpolate these values here so this is very left off earlier we have the static
00:12:42.959 control and action and what we want to do is we want to Loop over all our controls we found take the identifier
00:12:49.839 interpolate it to be data identifier targets then spread them back into the array we want to return and with that we
00:12:57.600 get this auto complete here where we have the actions the controllers and in this case we have one controller and
00:13:03.320 therefore we have data hello Target available here as well so that's the basic idea of
00:13:10.240 completing the attributes but now you have an attribute and you want to provide the values for it in this case
00:13:15.800 you want to provide all the possible controls that we have in our application so we also get a method for
00:13:22.199 that provide values and we get the attribute passed in we trying to complete so when weever we see a data
00:13:29.680 controller attribute we can return a list of all the identifiers we know and kind of check this off the list right
00:13:35.720 away but if you don't match this attributes we can check for the presence of the Target and when we find a Target we can
00:13:43.120 see if we have a controller available and if we do we return the targets for that controller and with implementing
00:13:51.000 this we get something like that where we have the controllers and it gives us all the identifiers in our app and we are
00:13:57.199 when trying to complete the target for the hello controller it gives you the two available Targets on this
00:14:03.880 controller so this was the basic idea this was the proof of concept I had and that's what I kind of pushed up in I
00:14:11.639 guess in night of work and then a few days later I was coming back to this and thought is this really something people
00:14:17.959 would want and I started asking around for some of my friends and I um sent
00:14:23.800 them a demo of what I showed you pretty much just now and I was really kind of surprised
00:14:31.000 that they were really um Keen to that and I was like yeah there's so much potential let's see what else we can do
00:14:36.480 and where we can go with this and now you might be asking can AI do all of that
00:14:42.600 today and I would say maybe um there I feel like there are different use cases
00:14:48.240 for this for me right now boiler plates is more the typical use Cas AI for but
00:14:54.560 LSPs I want to use for reliability and accuracy meaning
00:14:59.639 we have a limited context window for all these AIS right and what's missing right now from what I can tell is that we
00:15:05.720 don't have the connection between a stus control file and the view file and it doesn't know how to connect or read
00:15:11.560 between those to make that really reliable today but even if you would have all the
00:15:17.880 complete with AI today I feel like Diagnostics are something that really is valuable
00:15:23.320 nonetheless because if it completes or let the AI complete it might generate some code that that's not right but if
00:15:29.319 the LSP can tell you there's something wrong with your codes you can then try to fix it and see what makes sense in
00:15:35.399 your app and the motivation for this was something like I like in Ruby when I
00:15:41.399 always come back I see that it always gives you this did you mean suggestions in the code when you try to call a
00:15:46.759 method that doesn't exist and I thought we can apply the same thing to stimulus
00:15:52.120 when we have um a control that we reference that we don't know about but we have something very similar in our
00:15:57.920 app then we can just prompted used to say did you mean fil the dash checkbox in this
00:16:04.120 case the same is true that we can do for actions for targets for values and so on
00:16:11.800 and that's the idea for trying to be as um nice about it so they can tell you
00:16:18.600 right away but something is wrong with your code so what else can we do with this if we know what's wrong with the
00:16:24.560 code and if we know what how we can fix it we can try to provide an action to the user so they can just apply that
00:16:31.440 change which is why you have these Quick Fix actions where you can say please replace this with this value we founds
00:16:37.560 or if you just try to create a new controller we can create the controller for you with the boiler plate and
00:16:43.079 everything already in there at the right location on your on your in your
00:16:48.440 application so fast forward to October 2023 I was presenting Andreas World last
00:16:53.720 year and announced this LSP to the world after like two years of working on it and they got a lot of feedback because I
00:17:00.639 also asked the community for feedback and I noticed that I really started to
00:17:06.160 there were some ideas and some Concepts we were using that didn't really work
00:17:12.280 well so a lot of the naive approaches we were using started to fall short in a way especially in the way we were
00:17:19.079 passing JavaScript with Acorn one thing was that we assumed hardcoded this path in our rail apps
00:17:26.120 where usually the controllers are but it turns out that not all the people are using this exact path for controllers so
00:17:32.240 we had to fix that the other thing is there are different ways of registering
00:17:37.880 controllers in your application controllers this is the way we do it in import Maps but if you have been doing R
00:17:44.600 for in the past few years you might know that there are different ways a lot of different ways to bundle and organize a
00:17:51.720 JavaScript in rails apps and somehow we had to support that too so this took a
00:17:56.799 of effort to make all of that compatible with it as well so the idea is that the language
00:18:02.559 server works now but sometimes you get false positive or inaccurate results which is really annoying to the
00:18:09.440 users so if I want to it to be accurate and reliable I don't want this kind of
00:18:15.720 false positives in now in now my experience so we addressed lot of these issues and fixed a bunch of bugs and
00:18:23.440 technically ended up rewriting the whole parser it's a lot more complex now but it's more reliable and more accurate
00:18:29.360 now and now fast forward to ear this year in May we were able to release this
00:18:35.240 new stimulus parser package which empowered this whole release of stimulus LSP 1.0 where we had support for
00:18:42.760 typescript empion packages and a lot of awesome all awesome features so with all of that what's next
00:18:50.360 in that space Ruby mine a few weeks ago released support for stimulus which is
00:18:56.440 really awesome to see that they are also picking up on supporting simulus and these kind of Technologies so that's
00:19:02.480 really awesome to see but also we have a lot of these Diagnostics now now LSP but none of this
00:19:08.760 is technically exclusive to an LSP we could use this Diagnostics independent of um the LSP
00:19:16.960 itself so we can try to extract that in a tool
00:19:22.240 kind of like a tool as rubocop does where we can run these tools and that's why I was working on simulus lint the
00:19:27.960 past few weeks um so we get all these Diagnostics these
00:19:33.000 errors and best practice and recommendations as part of that package so you can run this as like a local CLI
00:19:40.240 or as part of your CI system to check for obvious um like fa um references for
00:19:48.360 streamless controls or all things and the other thing we don't really support right now is HTML and drb
00:19:56.520 documents we want to provide same Diagnostics and code actions for ERB as well and when were using rail T cpers
00:20:03.480 for example and that's something we don't do today and similarly we had a pre-release
00:20:09.640 of a turb LSP which was the basic most basic example we could think of which is
00:20:15.120 available as today as well but the problem with turbo is that it also relies heavily on view helpers and Erb
00:20:22.120 um that we need to understand those so we can only really provide intelligence if we know how to understand
00:20:30.159 Erb so stimulus understands HTML in Erb documents but it doesn't
00:20:36.440 really understand embedded Ruby that outputs HTML and last year I had this slide up
00:20:42.480 where I had this point here where it said we want to support turbo LP and the
00:20:47.919 Ruby LP supports Erb and through that Winnie reached out he's working on the
00:20:53.799 Ruby LSP to see if he can make that somehow work and funny enough we were able to
00:21:00.120 work on this at Rubicon on the hack day in last year and we tried to come up
00:21:06.200 with a basic proof of concept to see what we can do with that but we also noticed that there
00:21:12.200 is a lot more that we need to do if you want to go go beyond the basics so what we tried to
00:21:17.919 do was this approach where we had this whole document but what we are doing is
00:21:23.279 we trying to strip out all the HTML parts and with that we just have the
00:21:28.799 Ruby code left and when we just have the Ruby code left we can use a regular Ruby par to understand what's going on
00:21:35.600 here and this shipped a few weeks ago thanks to Stan's contribution in Ruby LSP and if you haven't been using Ruby
00:21:42.360 LSP I really encourage you to check out this article which showcases a bunch of the major highlights from Ruby LSP in
00:21:48.400 the last half year coming back to this in this whole process of stripping out hm attributes
00:21:56.159 we lost the whole context of where we are interpolating and most of the times it really matters
00:22:01.640 where you're interpolating in your documents if you're interpolating within a tag or within a value or non attack at
00:22:08.760 all is very important information that we need to care about so we have HTML with abanded Ruby
00:22:15.799 that we want to support or understand but Erb is versatile it doesn't need to
00:22:21.120 be specifically be used for um HTML you can also use it for emails or other
00:22:27.159 things so there's there's nothing really that ties Erb to HML itself which is why
00:22:32.960 I was kind of experimenting if with the um idea of writing HTML earv
00:22:40.360 parser which is leads a lot more exploration and see what we can do with it but it's an idea that I just wanted
00:22:46.880 to see what's possible with it it could power these three tools Ste
00:22:52.080 P stimus lens turbo LSP and maybe even the Ruby LSP at some points or other
00:22:57.400 tools as well so what we want to understand is this kind of syntax where we are using rails
00:23:03.000 tag helpers the content tag the tag. div if you're using Dom IDs if you have
00:23:09.279 conditionals if we have the data syntax with the hash to add attributes and so
00:23:16.080 on so we need to some kind of I need to have some kind of abstraction for
00:23:21.760 this in the end what we want to do is pretty much treat this the same way so it looks no different to the parsel
00:23:28.960 if it knows how to map it back to the actual source code the same is true for this these two
00:23:34.760 examples should be treated the same way if they are not really interpolating any other Ruby values and are you just using
00:23:41.559 strings so this needs a lot more exploration but I feel like there's something to this that could make all of
00:23:46.960 these tools a lot better and this might also open up the possibility to support Auto Lang um
00:23:53.240 templated languages like haml slim liquid or whatever else you have um if we can map the same uh syntax to the
00:24:00.720 same abstraction and when we have would have that we could also provide some kind of
00:24:06.159 language Service as we saw earlier with the HTML one where you could provid HTML templating language service or an EB
00:24:13.000 language service that's does the hard work behind the scenes for you so you can Implement all the Diagnostics and
00:24:20.080 that stuff on top of it and the other thing is if the par would understands the rails surrender
00:24:26.799 calls really well we could also provide more Advanced Diagnostics so if you look at this
00:24:32.240 example here we need to put the target within our controller containing
00:24:37.679 element so if you put this outside of the element we could say today that's you are referencing a Target which is
00:24:44.000 not within a controller we could do that but realistically modern rail apps are
00:24:49.399 composed of multiple views partials components and what might end up happening is that you have the
00:24:54.880 controller in a different file than the target and there's no way for us to really
00:25:00.360 Traverse these views how they relate to each other and it makes it really hard for a tool like an LSP to understand how
00:25:07.159 these files relate to each other but if the parer would understand that logic and how that works we could even provide
00:25:14.960 Diagnostics across files where we could also annotate here and that something is
00:25:20.200 wrong because you are not doing this within the actual controller element and I think the nation pass of
00:25:28.760 this could be really helpful for these kind of situations it could power these tools again and there are a lot of other tools
00:25:35.559 and gems that I saw along the way while researching a lot of this which might even benefit from this work too if done
00:25:43.360 right and I don't know maybe there's even a possibility for a good a formata which I haven't found one today until
00:25:50.159 today or a nice linter that works for all kinds of things that are concerns hm
00:25:55.760 and ERB the Ruby parcel prism had a big effect on the landscape of all the tooling for
00:26:03.399 Ruby and I think that this par could have a similar um effect for all the
00:26:08.960 templating tooling around rails and Hotwire and there's one last thing I want to talk about which is a powi
00:26:15.720 browser extension so a few years ago Matt Swanson tweeted this and he was doing a
00:26:22.960 CSS hack where you had the turbo frames and it would show the IDS of the frames
00:26:28.520 um in the top left corner and kind of surrounds the whole frame in a border so you know where the frames are on your
00:26:34.080 page and I really like this idea and I was talking to a friend of mine and he just cooked up a browser extension in
00:26:40.559 the meantime and it's available today as well it works in all the major browsers
00:26:45.919 and what it does is it gives you this panel and you can turn off all the different Tools in it for highlighting
00:26:52.279 frames for highlighting controllers and a lot of other different things so when you are brows Housing St overflow for
00:26:59.200 example I just found this by accident you can see that all the outlined Parts here are actually stimulus controllers
00:27:05.120 so St overflow is using stimulus controllers for almost all the interactions on the page
00:27:12.080 itself and you can see in the bottom right corner which the controllers of the are using on this specific
00:27:18.399 page and I have some sneak peeks here for what's coming next we have been working on trying to figure out how we
00:27:25.880 can visualize which buttons on a page are um targeting a frame on the page so
00:27:32.360 you know when you click this button it will interact with this Frame here but as you can see on this screenshot here
00:27:39.039 it might lead to some weird edge cases where you don't really see what's going on the page anymore so we have to find a
00:27:44.960 way of making this more um easy to to to look
00:27:50.480 at we had a similar tool in stimus reflex um a few years ago where we had
00:27:56.399 the interaction part that page that you could click on it would show you which
00:28:01.720 views it would render and it would also show you which up which element on the
00:28:06.919 page that would update once it's completed and we would love to bring this same tooling to Turbo so we have
00:28:12.840 that available here as well there are some other ideas for a stream debug bar if you have been using
00:28:19.360 turbo streams you might know that they are executing very quickly and sometimes it's really hard to actually catch them
00:28:25.760 and see what's going on so it really helps if you can stop and step through the one like the um streams themselves
00:28:32.360 to see what's actually going on in the application if you want to debug something another thing we have been
00:28:37.880 thinking about is when you have a turbo frame with a source attributes it would be cool if you can just click this
00:28:43.679 reload button to reload the content of that page or that frame without having to reload the whole um page
00:28:51.919 itself there are a lot of more ideas on the road map that we want to work on but
00:28:58.120 as I said it's a work in progress and if you have any ideas or see use case that you have been
00:29:03.360 struggling with po wire I would love to see hear it and then you can see if you can integrate it into the the tools as
00:29:10.559 well so to conclude I think the doo economics and
00:29:15.799 doo experience matter and I think it's really important for us that we can provide that so you have a nice experience writing your
00:29:23.919 code and personally I feel like this is the tooling we have been missing for the past few years years but we are G
00:29:30.399 getting these tools slowly now and it's really exciting and I think there's so much
00:29:35.519 potential to level up and make these tools even better so I'm so excited for the future
00:29:41.279 of these tools and I believe that this kind of tools are also what keeps a
00:29:46.880 language or a framework somewhat relevant or I guess put differently
00:29:52.240 these tools are necessary for a mod day that you feel like this is a modern framework if you don't have these tools
00:29:58.120 you don't feel like you are working in a modern framework at least that's what I have been experiencing from talking to
00:30:04.519 new people coming to rails that they are missing the tooling all together and personally I want to keep
00:30:10.799 building rails and hotti apps and that's why I want to keep building these tools so I can keep building with Ruby and
00:30:20.440 rails so if this is any kind of any anything interesting to you then I have
00:30:25.640 been running a hot vi Weekly Newsletter where I've trying to round up what's happening in the world of Hotwire kind
00:30:31.240 of a focused newsletter just for that it's coming out every Sunday and if
00:30:36.600 that's interesting to you you can sign up on the socials or sign up on hotv weekly.com
00:30:42.600 so I'm here to stand in for a more productive hot ecosystem and I want to stand in for a more unified ecosystem so
00:30:50.039 we get the best tools to build our best applications we can think of if you have any questions ideas or
00:30:56.480 thoughts come find me and if you like stickers I have these with me too so
00:31:02.320 that's all I have thank you
Marco Roth
@marcoroth
Explore all talks recorded at EuRuKo 2024
+39