00:00:18.480
so this is from testrail fountain talk which i already gave at the recent railscope as you probably know
00:00:25.680
today i gotta be a little bit different version maybe a little bit shorter since we don't have a lot of time a few words
00:00:32.160
about myself my name is vladimir i'm from moscow russia i'm talking to
00:00:37.680
kenneth c right now just blue wall behind me and i'm working for a company called
00:00:42.879
evil martians we are consultancy helping
00:00:48.000
developers and teams around the world to build better faster
00:00:53.920
more robust software and mostly a ruby developer with a bit of
00:01:00.879
like golang from time to time
00:01:06.400
today these days uh i'm a back-end developer
00:01:11.439
so and that doesn't care about ui and all that stuff
00:01:17.200
a lot and we offers so we have different teams usually
00:01:22.400
uh to build a web application uh when i started
00:01:28.799
my it career i was a full stack developer i actually
00:01:34.479
was like on developer for a long time so i had to do everything from javascript and html
00:01:42.240
to ruby php and like erlang or whatever doesn't matter so i was a full stack developer
00:01:49.040
and i knew how to do everything but the thing changed and today
00:01:56.000
uh there's a question actually is it possible to
00:02:01.360
be full stack ruby on rails development and build modern interactive full-featured applications today in
00:02:08.959
2020s so that's a question i would like to talk about today and the short answer is
00:02:15.840
yes but let's see how but first i would like to
00:02:26.400
how we did full stack development with rails in its golden age and
00:02:34.160
why that has changed so trails is
00:02:40.480
built on on top of the corp one core principle it's html of the wire
00:02:47.200
server is responsible for everything it's the only source of true and
00:02:52.959
client is just acting like a minimal layer to represent the data
00:02:59.040
even the state provided by the server that was the core idea of their full stack rails back in the days
00:03:05.760
and to accomplish that we had a lot of different tools
00:03:12.159
like we have html preprocessors and helpers
00:03:17.519
like a small master in ruby written in ruby which helped us to
00:03:23.760
construct html i can't say that was the most like
00:03:29.280
herbal part to work with sometimes such helpers turn out into monsters
00:03:35.840
which are really hard to maintain and use and whatever so i i don't miss that part of the full
00:03:43.040
stack rails then we have a bit of javascript
00:03:49.760
and actually mostly coffeescript because like we released one
00:03:55.680
everything to be like ruby and of course 10 years ago jquery was like a
00:04:02.560
masked fake and a small thing like jquery you just helped us to
00:04:08.879
write less javascript by using remote forms and javascript templates
00:04:14.879
which is not so popular today especially the latter one
00:04:22.720
what else so we had turbo links actually like 10 years ago even that was
00:04:29.840
a default gem uh for rails uh no one knew how to use them properly
00:04:37.680
and well at least in my and among my like friends and deaf engineers
00:04:44.400
and uh usually the first thing i did when building a new rails application just dropped turbo links
00:04:51.120
but that was a thing even 10 years ago and we used uh
00:04:56.560
again preprocessors for css to help us reuse some bars use variables make sense
00:05:02.720
whatever and like we didn't care a lot about the ui so we could afford using bootstrap
00:05:10.080
for the user-facing functionality because it was easy to use for
00:05:15.280
back-end engineers actually for full-stack engineers so to deal with the bandages we have
00:05:22.400
multiple tools we bundled assets into jabs and like use our bundler to
00:05:28.800
resolve them and sometimes we just put minified javascript or css right in the vendor
00:05:35.280
assets folder that was the way and uh finally everything was managed
00:05:42.000
by the asset pipeline framework or its core part as sprockets
00:05:48.880
that was the toolbelt of the full stack rails development its front-end related part
00:05:56.720
but then things changed javascript awoke and the evolution began
00:06:03.360
first npm and later guard solve the problem of
00:06:08.960
managing dependencies uh aquascript six seven whatever it is
00:06:14.800
called right now kind of made coffeescript useless and like
00:06:20.720
unnecessary front-end builders like webpack
00:06:27.840
like moved this task of building assets to the next
00:06:33.600
level which is not possible by sprockets
00:06:38.800
css made sas again unnecessary that's because
00:06:44.400
it's much more and it allows us to write css with a lot of useful tooling around
00:06:50.080
it finally we started to use front-end frameworks and
00:06:56.400
react is most popular as of now and of course uh all of that
00:07:03.520
is becoming uh to serve as a single page application
00:07:09.199
and rails rail's only responsibility in many cases is just being an api provider
00:07:16.800
that's what the situation we're kind of in right now
00:07:23.759
so that led to the separation of engineers now we have at least two teams
00:07:29.039
to ship a thing uh that in my opinion at least i think most
00:07:35.520
of you agree with that that that increased development cost and not only in terms of
00:07:40.960
money but in terms of time as well because having two teams coordinating them is
00:07:46.720
kind of expensive and i'm not very happy with that so if i build a
00:07:52.639
fresh application for myself today i would try to find a way to
00:07:58.560
escape from this pattern from the separation i would like to be
00:08:03.840
a full stack developer again so i want i don't want to leave my comfort zone of ruby on rails
00:08:11.280
so is it possible of course yes and i already said that
00:08:16.319
and we have some examples like github and basecamp yeah you might say that they're kind of old like and
00:08:24.080
they just can't afford to write everything to react probably but what about something new
00:08:31.120
a brand new application which is kind of just a year old was which is written
00:08:37.360
with this new stack with the new frontend stack for us with new magic inside of it and that magic is
00:08:44.880
hot wire we're going to talk about it today so we see the examples of html called the
00:08:51.120
wire approach reappearing again so it's
00:08:56.480
it's again it's hard as hardware so let's take a look
00:09:02.560
at the tools the technologies the approaches we have
00:09:09.519
today which we can counter to the frontend tooling which could help us to
00:09:15.839
build modern web applications without leaving our comfort zone ruby and rails
00:09:22.480
so let's first put on scales the core principles
00:09:29.120
the difference between front-end streaming application and
00:09:34.560
html first application that's the difference the main difference is how who is responsible
00:09:40.560
for rendering the final html because the browser only needs html it doesn't
00:09:46.480
care about how you deliver it you can do it server side or client side and i can
00:09:51.519
say that one of these two is better than other that just two different approaches
00:09:57.200
and everything else which is built on trouble to this two ideas is what makes the difference
00:10:05.839
so when we build when we use a front-end framework we in most cases we build a
00:10:11.600
single-page application single-page applications are pretty cool because they're fast uh at least
00:10:18.000
from this perception point of view uh they like interactive smooths and so on so forth there is no page reload
00:10:24.640
that's great and actually we can do the same kind of the same with turbo which is a
00:10:31.760
new name for turbo links and turbo today consists of several
00:10:37.200
parts it's turbo drive this part allows us to
00:10:43.920
convert any html based application into a single page application and it does this by
00:10:49.600
simply intercepting navigation or form submissions replacing full page roles with ajax
00:10:57.040
requests and like replacing html body contents
00:11:02.320
and it also has a concept of cache which makes it makes your application look
00:11:07.519
pretty fast if you go back and forth because the previously loaded html is
00:11:14.560
added to the page immediately without requesting so like i said uh turbulence
00:11:19.920
is improvements sba so that's the easiest thing
00:11:25.120
is the easiest way to make your html application
00:11:30.800
looks look like sba turboframe is the new concept
00:11:37.440
of the hotwire and we can say that it's just lags but not for the whole page but for
00:11:43.680
the page fragment so that brings kind of composition to your page you can load
00:11:49.600
parts differently you can handle uh user interactions independently and
00:11:55.040
so on you can laser load part of the page which gives an opportunity to
00:12:01.120
leverage the http layer caching at must
00:12:06.639
so let's take a look at the quick example turboframe is like just to demonstrate the power with
00:12:12.320
so this is simple to the list application uh which you're going to use throughout
00:12:18.880
the talk to different approach and here we see some interaction a user can
00:12:25.519
mark an item as complete or remove it and i want to say that this is done without
00:12:32.000
any javascript without anything added to the client side except from hardwire basic base library
00:12:40.079
so at the controller level we can uh
00:12:45.360
like we write our regular actions like update and destroy but instead of redirecting which we
00:12:52.079
usually do in that case we render partial in in response like
00:12:58.560
just a part of html that has to be updated and
00:13:04.839
our html partial needs a small modification we need to
00:13:11.120
wrap the contents of the the actual contents with the turboframe tag
00:13:16.320
that would activate this frames functionality and that would make the updates
00:13:22.560
work only for a specific item and and everything is else is done by turbo
00:13:28.959
it just updates the content of the stack using id and that's it you don't need to write
00:13:34.079
anything on the client side that's the power of turbo frames it's pretty cool
00:13:40.639
uh so that kind of brings us closer to single page application experience in
00:13:46.000
terms of re-rendering parts of the page of the whole page
00:13:51.680
but now that's a problem javascript framework is not only about
00:13:57.279
reloading pages or not reloading them javascript frameworks bring a lot of
00:14:02.959
stuff like interactivity everything is instant because you don't have to go to the server most of the actions are
00:14:11.360
not related to server server side operations we have reactivity we're
00:14:17.680
going to talk about later we have some architecture principles that led us to write
00:14:23.680
robust applications maintainable and so on and what do we have for
00:14:28.800
html over the wire applications uh we can't afford keeping a lot of javascript because we like
00:14:35.360
let's imagine we're back-end developers and we really don't uh have a deep knowledge of all that js
00:14:41.120
stuff we don't want to keep track of it so we have just javascript sprinkles a little
00:14:47.120
bit of javascript like rails ujs which is the successor of jquery ujs
00:14:52.560
and uh also we have uh backhand friendly i would say
00:14:57.680
frameworks like libraries not even frameworks just libraries like stimulus
00:15:02.880
that's one of our major tools for building interactive applications
00:15:08.880
but still being html first yet another example from the same app we have uh
00:15:16.240
uh like ins like tips uh for the user so for the users like small bat
00:15:22.800
which could be added to any part of the patient that could be closed by user so to close this banner
00:15:28.959
we don't need to go to the server apparently so that's just local interaction so
00:15:35.519
we need to add some javascript let me show you how easy it is to
00:15:41.279
build such component i would say with stimulus so
00:15:46.959
first let's take a look how we've built it uh years ago with jquery
00:15:54.480
there are going to be some function which initialize event listener which about
00:15:59.519
our css or whatever we use for identifying some code like prevent default whatever
00:16:06.240
what else i don't know and the biggest problem here that we have
00:16:11.360
multiple event listeners to call this function because uh we need to track page loads back
00:16:17.680
turbulence page loads we need to drag jquery ejs and so on and so forth that's
00:16:23.680
actually it from my experience at least was one of the main reasons uh
00:16:29.519
classic rails front and applications had a lot of bugs with frontend because you have to keep in memory all the possible
00:16:37.920
events that could lead to uh down modifications to html updates
00:16:46.399
with stimulus you don't care about anything at all and everything is controlled by
00:16:52.320
html attributes in your templates you don't need to connect them manually you don't need to track track removal or
00:16:59.360
adding of this html on the page you just define the behavior in javascript class and you
00:17:05.520
attach this behavior to the html element in your template and that's it there's a
00:17:12.160
few lines of code and it's it works always it's stable
00:17:17.839
independently on how do you update the html and it's down by the modern apis which
00:17:24.720
are possible today like mutation observer and so on so like under the hood stimulus is pretty complex library
00:17:30.720
but it you shouldn't care about it they just use it as a tool
00:17:36.160
and that's it so yeah that's actually just what i said
00:17:42.799
let's keep it so stimulus is kind of a way to turn static html to component as i already said to
00:17:49.919
attach behavior to it but yeah you need to write a bit of
00:17:55.679
javascript by hand and it's not always a few lines of code
00:18:01.200
for example like adding a date picker or like search without a complete text
00:18:07.760
input would require some work and in that case what i like about stimulus it plays nicely with ready-made components
00:18:22.559
with vue i had a very pleasant experience with mixing stimulus with view to build
00:18:28.559
interactive forms and lists of items was a very rails way we only needed view
00:18:35.919
just to add some complex stuff like i already said and you can take a look at this example
00:18:42.480
repo we specifically published from extracted from our private projects to see how you can use stimulus
00:18:50.000
with other frameworks and make them your make them serve your needs instead of
00:18:55.520
learning them and more examples of stimulus could be
00:19:01.280
found by this links so just like take a look at the slides later and follow them
00:19:07.200
a lot of useful stuff and ready to use examples so you don't need to actually write a lot of stuff you just need to
00:19:13.520
add it to your javascript bundle but i said that we're gonna build html
00:19:20.720
first applications and uh and i've been i've spent the last five minutes talking about javascript
00:19:27.120
that was like unnecessary evil so let's move uh
00:19:33.840
back to ruby and what we can do without touching javascript
00:19:39.760
so reactivity sorry
00:19:44.799
on the next part i define reactivity as an ability of application to react on various events
00:19:53.679
both internal and from a user and external
00:20:00.240
and the reaction should be fast or instant and the user don't have to be
00:20:06.720
don't have to initiate any events in order to like produce the reaction i mean that
00:20:13.679
some events could occur on the server and user should have an ability to receive these
00:20:19.039
events and when we talk about synchronous communication which exactly which it is which which is what i
00:20:25.919
described just right now we can resist
00:20:31.039
of talking about web sockets because that's a crucial part of this new front stack i'm
00:20:37.120
talking about today the whole html over socket type started this
00:20:44.799
phoenix live view framework which is elixir
00:20:50.720
so phoenix is an elixir framework for building web applications and live view is part of it as of today
00:20:56.799
so it allows you to control the html from the server and
00:21:02.159
update it instantly react and events and so on and so forth so today we're not talking about elixir we're talking about
00:21:08.159
truviz so we need to find something similar in the world and the first project and the most
00:21:14.880
popular project is up to date which tries to accomplish a similar
00:21:20.159
goal like with different access totally different uh
00:21:25.760
architecture and design but the idea is still the same as sending html or socket reacting to user events
00:21:34.240
and broke sending them to the server with sockets and so on is a project
00:21:39.679
called stimulus reflex so stream music practice is a bit old
00:21:45.200
project uh it's kind of it's actually a little bit older than live view and
00:21:51.600
the major part of it a library called cable ready
00:21:56.640
is over three years old so that's that's that's no idea but it's getting
00:22:02.720
popular like it started getting popular in the recent year or two maybe so what is cable
00:22:10.960
cable ready is a library which allows you to broadcast html modification commands from server
00:22:18.320
to browser to many clients or the single one like as you wish
00:22:25.200
currently it's it's use action cable as a transfer
00:22:30.799
and uh what most important sorry it used more often library to
00:22:36.400
update html comparing to turbo links for example server frames
00:22:43.039
which just update the whole html with every request
00:22:48.080
stimulus tries to make updates as optimal as possible so markdown
00:22:55.200
updates only change parts it's comparison to uh don't sell trees and update all the
00:23:01.600
necessary parts that's brings you better performance that brings you reactivity actually
00:23:08.640
let's take a look at the example how we can use cable already so the same example as before
00:23:15.440
our items we have a button to delete an item and here we use cable
00:23:20.799
ready in conjunction with rails we have this remote true magic attribute
00:23:26.559
which would make hitting this button to perform the request to destroy the item
00:23:33.120
and here and here uh we uh have two things so we
00:23:40.799
infer the list the stream for the item for the list actually and we
00:23:46.159
send a an event remove event with a specified selector to our stream
00:23:53.120
which resulted in a message sent through action cable
00:23:59.039
channel and the client side library for cable ready will take care of this message and
00:24:04.559
translate it into something like this so we can say that came already
00:24:11.200
looks like good old javascript templates but without javascript and with
00:24:16.960
declarative approach instead of imperative but the
00:24:22.159
behavior of these two things are kind of similar
00:24:27.360
cable ready has a lot of built-in operations so and it could be extensible actually
00:24:32.480
so you can to pretty much anything from the server and the upcoming work would also help
00:24:39.760
make it easier to register add new aberrations like you're specific for your application or
00:24:46.559
and will make it easier to subscribe to updates uh like in hot wire which we're
00:24:51.760
gonna see further so what is about stimulus reflex as i said
00:24:57.200
stream reflex is a major framework for building html circuit applications
00:25:03.440
so it's use cable ready to send html to clients and to update
00:25:09.360
the downloaded client site but we also need this the the other direction we need to react
00:25:16.240
to the user actions and uh for that we have we we add reflexes
00:25:24.000
reflex uh like effects has a kind of complex
00:25:29.919
architecture i'm not going to talk about the today the whole i just want to show
00:25:35.919
the example of the reflex class again we use the same application but now we see
00:25:41.919
that the events are synchronized between different users so we add real time as
00:25:48.000
to our list
00:25:53.360
from the client side point of view we do not change a lot of stuff we just add
00:25:58.880
data reflex attributes and this looks a lot like uh stimulus and it's not
00:26:04.320
against us because we use stimulus reflex and understand it use stimulus controls but it has its own
00:26:11.039
syntax which we define event reflex class name and
00:26:17.760
action method name on the server side we define a class which is a reflex class and define these
00:26:24.720
methods within this map we can do multiple things we can use cable ready to
00:26:30.000
broadcast changes to everyone so we can send morphs so-called mars just
00:26:36.880
for this particular user and uh for every action we have an access to the context to the current
00:26:44.000
element data set information so reflexes themselves are stateless but with every
00:26:51.120
action we have an element dataset storing
00:26:56.240
all the current dom element and data attributes so sending morph is just could be done
00:27:03.120
similarly to rendering partials for example we use a special method we define a select target
00:27:09.760
selector and that's it that's going to be updated on the page for this particular user
00:27:16.000
for stability effects is pretty stable and major library so i'd suggest taking a look at it if you want to
00:27:22.399
build something with html first approach and if you have some problems you can
00:27:28.080
join the community with a lot of active members it's very friendly
00:27:33.679
so the link to the discord server will be at the end of the talk and the one good thing about stimulus
00:27:39.919
reflex is that it works with any cable out of the box so you don't have to worry about
00:27:46.720
scaling web circuits and the future version of simulation effects coming this year
00:27:54.480
aims to be transparent agnostic and with some additional features like relay reliable data flow so you don't miss any
00:28:01.600
updates but that's the future also uh what i like about stimulus
00:28:08.080
reflex is that it has a lot of additional libraries in the in the
00:28:13.919
ecosystem there are just two of them which are i found most interesting futurism and
00:28:21.039
optimism first one allows you to lazy little parts of the html something like you know turbo frames but
00:28:28.720
a bit better in terms of functionality and optimism for real-time for
00:28:34.080
implementations pretty cocky and that's not the only way to
00:28:39.279
build html with socket and ruby we have turbo streams a couple more libraries
00:28:44.880
just to talk about them a few minutes like a few seconds actually so turbo streams is a
00:28:52.399
very minimalistic solution it's it solves the same problem as cable
00:28:57.600
ready it allows you to broadcast job modifications to client but i only have five actions not 35.
00:29:04.720
a good point here a good part is that the transfer diagnostic doesn't care about how you deliver these
00:29:10.960
notifications and it doesn't require any javascript to start working with so the from the end user perspective you
00:29:17.600
just need to add a helper to subscribe to updates through the stream from and then
00:29:23.279
send broadcasts to a specific channel turbo streams channel that's the whole
00:29:28.559
turbo strings you can read more about how reynolds parts and the recent blog of myself and
00:29:34.559
our evil martians chronicles so i'm not gonna talk a lot about it today since and we're actually mostly
00:29:41.279
out of time and i have a lot of to say two more frameworks libraries for building html websocket is multi-shown
00:29:48.720
and live which i suggest oh sorry uh looking at and just following their
00:29:54.159
development they follow string
00:29:59.279
approach more like live view but we have alternatives that's great
00:30:06.240
uh the last part of the talk uh
00:30:11.360
is not about web sockets but about html itself if we want to write everything in html
00:30:17.120
how do we keep it under control how to maintain all the templates partials and all that
00:30:23.120
stuff and the answer to this question is better architecture
00:30:29.520
in our case we can actually borrow some ideas from the front-end world
00:30:35.120
or one particular idea we can start think in components instead
00:30:40.559
of templates or views or whatever so component is something that is has
00:30:45.760
logical meaning is isolated and self-contained and
00:30:51.279
let's introduce you components then so few components
00:30:57.360
aim to solve the problem of maintaining our view layer our templates and i'm going
00:31:04.000
to talk about a particular library from github view component let's take a quick example
00:31:10.159
of how it looks like we have a class representing
00:31:15.679
the component with some arguments like its initial state and
00:31:21.840
some helper methods and we have a template attached to this class so
00:31:28.159
it's like a combination of a template and a helper but it's everything is isolated
00:31:33.360
and we render it as a like an object in the any other html
00:31:38.880
pretty simple given that we use classes we can use ob
00:31:44.240
stuff and whatever we want like inheritance and we can test them in isolation that's
00:31:50.720
one of the main benefits of using components
00:31:55.919
components also gives us a performance boost uh
00:32:01.200
according to kihab they they see it up to 10x faster rendering this component
00:32:06.559
than partials in my experience it's about was like two three times faster i
00:32:13.360
haven't any uh never but i believe
00:32:20.159
it could be the case and we have preview functionality we can use storybooks and so on so components rules
00:32:28.960
from the organization point of view we can keep everything together like css and js related to the component could be added
00:32:35.279
to get in the same folder the component we can also add stimulus controllers
00:32:40.720
previews and reflexes to the same folder i could hands out stuff it's kind of hard to do out of the box so i
00:32:48.000
built a library called view component contrib to make it a bit
00:32:53.919
easier to extend and use few components but i think eventually they're going to be part of a few components so that's a
00:32:59.279
kind of a playground for the ideas and we have a lot of other tools
00:33:05.840
in this field liberation is the same idea components for views you can check them
00:33:12.640
out as well what else do we have the final stuff
00:33:19.679
is css and pulse css stuff we have on front-end so css
00:33:24.960
multi-labs we have css mgs uh techniques to bring isolation out of the box
00:33:32.399
uh and we have css to use modern syntax and now that's uh interesting new ideas
00:33:39.120
even for older browsers and when using
00:33:44.640
uh actual first approach our natural way of writing css is just taking a
00:33:51.679
framework a ready-made framework as we did with bootstrap before and today i
00:33:57.600
usually consider free candidates for building a web application for that
00:34:04.000
part for ui it's bulma tailwind and wilma is more like bootstrap but it's
00:34:10.800
csv it's modular that's like like just it's modern bootstrap with mobile first approach and
00:34:17.679
so on and so forth i've been using it together with stimulus and view with framework
00:34:23.119
beautify to build for example this application with complex forms everything is interactive and kind of
00:34:30.079
in my opinion it's it looks pretty good for an application within buyback and developer
00:34:36.480
tailwind css is a very kind of hard thing hi vladimir i'm really excited for
00:34:41.599
interrupting you we're running over to the point where there's next stuff happening so if you
00:34:46.960
don't mind wrapping this up in the next kind of seconds to remember yeah i actually just have three
00:34:52.000
three yeah three more slides sorry let's let's get through let's get that expected
00:34:57.440
thank you so yeah just like i guess like this video shows you how
00:35:02.960
that's that's that's the way you do is tailwind just add classes and everything is beautiful shoelace is a different
00:35:09.760
idea it's about web components and interactions out of the box so you don't need to write again javascript
00:35:15.599
everything is bundled with an html attribute and it works great so
00:35:21.839
which one to choose depends on your needs that's some suggestions on this slide
00:35:29.359
final thoughts hopefully i cut 20 more slides so we can reach final
00:35:36.560
slots so what is front endless rails weight uh first of all is html over the wire and
00:35:43.520
html over web sockets so without web circuits you can build really interactive and reactive application but
00:35:50.720
we have tools for doing this uh one important thing is that
00:35:56.320
component-based applications should be adapted for this style as well the same as we see in the stack
00:36:03.760
and css like it's tricky so we can still use uh frameworks
00:36:09.040
for for that part and not bother about it could it be a replacement for any
00:36:16.960
application of course not so there are some use cases for front endless way
00:36:22.320
specifically like dashboards crowds admin panels or whatever it highly depends on how
00:36:29.520
much interaction do you have which is local to the browser which is not
00:36:35.839
telling whatever so it's up to you but i can say for sure that we just in the beginning of this new era of uh
00:36:43.920
full stack rails applications so if you're not convinced to use it today just to
00:36:49.920
stay tuned and follow the news and the best way to do this is to resistance at this
00:36:56.640
timeless reflex discord and maybe ask me some questions but we don't have time sorry thank you
