00:00:00.079
so my presentation would start from
00:00:04.740
where I left it the last time and this
00:00:08.610
was to migrate basically from sprockets
00:00:11.160
to web Packer and I was explaining you
00:00:14.700
some of the advantages of doing that and
00:00:17.600
how to do that and yeah so basically
00:00:22.560
what I was trying to do is to convince
00:00:24.840
you that it's time to switch the web
00:00:27.060
Packer and today I will continue on that
00:00:31.529
topic and they will start showing you
00:00:33.450
some of the advantages that you have if
00:00:36.210
you are using web Packer so this this
00:00:42.930
feature is really important and really
00:00:44.640
really nice and it's called hot module
00:00:46.800
reloading and well if you are a
00:00:49.079
front-end developer and you worked
00:00:50.489
already with I don't know react or
00:00:52.949
angular maybe I'm not saying anything
00:00:55.350
new to you but what is important to know
00:00:58.289
is that well you can do it also in rails
00:01:00.510
and it's easy to do and it's easy to
00:01:02.850
come your so I will show you a little
00:01:05.670
bit how nice it is nowadays to work on
00:01:09.390
the front end with rails if you use web
00:01:12.030
Packer since I don't know with the rails
00:01:14.970
developer everyone okay well then
00:01:18.330
probably you know the pain of developing
00:01:22.020
on the front end I mean maybe you change
00:01:23.640
the CSS class and then on your editor
00:01:25.979
you change something you go on the web
00:01:28.670
prep this loop which is usually a bit
00:01:35.100
long so I want to except from the
00:01:40.020
presentation apparently I can't good so
00:01:50.399
I will present you my wonderful
00:01:52.799
application today and well we have a
00:01:56.700
basic page under our domain faster
00:02:00.240
front-end or we say on the world we are
00:02:02.430
put here where we can type some text
00:02:04.259
then we have a button which says hello I
00:02:07.380
am a button so
00:02:16.180
let's take a look at that code you still
00:02:21.799
see some wonderful code up the double
00:02:25.909
brake line and button that speaks and an
00:02:29.780
input and well it's let's start enabling
00:02:33.260
hot module reloading by default new
00:02:37.340
Packer is not enabled you can see the
00:02:40.549
web Packer configuration that you have
00:02:42.200
in the project and you see that hot
00:02:44.569
module reloading means basically that
00:02:49.940
you have hot live reload the difference
00:02:52.910
is that hot live reload reloads the
00:02:54.769
entire page so when you change a file
00:02:57.140
the hot library load will just perform a
00:02:59.989
refreshing your browser and therefore
00:03:02.780
you will lose the current state too so
00:03:05.299
for example if we take our CSS and we
00:03:09.920
say okay change the main color from blue
00:03:12.470
to red and then we go to the website yes
00:03:17.060
okay it changed but if I have a value in
00:03:20.030
the field then this will be lost because
00:03:26.450
I mean you perform a full refresh of the
00:03:29.120
page
00:03:32.379
what is nice that you can activate
00:03:35.359
already web web Packer I will show you
00:03:37.400
this quickly is that
00:03:38.930
well web pecker comes by default with
00:03:40.849
the source maps but the source maps
00:03:42.470
include the content in themselves so you
00:03:45.709
can change this behavior by changing the
00:03:49.489
web pack configuration for development I
00:03:52.340
will share you the code but basically
00:03:54.889
you say a source map contents false so
00:03:58.160
don't include the content in the source
00:04:00.470
maps but you can go in your browser if
00:04:05.090
you're using Chrome it works also for 4
00:04:09.319
5 4 5 fox you can go in sources and your
00:04:13.370
left thigh list over here and here you
00:04:17.539
can basically drag your basically drag
00:04:23.539
if it works
00:04:24.919
yes your folder
00:04:28.189
you lied allow the browser to access it
00:04:30.680
and then we restart what Packer because
00:04:37.310
we changed configuration here so when
00:04:39.979
you change configures like when you
00:04:41.509
change the configuration in the
00:04:42.620
environment in race you have to restart
00:04:44.210
the server and ok so now we can see that
00:04:51.259
from the elements panel we can directly
00:04:56.029
access our files files by having this
00:05:01.629
know if you see it but green dot and
00:05:05.800
then you can start changing things
00:05:08.180
directly in your browser ok so this is
00:05:13.939
already a step a step forward we can
00:05:16.219
work in the browser change things and
00:05:18.939
well it's much better than switching
00:05:22.159
from the editor to the browser but what
00:05:25.669
we are still missing here is the hot
00:05:27.889
library load so if I change something
00:05:30.819
yeah ok nice but the value is lost
00:05:33.849
so I didn't invent anything here web
00:05:37.610
Packer comes with it you can just
00:05:40.460
configure it and set it to true optimal
00:05:43.159
you reload again restart it and well you
00:05:49.039
need also to restart the server the
00:05:52.000
reads this on the startup so yeah you
00:05:57.949
have to reload also the res server
00:06:11.880
now website see an error maybe not even
00:06:19.020
better
00:06:21.950
we lost the functionality so we lost the
00:06:25.620
possibility to think directly from the
00:06:29.160
elements panel to the source file this
00:06:32.100
is not possible because how it works the
00:06:37.590
hot live reload it basically injects the
00:06:39.810
see the CSS not from the source file the
00:06:43.710
CSS source file but through a JavaScript
00:06:46.470
so it's like injected as a JavaScript
00:06:49.200
file and that's how the hot live reload
00:06:51.780
works so yeah we can still change things
00:06:54.900
directly in the browser and they will be
00:06:57.480
updated and now since the CSS is
00:07:03.690
injected we also don't state of our okay
00:07:07.590
so that's really really convenient to
00:07:10.560
work in my opinion yeah now from the
00:07:13.380
elements panel
00:07:14.220
I cannot go here and click and link
00:07:16.830
directly to the file unfortunately maybe
00:07:20.070
you'll find out how to do that but I
00:07:22.200
didn't find a way okay that's that's
00:07:25.770
already really interesting from my point
00:07:27.900
of view to work with CSS in Reyes this
00:07:30.330
will speed up already what your your
00:07:33.900
work but let's get also to the
00:07:36.180
JavaScript part so we have a button
00:07:38.700
right which says hello I am a button and
00:07:41.580
we want to enable hot live reload for it
00:07:44.790
as well so for our JavaScript and then
00:07:47.670
we'll show you quickly how it works with
00:07:49.710
basic JavaScript but yeah you will see
00:07:52.910
so here we have basically a simple file
00:07:58.500
which it exports a simple function alone
00:08:01.160
says hello Emma button and then if we
00:08:06.300
check our application dot say yes it's
00:08:10.730
really easy it
00:08:14.470
for its yellow function from the package
00:08:16.990
can you read yes and then takes the
00:08:20.400
speak button and the touches and even
00:08:23.950
listener click hello
00:08:26.460
perfect so if we want to how to reload
00:08:30.640
our hello module what we have to do it
00:08:34.830
to write something like that so I will
00:08:42.789
explain in a second so we first check if
00:08:45.880
hot module reloading enabled if it's
00:08:49.570
enabled we listen on changes to this
00:08:52.510
file
00:08:52.990
they are load up to yes and for now I
00:08:55.900
will just print an alert so that say say
00:09:00.070
I reloaded this file so maybe I have to
00:09:05.620
restart
00:09:06.190
I shouldn't so we can open the yellow
00:09:10.900
from here and say hello I am a button
00:09:14.080
can you read yes
00:09:15.960
I'm about to - ok and we have the alert
00:09:20.710
so it reloaded the file it was listening
00:09:23.080
on the yellow dot yes it checked is so
00:09:26.080
that the file changed and reloaded it so
00:09:30.400
now if we click on the tasting button it
00:09:33.760
still say I am about so the problem here
00:09:38.020
is that we reloaded the module but the
00:09:41.260
button is still attached to the old
00:09:42.910
function so yeah I have to do it
00:09:46.690
manually the only way that we have is to
00:09:49.360
do it manually so well let's take this
00:09:55.030
code that I kindly prepared for you so
00:09:59.470
what I'm doing here I take again the
00:10:01.480
speak button
00:10:02.230
I remove the even listener and click and
00:10:05.950
I edit again and well good
00:10:12.970
now it did put down three I have to let
00:10:25.360
me cut on three it accepted the updated
00:10:28.480
ello and it refresh the page so to be a
00:10:35.410
bit it's a bit tricky you have to be
00:10:38.140
careful because if there is an exception
00:10:40.090
inside this block you will not see it
00:10:43.710
but then on the page or you don't see
00:10:47.650
anything what you need is a try let's
00:10:53.320
see get error right consult error error
00:11:02.110
and yeah easy so well by doing so you
00:11:10.450
will notice that now if I change
00:11:13.840
something and hello I am button blue
00:11:17.980
even if it's not yeah take that and if
00:11:22.870
you go in the console aha okay we have
00:11:25.840
an error maybe we didn't show it before
00:11:28.030
to you but they are always not there it
00:11:30.250
just refreshes the page it's no
00:11:32.410
refreshes the page but now see the
00:11:35.020
errors
00:11:52.450
on your element remove the old element
00:11:56.210
touch the new element and the touch they
00:11:59.120
even again so okay
00:12:01.970
in this doing like that it works I mean
00:12:04.700
you have optical people holding
00:12:06.590
activated but as you can see it's not
00:12:08.900
really handy for JavaScript because you
00:12:10.940
have really to a lot of work manually
00:12:13.160
but I wanted to show you this because
00:12:15.920
now you can understand how it works and
00:12:19.089
I think it's really really useful to use
00:12:22.400
it with in combination with react
00:12:24.500
because we'd react or also angle oh my
00:12:31.430
all of is covered have to do anything I
00:12:35.710
can show you quickly if you have
00:12:38.870
questions in the meantime it was a clear
00:12:41.839
enough did you follow me so let's start
00:12:53.390
the other project okay this other
00:13:00.830
project is quite different whoops good
00:13:12.280
so it's the same done with react
00:13:15.230
we can check quickly the code it could
00:13:18.350
be interesting maybe not okay
00:13:25.360
basically have same but in a reactive
00:13:28.000
component so this is a a react component
00:13:30.700
right we have our component the
00:13:33.640
constructor and then we have our
00:13:36.690
component that does the same hello word
00:13:39.480
it has a value and will change it will
00:13:42.940
save the value in the state of the compo
00:13:45.880
and we have a button that on click
00:13:49.029
speaks so let's see how to enable hot
00:13:56.470
module reloading here we have it already
00:13:58.209
enabled they enabled it for you
00:14:02.440
beforehand and this allows us already to
00:14:09.910
do pretty much everything let's see the
00:14:15.790
application dot - yes I wanted to show
00:14:17.800
you that yes that's important so how do
00:14:22.750
we render the component we have an inner
00:14:25.360
function that takes a component and just
00:14:28.390
renders it under the root you need a
00:14:31.089
deep to render it not put the component
00:14:34.390
react component see and then what know
00:14:37.810
that I just render a low component I
00:14:40.240
showed you before and see you so before
00:14:43.480
the module module hot I listen on this
00:14:48.760
file I accept changes on it and if this
00:14:53.290
file changes I render again the same
00:14:57.910
file yeah now here there is and this is
00:15:00.940
useless sorry
00:15:04.410
okay so I just reload the file listen to
00:15:07.990
the change something changed okay reload
00:15:10.360
it and we render it perfect so we can go
00:15:13.510
in our example okay have the old folder
00:15:19.750
I have to remove this folder I have to
00:15:25.480
add the other project we change the
00:15:28.899
project good so
00:15:33.980
we have a component here l award we have
00:15:36.290
a button that says I can speak we can
00:15:39.640
change the code down here I can speak
00:15:42.530
loudly how to reload ok taught to reload
00:15:48.380
the file and now if I click it can speak
00:15:52.550
loudly so it works
00:15:56.570
it automatically works with react is
00:15:59.000
much nicer than what we had to do before
00:16:01.160
as you can see it's much less stuff but
00:16:05.090
there is one last piece missing and is
00:16:08.240
the state unfortunately what we are
00:16:10.400
doing is basically to replace the
00:16:12.050
component so if I have a value here and
00:16:15.190
I change something here again yeah it
00:16:22.580
hot reloads the component but your state
00:16:25.400
is lost so to solve this there is a nice
00:16:30.260
web pack I don't know library gem the
00:16:35.810
code that you can install with being
00:16:39.500
young it's called the react hot loader
00:16:43.870
well it's there we have a loader you
00:16:47.300
just install this package for web pack
00:16:50.270
and then you have to change your label
00:16:53.990
bubble RC configuration that you already
00:16:57.830
have in your race project if you are
00:16:59.570
using react and basically you enable
00:17:02.420
this plug-in okay now it's clear and
00:17:08.650
then we have to declare that your body
00:17:11.090
is hot and I mean easy react top loader
00:17:19.310
since version 4 it's much easier to use
00:17:21.740
you just import this hot function you
00:17:25.580
don't export any more module by default
00:17:28.070
from the class but you export an hot
00:17:32.120
version of it and that's it yeah now
00:17:39.860
that
00:17:40.300
we changed the bubble we have to restart
00:17:43.300
but back left server well and basically
00:17:47.950
now you will see that the state is kept
00:17:52.860
so if we have a value it can speak and
00:17:58.080
well you can speak to the values still
00:18:02.170
there but you can speak to and you can
00:18:06.490
do everything you can do everything
00:18:08.440
inside the browser so here you can say
00:18:10.480
hey this state text
00:18:13.630
oh hello value so you can literally
00:18:19.090
change everything also the CSS that we
00:18:21.430
had before you want it blue and now it's
00:18:24.100
blue our button is bigger so it works
00:18:32.770
it's really easy to configure and yeah I
00:18:38.670
don't know this word this is the way I
00:18:41.320
would like to work from now from now on
00:18:43.660
with rails with using web Packer and
00:18:46.270
having those things enabled also with
00:18:48.790
react components they are really easy to
00:18:51.070
inject so why not and yeah here I have
00:18:56.110
some resources or fonts I wrote
00:18:59.230
everything everything I spoke about
00:19:02.590
today it's and within these three
00:19:04.420
articles I wrote a medium so you can go
00:19:06.940
and check them there is the code and
00:19:08.620
everything there and yeah that's it
00:19:20.310
yes it works yes yes yes it works react
00:19:34.990
totally hello there does does all that
00:19:37.420
for you yeah yes yes but what they say
00:19:54.610
in the react hot loader is that it has
00:19:57.370
really no impact so they take care of
00:20:00.450
disabling themselves in production
00:20:19.419
yeah I guess you can just iterate over
00:20:21.740
the folder and the file names and in the
00:20:24.740
end the meat of this the meat of this is
00:20:32.480
easy right I mean you have just to acept
00:20:34.970
file and then require it again yeah this
00:20:46.130
would be nice but at the moment I didn't
00:20:48.860
find how to yes yes with web Packer
00:20:57.320
could could enable that to rate yes
00:21:00.230
would be nice I agree
00:21:01.820
or maybe there is something I don't know
00:21:03.440
about hundred if you find out I hope I'm
00:21:05.720
happy to to hear it good so I leave you
00:21:17.740
shall I stop recording
00:21:19.610
or you continue from my laptop
