00:00:00.000
oh hello hey everybody how's it going
00:00:18.170
that was rhetorical
00:00:22.760
alright uh so welcome to six degrees of
00:00:26.880
JavaScript on Rails I'll introduce
00:00:29.039
myself in a second but while people kind
00:00:32.219
of keep filing in he's gonna tell a
00:00:34.440
short little joke for you guys so the
00:00:38.340
other day I was going to a I was going
00:00:41.520
to a museum and I was really excited I
00:00:43.230
was really looking forward to it it was
00:00:44.879
an etch-a-sketch Museum you see all this
00:00:47.010
fabulous have to sketch art but there
00:00:49.350
was an earthquake today before so by the
00:00:51.750
time I got there it was way too abstract
00:00:53.640
for me to understand any of it anyway
00:00:57.690
that has nothing to do with any of this
00:00:59.789
but you can like try to read into it
00:01:01.559
super hard if you want anyway let's get
00:01:04.860
started
00:01:06.080
Who am I so my name is Michael Chris
00:01:08.790
Molly I work at a company called dub
00:01:12.750
mine software I started out there as an
00:01:15.330
apprentice after finishing a code boot
00:01:17.520
camp a starter League now in Chicago I'm
00:01:21.210
currently a senior developer there lots
00:01:24.150
of good times with lots of good people
00:01:25.729
you can find me on github it's just my
00:01:28.439
last name Chris Molly I would have put
00:01:30.750
my Twitter up here but I don't tweet or
00:01:32.549
go on Twitter so it's don't waste your
00:01:35.400
time
00:01:38.450
cool so there are six degrees of
00:01:41.610
JavaScript on Rails let's get into it
00:01:45.329
I went super hard on the page flip
00:01:47.310
animation too so get used to it so why
00:01:53.070
should you care about this well there
00:01:55.740
are a few reasons for that the first one
00:01:58.549
JavaScript isn't escapable
00:02:00.710
javascript is coming for everything can
00:02:03.060
run it on native it's everywhere so
00:02:06.950
learning toe I kind of like get along
00:02:09.270
with it will make your life a lot easier
00:02:11.870
and especially for us as like rails
00:02:14.270
developers primarily working in Revit
00:02:15.890
web applications there are just certain
00:02:18.260
things only JavaScript can do for us
00:02:20.300
right and a big problem that I've found
00:02:27.920
kind of like in our industry and across
00:02:29.600
different teams is that because everyone
00:02:32.990
has to use JavaScript but everyone has a
00:02:34.700
preferred kind of like back-end
00:02:36.080
framework like no two rails or whatever
00:02:40.210
is that essentially JavaScript ends up
00:02:43.160
being kind of like we're browser based
00:02:44.990
JavaScript ends up kind of being like a
00:02:46.340
sort of like a second-class citizen your
00:02:48.350
application and something you write just
00:02:50.570
to get through it like you need that
00:02:52.010
little animation you need that flash
00:02:53.420
message to fade away you get in you get
00:02:55.940
out it doesn't look very pretty but you
00:02:58.250
don't have to like look at it ever again
00:03:00.910
but most of us are on teams with other
00:03:03.980
people and we all have like different
00:03:05.600
skill levels and we can have different
00:03:07.010
levels of comfort with JavaScript so for
00:03:09.800
someone who say like much more
00:03:11.240
experienced might be trying to pull the
00:03:12.680
team work towards a one of those like
00:03:14.840
sleek new like single page applications
00:03:17.750
or a progressive web application or
00:03:19.460
whatever the sweet acronym is today that
00:03:21.770
everyone wants to build but then you
00:03:25.310
have you know other people who are just
00:03:26.480
used to jQuery or don't know anything
00:03:28.790
about JavaScript and all these people
00:03:30.710
have to work together and supposedly
00:03:33.380
they are like all kind of like the same
00:03:35.690
because they all had those similar
00:03:36.860
backgrounds and rails probably but when
00:03:39.830
it comes to JavaScript to like the
00:03:41.240
amount of like disparity and like skill
00:03:42.920
level can like vary wildly that's a
00:03:45.620
picture from the WWE I think so
00:03:53.110
what ends up happening is we end up
00:03:55.280
feeling like we have to make a choice
00:03:57.530
between one of two extremes we either
00:03:59.180
stay as like vanilla rails as possible
00:04:01.910
just er be Hamill like basically as like
00:04:08.120
stay away from the asset pipeline as
00:04:10.130
much as we can or we have to go all-in
00:04:12.680
basically build a rails API and then set
00:04:15.500
up and deploy a second like JavaScript
00:04:18.590
only single page app and get us three
00:04:21.260
set up and all of that good stuff
00:04:24.990
and that's I don't know that's a
00:04:27.930
difficult choice to make when you have
00:04:29.610
people on your team that like may not
00:04:32.310
all know the same thing like and true
00:04:34.919
like a single-page app has like some hot
00:04:36.720
user interaction capabilities but if you
00:04:40.440
know only one person on the team knows
00:04:42.030
that things aren't going to go super
00:04:43.259
great so that's kind of a false choice
00:04:49.220
you don't have to choose between just
00:04:52.530
like vanilla rails and like a single
00:04:55.560
page web application you can kind of mix
00:04:59.759
it up and we can go through kind of all
00:05:02.729
of the various degrees of that no side
00:05:05.370
note - there's actually this is a
00:05:07.500
spoiler but there's maybe like a secret
00:05:09.960
7th degree but my talk like six degrees
00:05:13.020
makes a lot more sense than like seven
00:05:14.550
circles so just wanted to like stick
00:05:17.250
with that also - there will be no like
00:05:20.909
Kevin Bacon reference in this talk if
00:05:23.520
you're waiting for that it's not going
00:05:25.319
to happen so the first degree is
00:05:28.590
unobtrusive javascript this is
00:05:30.960
JavaScript that kind of works out of the
00:05:33.659
box and basically every rails
00:05:35.250
application I'll see you pass some fun
00:05:37.409
command-line arguments to Rails new so
00:05:41.580
it's pretty select it's pretty nice you
00:05:44.310
can basically get away with not knowing
00:05:46.830
any JavaScript about creating some like
00:05:48.870
pretty nice basic user interactions and
00:05:52.409
like a lot of times like you don't even
00:05:55.289
realize you're using it for me
00:05:58.710
personally the time I always forget
00:06:00.900
about it is when I can't just set method
00:06:03.180
on an a tag and get a delete out of it
00:06:07.910
oh yeah all these all these are examples
00:06:10.730
of it like getting a nice confirm box to
00:06:12.560
make sure people like really want to do
00:06:14.030
it disabled with on sign in if you've
00:06:17.660
ever had someone give you a bug where
00:06:19.040
they created three of something because
00:06:20.720
they just keep clicking the button so
00:06:24.980
yeah so say yeah so most people like
00:06:30.710
this is fine anyone can kind of work
00:06:32.390
with this if you're like proficient in
00:06:34.070
Rails you can get away with dealing with
00:06:36.350
this the next step getting a little
00:06:39.950
harder is you have like jQuery or some
00:06:41.840
kind of widgets getting a sprawled out
00:06:44.120
all across your page so this is classic
00:06:48.770
this is what I feel like JavaScript
00:06:51.080
development and the rails application is
00:06:52.730
usually like for most people you end up
00:06:57.770
here basically probably a few script
00:07:01.370
tags you're not really like organizing
00:07:03.350
it you just kind of like do what you
00:07:05.000
have to do if you're clever you probably
00:07:08.870
have like a clip like a heuristic round
00:07:12.320
like naming or applying certain class
00:07:15.290
names to certain elements so things just
00:07:16.820
kind of happen automatically you don't
00:07:18.380
have to think about it generally like
00:07:21.140
type-ahead search or custom dropdowns
00:07:24.640
those are the those are the most common
00:07:26.570
places in my experience and usually like
00:07:29.950
eventually this kind of well let's go
00:07:34.040
through this example real quick so this
00:07:35.600
is a very small example
00:07:36.800
just a quick script tag we wait till the
00:07:39.110
documents ready we fade out our flash
00:07:41.240
message we set some custom select
00:07:43.580
drop-down menus because you know the
00:07:46.130
browser default one is not good enough
00:07:48.440
for us or whatever so eventually as this
00:07:52.730
kind of goes on you add more of these
00:07:54.650
like script tags things kind of start to
00:07:57.710
collide you're living in like the global
00:08:00.050
namespace in your java applet or your
00:08:01.940
javascript in your browser so things
00:08:05.360
start to conflict or maybe you have like
00:08:07.220
a type on a class name things just
00:08:09.169
aren't going super great should I
00:08:13.070
I've heard commonly referred to as
00:08:14.600
jQuery soup
00:08:16.319
so to get out of that kind of like soupy
00:08:21.029
mess which you need to start adding some
00:08:25.949
structure around it you can incorporate
00:08:28.349
jQuery into this as well
00:08:30.539
rails has a new library that's come out
00:08:33.419
recently called stimulus that also kind
00:08:37.529
of solves this problem there are some
00:08:38.550
other things that's all this problem - I
00:08:40.680
think redirect rails has some data
00:08:43.380
passing help or kind of thing yeah this
00:08:47.670
is where you start to reach a point
00:08:49.079
where before before you're probably
00:08:51.720
wearing like testing any of your
00:08:52.889
JavaScript maybe you had like a system
00:08:54.750
test for it something like that at this
00:08:56.790
point things get to be more organized
00:08:59.699
maybe you're going to start adding some
00:09:01.370
unit tests for it
00:09:05.430
and you're gonna start like typically
00:09:07.890
the way these things end up working is
00:09:09.120
you end up like putting a lot of more
00:09:11.340
data attributes into the Dom basically
00:09:13.800
every version of the solution I've seen
00:09:15.780
to this usually involves like tons of
00:09:17.400
data attributes for everything yeah and
00:09:22.590
so as you start to organize things this
00:09:24.270
can go pretty well you don't need web
00:09:28.230
hacker to do this you have to just be
00:09:30.750
careful in a regular asset pipeline just
00:09:33.930
to make sure you're not like clobbering
00:09:35.700
global variables that kind of thing it's
00:09:38.100
pretty risky if you want to this is also
00:09:40.080
a point where you'd start to add web
00:09:42.330
Packer and some of those things enjoy
00:09:44.160
some of those nice Essex features get
00:09:46.770
classes bound methods that kind thing
00:09:49.880
we're gonna take a look at this is I
00:09:53.820
know this is kind of an overwhelming
00:09:55.230
example but we're gonna go through a
00:09:57.390
little bit this is like a small stimulus
00:10:00.440
controller I believe is the term so you
00:10:03.630
can see up at the top here we have a div
00:10:06.330
and we've just added this data attribute
00:10:09.240
to tell it oh the controller is called
00:10:10.890
clipboard and that kind of corresponds
00:10:13.380
to the name of this file
00:10:14.970
I think stimulus just kind of like works
00:10:16.560
all of us out for us
00:10:19.470
then basically we can tell it Oh like we
00:10:22.410
want this thing to be we want this input
00:10:24.600
tag to be the source so we're basically
00:10:26.160
saying like we want to save this element
00:10:28.590
have a reference to it as we're trying
00:10:30.420
to work through we specify that in our
00:10:32.610
code by matching this name for targets
00:10:35.160
so that way we'll have access to the
00:10:36.570
Soliman we also have this connect method
00:10:41.100
here and that basically takes care of
00:10:43.260
like Oh in this controller kind of like
00:10:45.420
launches itself trying I'm struggling to
00:10:49.380
avoid using reactor terms for it but
00:10:52.890
yeah when it launches itself it will
00:10:54.390
basically like you can do some checking
00:10:56.010
here I'm doing some checking to make
00:10:57.060
sure I'm even allowed to do like a like
00:10:58.950
you know copy this into my clipboard
00:11:00.660
kind of thing if I can do that we add a
00:11:04.440
class to make sure the buttons like
00:11:06.000
visible so that way for on an older
00:11:07.410
browser it kind of feels gracefully in
00:11:11.610
the last little chunk of this is that we
00:11:13.380
add an actual like function binding to
00:11:17.700
this button so basically this will
00:11:19.680
execute our copy function just by virtue
00:11:21.480
of that kind of like action magic string
00:11:25.050
up there and we can like to select our
00:11:26.970
target copy it and it's all pretty
00:11:30.150
straightforward rails will like make all
00:11:32.010
of this work with turbolinks you can
00:11:33.810
just sprinkle these data attributes
00:11:35.610
everywhere or like split them into
00:11:37.140
partials and things will go pretty well
00:11:41.690
one downside to this is that you end up
00:11:45.390
with a pretty I'm gonna you end up
00:11:48.990
basically having to like do a lot of
00:11:51.060
work yourself in a lot of ways you price
00:11:54.420
don't want like jQuery in here at this
00:11:56.010
point working with like the rod can be
00:11:59.570
pretty difficult in a lot of cases
00:12:03.410
especially like differences and browsers
00:12:05.580
and subtle naming conventions all that
00:12:07.590
kind of thing
00:12:09.280
so our next step as our team is kind of
00:12:13.150
becoming more advanced with JavaScript
00:12:14.710
is we can add a little bit of JavaScript
00:12:16.110
just like a little sprinkle of the
00:12:18.700
framework so it's just a little taste
00:12:22.080
this would be for more complicated
00:12:24.550
interactions or more probably more
00:12:27.490
custom interactions if you don't like
00:12:28.960
say jQuery UI is custom select drop down
00:12:31.510
you might write your own little custom
00:12:33.640
drop down and you can apply that to the
00:12:35.080
page everywhere and you can also sort of
00:12:37.750
lean into and start kind of practicing
00:12:39.460
with whatever the I don't know whatever
00:12:42.280
framework is your particular favorite
00:12:44.370
for the rest of this talk most of my
00:12:47.530
examples involving frameworks where I'll
00:12:48.910
involve react because that's what I know
00:12:50.590
and that follows all of my biases it's a
00:12:54.130
full disclosure but typically this kind
00:12:57.010
of sprinkling of the framework just
00:12:58.030
controls part of the page you're not
00:12:59.650
driving all of your user interaction
00:13:02.560
most of what's going on is still
00:13:04.210
happening on the rail side or any RV or
00:13:06.550
Hamill so here's another unwieldy
00:13:11.800
example so this is just like a little
00:13:13.690
comment bubble and all we're doing here
00:13:18.190
is it has a it has a little state we
00:13:24.220
keep track of our text in here we have
00:13:26.440
like a function here to save all of our
00:13:29.530
text or save our comment here and some
00:13:32.830
markup to kind of like piece it all
00:13:35.020
together down here at the bottom is
00:13:38.380
probably one of the more important parts
00:13:40.660
for a pattern like this is that when you
00:13:43.089
load the page you can just grab
00:13:44.680
everything that fits this class name and
00:13:46.540
then tell react to render and tall of
00:13:48.280
these things so basically you can just
00:13:50.410
name things in your HTML templates and
00:13:55.300
Java Script magic just kind of starts to
00:13:57.610
happen everywhere what if you wanted to
00:14:00.130
you could put it into a like a pack tag
00:14:03.370
or something like that and then like
00:14:05.110
just only load that JavaScript for just
00:14:06.790
that one page
00:14:09.910
you know it's now we're moving on to
00:14:13.209
framework pages so a framework page is
00:14:17.480
kind of like the next step in this
00:14:19.310
evolution right you end up with more
00:14:22.040
JavaScript the interaction gets more
00:14:23.450
complicated you just need to kind of
00:14:25.550
take over everything
00:14:28.240
typically I see this in more of like a
00:14:31.459
uh
00:14:32.269
I don't know this could also be like
00:14:35.029
sort of like a little like widget wizard
00:14:36.740
like if you're signing in and you need
00:14:38.089
to fill out a bunch of information you
00:14:39.560
don't want tons of routes cluttering up
00:14:41.540
your rails app and basically force
00:14:44.450
people to kind of like start over if
00:14:46.040
they fall out that sort of thing you'll
00:14:48.230
have tons of interaction you're like
00:14:50.690
rails templates are gonna get very
00:14:52.480
sparse and possibly sparse sometimes but
00:14:58.490
that's okay you'll be leaning into your
00:15:00.140
framework and at this point like
00:15:03.880
everyone on your team should be a bit
00:15:06.110
more comfortable with that and maybe
00:15:08.899
you'll even get some client-side routing
00:15:10.339
in there if you want to like preserve
00:15:11.600
some like sharable links some of those
00:15:14.480
factors start making a bigger difference
00:15:17.440
especially depending if you're sharing a
00:15:19.670
lot of like content or that kind of
00:15:21.470
thing
00:15:23.780
so here we have a quick little example
00:15:28.360
obtained you can see there's a style
00:15:32.630
sheet pack tag JavaScript tech pack tag
00:15:34.640
and a div this is it for our template
00:15:40.870
all we need at that point is basically
00:15:43.430
our job or react component and we take
00:15:46.310
that mean just grab the that wizard div
00:15:49.480
and we just render right into it and
00:15:52.040
then JavaScript takes it from here and
00:15:56.000
here we're kind of like rendering like a
00:15:57.470
slide show and kind of like managing
00:15:59.030
things with the routes inside of it
00:16:02.330
so it's all pretty there's a lot of like
00:16:06.680
nuance around like the particulars of
00:16:08.570
like which JavaScript framework you
00:16:10.970
choose but pass a certain point rails
00:16:13.250
doesn't really care what kind of like
00:16:14.600
JavaScript you're like pushing out into
00:16:16.370
this you just have to structure it
00:16:19.430
appropriately and rails rails won't get
00:16:23.240
in the way or anything like that so this
00:16:28.610
is the sixth degree maybe the last
00:16:30.710
degree so this is basically where you
00:16:34.880
essentially just have a single page
00:16:36.350
application running inside of your rails
00:16:38.120
app all you're doing in here is
00:16:40.460
basically like tons of client-side
00:16:43.430
rounding or routing you get all of the
00:16:47.090
benefits of kind of having like a single
00:16:48.980
page app and some of the drawbacks but
00:16:51.380
at least you're not complicating your
00:16:52.520
deploy process so they like it setting
00:16:55.670
up those extra s3 buckets like if you
00:16:58.910
deploy to Heroku or whatever all your
00:17:00.950
normal kind of build process will just
00:17:03.110
work out of the box
00:17:05.510
Mata's can save this can save you a lot
00:17:09.500
of trouble and especially to if you end
00:17:11.480
up in a situation which I find for a lot
00:17:13.880
of apps I've worked on is so I use
00:17:15.770
usually be something it's more more user
00:17:19.790
facing and more like something where
00:17:22.010
administrative like a CMS that kind of
00:17:24.020
thing so here you can actually just kind
00:17:26.120
of like host both of those so if you do
00:17:27.770
need to share components and that kind
00:17:29.690
of thing between these two things you
00:17:30.890
don't have to like do a bunch of magic
00:17:32.660
to like build up a mono repo and deploy
00:17:35.300
all of that stuff you can basically just
00:17:37.520
tell rails like hey forward everything
00:17:39.500
from slash admin onward over to this
00:17:42.230
application and just take it from there
00:17:45.080
and things go pretty smoothly here I
00:17:50.690
guess her rails app doesn't actually
00:17:52.370
have any data manipulation going on it
00:17:55.430
but it has these sweet JavaScript apps
00:17:57.080
so so
00:18:02.390
this is the thrilling conclusion I tried
00:18:05.840
to like to steady myself with all of
00:18:07.760
these like sweet keynote fire animations
00:18:09.830
but I like couldn't do it I got to the
00:18:12.020
end and I was like I need some fire in
00:18:13.790
here
00:18:17.380
so here we go so just a quick recap of
00:18:20.810
the six degrees we have unobtrusive
00:18:22.910
javascript we have jQuery and widgets
00:18:26.050
you can use structure and stimulus you
00:18:29.150
can add a little bit of a framework a
00:18:30.590
bit more of a framework or just go all
00:18:32.450
in on the framework in the context of a
00:18:34.100
rails application what is this let's see
00:18:40.930
so you don't have to choose just the six
00:18:43.310
degrees you can actually do a lot of
00:18:47.240
mixing and matching as long as you're
00:18:50.450
careful to do things right like just
00:18:53.270
make one page run a framework another
00:18:55.790
page just uses the regular kind of
00:18:58.990
intrusive j/s it's that way you can have
00:19:02.120
like different people with different
00:19:03.800
skills that's kind of like kind of like
00:19:06.590
working in their Lane and working
00:19:08.300
ideally pairing with people to kind of
00:19:10.340
like spread that knowledge around and
00:19:12.380
get it to other people but they can also
00:19:16.760
still work in the rest of the
00:19:17.960
application very like self-sufficiently
00:19:22.330
and as far as like the risks go I mean
00:19:26.960
it's really you just have to be careful
00:19:28.520
in your like route file like if you're
00:19:30.320
forwarding requests you can end up with
00:19:31.970
a lot of things or like I didn't mean to
00:19:33.260
go here but for the most part you'll be
00:19:35.690
fine
00:19:37.790
so I've put together a little list of
00:19:40.650
resources here I first off deadline.com
00:19:45.660
we have blog posts all that kind of
00:19:47.280
thing so that's our plug aside from that
00:19:49.860
you can check out on a piece of
00:19:51.960
JavaScript to learn more about jQuery or
00:19:53.730
stimulus and web Packer
00:19:55.760
and there as always there's tons of
00:19:58.590
react and angular Doc's all that kind of
00:20:00.270
good stuff after we wrap up here I'm
00:20:05.010
gonna be available up here for questions
00:20:06.929
and comments if you want to talk to me
00:20:08.340
like I don't know what we're quite set
00:20:10.169
up for that like microphone thing so
00:20:12.059
just come talk to me and yeah just say
00:20:15.840
hi if you want to so that's the end