00:00:16.800
Hello everyone.
00:00:18.640
So a lot of history classes. Yeah. Uh
00:00:21.680
and that's another one. So ancient trail
00:00:24.480
developers left us many artifacts from
00:00:27.439
mysterious inscriptions found in the
00:00:29.039
pyramids
00:00:30.960
to stack ruins where the mer sacrifice
00:00:33.840
ritual was performed.
00:00:37.520
But these prophecy tablets uh stands out
00:00:41.200
among the rest. Prophecy speaks of three
00:00:44.719
hidden ways to sculpt the front end and
00:00:48.160
how they will unleash unstoppable power
00:00:50.480
of rails.
00:00:52.960
Three ways to sculpt the front end. Huh?
00:00:55.199
What does this prophecy even means? My
00:00:57.840
name is Faslav Kruov. I'm back engineer
00:01:00.399
at Evilmotions. And today we will
00:01:02.640
uncover the truth. Uh we will uncover
00:01:05.600
the three ways um to sculpt the front
00:01:08.640
end and hopefully don't trigger any
00:01:11.600
ancient curses or at least no uh any new
00:01:15.680
ones. So, Rails is a full stack
00:01:19.759
framework with a rich history and it
00:01:22.000
might be tempting to think that front
00:01:23.759
end uh part of Rails well kind of
00:01:27.360
chaotic and unstructured. Uh but today
00:01:31.200
we will uncover the truth. Uh we will
00:01:35.680
go through the evolution and see that
00:01:38.240
it's actually a long game with a clear
00:01:40.560
vision and uh purpose.
00:01:45.040
To do so, we will need to dig through
00:01:47.360
these three layers uh of Rails history.
00:01:50.640
And let's start with the deepest one uh
00:01:52.799
the foundation.
00:01:55.200
It's 2004. Uh JL just released and
00:01:58.560
suddenly everyone wants their web app to
00:02:01.200
look this smooth. Ajax becomes the
00:02:04.159
obsession.
00:02:07.600
This was harsh world. uh building
00:02:10.239
interfaces uh was a dark art requiring
00:02:14.800
deep knowledge and mystical retools.
00:02:17.520
Internet Explorer 6 was a dominant
00:02:19.680
predator.
00:02:22.959
And here's what JavaScript looked like
00:02:24.959
at the time. This is actual code from
00:02:27.200
2005 required to call an Ajox endpoint.
00:02:31.200
It's clear evidence of a primitive and
00:02:33.599
brutal civilization.
00:02:37.599
That's when Rails came to the rescue and
00:02:40.000
offered a way to build interactive
00:02:42.080
applications without fighting the
00:02:44.800
JavaScript beast.
00:02:50.080
So,
00:02:52.000
uh, Rails um offered Ajax helpers um
00:02:56.480
which allowed us implementing partial uh
00:02:59.200
updates without full page reloads. a
00:03:02.560
recurrent idea uh that will shape the
00:03:05.360
future of Rails front-end development.
00:03:09.599
Can you see anything guys?
00:03:15.519
And you all just sitting there. This is
00:03:19.280
this is interesting but okay.
00:03:31.200
I knew that it hap will happen. You
00:03:33.280
know, uh today I've been said that I'm
00:03:36.480
the only one who has zero problems with
00:03:39.440
his setup. And this is what happens,
00:03:41.920
right?
00:03:43.440
Okay, let's go back.
00:03:47.920
When we when we stop
00:03:51.120
around here, right?
00:03:53.440
Oh,
00:03:56.640
the best joke of the talk. Anyway,
00:04:01.120
so yeah, partial reloading uh rendering.
00:04:03.920
So uh as you can see even like then in
00:04:07.599
2005 we had this ability to
00:04:12.239
hotwireish
00:04:13.760
ability to work with front end.
00:04:17.040
So we also had uh something for
00:04:19.280
animations and effects. uh Rails uh came
00:04:22.800
with a prototypeJS
00:04:25.199
a prehistoric jQuery uh and scriptocolus
00:04:29.199
uh library to uh manipulate dome and uh
00:04:32.560
add some animations and effects.
00:04:35.280
So this simple yet powerful combination
00:04:38.800
uh allowed us to develop cool
00:04:40.960
application and this is a replication of
00:04:43.840
the original tatalist application from
00:04:47.120
2005 which one of the first objectified
00:04:51.360
uh rails applications known to mankind.
00:04:54.160
Um and as you can see
00:04:57.360
this is how like our prehistoric Rails
00:04:59.919
developers used Ajax um and used uh
00:05:03.680
partial reloads to uh create dynamic
00:05:06.880
applications.
00:05:09.840
Um the first iteration was a huge
00:05:12.320
success. Uh so Rails kept evolving and
00:05:16.000
improving ideas. Uh but the philosophy
00:05:19.280
um stayed the same. Uh, Rails 1.1
00:05:23.039
introduced RGS, Ruby helpers that
00:05:25.280
generate JavaScript. And although the
00:05:28.880
glory days of RJS were short, uh, it
00:05:31.360
gave birth to multiple new ideas um that
00:05:34.320
we continue using to this day like for
00:05:37.360
example wrapping ugly things with Ruby.
00:05:40.160
Uh, but the most important thing is SJR.
00:05:45.039
It's a server generated JavaScript. who
00:05:48.400
heard or used the thing
00:05:51.199
not many of us and that's the thing
00:05:52.880
right so
00:05:54.960
um this is when rails returned
00:05:57.680
JavaScript code uh as an API request uh
00:06:01.520
response I mean uh so it was powerful
00:06:04.639
way uh because uh that code then just
00:06:09.120
evaluated uh was evaluated by the
00:06:12.000
browser uh but it was controversial
00:06:14.880
thing because um browsers of past uh
00:06:18.800
have nothing uh like to secure us from
00:06:23.120
some um JavaScript injections.
00:06:27.600
So, RJS helpers uh were quite limited
00:06:31.680
with its DSL. So, uh Rails 3 migrated to
00:06:36.560
unobstru
00:06:38.240
unobtrusive uh JavaScript. And that
00:06:41.919
means that we started uh to write
00:06:44.240
JavaScript in separate files and not
00:06:46.000
just dumping them into HTML which is u
00:06:49.919
good thing right and uh U.js J is used
00:06:53.440
uh to this day. And finally, let's also
00:06:56.319
mention Turbolinks. Who use Turbolinks?
00:07:00.479
Yeah, more people who loves Turbolinks.
00:07:04.080
Zero of hands. Yeah.
00:07:07.680
Uh okay. And yeah, um Turbolink was an
00:07:11.120
attempt to uh automate process of
00:07:14.080
rerendering HTML with Ajax. The same
00:07:17.120
principle we saw previously. And it was
00:07:20.080
a good attempt but
00:07:23.039
um triple links were not universally
00:07:27.199
uh accepted let's say and uh because
00:07:30.479
mostly it broke like every other
00:07:32.400
JavaScript plug-in uh and jQuery
00:07:35.599
especially so um Rails waited for web
00:07:39.599
components to uh to appear to fix this
00:07:42.319
problem in the future. Oops. But every
00:07:47.120
iteration uh refined the same vision uh
00:07:51.520
serverdriven progressively enhanced and
00:07:54.479
developer friendly front- end
00:07:56.400
development.
00:07:58.240
Uh but let's take a step back and see
00:08:03.759
what JavaScript ecosystem was about um
00:08:08.560
in the next layer. While Rails
00:08:11.520
developers were busy summoning RJS, SJS
00:08:15.440
and all that, JavaScript world invented
00:08:19.039
fire wheels, new frameworks, new tools
00:08:22.639
on a weekly basis. So,
00:08:28.560
Rails had to adopt this
00:08:32.000
increasingly expanding Jazz ecosystem
00:08:35.599
um to keep up with increased users
00:08:38.000
demand because we all wanted new things.
00:08:40.719
Uh so, assets pipeline came in rails 3.1
00:08:44.320
and uh Rails developers got access to
00:08:48.160
SAS, coffecript and other modern
00:08:51.600
JavaScript tools.
00:08:53.839
Uh but with time rails realized that we
00:08:58.880
need to improve uh assets pipeline to
00:09:02.640
keep up with accelerating JavaScript
00:09:05.360
ecosystem. We can't reimplement
00:09:07.200
everything in Ruby. So we
00:09:10.480
uh Rails 5.1 introduced webpacker u a
00:09:15.600
Ruby wrapper again. We're wrapping ugly
00:09:19.200
things, right? So we've wrapped Webpack
00:09:22.720
uh with Ruby and we got access to
00:09:25.440
virtually all JavaScript world
00:09:29.440
but packer tried to hide complexity kind
00:09:32.480
of but um JavaScript fight back. So once
00:09:38.160
um you hit a wall of complexity like
00:09:41.760
making configuration is almost
00:09:44.080
impossible. You now need to fight with
00:09:46.320
two things not one. Um, and while we
00:09:49.519
dropped Webpacker later,
00:09:52.800
uh, we still use assets pipeline to this
00:09:55.360
day. And moreover, Adrian, uh, will talk
00:09:58.800
about how to work with assets pipeline
00:10:00.720
later today here. So come to come to his
00:10:05.040
uh talk if you want to uh know more. But
00:10:07.839
the most important addition was uh
00:10:11.360
actually introduced in Rails 5, Rails
00:10:14.000
API mode. Uh it allowed Rails developers
00:10:18.079
to um work with Rails as a front end um
00:10:23.519
back like back end for any front-end
00:10:25.760
framework and it quickly it quickly
00:10:29.120
become the defacto standard.
00:10:33.920
A ma major part of Rails community seem
00:10:37.440
to abandon the full stack idea and the
00:10:41.040
whole generation including me um of
00:10:44.320
Rails developers seem to be unaware of
00:10:47.440
full stack potential of Rails.
00:10:53.200
Was it really the end for fullstack
00:10:55.600
Rails or Rails just quietly waited for
00:10:58.800
the right time to strike?
00:11:03.360
Let's dig into the final layer. So, uh
00:11:07.440
with time um web platform finally
00:11:11.440
introduced the standards that rails
00:11:14.480
patiently waited for. Web components,
00:11:16.800
CS6 modules, modern CSS, web soockets.
00:11:23.200
And that's when the prophecy of three
00:11:25.360
ways began to unfold. Rails was ready to
00:11:28.800
unleash the full power
00:11:32.480
as a backend perfect back end for any
00:11:35.760
JavaScript framework as a perfect
00:11:39.040
serverdriven fullstack experience and
00:11:42.160
finally as a balanced solution
00:11:44.160
discovered in the most unexpected place.
00:11:48.399
So let's start with the first way. Uh
00:11:50.480
obviously it's about Rails API. Uh while
00:11:53.360
JavaScript frameworks and tools fight
00:11:56.240
each other, uh Rails focused on becoming
00:11:59.120
the perfect back-end foundation.
00:12:02.800
As a result, today we have an unmatched
00:12:06.000
ecosystem of mature battle tested
00:12:09.360
solutions for every backend need.
00:12:12.639
Rails API just works.
00:12:16.160
Authentication, authorization, database
00:12:18.720
layer, serialization, background jobs,
00:12:21.200
everything is out of the box. It's there
00:12:23.839
for you. No external services required.
00:12:26.240
Have anyone try to work with JavaScript
00:12:28.800
ecosystem? You need like buy SAS for
00:12:32.399
everything.
00:12:34.639
Um so
00:12:36.880
Rail API power uh uh powers um complex
00:12:41.680
backends for years and today is still
00:12:44.959
the best solution for bigger teams uh
00:12:48.160
who want to like have a complete freedom
00:12:51.680
in the front end uh department. But be
00:12:55.279
be aware that this pass requires a lot
00:12:58.160
of communication as you heard from
00:13:01.839
uh the first like uh keynote right uh
00:13:04.880
that's a big problem communication and
00:13:07.600
uh coordination of back end and front
00:13:09.279
end teams.
00:13:11.839
Speaking of um the communication problem
00:13:14.720
might be mitigated with documentation
00:13:16.959
first approach. That's an advertisement
00:13:20.480
uh shameless plug. Uh so in a couple
00:13:23.839
words you want to write documentation
00:13:26.880
for your APIs first then your teams can
00:13:30.720
go to this interface together at the
00:13:33.279
same time. Uh and to make this easier
00:13:36.399
you can use say open API. Uh and the
00:13:40.079
best way to work with open API is to use
00:13:43.440
schuma. This is a um gem that helps you
00:13:47.839
to validate your API against the open
00:13:51.360
API schema which works great. Um if
00:13:55.200
you're interested, you can check the uh
00:13:57.440
article about that. Anyway, um with the
00:14:01.839
web platform finally catching up, uh
00:14:04.639
Rails was ready to unleash the perfect
00:14:07.760
vision of server drived driven uh
00:14:09.920
development.
00:14:12.399
Hotfly is a set of tools uh built on top
00:14:15.600
of previous Rails iterations designed to
00:14:18.240
make serd driven development fl like
00:14:21.600
fast, secure um and easy to use.
00:14:26.560
The main idea behind Hotfire is to split
00:14:29.120
pages into small parts called tourrains.
00:14:33.040
Uh and that allows you to replace parts
00:14:35.600
of the page with new context without a
00:14:37.760
full page reload. For example, here you
00:14:40.320
can uh replace your line um
00:14:44.399
the post line uh to the form using the
00:14:47.839
same post ID tag. And that might seem
00:14:52.000
like a paradigm shift, but it's actually
00:14:55.839
um natural evolution of the ideas from
00:14:59.279
2005.
00:15:03.040
Hotfire also fixed most of the issues of
00:15:05.839
previous versions of serd- driven
00:15:07.519
development.
00:15:09.360
Uh to fix restrictive Ruby helpers,
00:15:12.240
Hotfire introduced Stimulus, a
00:15:14.240
lightweight JavaScript framework that
00:15:15.839
allows you to add sprinkles of
00:15:18.079
interactivity u when needed.
00:15:23.279
Web components are used to uh fix uh
00:15:28.000
life cycle issues since uh they provided
00:15:32.079
um a standardized way to manage um
00:15:35.600
component life cycles. They are better
00:15:38.880
than true links because they are not u
00:15:42.000
interfere anything. So right um and
00:15:49.519
speaking of like web components also
00:15:52.079
allowed hotfire to fix the security
00:15:54.160
issues of SJR because now we return just
00:15:57.360
HTML responses not JavaScript responses.
00:16:03.040
Finally, complex webpacker uh was
00:16:06.800
replaced with a new simpler uh Ruby
00:16:09.600
wrapper uh built on top of import map.
00:16:12.720
Uh but rails left the door for uh modern
00:16:15.920
JS tooling open as well. And there is a
00:16:19.279
communitydriven vitrails which is my
00:16:22.959
preference.
00:16:24.880
Um
00:16:27.199
so
00:16:31.199
this is why the long wait paid off. Uh
00:16:35.199
hotfire fixed most of major uh pain
00:16:38.240
points of previous iterations and
00:16:40.720
empowered small teams and soul
00:16:42.720
developers to build modern interactive
00:16:45.120
applications fast.
00:16:47.360
And if you want to learn more about
00:16:49.279
hotwire, check out the documentation and
00:16:52.240
uh awesome
00:16:54.160
talk from Chris uh from Toron Rails. Um
00:17:00.800
Hotfire is a perfect choice for small
00:17:03.440
teams um who that want to leverage Rails
00:17:07.360
uh backend power without the complexity
00:17:09.600
of managing the separate front end
00:17:12.079
infrastructure. Uh but beware because
00:17:15.919
complex cases might still require a deep
00:17:18.720
JavaScript knowledge. You will hit that
00:17:20.880
wall.
00:17:23.600
And the third uh the hidden way that
00:17:26.640
allows us to combine best of two worlds.
00:17:31.039
Uh might it be hotwfire plus frontend
00:17:34.320
components?
00:17:36.720
When you need to integrate a really
00:17:38.480
complex component into your hotwire
00:17:41.200
application, it's possible to wrap it
00:17:43.679
into stimulus controller.
00:17:47.600
It's actually really easy thankful to
00:17:50.640
thankfully to uh the web component
00:17:53.200
nature. Um but unfortunately it requires
00:17:56.240
a lot of boiler plate
00:17:58.960
and to fix it I created turbo mount
00:18:01.600
another advertisement. Uh this gem
00:18:04.480
allows you to embed React view or swelt
00:18:06.880
components uh pass props directly to
00:18:10.320
from rails views. Uh and yeah it's it
00:18:13.919
requires zero boiler plate.
00:18:16.640
Um instead of creating uh stimulus
00:18:20.080
controller you can just use turbo mount
00:18:22.000
helper and it will just work.
00:18:25.360
So if you're interested
00:18:27.840
check this out.
00:18:30.000
Um but all this plug um componentbased
00:18:34.160
approach um not required but it it's a
00:18:37.679
great way to work with your hardwire
00:18:39.679
applications if you have something
00:18:41.200
really hard to implement with like with
00:18:44.400
a lot of local state that works great
00:18:47.039
but is it the ultimate way or is there
00:18:50.080
something else
00:18:52.080
so uh that's the most interesting part
00:18:56.640
uh because in 2018
00:18:59.600
18, Rails placed a seed in Laravel land
00:19:04.080
and it grew into something unexpected, a
00:19:06.720
new approach to build modern web
00:19:08.880
applications. Um, inspired by Turbolinks
00:19:12.160
actually. So, inertiajs
00:19:17.039
inertia acts as a bridge or a glue
00:19:20.080
between front end and back end
00:19:22.160
frameworks and it replaces state
00:19:24.320
management
00:19:26.000
client side routing and moving it to the
00:19:29.440
back end
00:19:32.480
to bring inertia.js back to home to
00:19:35.600
rails. uh you can use inertia rails gem
00:19:39.440
uh and install it uh with generator. it
00:19:42.960
will configure everything for you and in
00:19:45.679
a second you will see the example page
00:19:48.240
running in react view as well
00:19:52.799
and
00:19:55.120
that's just two commands and now um with
00:19:58.480
inertia you use rails routes rails
00:20:01.520
components uh I mean rails controllers
00:20:05.039
uh almost the same way you use them with
00:20:09.840
regular application but instead of
00:20:12.080
passing ing props to uh your view, you
00:20:15.200
pass it to
00:20:17.760
say React component and use it there. Um
00:20:21.520
the beauty of inertia is that it gives
00:20:24.080
you the best of two worlds. Um you don't
00:20:26.880
need to manage APIs or something like
00:20:30.320
that. It just replaces your ERB layer
00:20:33.600
with say React components.
00:20:37.679
So you have all the beauty of Railsway
00:20:41.360
plus all the um
00:20:45.039
like JS ecosystem
00:20:47.760
um greatness. So while being relatively
00:20:52.320
new to Rails uh InertiaJS already became
00:20:55.520
stable in uh the Laravel ecosystem.
00:20:58.799
Laravel flagship products are built on
00:21:01.440
top of uh inertia and react showcasing
00:21:04.720
the power of the technology.
00:21:07.679
So here's some resources uh to help you
00:21:11.039
dig deeper into inertia rails and of
00:21:14.559
course reach out to me if you want to
00:21:16.960
talk about this more.
00:21:20.400
Choose inertia uh when you want rails
00:21:23.120
backend power with front end ecosystem.
00:21:27.360
uh but beware because obviously inertia
00:21:29.600
requires a lot of uh Rails knowledge and
00:21:33.280
your JavaScript framework of choice.
00:21:38.400
So three paths each with clear
00:21:40.880
strengths. Um the beauty is that Rails
00:21:44.159
supports all of them and you're not
00:21:46.480
locked into any single approach.
00:21:50.799
This is the Rails genius. Instead of
00:21:52.960
fighting the JavaScript ecosystem, Rails
00:21:55.200
embraces it. Whatever JavaScript world
00:21:57.679
invents invents next, Rails is
00:22:00.320
positioned to absorb it and integrate
00:22:03.200
it.
00:22:05.760
And what if the next big thing is I mean
00:22:08.720
not from JavaScript ecosystem but from
00:22:11.679
Rails ecosystem.
00:22:14.799
Check out um Mark uh Marcus talk uh on
00:22:19.360
Thursday at 4 PM and you you should
00:22:22.159
should definitely do that. Um
00:22:25.919
another advertori is it a talk or just a
00:22:28.640
like
00:22:30.640
Yeah, sorry. Um so another shameless
00:22:33.360
plug. Um we run u a new uh San Francisco
00:22:38.960
uh Ruby conference uh and there will be
00:22:42.720
inertia JS uh workshop there. So visit
00:22:47.200
um come to us and also the CFP is still
00:22:50.960
open uh till the till the end of the
00:22:53.679
week I guess. So uh if you have some
00:22:56.080
ideas for the talk uh welcome and yeah
00:23:00.400
that's it. Thank you.