Events Add an event Speakers Talks Collections
 
RailsConf 2021
April 15, 2021, Online, USA
RailsConf 2021
Request Q&A
RailsConf 2021
From the conference
RailsConf 2021
Request Q&A
Video
Frontendless Rails frontend - Vladimir Dementyev
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
8.56 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

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.

About speaker

Vladimir Dementyev
Team Lead at Evil Martian

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
Share

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.

But that's what we have today. Most of you, I think maybe five or even ten years ago. When I started working on Ruby on Rails projects. I've been doing HTML Ruby JavaScript. I actually got the script, I was able to build a product alone. I don't I didn't need anyone else. I'm a little bit out today. I'd like to raise and try to answer the following question. True Drells. Development. Be a thing in the 2020s. And let's start with another question. What is. By the way? What is it, is that there's a single person who can do everything

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

Sweden here. Hopefully, we no longer write such things nowadays. We can not do that. Then we added a bit of interaction by writing some Challis Creek or more precisely, cut his crib, because it was kind of a JavaScript for rubies. Also, we usually used jQuery and some plug-ins, for example, and obtrusive child script, which made it simple to turn, lanes and forms. Into a synchronous communication tools, instead of promoting pages. And we also we were able to execute JavaScript and response. Like it was some kind of magic that Trails provided.

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

precisely sprockets library to take care of all this stuff to build them together to optimize am too many my so whatever. And those days as progress, and I said, pipeline for the best for this job. I'm on all web Frameworks. Not only Ruby Frameworks, but thanks. Has changed things have changed. JavaScript to walk and the evolution began. 1st and P A and later yarn, and they sell the problem with management dependencies. Then Dallas Crepes actually, it's standard ecmascript evolved to its 67 version or whatever. It's called right now

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

or delete them. And it's built with turbo frames with snail, JavaScript. Let's take a look at the code. So we have our goo. What controllers are the only difference here that we render pack Charles instead of templates. And at the same place, I'd we wrap the contents with a specific special turbo frame tack as a unique identifier, which turbo frame JavaScript used to replace the contents of their element currently being on the page or remove it completely

if the contents of Tober frame empty and that's it just a couple of minor changes to our code and weekend. Alright, interactive applications with no JavaScript. Okay, what's next? On the front and side, we have Frameworks and they bring a lot of stuff and her to tea. Reactivity architecture, better, and some Concepts and all that stuff. But when we get only HTML and when we use external first approach, we can only use JavaScript sprinkles to kind of vitalize, H HTML, like, for example, already mentioned and obtrusive JavaScript worry, same for his private Limited.

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

tracking changes tracking completely. Like we did was to query into brake spring sample. So One benefit of stimulus and that it plays. What was turbo because you don't need to carry care about any hacks to track loading reloading, whatever. But still allows you to attach Behavior to HTML element, turns into so cold component, but he's a man to behave yourself in JavaScript. You have to write a controller and it's not always just a few lines of code. Like an example, I already show

Imagine building sounds like more complex like a date picker or search how to complete input. How to build such complex components them from scratch and jealous creep and that will turn us into JavaScript developers, or we can borrow them from some real friend work. So I mean we can take react you smile too or whatever and wrap them using stimulus just in place. Luckily isolate it. And that's how I date for one of the projects. We're actually started using stimulus and when I needed some interactive Farms

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.

Let's take a look at the example. So again, our to-do list, our items and want to delete that and that HTML part of the same of the picture. We don't need to change anything. We still use our remote call by clicking to the bottom and the controller. We have some changes. We do not return any shame. I understand, but instead we broadcast a remove command to the correspondence stream. With a specified selector responding to the current item. This command could be expressed as a query spell. We used 10 years ago. So actually no jacket required. No JavaScript

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,

but just with five factions, not Ferry. I think it's killer feature is zero JavaScript to start using it. I like I've already almost humorous aspects which require some set up at least. So in order to start using turbo streams, all you need is to add a specific element using helper. For example, on the page, to subscribe to The Strain and then in your controller or whatever. We want. You sent a similar, download application, come out and find replace remove for whatever.

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.

And finally, what we have, I mentioned shoelace for this little bit different library of web components customizability and accessibility. But what component is, like, a CSS and JavaScript all together, and they provide some typical elements like all art forms. Bounce, whatever you can just use a gas pump tag, to activate them. It's very simple and very powerful and it's really good for building. For example, admin that birds on something like that. But again. CSS primers ago, there always were cool. But what if I want to write my

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.

Cackle comments for the website

Buy this talk

Access to the talk “Frontendless Rails frontend - Vladimir Dementyev”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Ticket

Get access to all videos “RailsConf 2021”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
93
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Jonas Jabari
Senior Software Engineer at jonasjabari.dev
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Jesse Spevack
Staff Engineer at Ibotta, Inc.
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Jamie Gaskins
Masters of Arts in Christian Apologetics at Trident Technical College
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “Frontendless Rails frontend - Vladimir Dementyev”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
949 conferences
37757 speakers
14408 hours of content