Up next in 10
The Ultimate Full Stack Framework for 2024: Remix by Ákos Kőműves | React and Chill Conference
0 views
Aug 6, 2025
I was blown away when I tried Remix for the first time. After building full-stack applications for clients as my day job, this is the closest it got to real full-stack experience. 🔗 Conference Website: https://reactandchill.live 👋 Code of Conduct: https://reactandchill.live/code-of-co... 📺 CSharp TV - Dev Streaming Destination http://csharp.tv 🌎 C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com #CSharpTV #CSharpCorner #CSharp #dotNet #ReactAndChill
View Video Transcript
0:03
I will talk about uh my experience with
0:05
I will talk about uh my experience with
0:05
I will talk about uh my experience with remix and all the things that happen
0:08
remix and all the things that happen
0:08
remix and all the things that happen before remix with me and uh uh in the
0:12
before remix with me and uh uh in the
0:12
before remix with me and uh uh in the sense like me and the web um
0:16
sense like me and the web um
0:16
sense like me and the web um so uh I will talk about why this is the
0:19
so uh I will talk about why this is the
0:19
so uh I will talk about why this is the ultimate full stack framework uh for me
0:22
ultimate full stack framework uh for me
0:22
ultimate full stack framework uh for me uh in 2024 uh we are halfway through uh
0:27
uh in 2024 uh we are halfway through uh
0:27
uh in 2024 uh we are halfway through uh 20 24 I still think this is the ultimate
0:31
20 24 I still think this is the ultimate
0:31
20 24 I still think this is the ultimate experience but uh I will try to give you
0:34
experience but uh I will try to give you
0:34
experience but uh I will try to give you some proof of that um so uh again thanks
0:38
some proof of that um so uh again thanks
0:38
some proof of that um so uh again thanks for the intro uh still uh I will say a
0:41
for the intro uh still uh I will say a
0:41
for the intro uh still uh I will say a couple of words about me um and then
0:44
couple of words about me um and then
0:44
couple of words about me um and then talk uh about uh the brief history of
0:47
talk uh about uh the brief history of
0:47
talk uh about uh the brief history of web development at least from my
0:50
web development at least from my
0:50
web development at least from my perspective um and then uh what
0:54
perspective um and then uh what
0:54
perspective um and then uh what experience I had with react and uh did
0:58
experience I had with react and uh did
0:58
experience I had with react and uh did react fix the things uh the problems uh
1:01
react fix the things uh the problems uh
1:01
react fix the things uh the problems uh that I experienced uh with web
1:03
that I experienced uh with web
1:03
that I experienced uh with web development in the past uh 20 years uh
1:07
development in the past uh 20 years uh
1:07
development in the past uh 20 years uh and finally why I think remix is the
1:10
and finally why I think remix is the
1:10
and finally why I think remix is the answer to to all these
1:13
answer to to all these
1:13
answer to to all these problems um all right so let's uh let's
1:17
problems um all right so let's uh let's
1:17
problems um all right so let's uh let's get started uh my background um so you
1:21
get started uh my background um so you
1:21
get started uh my background um so you saw the intro I'm a software engineer at
1:23
saw the intro I'm a software engineer at
1:23
saw the intro I'm a software engineer at Abby I started building websites uh as a
1:28
Abby I started building websites uh as a
1:28
Abby I started building websites uh as a kid it was kind of cool to to uh make
1:31
kid it was kind of cool to to uh make
1:31
kid it was kind of cool to to uh make some side income I mean not even side
1:33
some side income I mean not even side
1:33
some side income I mean not even side income just an income uh as a 15 years
1:37
income just an income uh as a 15 years
1:37
income just an income uh as a 15 years old so that was cool uh I built websites
1:40
old so that was cool uh I built websites
1:40
old so that was cool uh I built websites for uh I don't know bakeries local shops
1:44
for uh I don't know bakeries local shops
1:44
for uh I don't know bakeries local shops uh for the local school um it was quite
1:48
uh for the local school um it was quite
1:48
uh for the local school um it was quite a defining experience uh in in my life
1:52
a defining experience uh in in my life
1:52
a defining experience uh in in my life and I enjoyed it a lot uh since then I
1:55
and I enjoyed it a lot uh since then I
1:55
and I enjoyed it a lot uh since then I doubled with my own company I I did some
1:58
doubled with my own company I I did some
1:58
doubled with my own company I I did some freelancing
2:00
freelancing
2:00
freelancing uh but overall I spent the past 20 years
2:04
uh but overall I spent the past 20 years
2:04
uh but overall I spent the past 20 years uh doing web some form of web
2:06
uh doing web some form of web
2:06
uh doing web some form of web development um I write a lot I published
2:11
development um I write a lot I published
2:11
development um I write a lot I published books uh
2:12
books uh
2:12
books uh courses um and when I'm bored I write
2:17
courses um and when I'm bored I write
2:17
courses um and when I'm bored I write again so I have this Dev Dev newsletter
2:21
again so I have this Dev Dev newsletter
2:21
again so I have this Dev Dev newsletter uh on substack uh you can check that out
2:24
uh on substack uh you can check that out
2:24
uh on substack uh you can check that out I also have my developer blog uh with
2:26
I also have my developer blog uh with
2:26
I also have my developer blog uh with full of Articles related to react uh
2:29
full of Articles related to react uh
2:29
full of Articles related to react uh testing react react components uh I
2:32
testing react react components uh I
2:32
testing react react components uh I write about browser plug-in development
2:34
write about browser plug-in development
2:34
write about browser plug-in development desktop
2:35
desktop
2:35
desktop applications um all this with react and
2:38
applications um all this with react and
2:38
applications um all this with react and typescript of course you can also find
2:40
typescript of course you can also find
2:40
typescript of course you can also find me on X so okay uh that's uh that's me
2:46
me on X so okay uh that's uh that's me
2:46
me on X so okay uh that's uh that's me and now talk about let's let's talk
2:49
and now talk about let's let's talk
2:49
and now talk about let's let's talk about uh the brief history of web
2:52
about uh the brief history of web
2:52
about uh the brief history of web development from my perspective uh so
2:55
development from my perspective uh so
2:55
development from my perspective uh so for me it started here I don't know how
2:57
for me it started here I don't know how
2:57
for me it started here I don't know how many of you recognize this application
2:59
many of you recognize this application
2:59
many of you recognize this application this is a macromedia Dream Weaver that's
3:02
this is a macromedia Dream Weaver that's
3:02
this is a macromedia Dream Weaver that's uh that was acquired by Adobe at at some
3:05
uh that was acquired by Adobe at at some
3:05
uh that was acquired by Adobe at at some point but uh this is where I first met
3:08
point but uh this is where I first met
3:08
point but uh this is where I first met with the web uh this is a drag and drop
3:11
with the web uh this is a drag and drop
3:11
with the web uh this is a drag and drop tool um pretty ugly by today's standards
3:15
tool um pretty ugly by today's standards
3:15
tool um pretty ugly by today's standards probably but it was uh quite nice uh you
3:18
probably but it was uh quite nice uh you
3:18
probably but it was uh quite nice uh you could code up actually drag and drop uh
3:22
could code up actually drag and drop uh
3:22
could code up actually drag and drop uh a a website pretty fast but you could
3:24
a a website pretty fast but you could
3:24
a a website pretty fast but you could still see the code and and see what's
3:26
still see the code and and see what's
3:26
still see the code and and see what's going on in the background um of course
3:29
going on in the background um of course
3:29
going on in the background um of course I built static websites with this so I
3:31
I built static websites with this so I
3:31
I built static websites with this so I put links there images images and uh
3:34
put links there images images and uh
3:34
put links there images images and uh things like that and that was fine at
3:37
things like that and that was fine at
3:37
things like that and that was fine at the beginning but uh quickly the need
3:39
the beginning but uh quickly the need
3:39
the beginning but uh quickly the need for like more um well not interactive
3:43
for like more um well not interactive
3:43
for like more um well not interactive but more um use cases showed up for
3:46
but more um use cases showed up for
3:46
but more um use cases showed up for example this Bakery said hey I want a
3:48
example this Bakery said hey I want a
3:48
example this Bakery said hey I want a guest book and then this other uh uh
3:51
guest book and then this other uh uh
3:51
guest book and then this other uh uh shop said I want some uh want want to
3:55
shop said I want some uh want want to
3:55
shop said I want some uh want want to give the users a way to register and
3:57
give the users a way to register and
3:57
give the users a way to register and like things like that so I uh Tri
4:00
like things like that so I uh Tri
4:00
like things like that so I uh Tri eventually PHP we will return to this
4:03
eventually PHP we will return to this
4:03
eventually PHP we will return to this snippet because um um something like
4:07
snippet because um um something like
4:07
snippet because um um something like this has been floating around in the
4:09
this has been floating around in the
4:09
this has been floating around in the JavaScript Community since uh server
4:12
JavaScript Community since uh server
4:12
JavaScript Community since uh server components are thing but it's it's
4:14
components are thing but it's it's
4:14
components are thing but it's it's really interesting and I just wanted to
4:17
really interesting and I just wanted to
4:17
really interesting and I just wanted to point out that uh to me this was the uh
4:21
point out that uh to me this was the uh
4:21
point out that uh to me this was the uh First full stack experience um almost 20
4:25
First full stack experience um almost 20
4:25
First full stack experience um almost 20 years ago and uh I really liked how
4:29
years ago and uh I really liked how
4:30
years ago and uh I really liked how simple this was that uh my business
4:33
simple this was that uh my business
4:33
simple this was that uh my business logic and my representation layer
4:35
logic and my representation layer
4:35
logic and my representation layer everything was uh front of me um on the
4:39
everything was uh front of me um on the
4:39
everything was uh front of me um on the same page and I could really like do
4:43
same page and I could really like do
4:43
same page and I could really like do quick iterations on my websites and um
4:47
quick iterations on my websites and um
4:47
quick iterations on my websites and um it was it was that it was really simple
4:51
it was it was that it was really simple
4:51
it was it was that it was really simple and um I think um that contributed uh
4:55
and um I think um that contributed uh
4:55
and um I think um that contributed uh contributed a lot to the fact that I uh
4:58
contributed a lot to the fact that I uh
4:58
contributed a lot to the fact that I uh I uh continue doing web development and
5:00
I uh continue doing web development and
5:00
I uh continue doing web development and that I enjoyed it uh I still enjoy um of
5:04
that I enjoyed it uh I still enjoy um of
5:04
that I enjoyed it uh I still enjoy um of course it had some drawbacks of course
5:07
course it had some drawbacks of course
5:07
course it had some drawbacks of course uh there was no Dynamic experience with
5:10
uh there was no Dynamic experience with
5:10
uh there was no Dynamic experience with uh stuff like this uh which I realized
5:15
uh stuff like this uh which I realized
5:15
uh stuff like this uh which I realized uh that it will become a problem because
5:17
uh that it will become a problem because
5:17
uh that it will become a problem because uh interactive websites uh started
5:19
uh interactive websites uh started
5:19
uh interactive websites uh started popping up you know with all the nice
5:21
popping up you know with all the nice
5:21
popping up you know with all the nice menus the JavaScript animations and
5:24
menus the JavaScript animations and
5:24
menus the JavaScript animations and dropdowns so I I felt that the need for
5:28
dropdowns so I I felt that the need for
5:28
dropdowns so I I felt that the need for uh client side JavaScript is uh is
5:31
uh client side JavaScript is uh is
5:31
uh client side JavaScript is uh is rising um and then I I went to
5:35
rising um and then I I went to
5:35
rising um and then I I went to University I landed my first job as a uh
5:39
University I landed my first job as a uh
5:39
University I landed my first job as a uh software engineer uh and I started
5:42
software engineer uh and I started
5:42
software engineer uh and I started building client applications but
5:44
building client applications but
5:44
building client applications but different client applications uh I
5:47
different client applications uh I
5:47
different client applications uh I started working in technology that's
5:48
started working in technology that's
5:48
started working in technology that's called U jackart server faces or Java
5:52
called U jackart server faces or Java
5:52
called U jackart server faces or Java server faces um and uh this was uh uh so
5:58
server faces um and uh this was uh uh so
5:58
server faces um and uh this was uh uh so the previous snipp at the PHP thing was
6:00
the previous snipp at the PHP thing was
6:00
the previous snipp at the PHP thing was like the fullstack server side rendered
6:04
like the fullstack server side rendered
6:04
like the fullstack server side rendered uh thing that I met almost 20 years ago
6:07
uh thing that I met almost 20 years ago
6:07
uh thing that I met almost 20 years ago this was a bit later but this is where I
6:09
this was a bit later but this is where I
6:09
this was a bit later but this is where I met the component based development and
6:13
met the component based development and
6:13
met the component based development and this whole component let's build up the
6:15
this whole component let's build up the
6:15
this whole component let's build up the UI from components
6:17
UI from components
6:17
UI from components philosophy um this was around um
6:20
philosophy um this was around um
6:20
philosophy um this was around um 2014 uh 13 uh so this was Java server
6:25
2014 uh 13 uh so this was Java server
6:25
2014 uh 13 uh so this was Java server faces uh it has a it had a nice
6:27
faces uh it has a it had a nice
6:27
faces uh it has a it had a nice separation of con concerns uh you had
6:31
separation of con concerns uh you had
6:31
separation of con concerns uh you had your business logic in your Enterprise
6:33
your business logic in your Enterprise
6:33
your business logic in your Enterprise Java beIN you had UI templates
6:37
Java beIN you had UI templates
6:37
Java beIN you had UI templates and uh you had uh components so here is
6:40
and uh you had uh components so here is
6:40
and uh you had uh components so here is a Cote snippet uh actually this is how
6:43
a Cote snippet uh actually this is how
6:43
a Cote snippet uh actually this is how these Pages were built up uh you can see
6:46
these Pages were built up uh you can see
6:46
these Pages were built up uh you can see here this accordion panel well in
6:49
here this accordion panel well in
6:49
here this accordion panel well in today's uh react word this accordion
6:52
today's uh react word this accordion
6:52
today's uh react word this accordion panel would be an accordian react
6:55
panel would be an accordian react
6:55
panel would be an accordian react component so again an idea I met
6:58
component so again an idea I met
6:58
component so again an idea I met somewhere before I thought it was cool
7:01
somewhere before I thought it was cool
7:01
somewhere before I thought it was cool and this is how bu how we built these um
7:05
and this is how bu how we built these um
7:05
and this is how bu how we built these um big JSF
7:07
big JSF
7:07
big JSF websites uh of course there was a
7:09
websites uh of course there was a
7:09
websites uh of course there was a drawback again uh it wasn't
7:12
drawback again uh it wasn't
7:12
drawback again uh it wasn't interactivity it was the speed of
7:14
interactivity it was the speed of
7:14
interactivity it was the speed of development this things were uh terribly
7:17
development this things were uh terribly
7:17
development this things were uh terribly slow to work with um a because the front
7:22
slow to work with um a because the front
7:22
slow to work with um a because the front end and the back end was uh in this
7:24
end and the back end was uh in this
7:24
end and the back end was uh in this tight coupling uh changes to uh CSS
7:29
tight coupling uh changes to uh CSS
7:29
tight coupling uh changes to uh CSS files like changing the color of
7:32
files like changing the color of
7:32
files like changing the color of something sometimes uh took like 30
7:35
something sometimes uh took like 30
7:35
something sometimes uh took like 30 seconds to redeploy which is really FR
7:37
seconds to redeploy which is really FR
7:37
seconds to redeploy which is really FR frustrating if you want to iterate on
7:40
frustrating if you want to iterate on
7:40
frustrating if you want to iterate on something quickly so uh it was mostly
7:44
something quickly so uh it was mostly
7:44
something quickly so uh it was mostly the slow compile times um that uh uh
7:49
the slow compile times um that uh uh
7:49
the slow compile times um that uh uh made us think like okay is there any
7:52
made us think like okay is there any
7:52
made us think like okay is there any alternative um and uh what we could do
7:55
alternative um and uh what we could do
7:55
alternative um and uh what we could do instead of this um so at that time uh a
8:01
instead of this um so at that time uh a
8:01
instead of this um so at that time uh a couple of Frameworks uh like appears
8:04
couple of Frameworks uh like appears
8:04
couple of Frameworks uh like appears from nowhere uh they had a similar
8:08
from nowhere uh they had a similar
8:08
from nowhere uh they had a similar philosophy they were lightweight uh NBC
8:12
philosophy they were lightweight uh NBC
8:12
philosophy they were lightweight uh NBC uh
8:13
uh
8:13
uh Frameworks and uh they were quite
8:17
Frameworks and uh they were quite
8:17
Frameworks and uh they were quite amazing and we didn't really uh we did
8:21
amazing and we didn't really uh we did
8:21
amazing and we didn't really uh we did not we we were surprised um uh in this
8:25
not we we were surprised um uh in this
8:25
not we we were surprised um uh in this major shift uh in our development
8:28
major shift uh in our development
8:29
major shift uh in our development practice so before everything was
8:31
practice so before everything was
8:31
practice so before everything was deployed as a Java application and
8:33
deployed as a Java application and
8:33
deployed as a Java application and everything was neatly packaged up and
8:36
everything was neatly packaged up and
8:36
everything was neatly packaged up and suddenly we could write really small
8:39
suddenly we could write really small
8:39
suddenly we could write really small like JavaScript applications that were
8:42
like JavaScript applications that were
8:42
like JavaScript applications that were calling just some API endpoints fetching
8:45
calling just some API endpoints fetching
8:45
calling just some API endpoints fetching the data uh parsing it through some
8:48
the data uh parsing it through some
8:48
the data uh parsing it through some templates and showing it to the to the
8:52
templates and showing it to the to the
8:52
templates and showing it to the to the client and uh suddenly those two minute
8:57
client and uh suddenly those two minute
8:57
client and uh suddenly those two minute deploy times or half a minute deploy
8:59
deploy times or half a minute deploy
8:59
deploy times or half a minute deploy times disappeared um we could host these
9:03
times disappeared um we could host these
9:03
times disappeared um we could host these small uh front ends separately from our
9:07
small uh front ends separately from our
9:07
small uh front ends separately from our backend from the main application and uh
9:11
backend from the main application and uh
9:11
backend from the main application and uh once we changed the T or a color of
9:14
once we changed the T or a color of
9:14
once we changed the T or a color of something or or just added a new
9:17
something or or just added a new
9:17
something or or just added a new interaction we didn't have to redeploy
9:19
interaction we didn't have to redeploy
9:19
interaction we didn't have to redeploy the whole thing we just updated the
9:21
the whole thing we just updated the
9:21
the whole thing we just updated the static assets on some server and it was
9:24
static assets on some server and it was
9:25
static assets on some server and it was working again uh it it brought uh a
9:29
working again uh it it brought uh a
9:29
working again uh it it brought uh a couple of other beneficial things uh
9:32
couple of other beneficial things uh
9:32
couple of other beneficial things uh each team could do their own thing so
9:36
each team could do their own thing so
9:36
each team could do their own thing so the backand was doing their Java thing
9:39
the backand was doing their Java thing
9:39
the backand was doing their Java thing or python or whatever it was and they
9:42
or python or whatever it was and they
9:42
or python or whatever it was and they were happy about that and we didn't
9:44
were happy about that and we didn't
9:44
were happy about that and we didn't really care we had these little
9:47
really care we had these little
9:47
really care we had these little JavaScript
9:48
JavaScript
9:48
JavaScript applications and all we were interacting
9:50
applications and all we were interacting
9:50
applications and all we were interacting with were uh their API end points and uh
9:55
with were uh their API end points and uh
9:55
with were uh their API end points and uh this was this was fun for uh quite a
9:58
this was this was fun for uh quite a
9:58
this was this was fun for uh quite a long time time um because of the
10:01
long time time um because of the
10:01
long time time um because of the development times uh because we didn't
10:03
development times uh because we didn't
10:03
development times uh because we didn't have to really deploy the Javas
10:05
have to really deploy the Javas
10:05
have to really deploy the Javas JavaScript application application and
10:08
JavaScript application application and
10:08
JavaScript application application and from hiring perspective as well because
10:12
from hiring perspective as well because
10:12
from hiring perspective as well because um uh people with only JavaScript
10:15
um uh people with only JavaScript
10:15
um uh people with only JavaScript experience started to appear so we could
10:18
experience started to appear so we could
10:18
experience started to appear so we could uh hire great talent um so overall this
10:23
uh hire great talent um so overall this
10:23
uh hire great talent um so overall this was great uh but this is the this is the
10:27
was great uh but this is the this is the
10:27
was great uh but this is the this is the moment in time where
10:30
moment in time where
10:30
moment in time where uh p a pattern uh started to
10:34
uh p a pattern uh started to
10:34
uh p a pattern uh started to emerge and uh in the beginning we looked
10:37
emerge and uh in the beginning we looked
10:37
emerge and uh in the beginning we looked at this pattern as like H this is this
10:39
at this pattern as like H this is this
10:39
at this pattern as like H this is this new cool UI element we have to introduce
10:42
new cool UI element we have to introduce
10:42
new cool UI element we have to introduce we will find a nice animation and just
10:45
we will find a nice animation and just
10:45
we will find a nice animation and just put it everywhere where we need
10:48
put it everywhere where we need
10:48
put it everywhere where we need it and this component this pattern was
10:53
it and this component this pattern was
10:53
it and this component this pattern was the loading
10:54
the loading
10:54
the loading indicator and uh suddenly we were full
10:58
indicator and uh suddenly we were full
10:58
indicator and uh suddenly we were full of loading indicator we had huge
11:00
of loading indicator we had huge
11:00
of loading indicator we had huge dashboards with many many components and
11:03
dashboards with many many components and
11:03
dashboards with many many components and suddenly everything was just spinning
11:06
suddenly everything was just spinning
11:06
suddenly everything was just spinning around and we did this in different
11:08
around and we did this in different
11:08
around and we did this in different languages we did this in backbone we
11:10
languages we did this in backbone we
11:10
languages we did this in backbone we repeated the same thing in angular and
11:12
repeated the same thing in angular and
11:12
repeated the same thing in angular and although how we wrote uh front end code
11:16
although how we wrote uh front end code
11:16
although how we wrote uh front end code and what practices we used
11:18
and what practices we used
11:18
and what practices we used improved uh the overall experience kind
11:22
improved uh the overall experience kind
11:22
improved uh the overall experience kind of remain the
11:24
of remain the
11:24
of remain the same and uh well this is how we arrived
11:28
same and uh well this is how we arrived
11:28
same and uh well this is how we arrived at this loing indicators and uh why and
11:32
at this loing indicators and uh why and
11:32
at this loing indicators and uh why and then I will switch to my next topic
11:34
then I will switch to my next topic
11:34
then I will switch to my next topic which is uh react so after trying a
11:38
which is uh react so after trying a
11:38
which is uh react so after trying a bunch of these frontend Technologies and
11:41
bunch of these frontend Technologies and
11:41
bunch of these frontend Technologies and and uh working our way up to this
11:44
and uh working our way up to this
11:44
and uh working our way up to this indicator hell uh we of course had to
11:47
indicator hell uh we of course had to
11:47
indicator hell uh we of course had to try react and uh react was this really
11:52
try react and uh react was this really
11:52
try react and uh react was this really it had big promises and and we were sold
11:54
it had big promises and and we were sold
11:54
it had big promises and and we were sold on react I don't think we made a bad
11:57
on react I don't think we made a bad
11:57
on react I don't think we made a bad call I still do react after 10 years so
12:01
call I still do react after 10 years so
12:01
call I still do react after 10 years so I think that's it is a good call uh but
12:04
I think that's it is a good call uh but
12:04
I think that's it is a good call uh but fundamentally it uh didn't change uh the
12:10
fundamentally it uh didn't change uh the
12:10
fundamentally it uh didn't change uh the experience uh on our applications
12:12
experience uh on our applications
12:12
experience uh on our applications because um let's be honest um well we
12:17
because um let's be honest um well we
12:17
because um let's be honest um well we pretty much uh do this in every
12:20
pretty much uh do this in every
12:20
pretty much uh do this in every application uh or or did at some point
12:23
application uh or or did at some point
12:23
application uh or or did at some point uh in the past that we uh coded up these
12:25
uh in the past that we uh coded up these
12:25
uh in the past that we uh coded up these loading
12:26
loading
12:27
loading indicators and uh uh it was just it was
12:30
indicators and uh uh it was just it was
12:30
indicators and uh uh it was just it was just a loading it was the same loading
12:33
just a loading it was the same loading
12:33
just a loading it was the same loading that we did uh five 10 years ago just in
12:36
that we did uh five 10 years ago just in
12:36
that we did uh five 10 years ago just in a different language and uh again the
12:40
a different language and uh again the
12:40
a different language and uh again the tooling got better the uh patterns are
12:43
tooling got better the uh patterns are
12:43
tooling got better the uh patterns are better and and uh the development is is
12:46
better and and uh the development is is
12:47
better and and uh the development is is over a better experience now but we kind
12:49
over a better experience now but we kind
12:49
over a better experience now but we kind of uh stuck with these um loading things
12:54
of uh stuck with these um loading things
12:54
of uh stuck with these um loading things and um one of the one of the biggest
12:59
and um one of the one of the biggest
12:59
and um one of the one of the biggest drawbacks of these uh loading indicator
13:02
drawbacks of these uh loading indicator
13:02
drawbacks of these uh loading indicator patterns is uh the layout shift and that
13:05
patterns is uh the layout shift and that
13:05
patterns is uh the layout shift and that it causes on the websites uh I prepared
13:09
it causes on the websites uh I prepared
13:09
it causes on the websites uh I prepared here a video I don't know if I can I
13:12
here a video I don't know if I can I
13:12
here a video I don't know if I can I don't see the controls uh oh I see it
13:16
don't see the controls uh oh I see it
13:16
don't see the controls uh oh I see it now okay so I will play this this is
13:18
now okay so I will play this this is
13:18
now okay so I will play this this is from U Google so if you don't know what
13:21
from U Google so if you don't know what
13:21
from U Google so if you don't know what the layout shifts are uh this basically
13:24
the layout shifts are uh this basically
13:24
the layout shifts are uh this basically happens in these applications where uh
13:28
happens in these applications where uh
13:28
happens in these applications where uh you you don't don't render an element
13:31
you you don't don't render an element
13:31
you you don't don't render an element why you don't have the uh uh the data
13:34
why you don't have the uh uh the data
13:34
why you don't have the uh uh the data that's needed for that element uh to
13:37
that's needed for that element uh to
13:37
that's needed for that element uh to render so let's say you arrive to a web
13:39
render so let's say you arrive to a web
13:39
render so let's say you arrive to a web shop and you put like 56 stickers into
13:44
shop and you put like 56 stickers into
13:44
shop and you put like 56 stickers into your cart and you made a mistake you
13:48
your cart and you made a mistake you
13:48
your cart and you made a mistake you wanted to type five but you accidentally
13:51
wanted to type five but you accidentally
13:51
wanted to type five but you accidentally hit six as well and imagine something is
13:55
hit six as well and imagine something is
13:55
hit six as well and imagine something is going on in the background you started
13:57
going on in the background you started
13:57
going on in the background you started uh maybe a fetch inside the use effect
14:00
uh maybe a fetch inside the use effect
14:00
uh maybe a fetch inside the use effect and it's loading but the user is ready
14:03
and it's loading but the user is ready
14:03
and it's loading but the user is ready to cancel this order and click no go
14:06
to cancel this order and click no go
14:06
to cancel this order and click no go back but at the same time this response
14:09
back but at the same time this response
14:09
back but at the same time this response arrives and you render this additional
14:12
arrives and you render this additional
14:12
arrives and you render this additional element and uh the user ends up clicking
14:16
element and uh the user ends up clicking
14:16
element and uh the user ends up clicking the yes place my order button which is a
14:20
the yes place my order button which is a
14:20
the yes place my order button which is a really really frustrating experience and
14:24
really really frustrating experience and
14:24
really really frustrating experience and there is nothing you can do uh your
14:25
there is nothing you can do uh your
14:25
there is nothing you can do uh your order is complete so this was uh um this
14:29
order is complete so this was uh um this
14:29
order is complete so this was uh um this is one of the most annoying things uh
14:32
is one of the most annoying things uh
14:32
is one of the most annoying things uh with these uh layout shifts and this was
14:35
with these uh layout shifts and this was
14:35
with these uh layout shifts and this was all thanks to this loading indicators
14:37
all thanks to this loading indicators
14:38
all thanks to this loading indicators that
14:39
that
14:39
that uh react did not introduce these loading
14:43
uh react did not introduce these loading
14:43
uh react did not introduce these loading indicators these were introduced uh in
14:46
indicators these were introduced uh in
14:46
indicators these were introduced uh in our case with
14:48
our case with
14:48
our case with JSF uh and uh sorry not JSF but but with
14:52
JSF uh and uh sorry not JSF but but with
14:52
JSF uh and uh sorry not JSF but but with uh with backbone and uh and uh later we
14:57
uh with backbone and uh and uh later we
14:57
uh with backbone and uh and uh later we migrated these in indicators and these
14:59
migrated these in indicators and these
14:59
migrated these in indicators and these layout shifts shift techniques to other
15:02
layout shifts shift techniques to other
15:02
layout shifts shift techniques to other languages uh but this was not theault of
15:05
languages uh but this was not theault of
15:05
languages uh but this was not theault of react and react also didn't solve this
15:09
react and react also didn't solve this
15:09
react and react also didn't solve this uh
15:10
uh
15:10
uh problem um
15:13
problem um
15:13
problem um so it's probably time to talk about why
15:19
so it's probably time to talk about why
15:19
so it's probably time to talk about why uh remix is interesting to me uh after
15:22
uh remix is interesting to me uh after
15:22
uh remix is interesting to me uh after you heard all my frustrations with uh 15
15:26
you heard all my frustrations with uh 15
15:26
you heard all my frustrations with uh 15 years of of development and
15:29
years of of development and
15:29
years of of development and indicators so uh remix uh was uh
15:35
indicators so uh remix uh was uh
15:35
indicators so uh remix uh was uh probably so so when I uh tried remix for
15:38
probably so so when I uh tried remix for
15:38
probably so so when I uh tried remix for the first time it really felt like this
15:41
the first time it really felt like this
15:41
the first time it really felt like this snippet from the beginning um of my
15:45
snippet from the beginning um of my
15:45
snippet from the beginning um of my presentation uh where you had everything
15:47
presentation uh where you had everything
15:47
presentation uh where you had everything on the same page uh your business logic
15:51
on the same page uh your business logic
15:51
on the same page uh your business logic and uh the how you are going to
15:53
and uh the how you are going to
15:53
and uh the how you are going to represent this thing that you are
15:56
represent this thing that you are
15:56
represent this thing that you are fetching so here everything you you need
15:59
fetching so here everything you you need
15:59
fetching so here everything you you need to know about this user comes from this
16:02
to know about this user comes from this
16:02
to know about this user comes from this query and on these lines you are uh just
16:05
query and on these lines you are uh just
16:05
query and on these lines you are uh just printing the usern name and uh this is
16:09
printing the usern name and uh this is
16:09
printing the usern name and uh this is pretty much uh the same in remix of
16:13
pretty much uh the same in remix of
16:13
pretty much uh the same in remix of course don't do this in uh production
16:16
course don't do this in uh production
16:16
course don't do this in uh production obviously uh this is just an
16:19
obviously uh this is just an
16:19
obviously uh this is just an example uh but in remix you have
16:21
example uh but in remix you have
16:21
example uh but in remix you have basically side by side your
16:24
basically side by side your
16:24
basically side by side your representation and the business logic
16:27
representation and the business logic
16:27
representation and the business logic that fetches the thing that your
16:30
that fetches the thing that your
16:30
that fetches the thing that your representation uh layer needs uh but
16:34
representation uh layer needs uh but
16:34
representation uh layer needs uh but yeah let's not talk about PHP but talk
16:36
yeah let's not talk about PHP but talk
16:36
yeah let's not talk about PHP but talk about reacts react this is a react
16:38
about reacts react this is a react
16:38
about reacts react this is a react conference after all so uh let's see
16:42
conference after all so uh let's see
16:42
conference after all so uh let's see what how remix enhanced react uh what it
16:45
what how remix enhanced react uh what it
16:45
what how remix enhanced react uh what it gave to react and and what it uh took
16:48
gave to react and and what it uh took
16:49
gave to react and and what it uh took away because I think remix takes away
16:51
away because I think remix takes away
16:51
away because I think remix takes away from react a lot and that's a good thing
16:55
from react a lot and that's a good thing
16:55
from react a lot and that's a good thing uh for example States it
16:59
uh for example States it
16:59
uh for example States it I I made many of these components this
17:01
I I made many of these components this
17:01
I I made many of these components this is terrible practice uh you you have a
17:04
is terrible practice uh you you have a
17:04
is terrible practice uh you you have a huge form uh many many US states and for
17:08
huge form uh many many US states and for
17:08
huge form uh many many US states and for every interaction you save the value of
17:11
every interaction you save the value of
17:11
every interaction you save the value of that input in a react State and that's
17:15
that input in a react State and that's
17:15
that input in a react State and that's how you end up with these uh huge huge
17:18
how you end up with these uh huge huge
17:18
how you end up with these uh huge huge forms uh so one of the first
17:21
forms uh so one of the first
17:21
forms uh so one of the first applications I coded with remix was a
17:25
applications I coded with remix was a
17:25
applications I coded with remix was a SAS spiler plate it was a multitenant uh
17:30
SAS spiler plate it was a multitenant uh
17:30
SAS spiler plate it was a multitenant uh feature Rich boiler plate
17:32
feature Rich boiler plate
17:32
feature Rich boiler plate application and I went through the
17:36
application and I went through the
17:36
application and I went through the tutorials I I will uh give you links uh
17:39
tutorials I I will uh give you links uh
17:39
tutorials I I will uh give you links uh to those at the end but I followed the
17:41
to those at the end but I followed the
17:41
to those at the end but I followed the tutorials and I uh implemented my own
17:45
tutorials and I uh implemented my own
17:45
tutorials and I uh implemented my own like idea and at the end I made an
17:48
like idea and at the end I made an
17:49
like idea and at the end I made an experiment and I was like okay let's see
17:51
experiment and I was like okay let's see
17:51
experiment and I was like okay let's see how many use stes I have in this whole
17:54
how many use stes I have in this whole
17:54
how many use stes I have in this whole code base and to my surprise by the way
17:57
code base and to my surprise by the way
17:57
code base and to my surprise by the way this is an open source uh template you
17:59
this is an open source uh template you
17:59
this is an open source uh template you can get it at this URL to my surprise
18:03
can get it at this URL to my surprise
18:03
can get it at this URL to my surprise there was one use state in the entire
18:07
there was one use state in the entire
18:07
there was one use state in the entire application and uh later you will see
18:10
application and uh later you will see
18:10
application and uh later you will see exactly why and how uh remix achieves
18:14
exactly why and how uh remix achieves
18:14
exactly why and how uh remix achieves this uh but yeah so it took away a lot
18:17
this uh but yeah so it took away a lot
18:17
this uh but yeah so it took away a lot of these repetitive uh use States uh
18:20
of these repetitive uh use States uh
18:20
of these repetitive uh use States uh that you had because you had a big form
18:23
that you had because you had a big form
18:23
that you had because you had a big form uh or something like that um it took
18:26
uh or something like that um it took
18:26
uh or something like that um it took away it took away uh um something else
18:30
away it took away uh um something else
18:30
away it took away uh um something else uh loading so this loading pattern is
18:33
uh loading so this loading pattern is
18:33
uh loading so this loading pattern is probably familiar familiar to everyone
18:36
probably familiar familiar to everyone
18:36
probably familiar familiar to everyone this is where you have the state that
18:39
this is where you have the state that
18:39
this is where you have the state that will hold the thing that you Fetch and
18:40
will hold the thing that you Fetch and
18:40
will hold the thing that you Fetch and then you have the loading state that
18:43
then you have the loading state that
18:43
then you have the loading state that indicates if the fetch is still
18:45
indicates if the fetch is still
18:45
indicates if the fetch is still ongoing and then the use effect that
18:47
ongoing and then the use effect that
18:47
ongoing and then the use effect that kicks off when the uh page mounts and uh
18:53
kicks off when the uh page mounts and uh
18:53
kicks off when the uh page mounts and uh this is essentially gone with
18:56
this is essentially gone with
18:56
this is essentially gone with remix and it's placed by this elegant uh
19:01
remix and it's placed by this elegant uh
19:01
remix and it's placed by this elegant uh loader pattern you have this used loader
19:03
loader pattern you have this used loader
19:03
loader pattern you have this used loader data that remix
19:05
data that remix
19:05
data that remix exposes um it's a it's a built-in uh
19:09
exposes um it's a it's a built-in uh
19:09
exposes um it's a it's a built-in uh function of
19:10
function of
19:10
function of remix and essentially when you when the
19:13
remix and essentially when you when the
19:13
remix and essentially when you when the fetch is complete and you have your user
19:15
fetch is complete and you have your user
19:15
fetch is complete and you have your user your page gets rendered there is no need
19:17
your page gets rendered there is no need
19:18
your page gets rendered there is no need for this use effect and uh use State uh
19:21
for this use effect and uh use State uh
19:21
for this use effect and uh use State uh structures
19:23
structures
19:23
structures anymore uh so this is the loader one
19:26
anymore uh so this is the loader one
19:26
anymore uh so this is the loader one great build thing built-in thing of
19:28
great build thing built-in thing of
19:28
great build thing built-in thing of remix the other great buil-in thing of
19:31
remix the other great buil-in thing of
19:31
remix the other great buil-in thing of remix um is uh an action or actions uh
19:36
remix um is uh an action or actions uh
19:36
remix um is uh an action or actions uh so these are the functions that are
19:38
so these are the functions that are
19:38
so these are the functions that are called when you post or or submit a form
19:43
called when you post or or submit a form
19:43
called when you post or or submit a form uh on a remix page so again if you
19:47
uh on a remix page so again if you
19:47
uh on a remix page so again if you remember my example from from PHP this
19:50
remember my example from from PHP this
19:50
remember my example from from PHP this is this is really close to that level of
19:53
is this is really close to that level of
19:53
is this is really close to that level of experience because right here I have my
19:55
experience because right here I have my
19:55
experience because right here I have my form how it's represented how the inputs
19:58
form how it's represented how the inputs
19:58
form how it's represented how the inputs look like like and then a couple of
20:00
look like like and then a couple of
20:00
look like like and then a couple of lines above I have my business logic
20:03
lines above I have my business logic
20:03
lines above I have my business logic that takes the uh data from the form and
20:08
that takes the uh data from the form and
20:08
that takes the uh data from the form and this is by the way uh so uh I I
20:11
this is by the way uh so uh I I
20:11
this is by the way uh so uh I I mentioned that uh remix eliminates uh
20:14
mentioned that uh remix eliminates uh
20:14
mentioned that uh remix eliminates uh the need for these use to these
20:17
the need for these use to these
20:17
the need for these use to these intermediary use states where you can
20:19
intermediary use states where you can
20:19
intermediary use states where you can store your data while your form is not
20:22
store your data while your form is not
20:22
store your data while your form is not submitted so so you don't need that
20:24
submitted so so you don't need that
20:24
submitted so so you don't need that because remix can uh access this form
20:28
because remix can uh access this form
20:28
because remix can uh access this form data here through your
20:30
data here through your
20:30
data here through your request
20:32
request
20:32
request um and the next uh great building thing
20:36
um and the next uh great building thing
20:36
um and the next uh great building thing is uh this use navigation hook and you
20:41
is uh this use navigation hook and you
20:41
is uh this use navigation hook and you can clear clearly see at this point that
20:44
can clear clearly see at this point that
20:44
can clear clearly see at this point that remix is made by folks who care about
20:47
remix is made by folks who care about
20:47
remix is made by folks who care about web development and actively do web
20:49
web development and actively do web
20:49
web development and actively do web development and build great websites
20:52
development and build great websites
20:52
development and build great websites because it just has all these uh
20:54
because it just has all these uh
20:54
because it just has all these uh built-in things that you will uh likely
20:58
built-in things that you will uh likely
20:58
built-in things that you will uh likely use in a web application like you will
21:00
use in a web application like you will
21:01
use in a web application like you will probably disable that submit button once
21:03
probably disable that submit button once
21:03
probably disable that submit button once the user clicks it so they cannot submit
21:06
the user clicks it so they cannot submit
21:06
the user clicks it so they cannot submit the same thing like multiple times and
21:09
the same thing like multiple times and
21:09
the same thing like multiple times and they exposed a uh simple hook for this
21:13
they exposed a uh simple hook for this
21:13
they exposed a uh simple hook for this uh you don't have to code this feature
21:15
uh you don't have to code this feature
21:15
uh you don't have to code this feature up
21:16
up
21:16
up anymore
21:18
anymore
21:18
anymore um
21:20
um
21:20
um and another uh another like uh
21:25
and another uh another like uh
21:25
and another uh another like uh manifestation of of why these uh why
21:28
manifestation of of why these uh why
21:28
manifestation of of why these uh why this uh why this entire framework is so
21:31
this uh why this entire framework is so
21:31
this uh why this entire framework is so well uh thought out is that they are
21:35
well uh thought out is that they are
21:35
well uh thought out is that they are they are aren't relying on some U madeup
21:39
they are aren't relying on some U madeup
21:39
they are aren't relying on some U madeup objects or proprietary methods or they
21:42
objects or proprietary methods or they
21:42
objects or proprietary methods or they didn't uh like reinvent the wheel they
21:46
didn't uh like reinvent the wheel they
21:47
didn't uh like reinvent the wheel they built remix on web standards so there is
21:51
built remix on web standards so there is
21:51
built remix on web standards so there is no need to uh for example if you work at
21:54
no need to uh for example if you work at
21:54
no need to uh for example if you work at a big tech company or or even like uh uh
21:58
a big tech company or or even like uh uh
21:58
a big tech company or or even like uh uh mediumsized tech company you would have
22:01
mediumsized tech company you would have
22:01
mediumsized tech company you would have to explain to your manager like yeah I
22:03
to explain to your manager like yeah I
22:03
to explain to your manager like yeah I need these new five dependencies to do
22:06
need these new five dependencies to do
22:06
need these new five dependencies to do this cool new thing well uh that's a
22:09
this cool new thing well uh that's a
22:09
this cool new thing well uh that's a problem because now that becomes your
22:12
problem because now that becomes your
22:12
problem because now that becomes your obligation to take care of those things
22:14
obligation to take care of those things
22:14
obligation to take care of those things and to like essentially that that's your
22:17
and to like essentially that that's your
22:17
and to like essentially that that's your problem here uh remix uses the standard
22:22
problem here uh remix uses the standard
22:22
problem here uh remix uses the standard apis the standard web API for example
22:25
apis the standard web API for example
22:25
apis the standard web API for example form data the uh the object that this
22:28
form data the uh the object that this
22:28
form data the uh the object that this returns is in the
22:30
returns is in the
22:30
returns is in the standard uh this object from entries
22:34
standard uh this object from entries
22:34
standard uh this object from entries also a built-in JavaScript object so
22:37
also a built-in JavaScript object so
22:38
also a built-in JavaScript object so there is less magic less proprietary
22:40
there is less magic less proprietary
22:40
there is less magic less proprietary apis and more standards so you can still
22:45
apis and more standards so you can still
22:45
apis and more standards so you can still uh so you can clearly see I I think at
22:48
uh so you can clearly see I I think at
22:48
uh so you can clearly see I I think at least that um this is made for uh faster
22:54
least that um this is made for uh faster
22:54
least that um this is made for uh faster adoption and that's a really cool thing
22:57
adoption and that's a really cool thing
22:57
adoption and that's a really cool thing and when we are talking about faster
22:59
and when we are talking about faster
22:59
and when we are talking about faster adoption uh remix also cares about uh
23:03
adoption uh remix also cares about uh
23:03
adoption uh remix also cares about uh developers because as I just mentioned
23:06
developers because as I just mentioned
23:06
developers because as I just mentioned uh when you work at a company you have
23:08
uh when you work at a company you have
23:08
uh when you work at a company you have to justify these uh
23:10
to justify these uh
23:10
to justify these uh technology uh changes and sometimes even
23:14
technology uh changes and sometimes even
23:14
technology uh changes and sometimes even version bumps uh so remix did this cool
23:17
version bumps uh so remix did this cool
23:17
version bumps uh so remix did this cool thing and they are actually rebranding
23:21
thing and they are actually rebranding
23:21
thing and they are actually rebranding themselves to uh but not rebranding they
23:24
themselves to uh but not rebranding they
23:24
themselves to uh but not rebranding they are becoming part of react routers so
23:26
are becoming part of react routers so
23:26
are becoming part of react routers so instead of releasing uh remix
23:29
instead of releasing uh remix
23:29
instead of releasing uh remix 3 um they will release those features as
23:34
3 um they will release those features as
23:34
3 um they will release those features as part of react router
23:36
part of react router
23:36
part of react router 7 and uh this is a huge thing because
23:40
7 and uh this is a huge thing because
23:40
7 and uh this is a huge thing because react router right now is is used by
23:43
react router right now is is used by
23:43
react router right now is is used by around 8 million open repositories on
23:46
around 8 million open repositories on
23:46
around 8 million open repositories on GitHub uh it was
23:48
GitHub uh it was
23:48
GitHub uh it was used um in all like in all react
23:53
used um in all like in all react
23:53
used um in all like in all react applications I I ever work with both as
23:56
applications I I ever work with both as
23:56
applications I I ever work with both as a contractor or a software engineer so
23:59
a contractor or a software engineer so
23:59
a contractor or a software engineer so it's a technology that's almost or maybe
24:03
it's a technology that's almost or maybe
24:03
it's a technology that's almost or maybe maybe it is as old as react I I don't
24:05
maybe it is as old as react I I don't
24:05
maybe it is as old as react I I don't know exact exactly when it was released
24:08
know exact exactly when it was released
24:08
know exact exactly when it was released but it's a really old technology that
24:10
but it's a really old technology that
24:10
but it's a really old technology that kind of grew with react and many people
24:14
kind of grew with react and many people
24:14
kind of grew with react and many people adopted it and now they the remix team
24:18
adopted it and now they the remix team
24:18
adopted it and now they the remix team made this great move by saying okay we
24:21
made this great move by saying okay we
24:21
made this great move by saying okay we don't want people to adopt another shiny
24:25
don't want people to adopt another shiny
24:25
don't want people to adopt another shiny new thing and to explain to the managers
24:29
new thing and to explain to the managers
24:29
new thing and to explain to the managers like oh we know want to do remix because
24:31
like oh we know want to do remix because
24:31
like oh we know want to do remix because remix is cool on X or I don't know they
24:35
remix is cool on X or I don't know they
24:35
remix is cool on X or I don't know they will make this part of react router 7
24:39
will make this part of react router 7
24:39
will make this part of react router 7 which will make the adoption even uh
24:42
which will make the adoption even uh
24:42
which will make the adoption even uh faster so that's that's some bck big
24:45
faster so that's that's some bck big
24:45
faster so that's that's some bck big brain moment from the remix team
24:48
brain moment from the remix team
24:48
brain moment from the remix team congrats um and finally uh what you can
24:53
congrats um and finally uh what you can
24:53
congrats um and finally uh what you can do to adopt uh remix as fast as you can
24:56
do to adopt uh remix as fast as you can
24:56
do to adopt uh remix as fast as you can you can go to remix.com run and check
25:00
you can go to remix.com run and check
25:00
you can go to remix.com run and check out their 30 minute tutorial I recommend
25:03
out their 30 minute tutorial I recommend
25:03
out their 30 minute tutorial I recommend that I did the five minute I did all of
25:05
that I did the five minute I did all of
25:05
that I did the five minute I did all of their tutorials the 30 minute tutorial
25:07
their tutorials the 30 minute tutorial
25:07
their tutorials the 30 minute tutorial is all you need it's uh as surprising it
25:11
is all you need it's uh as surprising it
25:11
is all you need it's uh as surprising it is it's 30 minutes but it's a deep dive
25:14
is it's 30 minutes but it's a deep dive
25:14
is it's 30 minutes but it's a deep dive into everything that you will use in
25:18
into everything that you will use in
25:18
into everything that you will use in most of your web
25:19
most of your web
25:19
most of your web applications if that's not enough I
25:22
applications if that's not enough I
25:22
applications if that's not enough I covered in this series on my blog a
25:25
covered in this series on my blog a
25:25
covered in this series on my blog a couple of edge cases like including form
25:28
couple of edge cases like including form
25:28
couple of edge cases like including form inputs and and whatnot uh that I I I
25:31
inputs and and whatnot uh that I I I
25:31
inputs and and whatnot uh that I I I felt I have to uh write about and that
25:36
felt I have to uh write about and that
25:36
felt I have to uh write about and that they were missing uh from the
25:39
they were missing uh from the
25:39
they were missing uh from the tutorial and um that's all from for me
25:43
tutorial and um that's all from for me
25:43
tutorial and um that's all from for me uh thanks for uh having me at this
25:45
uh thanks for uh having me at this
25:45
uh thanks for uh having me at this conference and uh
25:51
[Music]