About the talk
A lot of life changing things have happened in 2020. And I'm obviously speaking about Stimulus Reflex and Hotwire and how we as Rails devs are finally enabled to skip a lot of JS while implementing reactive web UIs. But what if I told you, there's room for even more developer happiness? Imagine crafting beautiful UIs in pure Ruby, utilizing a library reaching from simple UI components representing basic HTML tags over styled UI concepts based on Bootstrap to something like a collection, rendering reactive data sets. Beautiful, reactive web UIs implemented in pure Ruby are waiting for you!
and CSS to high developer happiness caused by the beauty of Ruby. Implementing Ruby back in code is definitely a fun thing to do. But you don't get any URI out of it. Implementing reviews. Like you're very humble Aslam probably added to some jobs to sprinkles. Might give you a good looking, but also very static UI with many full pay for this required. Additionally, you're definitely leaving your comfort zone here, jumping between rails View files, CSS and often widely distributed
helping you to avoid tons of jobs Crypt and use more rails again rate. But I'm still missing the developer happiness. I experienced when writing Ruby backup code. Things like object-oriented, programming class inheritance modules, and simply a beautiful syntax leading to a readable and well maintainable code base. Wouldn't it be cool to have all the benefits of Ruby? While implementing beautiful reactive blue eyes? That's at least what I thought. By the way, if you end up down here, you're doing it wrong. But maybe it's time to introduce myself. So high,
I'm Jonas. I'm a Fool sex. Talk to developer working for various clients in Germany, and I'm a huge fan of rails. I was always working the contacts were small team with limited time and budget resources wanted or needed to deliver a lot. And that's the Ruby itself and rails fit in perfectly and power a small team to live a big things, right? And I'm super on it to talk at, Royals, come this year. I would have loved to meet all of you person, but well, let's meet in Discord and
get to know each other better off of sock. And by the way, I'm recording this talk and my small office in Creston. And that's a picture of me moving in last summer. Adam supported by my beloved espresso machine producing great cappuccino. And by the way, I tried my best but I'm still not a lot of our professional. Well, maybe I should stick with software, which brings us back to our topic. Back in 2018. I was traveling throughout stralia enough to while at a small business idea
fermentation in two recent creation speed. So I knew I need to get from here back here. And after several iterations and weird implementations, I ended up with something that actually worked and I thought it was really valuable, my sack was born. Back in Germany. I skipped the idea of building this team entrance and together with two friends, found a small Tech startup. We wanted to build an open-source business on top of my stack. I told the value of mates that could partially monetized
looking at something like psychic. Well, that didn't work. Good enough on a business level, but it worked very well on a technical level validated and a bunch of real-world applications built on top of make stick. Until this point. So this is what's going to running that smooth and I realized that growing company and creating an ambitious open source project at the same time. It's not my type of tea. So, just a few months ago and therefore decided to shrink down the company to myself and put myself on a mission.
Instead of writing HTML. We will create HTML structures with pure Ruby. Instead of writing jobs Bridge, we will compose pre-built reactive components in pure Ruby. And instead of writing CSS. We will compose pre-built styled components in pure Ruby. so, let's start the first building block of mates deck. H & L structures implemented in Peruvian. First of all, we somehow need renovation on the browser. That's basically a web browser is working, but we can choose how to create this a smell. I therefore asked you that
question. What do you prefer? BRB or pure Ruby. Hello or pure Ruby? Or pure Ruby. Or in general. Lamenting templating to Jensen tax or your pure Ruby unlocking, all the features of this powerful language. Well. Think of the age, male structure of a booster car component. And now watch how the same structure may look like a ruby. Make sticks night sex by security cell is not obstructing anything still. As flexible as pure HML, heads up. We will abstract things in a bit by
purpose. So, I see some amount of code at the same amount of code and still required yet. But we're crossing, you are cold and beautiful, rubies and talks rather than using templating engine syntax. Which Tsum unlock some cool features and might already be more enjoyable to write compared to writing HTML syntax. So somehow makes text rendering converts droopy into HTML. but, Where to put this code? We put this code in a self-contained Ruby class, which we call Nate. Stick component. But a new instance of this class is called the main
response method to return the desired, desired HTML string. So, Best musically Star Trek from Hibbett. We can simply break out of deeply Nest at HMS structures in Creative Platinum, Tatian. So we will end up splitting you I called into small as magically Chang's. Why just calling Vince Mathis? Do this, we increase readability and maintainability of our implementation and that's just a very simple example. Can you imagine how powerful that is? When working on complex you eyes, you can use all kinds of rubies language, peaches to craft your age, male
structure, that that's sinking. And now, let's make it a bit more useable or usable. Components may take required are optional options in order to tell if your under inject content, you just Define a simple component. I've API the top. And used to inject its options across your component. Components Maytag blocks or even named slots as well? Making them even more flexible. We see an example on that later on. And how do we integrate this? Because in a wreck. What would basically have to integration modes, we can use mates, two components on views,
Collins on mates, ticket pages. That sounds interesting. But let's start with calling makes two components on existing rails puce. We simply call our component class and password passing required an optional permits, and this is coming from the recognitions. Or we substitute the complete rails Vue with a mate Stick Page. Same principles as seen on the components recreate class. Main response, method and may use all kind of custom in since method of helping us to structure our implementation. And for sure, we can call out a
component here as well. In order to change the greatest macek page into rails. We simply telling a race controller not to rent a review, but I might stick page instead. Make sick there for can progressively replace or live side-by-side with a you I layer of rails, all all the concepts lock routing control of indication off the relation and so on, say I'm touched. We've not talked about reactivity yet. Well, makes sick can actually be used with all kinds of raptors assist systems or not. If you wish, if we don't need raptiva teeth while you're
done. But we want to have 16 solution for creating react if you eyes in pure Ruby, that's why we decided to ship an option or activity system based on vuejs with a knife. So, let's have a look at the second building block of my sick. Pre-built react components composed in pure Ruby. Why won't you do something like that? Well, 90% of require activity. Is it based on similar patents? I pray that the small jobs without showcasing these patterns. So what time?
You see a form? And if you submit the form with missing input, you will see immediately feedback. I'm down here and my department food and all these messages came, obviously from neck to record and Stones which are just requiring the simple to hear, but it's showing without a food processor pitch, reload immediately after submitting the form. So let's submit the form with the required input. So, They go. So I've posted something the phone reset it itself and
the Forum was partially updated. Send, we see our new tweet. We are done able to increase database. Obviously triggering a service that action incrementing this. The state of a safety likes counter, but it's usually the updated number on the, you live without a food processor part for those. So this is also an extra pickle requirement react. If you lie. Just maybe post something again. Definitely some tweets here. Well, I'm talking about Posh V updates. That might also be relevant to talk with the UI state in there. Just based on
client site things. For example, if I don't know I want you to have a showing in my aunt's. I'm here. I don't click on ADD. It's under you. I hear the guys say was told of it and I see your form enable me to edit my tweet. I know that's not possible to revise for the purpose of this example. Just want to show you that here on the updating my tweet and there you go. There you I talked with back. So this is kind of a reoccurring pattern. I'm talking with the United States dynamically without a full Browns, Bridge Road.
And while talking about real-time reactive, a few eyes is always about extant, web clients. So on this and you want to send multiple clients to see immediately when somebody else is tweeting something. So, let's see how this working here. So I have to connect it. What clients into browsers and just tweeting something again, and they go both clients, were synced. And I'm also able to assume the increments of the likes counter now on on each browser. And
well, sometimes it's might be really interesting feature to have like a lazy loading. So let's assume loading of this list, which slowed down the initial page speed of the Twitter account. So we want to be able to I'm lazy load, all the tweets here. And if you want to close him, reloading saw like the Forum was, showing me nearly a flood but weeds were lazy loaded. So the speed it up the initial b gold in this example, so we have two options. We have racked of forms. With react feedback. We have partial updates. We have few. I stay till the Ling and we
once and reuse them across all your apps. Well, we already did it. And you know what, the damn one just showed was created out of these pre-build future as components. I didn't write a single line of customers to get all the reactivity, you sound the demo. I used the transition component in order to create a dynamic page. Transition are used for component for react to form. I used to swim Warner Cable components for a partially, why updates? I used an actual component, triggering a service at action and a partial you arrived at afterwards. Are you still on click components to?
want to talk with him. You stayed somewhere else on the you. I am a sick. You would do something like that. You just called room, a mess of the methods like on, click on toggle, and toss, and required options, and a Blog. They are targeting components like the sales, make our component, our previous example, but in this case, this pre-built component knows that it is associated with of uterus, jobs, Department. As mentioned earlier, the response method of a component or page class returns in HTML
string. Each. You just component of friends in this case on click and toggle previous the rending of a special HTML component, sack containing the configuration hash like and it's hello. Hello. Aztec attributes. On this H males pass by view, just in browser the reference, you just components which are included in my six jobs which amounted and get the country duration hash injected. We don't have to mute as components up and running in the browser. Additionally, an event Hub
is mounted which enables communication between all components. So, we did find a new eye, which will show up button. Stella says, quick me and when that button is clicked event. Hello is emitted. And then received from Target components. Which will show its content. In this case, containing a string of the world? Just like this. It's which was implemented. And thanks, you specific, configuration specific blocks. In our case, at the bottom, then Spa, you
can adjust the behavior on the look of the previous track of components according to your needs. And that's true for all three. Both components doing way more complex things for you. So let's have a close look at some of these components. The action component is designed to call suicide rates, control actions from the web browser. Think of the like button be used in the demo within your Ruby responsible page or component. You simply call the action component on configure red, with a hash containing the rails control action pop and the
desire to hdb method in this case put Additionally, you're telling action component to show a symbol button with you a specific block. When this button is clicked. The action view, Jazz component forms of background at 2 p.m. Put request towards the specified path targeting array is controlled by which control the action does. It's the thing and that's it. Let's jump to the point component in pure Ruby. We called him to make that phone compliment and passing are consecration hash this time. We using a hub method as the
configuration hash is a bit longer and Bobby want to keep a clean. You, I'm from atation. We're telling the phone component to collect user input in this case, vion, text input. And when submitted. Perform a background HTTP. Request containing this user inputs to which the specified whales control action. Control the action, does it sting and may react with a positive or negative side of coat? A negative status code. Usually will contain service validation messages, for example, coming from active reconciliation.
These errors are received from The View, Jazz component in the browser and then rendered next to the relevant,, but feels you saw that on the demo earlier. In our example, we can figure the phone company to emit an event submitted when the form was submitted successfully. Control action response with a positive status code, the phone components commits. They've been to the event up, which can be received by all of you chose components in the browser. Which brings us to the next appointment. A Suk. There's some component is designed to perform a partial. You
have date requesting fresh content from the server think of the pooda. We had a phone on top and listen to all tweets below at the pump submission. The list of tweets was updated without a full browser reload. That's because we can figure the assume component to rear-ender itself on a specific event. When the Forum was successfully submitted in it, admits event submitted, which Den is received by the assume future as component that soon component. Then Palms background HTTP request with Stress Control action. Under control
the action, rear Enders, that you lie on the stove side and just sends back at the relevant part of the HTML to the Austin component in the browser. The components can all performance on update. Rendering the fresh h8mail just sent from server. That re-rendering was based on client site, event coming from the form. But in the demo, we saw suit web clients. How does not work? The good news are symptoms of care, way too much coming from. Thanks to a super simple action cable, integration events can be broadcasted from the server to all connected with clients
and their pass through through to my sexy bathtub. And then the same components and all connected why plants are doing their thing. Requesting a new version of the price control action, re-rendering and sending back, only the Redland part. You might ask. Why do we need to we're under the whole you I the store beside, if you only want to add a new tweet to the list, good call. If you're into optimizing a partially guy update mechanism, you can use make sticks cable component, the cable component. This example, is configured
to upend something an event called new tweet. Well, now we use the extra trip information to not only push a simple event May 6th event up but render a specific component. In this example the costume three components rendering only one tweet on the server and push the specification to all connected with clients. The cable company in the browser receives the event and the rendered HTML and will depend is HTML to the current dumb. This approach is way more fun than she would compared to
the simple rendering 3D rendering mechanism in component. B requires a bit more implementation effort for simple use cases there soon component, service, in Berryville. If you need to take care of computation time on the serve and scalability to its high traffic, use the cable component. Now, let's talk about one more for those component, transitions. Additional components, enabling Dynamic. Transitions from one page to another without a full browser Patriot. Well, you need at least two pages for that work by Stephane
to reims Route starting to raise control actions. Each responding with a different macek page. But wait, there's something else. We tell the controller to wrap all page responses in a mixtec app Mesa cap is there for something like a real sleigh out, like a Raceway out to use rates, use Mesa Gap, use my pages. A nap may look like this, just like my thick pages and components. We did find a ruby cost and their response method in their redefining navigation. On
top calling to transition components in our example with different paths. Start targeting the rails control action. We just saw And we need this yield telling. The app where to yield Pages like these two. An initial request, the requested package and its app will be ranked together and ship to the web browser UPS than automatically mount a page content vue.js component on the spot where we talked after you pages. Let me click on the transition vue.js component, that condition would freak out back
from page to pee, get requests to ask. The designer has control action, which will only respond with a cello string generator from the response of a desired my second page. This HTML is then ship back to the browser and will be picked up by the page count of you Jess component, which then switch is the current page with a new one coming from server, the rest of the way of saying, son touched. Patricia also emit events. Telling other components to react to pitch transition events.
what cannot be billed with a built-in components, simply add your own vue.js components, and let them live side-by-side with a built-in ones. So this is how I custom you just component on the Ruby side. I look like you're referencing. You component name here. And you create a few view, Jazz component with a corresponding name and just component. You can do whatever of you has to offer. Additionally, you might call the event of API in order to communicate with other. Have you just components either building
once or other tells made you just components? SMU just components are used, like all other components and can you communicate with all the components through the event tab, in this case? We are calling our, you just component to your next to a total component, an hour Ruby response. And we're meeting and event from our costume component entry guard component to show its content on when receiving this event. Using this approach. You're able to fill up the last ten, per-cent of customer activity,
Well, how much do you enjoy? Copy and paste in complex down structures? And giant chains of CSS classes across your app. In order to create a decent-looking. You high. Do you remember the bootstrap, hard component examples from earlier? Wouldn't it be cool to have all those two components of a little like that and pure Ruby. Well, today is your lucky day. We've already done this. Let's start symbol with a bootstrap button just as simply Ruby method and optional params like a specified. Very end table. Are you safe? Recreating growing down stretches and
CSS classes, and start implementing a style. You, I am pure Ruby and that's just a simple example. Preview, the previous booster car component. You quickly, see, a one line of Ruby saves you, from writing and maintaining six lines of HTML containing various asset classes. And, you know, for sure that these kind of components are not only used once on the UI. We not talking about seeing me a few lines of a chamalien there, these free whilst I can make a huge difference, especially on a growing u. I
You might ask what if I want to pass in something more complex than a simple string. Well, do you remember me, promising you to show how components may also take blocks or even named Slaughter Leah? Can you go instead of passing in a stream, which should be rendered in the cart body? We now passing in a custom block, which contains this pain? This block will now be rendered instead of the topography while still keeping the wrapping done with a card. And what if I want to inject multiple custom Don parts and not only one block.
This case, you should use slots. Following the API documentation of the component, you basically passing multiple references to your pasta methods into the pre-built component. People component will then render you injected methods to finding a custom done on specific specific placeholders within the pre-build component layout. This approach has super powerful one. We using more complex previous components, which brings us to Smart collection. Imagine a prebuilt style component, rendering a good-looking collection of database items. Applying configurable filters, drinking
configure filters. And finally, configure custom action, rendering who slot called for each wrote. I think it's time for demo. The phone we see the smart collection in action. We should have a look on what's possible to create with my stacks pre-built styled components. This app, use the default theme of bootstrap. Obviously, you can create your custom themes based on purchasing a project.. The look and feel to your needs. And this time we using the predefined responsive side phone. And Peeta find
through the day to set. Thanks to active page Nation. Or filter the dataset in this case, searching for a customer with the last name Jacobs. Custom row actions, we implemented lead action. Asking for confirmation. Andre runs the dataset have to successful in defeating the item on the server. And if you don't want to display data in a table, you can add your own list, rendering to an additional slot while still keeping reactive page nation and filtering. This case we using a slot defining
collection item, rendering to a card instead of renting a table. On top of all, what if you've seen all bootstrap version, five components are accessible as makes the components in pure Ruby. If you curious how it's implemented, have two dummy. Made stack. IO, enjoy the look and feel of this little dummy app and review the implementation and pure Ruby. So wrapping it up. Now we've managed to skip writing HTML and enjoy implementing an HTML structures. A ruby instead.
And if you're not into bootstrap, why not creating a gym for your Custom Design system, which can be reused in all your apps. Either way. I hope masek will help you escape the Fronton tousle. Good point. We've talked about beautiful react wipe, your eyes implemented in pure Ruby, but we haven't talked about you. Now, it's your turn. Go to get up and give him a secular court and made Segura boots up a start, if you like a project. Hello mate. S Twitter to get news and
helpful tips around made snack and hatch dog, stuck. Make stacked up Ayo and get started without getting started guide. Building the shown Twitter clone step by step. Jump on our Discord Discord server and say hello share feedback and get community support. And contribute great issues reporting box or request missing features. Got a non boring for me personally, and become a member of the core team and helped to build an amazing tool for real Surfers, and enable them to have fun. Again, when it comes to building. React, except
your eyes. I'm super happy to get to know you better and answer any questions around night. Sick on Discord. My railsconf q and Ice lot. Starting April 14th, 2:30 p.m. Eastern time and honestly, anytime on online there. Thanks for listening and have a wonderful rice comes experience.
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.