About the talk
Everything is cyclical, and web development is not an exception: ten years ago, we enjoyed developing Rails apps using HTML forms, a bit of AJAX, and jQuery—our productivity had no end! As interfaces gradually became more sophisticated, the "classic" approach began to give way to frontend frameworks, pushing Ruby into an API provider's role.
The situation started to change; the "new wave" is coming, and ViewComponent, StimulusReflex, and Hotwire are riding the crest.
In this talk, I'd like to demonstrate how we can develop modern "frontend" applications in the New Rails Way.
Vladimir is a mathematician who found his happiness in programming Ruby and Erlang, contributing to open source and being an Evil Martian. Author of AnyCable, TestProf, ActionPolicy and many yet unknown ukulele melodies.View the profile
Everyone, welcome to my rails, talk called front and last real strong tenant. My name is Vladimir and I'm working for the company called evil martians as a back-end engineer and placed from a legal point of view and nowadays. I mostly during Ruby and a beautiful girl and I'm not dealing with a frown that at work until because and, you know, I'm about to go up and today has this clear separation of back-end and front-end engineer's job and does it. Well.
and I doubt it's a correct definition for. Development. Instead. I'd like to say, that. Development is when you develop within a single a ecosystem and now case such a system is rails. Let's take a quick look at the past and remind us how our system look like when we were building rails applications without needing to learn from books, and all, that's modern, South. And also what happened to that way of building web applications. First of all, the core principle of rails. Development is HTML Over The Wire? Server is the only source of Truth
server is responsible for what and user see. So power to the server. That's how we can go with a sway of building their web applications. Holistic, look at what tools did we use to build the Fountain Park about apps? First of all, we had HTML, preprocessors to make it easier to write HTML and also Ruby helpers to craft HTML using Ruby code. Do you remember how there's something like this? Can you figure out what's going on here? I don't, I, I can't goes. Well, it's like I don't understand what
Then we also have links but no one knew how to use them properly except from probably probably Basecamp. I don't know. We used SAS to manage styles. How to guess again, it was much more Ruby friendly than pure CSS. And finally, we use bootstrap to make websites look like We deal with dependencies by installing jams, using our good old bonder. I'll simply couldn't scrape sand to the vendor assets folder. And the top of this Iceberg, we had acid Pipeline and what
and made coffeescript useless. Right back, bro. Ask Appalachian to the next level and the CSS and variety of tools build on top of it. Made it change the way with rice or sass made it more powerful. After that front and Frameworks appeared and react won the battle among them. It's like number one even today. Finally most applications to run into single page application, living, only single responsibility for rails, providing apis. That's where we are today.
We have separate teams. Bigger teams larger development costs, in terms of time and money. That's that's something we would like to change bringing back our rails comfort zone. And the question is whether it's possible top. Of course it is because we have some examples that say these happen Basecamp. They're all following classic real sweaty for many years, but it might say that those two are too old and too big to migrate to the modern front and sex is just too expensive for them. Okay? I got it. But what about something? That's was just released about a
year ago. Hey. Hey, use rail said a car would stack and just a couple of few things to build a modern client-side experience. And this new magic just called Hotwire brings him out of our approach to the next level today because we're free maybe for talks to Decatur to it in the program and it would want to walk shop,. Instead. I wrote a block past. You can shoot can meet you can check later. So if you want to know what I think about how far So, let's go to the main part of the talk. When I want to show how HTML code of our approach could have over the
modern front ends couches, what we can food on the scale on the bus. And let's talk with a core principles. Who's responsible for rendering you? I server a client. Can say that why don't other approach is better on its own? Be that just two ways of doing the same thing and Zack equally good. Then we have single-page applications on the right. And that's how we must front and paste applications a built. Can we count or this? Well turbulence or how we call
them today? Turbo drive is the answer to this electrical. What turbulence Al troop, turbo drive is September Dr. Allowed to convert an HTML, based application into a single page application by doing the sample, treak intercept, navigation, like links, clicking and form submission. And instead of reloading the page from Ajax request and replace the body was a response, but just the body of the page. No Grace nail styles. Nothing is reloaded for every navigation event, which makes loading Pages faster. Safe performance
even better for the end user. Turbo frames Avenue thing as in you and descend to the Harbor, Links to the hot wire. And it could be described as a turbulence for the base fragments warframes. So instead of reloading to help age, you can really only part of it or you can laser loaded when you allow the patient is Charlie. So this way you can speed up their first rendering. Let's take a look at the example of using frames. Cm Today, at least app was items and ability to mark them as completed
Let's talk about stimulus JS, a little bit and why? It's good companion for rails development. Again, let's take a look at the example. We have hideable banners in their application, showing some tips to all users, and user can close them by clicking on the corresponding bottom. So, That's a call functionality 10 years ago. We was right. It was probably jQuery and we had to deal with all that actually unrelated stuff, Avance, CSS classes. Other library is like a really nice and square UJS to make sure that
we spat and I always activated that was Two are prone to make unreadable. So everyone remembers this query spaghetti called, we only care about what matters. Our chance code is very concise. We just need one function which implement the removal of the element and everyone else is controlled by the HTM out. We used at attributes to activate this actions. This team 11. Channel, the main benefit of stimulus. The usage of the modern. Browser, APA station Observer API eliminates page
interactive fields. And I chose to use view framework for that and Steve Lewis to control that mounting of you can follow us into the issue email. So Services responsible for rendering and crafts, a nice email. We still use rails for helpers and everything we used before. We only asked date attributes at our controllers, to the specified fields to activate them and you can follow him. In this case is isolated. We do not bring any state management or whatever. So our clients have called it's
simple as that sandwiches, help customers external components life cycle. You can buy the complete example in the source demo project with published ciprocal. Get to demonstrate this approach. And more samples could be found by following the links on the slide, and I'm going to mount them here. Atlas. Take a quick break because I think I just flew away for a minute. And then it's too much else creep. Right? Let's go back to a nice time. Out and Ruby and our scale. Tell. Next thing is reactivity.
That's Define reactivity as an ability of the applications and simply react on the Warriors Vance. Both internal from user and external from the system of the whole, another word. Like an example. User. Don't need to hear the real old baton to see the actual state of the data. How can we do this without keeping the stay on the client? Everything is on the server? Right? Well, we can through changes to the clients through websockets. And that's where we can introduce kind of
evolution of HTML. Eldorado brooch HTML website. And we can help. But mention Phoenix life. You hear this Library, popularized HTML and Inspire others to be something similar. And I want to spend a lot of time, explaining how life you works. I believe the main ideas from the side. So feel free to check it out later. Let's move right to the project inspired by it and in the Ruby world and the real swirl such project is stimulus. Reflex. Technically steroids flax is a bit older than life you and its core part.
Cable-ready has been around for more than 3 years. But only after life year. And all that's hype around it. Kind of a push into their development. What is it? And why does it matter? Okay, what is a small thing of Public Library? It helps to send Gmail notifications. Directions from server to browsers to clients like remodel manipulation controlled by a server. It is X1 cable to transfer and mop dumb library on the client side to update HTML as fast as possible.
required to perform. This, everything is on the table, ready. And accept not only remove as possible, but other 30-something commands are also available so you can do price match anything. In on your client machines from server. Let's go to stimulus reflux. It consists of two parts reflexis, which describe how to handle use erections and cable, ready to deliver HTML and Command Center update dumb. Whole architecture of humanistic lacks. It's kind of complicated. So I suggest taking a look at example of stat. Yeah, again,
our example still the same but now it's updated in real-time 40 users. It's reactive. Channel. Acyclovir that HTML, we have. We only need to add data reflects attributes, which looks very similar to what we did was serious. Right? And it's not against our dance. Because well as a title, sad facts, use stainless under the hood to activate for plexus. To make this reflects attributes actionable. We need to ride class. In our case. It's laced, relax. And implement the cars pound in methods. It's matted. Could Doom Marvel things. First of all, we can use cable ready as we did before
and we can respond to this particular user to the current user with a cast. Some modification commend. In our case, we show The Flash notification. We just down by broadcasting and HTML bar, show with a select to replace the contacts. I was like, replacing the contents of their flash container. What I like most about similar to flex and that its major table and well-documented software and it has a very welcoming community. So it's pleasure to work with it. And it was
kind, of course if it was any cable. That's another reason why I like it. So I have a couple more projects at least. First one is motion. As motion is like in my opinion is much more inspired by life you and it provides one-to-one correspondence between server-side component and a dump Alamance. And it's quite an interesting project, but it's still evolving so far away to see where it will go. Turbostream. See ya again from Hotwire. So I'm talking about fire a little bit. So Travis dreams actually more like, cable ready,
Channel. I got like cable ready. But in a real sway. So we can see that chairman asked him out over the wire over the socket can do the trick. But now we have another problem. We have a lot of FaceTime out all the different cases. We need to keep them organized. How to do that. Remember in Fountain Frameworks. We had architecture patterns, whatever. Do we have them for keeping a channel templates? I'm not sure we should get some inspiration from France and frightworks. And we martians, tried this approach. Few years ago,
LOL, evil front with belching demonstrated, a way to keep Town play under control and it was inspired by one of the main react principles thing and components components is the answer. And today we have them for reals applications. We hope you can phone, it's to what this one does. This mean, what are there? Few components? Going to take about particular permutation and let me show you an example. How we can use it. Okay, so component consists of several parts. First one is a class representing a message for the logic
makes of presenter or helper of decorator pattern, whatever page of like better. Anyway, it's Aruba class that contains all the logic. You need to draw a template. So then we have a template. And here is how we can use it and other Purex email templates. We just ran over the component provided the day after 8, and it's kind of isolated from the main rendering contacts. And it's reusable because it's just Ruby class, so we can use inheritance from example weekend tested and isolation as a ruby class. Again, it makes
working with HTML, bit different and more. I think productive more robust because you can catch errors early using test using previews. And that's one of the pictures. I really like about you components because you can't develop them and isolation completely so reviews like for my others preview bill on top of the same. Rails functionality makes developing content of the application, waiver different from what we had for HTML templates. Another culture view component in bed and allows you to Cape Hozier latest out together. So we can put not only Ruby
logic and HTML representation to the same folder, but also Styles and child scrapes needed to activate this controller to use this controller. And we can go further. We can actually Foods reflexes stimulus controllers previews right into the same folder, which is not possible. How does a box, but we can extend Wii component to do that. We can also get rid of this repeated initializers and actuators and repair this way of keeping you components and extracted, all my extensions and some developer tools to jam called few components country. If we to check it, it provides some hacks
to make. Writing view components and keep an eye on them. If it's more convenient, then the out of the box for which we have and it is not the only Library Wichita this, not a problem, which provide few components approach Trails. We have more Libras. What you can check and try. Don't forget about something. So we compared insert a beauty like organization architecture and all the stuff that we completely forgot about CSS. Another. Power off front and five boxes that they allowed us to use such
techniques as CSS and Jazz. And we have pasta, It's a switch. Help us to be more productive writing styles. What can we do at our age team outside? What do we have to offer? First of all, as before? We have CSS Frameworks. I like what you have. You can use it. But there are plenty of other options today and I would like to pay attention to free of them as those which I used for that trailer. I really like him. So, first one is booma booma. I don't know how to pronounce it correctly. So, It's CSS only and mobile
first framework. Which I already used. And I already demonstrated when we talked about simos, and you actually this example used Beaumont. And it's pretty cool because you can add a corresponding view components Library. You not View and cold beautify, and make it as long as you can see. In this video when stacy says, I don't know. Is there any is there a person? Haven't heard about this framework? It's like number one today for ready. Ready? Made CSS brain works, but it has a different. Idea, it's a utility first. So I'm not components out of the box.
There is a towel into a library for that, actually, but originally, it's just provide you with some classes to ride this kind of styles on your own. And it's really cool for fast. Part of typing and it's helped get the belt to generate up to my house built with some building Integrations. So I would like to tell Williams playground functionality. So we can really quickly build some walk out right in the browser. And then just copy styles to a project.
wrongs towels, how to keep them separated or isolated? We need something to do with that. So we don't have CSS and JS in Ruby and rails. But we can make for CSS work for us. Why not? And it plays really well with Vue component. I already mentioned that me show you how I glue them together. So let's say we have an example component, flash alert. I would have a CSS and she asked for it and HTML. In the CSS file, we write some classes, but we do not prefix prefix and was like,
$5, a container other body, whatever we do, not care about nail spacing, about isolation. Busse says, who care about it, and I'll show you in a minute. How An hour HTML, template with a specific helper class for container old body, which results of this internal name for the global name, which is going to be unique to our convention. The resulting HTML is as false. So we see that instead of container and body classes would have see flash colored container and see flash alert body, how we do this. We added processes, Mario's planning,
and configure it to replace classes within France and components folder. with a The same names but cry fixed with a c and Karen have transformed a little bit for uniqueness and similarly as a group. We just extended application. You can Bonine with a class, four methods which. Pretty much the same. So Convention of a consideration and we solve the problem of isolating Styles in El Dorado. Stop using components and some kind of a rough Edge. So I don't have anything to put on the scale. So let's talk about what we ended up at the top and truly.
I hope I was able to demonstrate that HTML first approach. Could be competitive. Makes sense to use it in some cases. From Tantalus way exists and you can follow it today. I'm already following I'm using it in production and my own projects. and I'm internal tools and typical gratifications. Edmond of birds. That's the way to go, be productive and do not depend on other teams. Other engineer's, tangerines. When it's not necessary. You don't need it for a long time to be able to yet another form of admin or list or whatever.
You can build them using rails, and they still that man, Trent and made them cool Interactive. And that we just in the very beginning of this new era. It's kind of a rune essence of rails. Probably. So State and join the resistance and thank you for your attention.
Buy this talk
Buy this video
Our other topics
With ConferenceCast.tv, you get access to our library of the world's best conference talks.