00:00:00.469
okay that's good
00:00:13.200
so welcome everyone so today I will
00:00:18.470
present you how to get to get up sprocket so I call this talk goodbye
00:00:25.019
sprockets because as you may know since here rails approached the JavaScript
00:00:31.740
world and introduced web Packer which allows you to well to use webpack in
00:00:38.100
arrays application and my presentation will not show you how to start a new
00:00:44.820
rails application with word packer because you can find hundreds of tutorials for that on web but I will
00:00:51.960
focus today will be how to move migrate an existing application to sprach the
00:00:59.340
tool to web pack so let's talk about
00:01:06.890
race lost Java's you for sure so that's already they wrote this blog post in April last
00:01:16.229
or so now it's more or less one year that is out and they wanted to approach
00:01:22.799
the JavaScript word and said okay not doing it really right or if you have a
00:01:28.829
more complex front-end application the tools that we had right now are not sufficient so they want the way to
00:01:36.049
include JavaScript in your race application without using gems for
00:01:41.579
example so that you have to include the gem to include some JavaScript will it sound nice and right we wanted it to be
00:01:49.290
easy because we are race developer so we
00:01:54.450
her simple mind that if things work good if they don't work right away we drop
00:02:00.689
them so well this was this was at art another target target was that it had to
00:02:07.710
be backwards compatible so you could use it together with the existing sprocket
00:02:13.770
so is you have less pain in migrating so
00:02:18.900
what they decide to adopt weapon as I said they decided to do that by
00:02:25.200
introducing Web Packer this is a race gem and more or less you
00:02:32.400
start your race application you gave me knows me knows web pack and it's set up already with web pack but the problem
00:02:42.480
was at web Packer 2.0 then this require
00:02:48.540
a look at once so I don't know it
00:02:53.670
included a lot of configuration files in your project and yeah I mean where is
00:02:59.880
the convention over configuration and please doesn't fit trails and introduce
00:03:06.420
it they need rec a second server to serve your assets and also we'd like
00:03:13.230
that and well there was a lot of boilerplate code and therefore they
00:03:20.459
noticed it because the reaction of the community was not really exciting and they fixed everything in web pack 3 my
00:03:28.709
Packer 3 you don't need to run an additional server anymore I mean you can if you want
00:03:33.930
for example hop reload hot library load they extracted all the configuring else
00:03:40.670
in a package so you don't have them in your app anymore so for me it's time to
00:03:48.630
move towards web Packer so let's see a
00:03:55.260
couple of differences so both sprockets and web Packer are javascript compilers bundler so they
00:04:05.280
allow you to take your JavaScript files combine them all and amplify or compress
00:04:12.570
them and serve them to the client so they both offer this feature for
00:04:18.780
JavaScript for style sheets for images all the other assets and both of them
00:04:26.040
support modularity so you can have different modules compile them and include them in different pages at web
00:04:35.730
Packer offers much more because web pack is meant for that it's meant to manage
00:04:41.850
your JavaScript resources so for example it doesn't pollute your global scope
00:04:47.670
because it includes everything in modules it allows shaking it allows you
00:04:55.560
to a pot live reload so if you change something in your JavaScript the page is refreshed immediately
00:05:02.400
the JavaScript updated and it has a good support from front forefront and
00:05:07.530
framework so if you are planning to use react or angular or view J yes well you
00:05:15.660
probably need it yes my presentation was
00:05:24.020
good by sprockets and when I opened the web Packer I mean beyond the first lines
00:05:30.870
you can read okay what I just told you right so you can manage application like
00:05:38.250
JavaScript it coexist with the recipe I'll line as the primary power press for
00:05:43.260
web pack is at like JavaScript not images CSS or even JavaScript sprinkles
00:05:50.360
so we have a problem because we want to get rid of sprockets and we need it to
00:05:57.060
support it but however it is possible to use web Packer for CSS images and fonts
00:06:02.600
so well it's not really clear but you can do it you can actually do it and
00:06:09.750
today we will see how but yeah this was my reaction when I read the readme
00:06:17.130
because I thought okay a maybe is not possible at all but we will wait so we
00:06:24.510
will not start with this we will start from a nexus application and so comment
00:06:31.800
you can use if you want to start a new app with web pack probably you already
00:06:36.870
know it you can host so already skips but now we would do some coding so are
00:06:48.340
there questions no good very well so can
00:06:57.430
you see yes okay we'll start from this project this is a very simple Reyes
00:07:02.560
application that we have developed that R in watts give Cohen's system to share
00:07:10.240
and say thank you to your colleagues so where you basically have your profile
00:07:15.520
you have your colleagues and you can send them coins and with the message and
00:07:21.550
say thank you yeah that's it it's very simple so you can see that there is a very simple
00:07:27.400
interface and some JavaScript some icons boots drop something very basic so we
00:07:34.990
will start migrating it we go to a new branch ok first thing to do we need to
00:07:57.460
include the champ a carjack the web so
00:08:05.169
we take latest version we said more or less 3 install and after that we can
00:08:18.910
install web Packer on an application using their can you read yes this web
00:08:26.590
Packer install so this comment will do all the work for us and we'll configure
00:08:33.070
all the files that we need I will not go deep you know the files that we have because not this of this talk I can see
00:08:44.290
well I will show it to you here
00:08:50.620
is that it creates a new JavaScript folder inside your application and
00:08:58.300
inside of it it has a pax folder and an applications a yes so this file is the
00:09:04.760
new application Jes that you had in the assets folder basically and well there
00:09:13.160
is a test message console dot log hello we're from web Packer and once it installed finishing and it finished
00:09:19.910
installing you see that here it prints tell already some NPM packages some
00:09:27.950
basic things that it needs basic like three pages you can scroll half an hour
00:09:34.360
so okay so as for the old tag we have a
00:09:43.520
new one so we included the old module from sprockets like this with this
00:09:49.460
JavaScript include tag application well it's very similar than you want because
00:09:54.500
it's JavaScript like yes
00:10:00.890
it's JavaScript back back so let's open our console reload see our he'll work
00:10:10.400
from ok installed web Packer so we have
00:10:17.930
to restart the server
00:10:29.990
just
00:10:35.930
so we have the yellower from a web backer so what Packer now is installed and is able to so it was easy until now
00:10:48.760
now what you want to do in your application will be to move your old
00:10:56.720
application say yes to the new one so here I start with this application as
00:11:03.380
for example jQuery uses turbolinks and rails and up through an obtrusive
00:11:09.920
javascript of our bootstrap a couple of vendor libraries and all our custom file
00:11:17.570
so let's start from our files because that's the easiest
00:11:36.170
we can take all with to place them under the new JavaScript folder so the point
00:11:42.380
is that you cannot put them under X because otherwise they would be compiled
00:11:47.690
as separate modules by what Packer so what you need to do and you directory
00:11:53.750
here called for example sources and there you can take all your JavaScript
00:12:00.920
files and now here we have another issue
00:12:08.210
because I had my files called that must crypt six es6 that's was because we were
00:12:13.850
yeah we were using I don't know an extension to run a comma script files
00:12:21.020
and I need to rename them luckily I
00:12:26.060
haven't saved good so next thing is to
00:12:35.030
include them as we did with this require treat unluckily we don't have the same
00:12:40.520
comment my guess but doesn't matter we can quickly include all of them so this
00:12:51.980
time we use import and they are in the
00:12:59.260
source folder good can go back reload ok
00:13:13.070
no errors no errors is already pretty good usually and for example one of the
00:13:20.150
JavaScript was to filter these users so we quickly yeah it still works so well
00:13:31.649
resources to webpack is really easy you can do it and it took just a few seconds
00:13:38.939
and another thing that you noticed is that it keeps working together with
00:13:44.579
sprockets so we didn't have to get rid of sprockets you can do this work step by step you don't have to do everything
00:13:51.119
at once that's really convenient so let's take for example we had two vendor
00:14:00.829
JavaScript's which we're in the vendor folder inside this form validation well
00:14:09.139
we can place them directly under this SRC I would make honestly a vendor for
00:14:15.839
it you will find everything and all the
00:14:21.300
steps of the words I will share them with you you're waiting so we can move those
00:14:29.329
resources also and they're our new JavaScript it doesn't change a lot then the files are like just good files as
00:14:37.050
the ones that we end our application and
00:14:46.160
include them in the new one so again in
00:14:52.350
for them they are in a Searcy ander
00:14:59.300
older good I will show you something
00:15:07.259
because I got a bit annoyed of reloading all the time this page so we can try it
00:15:12.629
out since we introduced to a packer one of the features one of the first features that are interesting and which
00:15:18.509
is the hot reloading so if you are inside your project you can actually run in web dev server which was the one that
00:15:26.879
I was telling you before that was required at the beginning to execute if you wanted to use web Packer but now
00:15:33.929
it's not I mean you saw it works also without but if you use it you can have
00:15:40.620
also you can have also out reloading so here for example we have a lowered from pecker and I changed something here this
00:15:53.780
compile and it's reloaded automatically
00:15:59.930
so now we see that we have an error and this error is caused by the fact that in
00:16:07.830
our application we have another module this module from so this is another
00:16:17.880
vendor library and we just moved it so obviously it cannot find it anymore so if we want to have a second module what
00:16:25.110
we do is exactly the same as before exactly what you would have done in the assets folder with sprockets you'd use
00:16:32.640
JavaScript pack tag instead of instead
00:16:37.770
of hesita you go in X where there are your modules you make a new folder form
00:16:48.540
validation and that's the file that we need so you can move it there every time
00:16:54.420
you generate a new module so you add a new file in the packs folder you need to
00:17:01.770
restart the web pack dev server if you
00:17:06.810
are running it another time when another case when you have to it run it is when
00:17:13.920
you change the environment configurations but you will see afterwards so okay well it reloaded
00:17:21.990
already and we have not the error anymore okay move forward with some
00:17:29.040
other interesting things as in turbolinks those two are easy you can
00:17:37.590
just get rid of them and install the NPM the NPM packages so yes those two what
00:17:49.110
makes also our science if it's out it to have though JavaScript libraries in NPM
00:17:54.480
packages so I just installed the two libraries and you need some code to run
00:18:01.440
them I saved it so it's a bit easier so
00:18:11.040
we go in our yes we include them and we
00:18:23.130
stop that's basically it so we imported them and we start with them and they remove
00:18:31.230
them from here yes so yes still no error and it made the
00:18:40.710
hot reloading so it should still working yes you see there are up there loading
00:18:48.570
so it means that turbolinks is in place
00:18:56.030
so yes still calls are executed from troubling so also moving those things is
00:19:02.790
very very easy no effort needed so let's
00:19:09.090
go with maybe a bit more complicated one there is jquery remove jquery you have
00:19:16.230
to install it as a plugin so it's slightly different you cannot just import it so we get rid of jquery from
00:19:23.930
our old and we add it through yarn as an
00:19:32.760
NPM package and then to include it you need this small piece of code in a
00:19:42.030
second and we can check another thing
00:19:47.370
that web Packer installed during the installation and this year so we have
00:19:54.540
under the config folder we have a new web pack folder with three files that
00:19:59.700
you may recognize because they are exactly the equivalent of the environments file that we have so
00:20:07.260
for race we have development production test and Environment dot RB and we have
00:20:13.110
the same for our JavaScript files so we have development production test and
00:20:18.230
environment so what we need to do is to
00:20:25.200
include jQuery as a plug-in like this oh
00:20:32.210
you cannot see it really well huh now
00:20:41.790
since we changed at one of the environment files we need to restart it
00:20:48.170
it's likely the waste when you change something in the environment files very start okay we included jQuery in our web
00:21:01.830
pack and it complains that jQuery is not found for the old assets that we are
00:21:10.710
using with sprockets because as we said before web pack doesn't pollute the
00:21:15.810
global scope so it includes jQuery in a closed environment just for your modules
00:21:21.030
and therefore bootstrap which was depending on jQuery here cannot find it
00:21:30.390
anymore so we have to move also bootstrap basically so we take the chance and we the art odd bootstrap
00:21:39.630
which version four is out after I don't know one year two years three years
00:21:45.030
thirty years it took forever what is out so we added boots up for and popper
00:21:53.250
which is required by bootstrap and we have just to include bootstrap as well
00:22:01.850
in our application now we can take here
00:22:08.190
together the other imports
00:22:15.120
yeah let's see if it works right away
00:22:22.470
it's reloading something
00:22:35.390
slower than expected but I can guarantee
00:22:41.570
you is not a fault of web Packer okay doesn't complain there are no errors and
00:22:48.770
if we try some boots drop features JavaScript features like drop downs here
00:22:54.680
you can see that it still works nice so
00:22:59.990
we move to also bootstrap so you so different things you saw how to move libraries you saw how to move vendor
00:23:05.900
files you saw how to move your JavaScript files that's basically it so
00:23:13.090
if we go back to our old application we don't have anything anymore so well it's
00:23:18.710
just time to get rid of it we can get rid of it we can open our layout we can
00:23:27.170
remove it nope wrong one can remove it
00:23:32.450
we can also remove some gems now because we don't need all of them so for example
00:23:39.050
we could remove a bootstrap we still need because we still have the CSS files
00:23:44.980
so we could three more jquery rays we'd remove jquery turbolinks which we
00:23:51.080
wouldn't have needed anyway we could remove amplifier which is needed to
00:23:57.400
compress your javascript files and we had also this to support I cannot screw
00:24:02.930
six just get rid of everything and eventually remember also to disable the
00:24:09.680
J's compressor and the production RB file you don't need it anymore
00:24:15.910
and keep troubling yes if you want yes and now here you mean yes because there
00:24:23.660
are the helpers for the back end so yes keep it yes there is these cones that I
00:24:32.390
mean we are not there yet I always forget this this they are not
00:24:39.740
there completely yet so they still support sprockets and they also support web backer so I mean you can include the
00:24:45.920
NPM package but if you have the jam to links it will still include also the JavaScript thread files that you need
00:24:53.470
they are there so let's see because when
00:24:59.360
preparing this presentation there were things failing all the time I think I am
00:25:06.230
a bit long with the time that just because the server is long even if it's
00:25:12.410
my machine I don't know why so okay we got rid of our JavaScript files that's
00:25:18.650
that's something and it didn't take a long time so but what I would like to do now is to check and one of the two
00:25:25.310
things we can do with wet backer so for example is an analysis of our package so
00:25:30.800
we could add this yarn package is called web pack bundle analyzer and we add it
00:25:37.430
only in our development environment so we don't add it to production and we
00:25:44.960
have to configure it like this this would be my suggestion then do whatever
00:25:51.170
you want more or less I am simply requiring the plug-in and
00:25:59.230
setting it up with this option I change
00:26:04.280
it an environment file this means stop and restart now when I will restart this
00:26:13.430
time this plug-in will generate a report of how my packages are built so I have
00:26:21.500
two modules our application and the form validation en so I created two pi
00:26:28.730
just two modules before and this is how they are built so you see that there is
00:26:34.700
a lot of stuff here don't get scared as I did on the first
00:26:40.220
time because I saw together with Stefan that actually those are just libraries
00:26:46.429
introduced for the hot reload so if you just reload without the web dev server
00:26:54.590
running now rails will in a second understand that that is not running
00:27:00.980
anymore and it has to compile the right sources by itself usually this the first
00:27:07.280
time takes a bit longer there is also something weird because takes 300
00:27:14.120
milliseconds to perform a select on the database which is not normal so this
00:27:22.850
will also recompile you see in the log you see it here okay
00:27:30.919
these are our two packages and you see that there is a bit of difference there are not all the stuff that was in there
00:27:37.070
before and they are in total one megabyte 16 but you main something which
00:27:44.840
is a bit empty we have J twice so well they are we have two packages in the
00:27:51.830
same page and they include both jQuery so that's not really nice for us and we
00:27:59.480
have to get rid of this so what we can do is to use external as a feature from
00:28:05.960
web pack more or less you can say a jQuery is already provided so don't
00:28:11.990
include it so what we are gonna do now is to include jQuery directly in our
00:28:19.250
application through a CDN for example so
00:28:24.770
included through a via CDN and let's change the configuration of our
00:28:32.720
environment instead of requiring it from here just configure the external and say
00:28:38.840
jQuery provide don't care about it because otherwise it would give you errors in compat compile
00:28:45.350
time so we can also get rid of jQuery we
00:28:55.370
didn't check our package file which may be interesting so this is our package
00:29:01.100
JSON I mean if you are if you are used to front-end applications you know what we are talking about for the others
00:29:07.760
mainly somewhere it's our gen file equivalent of our gen file for for our
00:29:13.700
JavaScript dependencies so yes I will
00:29:22.640
simply reload it because we don't have the server to restart so that is it's
00:29:31.850
faster so it's compiling again and ok
00:29:44.000
now they are much smaller you see that application is much bigger but the other one is really much or and we have six
00:29:51.500
hundred kilobytes in total well obviously jQuery is loaded from somewhere else so it's not included here
00:29:58.040
but we reduce the size anyway okay so I
00:30:03.890
would say that with this we are pretty happy go back to the presentation and
00:30:12.260
let's see so what
00:30:17.890
we do until now what did I show you just a recap we moved all our JavaScript
00:30:24.970
files leaving clonk at least now it took me a bit longer before we created two
00:30:32.470
different modules so you saw how to create different modules and the how still you can split your JavaScript
00:30:38.260
resources if you need to do so and you so that the hot reloading really works so you can use it in a race application
00:30:47.190
you saw also how to analyze your bundles and how - I don't know compress them or
00:30:54.520
optimize them maybe by directing some resources or well then you need to know so well pack a little bit more are
00:31:01.570
thousands of things to know about and yes we don't we are not
00:31:07.360
using sprockets for Jes anymore but we
00:31:12.640
still have Java style sheets and images so yes
00:31:17.740
again we have some work more to do I think I still have some minutes why yes
00:31:24.340
good I will be slightly faster I will try to so moving side sheets is pretty
00:31:35.500
easy as well but they don't expect you
00:31:40.690
to do that so well not yet I personally think they will sooner or
00:31:47.230
later but at the moment they don't so to move our to a style sheets it's exactly
00:31:53.530
the same thing you need the module you need a module for our style sheets let's
00:31:59.170
call it so we copied this one this was our style sheet link back from before tell me if
00:32:04.960
you don't see that i zoom in a little bit so we actually include a style sheet
00:32:11.410
back tag we cannot call it application because there is already another module
00:32:18.160
called application is the JavaScript one so we have to give it a different name let's call it style sheets so we have to
00:32:24.640
go into packs and we make a new file style sheets
00:32:31.030
not the CSS okay now this looks really
00:32:37.480
ugly because we have style sheets in style inside the JavaScript folder so
00:32:43.180
well give me I will take a few seconds to rename this if I remember how to
00:32:51.040
rename a folder you're paying attention
00:32:58.980
let's call it so and we have to
00:33:04.210
change also the name of this folder in the web Packer operation so there is a file there are some basic configurations
00:33:13.930
that in left inside your application with things that you may want to change like this shitty name folder folder name
00:33:22.350
okay so now it feels slightly better and
00:33:27.970
we don't tell style sheets inside an application folder now we have to start moving our style sheets here so inside
00:33:35.410
the sources I would suggest to split it we have a JavaScript folder like we had
00:33:41.320
before in the assets so just move everything there this for sure will take
00:33:49.180
a little bit of time to rubymine it
00:33:54.310
means it's time so and we are gonna get
00:33:59.530
also where we will
00:34:07.090
our resources okay took some time but at least it updated the references okay so
00:34:15.460
we are ready we can go in the assets stylesheets and let's look what we have
00:34:20.800
here so we have some libraries included from a gem we have again our CSS files
00:34:30.910
and we have something from the vendor folder so let's start from the last one first because it's the easiest so take
00:34:39.490
this tile sheet file and let's move it to the right good
00:34:51.460
so our folder is ready vendor study sheets form validation that's right
00:34:59.350
there good so now this one is importing
00:35:06.280
our style sheets directly from there it's time to check if it's really
00:35:11.830
working I would say we may also start that server to have hot reloading now
00:35:24.340
okay it's still building the report let's get rid of it otherwise it's annoying
00:35:37.220
change at an environment file so restart okay that's close windows okay no errors
00:35:49.240
it's good to see if it's still working actually could hear the header we could
00:35:57.770
go and see that our style sheets are actually here and if we look into them
00:36:06.160
it included everything okay that's nice and it's working so we can move on that
00:36:13.310
was not as difficult that you may read in some blog posts around them so let's
00:36:21.260
take font Oh some font awesome comes from a gem so let's get rid of it from
00:36:26.330
here let's get rid of it from the time because we simply don't need it there
00:36:33.109
don't know unless you use some helpers but font awesome is provided as a NPM
00:36:38.810
package and p.m. so we install it as the
00:36:46.970
others and we include it we include it with this so there is the import
00:37:01.510
standard of font awesome and you have also to specify this for the fonts
00:37:07.040
otherwise it cannot find the fonts and it messes up things a little bit so we
00:37:13.700
can go back and check if our icons are still there is it reloading still I
00:37:23.530
don't know what happened with database but yeah it takes like 10 times to
00:37:30.170
execute the career first
00:37:40.130
okay the icon sir here if it reloaded so also moving font awesome was not that
00:37:48.799
difficult I would say pretty easy the last thing we have to do is to all our
00:37:55.239
tile sheet files so we have bootstrap and we have some customization of
00:38:01.219
bootstrap so we need we're gonna need the a CSS version of bootstrap and also the other files depend on bootstrap and
00:38:08.359
bootstrap variables therefore we need to move all of them at the same time so
00:38:15.400
just gonna do it we can take all our style sheets from the shared folder home
00:38:22.160
login transactions not welcome welcome is another module we introduced it on in
00:38:27.890
the Welcome page so you can take everything and go to the style sheet
00:38:36.729
good then you can take all your old code from your old application a CSS and move
00:38:45.019
them in the new one change slightly no
00:38:51.349
this one change slightly there but yes
00:38:58.999
and to import bootstrap actually we need to import it from bootstrap test CSS
00:39:05.150
good stop the rest doesn't change still
00:39:17.359
looks good still looks good it's loading fast validation is working
00:39:24.699
javascript is working yeah we move those to the stylesheet so well
00:39:34.519
let's go back and do the ok we still have the Welcome module this was another module but easy just
00:39:42.440
move it to packs move your module to packs so welcome a CSS it includes
00:39:48.199
already some stuff go to the Welcome page where you in
00:39:53.510
blew this one it's called welcome here
00:39:59.150
this layout does not start link that back tech so let's go and check we
00:40:06.619
opening on your toes so we are not logged in ah right you module restart tell you and
00:40:20.720
never do it right I try this treetop
00:40:40.270
to compile yes maybe let's go and check
00:40:50.400
so yes good bootstrap good compiled
00:41:05.710
successfully it works okay so we moved
00:41:13.990
the stylesheet let's get rid of all so this folder all this feels good can get
00:41:21.730
rid of it and we can get rid of bootstrap as a gem we can get rid of
00:41:28.570
what can we get rid off sighs rails and well actually that's it
00:41:35.500
but yeah we moved also the stylesheet so
00:41:42.520
the last thing we have to move I will show you quickly because I don't have more time or I would just say it quickly
00:41:49.810
so I don't have to show you anyway but are the images so for the images is
00:41:54.930
basically the same now you will see that they are not working but basically you
00:42:01.060
just create an images folder under your packs you create a pack just for the images and that's it
00:42:07.750
and you have to use not a set path as a path but a set back path it sucks the
00:42:15.910
name yeah it sucks but yes that's it so
00:42:28.590
you I spoiled it but now the question could be should they use pockets or
00:42:35.069
and the answer is yes so I mean tides
00:42:40.619
decide yourself I mean this makes sense in the moment that you may want to use
00:42:45.809
more complicated or fronting features so if you want to start using react
00:42:51.809
you can move stuff but you also saw that it's not really complicated to start with it right from the beginning the hot
00:42:58.109
reli hot to reloading can help you even if you have just few JavaScript and it
00:43:04.170
can help you to keep your global namespace clean so yes maybe I wouldn't
00:43:10.979
use it for very simple things or if you don't need any JavaScript but otherwise yes I would try it try it and start
00:43:18.749
moving things there because it's easy you can do it and you don't have to do it just in one step so thank you two-zip
00:43:34.579
do you have questions it runs with the
00:43:46.049
assets pre-compile so assets when you are on ice it's pre-compile it's already pre compiles the web pack your things
00:43:52.529
so you don't need to do anything there
00:44:04.249
yes there is an NPM package also for a chunk Abel so yes maybe the default
00:44:12.449
example that trails provides you I think it pollutes or uses the global namespace
00:44:17.759
so you may have to change something there but yes there is an NPM package
00:44:23.069
and yes
00:44:41.280
so do we have real hot pudding like we
00:44:52.440
could see it we could check it could check it quickly because I don't know
00:44:58.800
you're the answer to your question so we could check the network and check the
00:45:07.320
requests and let's perform change so
00:45:26.150
looks like a page reload to me it's a
00:45:32.970
full page reload other questions which
00:45:54.450
and I already took too much time probably so yes to the next talk I don't
00:46:02.880
know who is it
