00:00:16.720
Hello everybody. Um, yeah, I didn't
00:00:20.080
remember I I had mentioned Node.js in
00:00:22.160
this presentation because I mean I feel
00:00:23.840
like the imposer here. Um but you know
00:00:28.080
uh I am you know I am a husband and a
00:00:31.359
father and I like to say that I own a
00:00:33.840
computer that's something I do and with
00:00:36.800
that computer I do some experiments and
00:00:39.360
those experiments they are I mean a
00:00:42.399
variety of languages and I mean I I like
00:00:44.399
to do that and I do some with rails with
00:00:47.120
Ruby I really love that language. Um and
00:00:50.399
I mean you know you already know that
00:00:52.160
you you can check out more about me in
00:00:55.039
my this code that there's all my links.
00:00:58.239
So get in touch. Um since the last month
00:01:01.680
I am a developer relations which means
00:01:04.400
that I'm here to make connection. So
00:01:07.680
genuine connection. So if you find me
00:01:10.240
out there come to say hi um and know
00:01:12.880
let's have a great conversation. Let's
00:01:14.560
share experiences. You know I really
00:01:16.960
love this. I'm enjoying this new role.
00:01:19.280
Thanks for making possible uh my my
00:01:22.400
boss.
00:01:24.479
He's right here in front of me.
00:01:28.720
Um so I'm I'm I mean I'm really enjoying
00:01:31.840
this community. I started talking uh in
00:01:34.560
Ruby conferences, local conferences last
00:01:37.119
year. Was pretty amazing. you are so
00:01:40.000
lovable and you know everybody just got
00:01:42.960
me a nice feeling about the whole thing
00:01:46.159
that involves Rails and Ruby. So I
00:01:48.399
started last year and then I had a
00:01:50.000
chance to speak at a bigger conference
00:01:51.680
in S. Paulo called Tropical Rails was
00:01:54.560
pretty amazing. I loved it and then I
00:01:56.479
tried and let me try to go to Railscom
00:01:58.799
because I mean it's amazing and the last
00:02:01.119
one I I'd like to feel this and it
00:02:03.680
happened. Ros is right here and she made
00:02:06.159
it possible. So I love it. Thank you. Um
00:02:08.720
and I mean I want to say thank you to
00:02:10.720
all the organization you know that I
00:02:13.120
mean I feeling very good to be here
00:02:15.120
today. Um and I was a bit nervous of
00:02:18.160
course uh but after some great keynote
00:02:20.560
we just had I mean nothing can go wrong
00:02:22.640
right? Yeah. So but I still brought my
00:02:25.760
inhaler just in case. Um yeah but you
00:02:29.840
know we're in Philadelphia and I
00:02:31.360
couldn't start without having a
00:02:33.440
reference to Rocky. So I feel like Rocky
00:02:36.160
having a chance to fight Creed. So
00:02:38.560
because you know you all are awesome and
00:02:40.400
just a tiny guy here. But I love it. As
00:02:44.160
I said, I'm a developer relations. I
00:02:46.319
work for Code Money 42. You know, I have
00:02:48.560
to thank them too because they made it
00:02:50.879
possible for me to be here today talking
00:02:52.800
to you. We are software boutique. We are
00:02:55.440
specialized in Rails, Ruby, Node.js,
00:02:58.080
JavaScript and a few things more. You
00:03:00.640
know, we have nice programs like uh we
00:03:03.440
have a nice training program that people
00:03:05.280
get people like that are changing their
00:03:07.519
careers. You know, we help them to do
00:03:10.319
this, you know, in our company, we train
00:03:12.319
them and then we give them a job which
00:03:14.080
is amazing. We also have some strong
00:03:16.879
things about open source contributions.
00:03:19.280
We love this. So, if you have a project
00:03:21.440
and you need some help, maybe we should
00:03:23.440
talk to each other. Maybe we can get
00:03:25.200
some folks to help you with your project
00:03:26.879
too. Um, and I mean we have other
00:03:29.680
services that you can find out much more
00:03:32.080
in our website. Just scan the square
00:03:33.840
code and let's do great things together.
00:03:36.319
Okay. Um, we're going to talk about
00:03:38.959
progressive web apps today that are
00:03:41.760
amazing. I love them. Oh,
00:03:46.640
don't know how to drink water anymore.
00:03:49.599
Um
00:03:51.120
but you know um and I mean progressive
00:03:53.599
web apps are just you know web apps that
00:03:56.879
you install on the device that's it but
00:03:59.680
of course um I like to give you some
00:04:02.879
more details about what I think that's a
00:04:05.519
good PWA so to speak you know PWAs are
00:04:09.360
should be installable of course that's
00:04:11.360
the thing of PWAs um they should deliver
00:04:15.120
some offline experience to your users
00:04:18.320
Um, also some oh some native APIs which
00:04:23.440
is amazing you know you are in the user
00:04:25.040
device so you want to do something more
00:04:27.040
than just being a website in the device
00:04:30.080
and I like to put this but just more a
00:04:33.199
plus that's the user engagement because
00:04:35.199
you also are in the user device you know
00:04:36.960
so I mean you are closer to them so you
00:04:39.360
can get to them um and increase your
00:04:42.400
engagement and some some some folks did
00:04:44.800
this you know there's some data from
00:04:46.639
some companies that had PWAs and they
00:04:50.240
improved the engagement with the users
00:04:52.320
and that's how why that's all it is
00:04:55.360
about right you are creating products
00:04:57.919
and you want to have more people using
00:04:59.520
them because you are solving their
00:05:01.280
problems so um PWS can help you with
00:05:04.320
that and of course one one more uh thing
00:05:08.639
that you should think about it when you
00:05:11.199
are choosing to do PW is that mobile
00:05:14.080
development can be tough sometimes you
00:05:16.000
know you have that great feature you you
00:05:18.320
know had that you have that great app
00:05:20.479
and you want to publish something new a
00:05:22.639
bug fix or something but Apple says that
00:05:25.840
you can't and that's pretty bad you know
00:05:28.320
with PWS you get some more freedom
00:05:30.479
that's a real example from hey calendar
00:05:32.880
and they faced this but I mean I have to
00:05:35.440
give you good news that they already
00:05:37.919
solved it and broke my slides um but you
00:05:41.440
know I'm happy that it worked we we are
00:05:45.199
getting more freedom and freedom out of
00:05:47.039
those gatekeepers like Apple, Apple
00:05:48.880
Store and Google Store. So that's
00:05:51.039
amazing. Um
00:05:54.560
so um everything starts in PWS with PW
00:05:58.000
files. You may have heard about them
00:06:00.080
already. They come by default in Rails
00:06:02.160
since the 7 version 7.2.
00:06:05.199
Um and there are two files, but you need
00:06:08.000
a little bit more to make this happen.
00:06:09.919
You need what I call the platform
00:06:11.840
because you need the browser, you know,
00:06:13.759
to make things happen. And I have an app
00:06:16.880
for today to show you. And for that app
00:06:19.120
specifically, we need um some control
00:06:22.319
over the client and we'll be using
00:06:25.520
stimulus which I find very very nice. So
00:06:28.080
let's see uh a really nice key scenario
00:06:30.400
I just made for for the talk. Uh let me
00:06:32.800
show you. Hopefully
00:06:35.759
this is going to work. I don't think it
00:06:38.880
did actually. Oh my god. Forgot this
00:06:42.560
part actually.
00:06:44.560
Let me see if I can. Okay, I can do
00:06:47.199
this. Let me try to show you a ride
00:06:49.520
here.
00:06:52.000
Oh, I can't do this. Oh, I can't
00:06:53.840
actually.
00:06:58.080
Oh, yeah.
00:07:01.199
I think I don't have connection and
00:07:03.039
that's very bad.
00:07:07.039
Okay, if
00:07:10.800
okay. Okay, that's good. That's good.
00:07:13.199
get connection now. I forgot that part,
00:07:15.520
but know that's Yeah, we got it. That's
00:07:18.639
just just a nice app that I have here. I
00:07:21.599
will
00:07:23.520
um describe it basically if it plays.
00:07:28.479
I wasn't expecting this.
00:07:33.280
Yeah, I think it's going to it's not
00:07:34.880
going to play it. That's bad. So, maybe
00:07:37.360
I can show you in the end of the talk.
00:07:39.680
Not sure if anybody can help me here.
00:07:42.479
Uh so let's go back to the presentation
00:07:44.720
I think. No.
00:07:47.440
Yes, it should be here or
00:07:52.639
let me see. Oh, it works. Yeah.
00:07:57.039
Yeah, I'm sorry for that. Um just a nice
00:07:59.759
app, you know, it's a coaching app uh
00:08:02.160
called Ferma.
00:08:04.080
Did you hear that? This notification
00:08:05.680
come in. There's a new uh uh resource
00:08:08.879
available. So, it has two views, the
00:08:11.039
coaching and the student. And as you
00:08:13.520
notice, I got the the thing here. Let me
00:08:15.599
pause it real quick because the thing is
00:08:18.400
this is the student view. They can see
00:08:20.400
all the materials. And the great thing
00:08:22.879
about this app is that they can save it
00:08:25.360
to to to read them offline and that's
00:08:28.160
amazing, you know. So, I just did that
00:08:30.319
for the content enlightenment. That's a
00:08:33.279
nice nice article, let's say. And I can
00:08:36.399
see that offline. I turned off the
00:08:37.760
connection. Um, I still can see that.
00:08:39.919
That's amazing. If I try the other one,
00:08:42.240
I got the the dragon, the dinosaur,
00:08:44.640
actually, not a dragon. Uh, but just
00:08:47.440
that's uh I meant to do that just to
00:08:49.760
show you that. I mean, only the saved
00:08:51.600
ones that work. This part is the
00:08:54.399
coaching view side of things where they
00:08:56.399
publish materials. Very simple, too.
00:08:58.160
Just a form with a title, some details,
00:09:00.320
and some file. And I publish this. You
00:09:03.279
know how to do this. you know, some BR
00:09:04.800
controller receiving the the request and
00:09:06.880
saving the the file. Okay, but things
00:09:10.480
get better when I turn off the Wi-Fi
00:09:13.279
connection. So, that's the great thing
00:09:14.959
here. You know, I f the form again um to
00:09:18.399
the file as always and the message will
00:09:21.760
be a little bit different, you know, as
00:09:23.279
you can see it says that resource was in
00:09:25.440
keyed and not published. And that's
00:09:27.519
that's a little bit difference, you
00:09:28.800
know, a subtle difference, but
00:09:30.560
different. Then I connect again and then
00:09:33.920
it will be finally published. You know,
00:09:36.640
I just didn't do nothing. I just turn on
00:09:39.680
the the connection again and that's it.
00:09:41.760
A very simple example, but that to give
00:09:44.640
us Okay, I can't I can't pass anymore.
00:09:51.040
Okay, it worked.
00:09:53.920
That to give us I mean this is a nice
00:09:55.680
example that will give us everything
00:09:57.200
almost everything you need to you know
00:09:59.040
empower your application today. So let's
00:10:00.959
see how we can get a regular Rails app
00:10:02.560
and turn that into a native L app. Okay,
00:10:05.200
real quick. Everything starts with the
00:10:07.839
Rails new. So that's my app name is
00:10:10.399
Fairmat. So Rails new format. I create
00:10:12.480
one. Um and these are the two files I
00:10:15.040
mentioned. These are the PWA files.
00:10:17.600
Technically the PWA thing is the
00:10:19.519
manifest one because it describes the
00:10:21.920
whole thing about your app, how it
00:10:23.920
interacts with the environment, you
00:10:25.600
know. So the name, the icons, the theme
00:10:28.560
color. So if you have an app today, I
00:10:31.600
mean you put this in it to be
00:10:33.120
installable. We will see that and we
00:10:35.519
have the service worker that I mean that
00:10:37.920
will allow us to do all the offline
00:10:40.399
experiences that we need for our app and
00:10:43.600
this can be used any any ways you know
00:10:45.519
you don't need the manifest to use this.
00:10:47.600
So people that have uh the hotware
00:10:51.279
native apps can also use this you know
00:10:53.360
all the benefits that it brings to to
00:10:56.079
and of course also the regular apps. Um
00:11:00.000
so you get a new rails it will be
00:11:02.560
commented out you just remove that and
00:11:04.880
it will be available you know the
00:11:06.240
manifest available the routes and the
00:11:08.800
manifest will be in the your application
00:11:10.800
layout. Um and then you see this you
00:11:13.519
know the install prompt you'll be
00:11:15.040
already I mean visible that little
00:11:17.839
button on the on the right you see that
00:11:20.720
uh then when click it will be
00:11:21.920
installable that's amazing that's just
00:11:23.360
the manifest part and that's it for the
00:11:25.279
manifest
00:11:26.800
everything else now is the offline
00:11:28.240
experience everything else now is the
00:11:30.079
service worker okay um and everything
00:11:33.360
starts with uh the registration you need
00:11:35.680
to register the service worker to be
00:11:38.079
able to use it uh it's pretty simple you
00:11:40.720
know you just you know call the some
00:11:43.040
methods in the navigator service work
00:11:44.959
and you're done. Um and let's get some
00:11:48.880
to some platform stuff now uh that you
00:11:52.000
need to your app. Uh and the first one
00:11:54.480
is the cache API. Um and as the name
00:11:56.959
suggests it's just caching. It's a
00:11:58.800
storage that you stores things key value
00:12:02.720
pairs but it's a little bit different.
00:12:05.040
You store keys as requests and values as
00:12:08.320
responses. So pretty amazing and pretty
00:12:10.800
useful for doing caching, you know. Uh
00:12:13.360
and let's see how we're going to use
00:12:14.720
this. It's also pretty simple API in the
00:12:17.600
service worker. We will have this
00:12:19.680
listener. I'm doing the install listener
00:12:21.920
here. Uh just to do a pre-cache. So
00:12:24.959
which means that when the user access my
00:12:27.920
application for the first time, it will
00:12:29.760
get all the resources I need cached and
00:12:32.079
then the next time they can use that
00:12:33.839
without connection. So that's it. That's
00:12:35.760
pre-caching. I then we open a bucket I
00:12:39.279
called it for sets and then I am
00:12:42.079
registering a bunch of things. So when I
00:12:44.720
do an add all I got to all my resources
00:12:47.360
all my URLs my paths and what you do it
00:12:51.360
will make the request and you know it
00:12:54.240
will save the request and responses like
00:12:56.320
a key value and we we just cach them and
00:12:59.200
that's amazing
00:13:01.120
as you can see routes and the resources
00:13:03.839
like the assets
00:13:06.000
um and we I mean the second listener
00:13:08.079
that we have in the service work and
00:13:10.240
this is a famous one it's the fetch that
00:13:13.519
transforms our service worker to a
00:13:15.920
proxy. So with this listener, every
00:13:18.720
request that comes from your client will
00:13:20.399
go through the service worker before I
00:13:22.000
going to the outside world. So before I
00:13:24.160
get into a base controller or something
00:13:26.240
to go through here and that's amazing
00:13:27.839
because with that we can use the cache
00:13:30.720
things and serve them you know so we do
00:13:34.240
that. I mean, you do you put your rules
00:13:36.639
here. In this case, for example, I'm
00:13:38.240
skipping everything that's not a G
00:13:39.839
request because I don't want that to
00:13:41.839
intercept posts, for example, that
00:13:43.600
usually go to a controller. I just want
00:13:46.000
to serve some cache things. Um, and I
00:13:49.600
open the bucket again and I get I do a
00:13:52.399
match. You know, if I found it, I just
00:13:54.639
return it and that's it. That's pretty
00:13:56.560
simple to ser response. But you notice
00:13:59.120
there's some more code here. Of course,
00:14:02.320
I'm still requesting something new
00:14:04.000
because that's my decision to keep the
00:14:06.639
resources up to date. So even though I
00:14:08.320
still I have in the cache, I am still
00:14:10.560
getting the new things. This is just a
00:14:12.639
strategy. It's called stay while
00:14:15.040
validate. And I mean it's up to you
00:14:17.199
because the thing about cache API is
00:14:18.880
that it's all up to you. You decide when
00:14:21.040
to update it, when to remove some stuff
00:14:22.880
from it. You know, it's all under your
00:14:25.360
control. That's how it looks like in the
00:14:28.959
in the in the in the dev tools, you
00:14:32.399
know. So, pretty simple to see and to
00:14:34.560
examine how it is
00:14:41.040
and we just reached one first milestone
00:14:43.040
of our app. It will work offline.
00:14:45.440
Basically, user will be able to use this
00:14:48.000
to navigate everything will work but not
00:14:51.120
the form submission from the coach
00:14:52.720
because we didn't implement that yet.
00:14:55.279
And for that we need one more API that
00:14:57.839
you need to carry in your pocket. And
00:14:59.279
that's amazing one. This is also a
00:15:01.519
storage that will be useful for us
00:15:03.440
because if you notice our app it just
00:15:06.079
look like this. It has a stimulus
00:15:08.320
controller in the forums and then when
00:15:10.160
it's it has connection is online it goes
00:15:12.480
direct to the real controller. Pretty
00:15:14.399
simple. You do that all day. uh but when
00:15:17.600
it doesn't have a connection what I do
00:15:19.600
is to put to index DB that's this local
00:15:23.199
storage like the database in the browser
00:15:25.760
and then when the browser begins
00:15:27.600
connection it syncs everything so the
00:15:30.959
index DB is pretty amazing you know it
00:15:32.639
allows you to have indexes I mean that's
00:15:34.160
a good name by the way um you know that
00:15:36.800
speeds up your searches and you can save
00:15:38.880
blobs into that which is also good for
00:15:41.279
this app for example because I can save
00:15:42.880
a file locally okay so uh this is my
00:15:46.639
controller my my my view pretty simple
00:15:49.120
just some data controller stuff uh and
00:15:53.600
this is the implementation of the
00:15:54.959
controller also pretty simple I'm just
00:15:56.959
getting form data and sending a request
00:15:59.920
to an endpoint and that's it but if
00:16:02.160
something goes wrong I mean
00:16:06.160
I do this you know if this a network
00:16:09.199
error it means that I don't have a
00:16:10.720
internet connection so I go ahead and
00:16:14.079
put into a a queue and Then uh uh I just
00:16:18.639
tell the user okay I incured this as you
00:16:20.880
just saw and by I mean scheduling to a
00:16:23.920
queue is just saving to the index DB
00:16:25.839
that's it this API of index DB the the
00:16:28.000
the raw API is very hard to work with
00:16:31.759
but there are some libraries that you
00:16:33.199
can use for exampb that makes it much
00:16:35.440
much simpler.
00:16:37.920
Um, okay. Oh, and this important because
00:16:42.000
this is the background syncing stuff
00:16:43.600
that allows the browser to to try it
00:16:45.759
again when it regains connection.
00:16:48.480
Um, and I mean you notice a pattern
00:16:51.120
here. We have one more listener that is
00:16:52.959
in this case sync. And this is the
00:16:54.720
listener that we I mean this function
00:16:57.120
this listener will be triggered whenever
00:16:59.279
the browser has something to do. I did
00:17:01.839
the registration here. um the browser
00:17:05.039
know there's something to do when I
00:17:06.559
regain connection and it will do that
00:17:08.480
okay so uh it to process the queue that
00:17:11.760
basically means read reading the queue
00:17:13.839
and you know retrying all the requests
00:17:15.679
again and you know pretty simple you do
00:17:17.520
that all the time with sidekick and
00:17:19.439
solid Q so you know that that's how it
00:17:22.720
looks like into the browser too so the
00:17:25.280
index DB stuff you know I have a blob I
00:17:27.360
have a file there and pretty good we
00:17:30.000
just reached the second milestone now at
00:17:32.160
the time the users and submit forms when
00:17:34.720
offline and that's amazing. Okay.
00:17:38.240
Uh the last API I want to talk about is
00:17:40.400
the push API. I'll be very quick with
00:17:43.200
this because I mean since it's a plus
00:17:46.000
it's about engagement. Um and I already
00:17:49.360
talked about it in another conference
00:17:50.720
called Tropical Rails. Should check on
00:17:52.559
YouTube. I will leave some links here.
00:17:54.720
Um and there's a nice blog about it
00:17:57.280
already. I will share with you. But the
00:17:59.360
thing is it's pretty good to have push
00:18:00.880
notifications because they are way
00:18:03.200
better than just emails or SMSs. Users
00:18:06.080
tend to interact even much more with
00:18:07.919
them with your app if you do push
00:18:10.080
notifications. Okay, so it's a very
00:18:12.400
important feature if you want to engage
00:18:14.640
users. Um everything comes I mean all
00:18:18.880
the thing you should know is here. It's
00:18:21.760
pretty complex. I'll be honest. So um
00:18:26.000
basically from your browser you create a
00:18:27.760
subscription it will go to a push server
00:18:30.320
that's holding by the browsers the major
00:18:33.039
browsers like Google uh Apple Mozilla
00:18:36.400
uh the browser provider um and uh you
00:18:39.280
get some subscription details we see
00:18:40.960
what they are you hold them you store
00:18:43.440
them and then whenever you want to send
00:18:45.440
a notification to a user you go back to
00:18:48.000
that those details and use them to do
00:18:49.760
that on the client you basically ask for
00:18:53.600
a registration you know so all the just
00:18:56.799
subscribe there we we'll talk about that
00:18:59.280
key in in a second but it's very simple
00:19:01.760
to uh this is what the subscription is
00:19:05.039
an endpoint it's one for Google um and
00:19:08.240
some keys those keys will be useful for
00:19:10.720
encrypting the message and all the
00:19:12.160
cryptography stuff
00:19:14.640
uh also on the client you you need to
00:19:16.400
ask for permission as you do for your
00:19:18.240
app you know it to ask you permission to
00:19:20.320
show notifications
00:19:22.799
um on the service worker. Guess what?
00:19:25.600
More listeners. Uh push and notification
00:19:28.799
click. But those these two they come
00:19:30.799
with the default rails. You know they
00:19:32.480
are pretty good already. Just let you
00:19:34.240
know. The push is for when notification
00:19:36.960
comes in. Notification click. I mean
00:19:39.280
kind of obvious when it's clicked. So
00:19:42.400
yeah, then you do what you need to do
00:19:44.720
with them. uh on the server you want to
00:19:47.520
hold that information subscription
00:19:49.280
details because you need that to send
00:19:51.679
the notification again. Um so I mean
00:19:55.440
just make sure that you allow the users
00:19:57.440
to have more than one because the same
00:19:59.840
users can have more than one device.
00:20:01.600
Okay. So I mean you want to also tag
00:20:04.320
track devices. So keep that in mind. Um,
00:20:08.720
and when sending notifications and when
00:20:11.440
generating the vapid keys, I mean it's
00:20:14.720
pretty hard, but this gem is pretty
00:20:16.559
good. The web push it to allow you to
00:20:18.480
generate the keys and whenever sending
00:20:21.600
uh you have to have those keys. So hold
00:20:24.080
them at least I mean a pair for
00:20:26.000
environment and these keys allows the
00:20:28.640
push server to know that you are you
00:20:32.159
okay? So keep them.
00:20:34.880
I leave square cold call that has a
00:20:36.480
really nice blog post about it. So I
00:20:38.559
mean that's why I didn't spend much time
00:20:40.320
talking about it because this is pretty
00:20:42.080
good. You know it's from Joy of Rails. I
00:20:44.080
really enjoy it. Um and I mean just
00:20:46.960
check it out. And there's more. Of
00:20:49.679
course I just talked about three APIs
00:20:51.840
that you should have in your pocket. You
00:20:53.120
should have them but you can do much
00:20:54.960
more. You know you can just it um
00:20:57.840
because today browser can do many many
00:20:59.919
things that we just sometimes are not
00:21:02.320
aware of. So things like picture and
00:21:04.480
picture view transitions, we can do
00:21:06.720
contact to picker, you know, that seems
00:21:09.520
pretty pretty impressive. We can do um
00:21:12.720
Bluetooth, you know, a lot of things.
00:21:14.240
Left one more QR code here that you can
00:21:16.320
check them. Uh and that's good. You
00:21:20.080
know, the browser is pretty good. And
00:21:22.559
you may be thinking, but can really the
00:21:24.559
browser do that? And they say yes, they
00:21:26.559
can.
00:21:28.320
Some of them. Yeah. Because that's the
00:21:31.440
thing. And and at this moment you you
00:21:33.200
may be thinking okay this guy is lying
00:21:35.120
to me in front of me my face but yeah
00:21:38.720
what's the freedom they just talked
00:21:40.159
about in the beginning of the talk the
00:21:41.840
thing is that we still depend on the
00:21:43.120
browser you know the browser is our
00:21:45.200
platform for doing things and if the
00:21:47.280
browser doesn't do an API I mean I mean
00:21:50.320
we we can't do much about it. Uh and to
00:21:54.159
show you some example of this I have
00:21:56.159
this keyboard. It's a nice keyboard by
00:21:58.240
the way it's called Moonlander. I love
00:22:00.240
it. And in the Moonlander you have the
00:22:03.039
layout. You can change it. You can
00:22:04.400
compile it and save directly to the to
00:22:06.480
the keyboard from the browser. If I'm
00:22:08.960
not wrong, they are doing some web USB
00:22:12.240
API to allow this. Pretty good. It works
00:22:16.000
in Google Chrome.
00:22:18.400
Yeah. When it comes to Safari, what they
00:22:20.320
do is download it. That's your fault.
00:22:24.400
And the thing is that I mean that's the
00:22:26.400
best we can do. You know, of course, we
00:22:28.159
can do some workarounds to make some
00:22:29.679
stuff to work like the background
00:22:31.840
syncing stuff. I just mentioned a little
00:22:33.520
bit. It's technically works only in
00:22:36.000
Chrome, but you can make it work in all
00:22:38.080
the browsers too. You know, just do some
00:22:40.000
polyfill stuff and it works, but some
00:22:42.320
just don't. In this case, I mean, just
00:22:44.480
let the user know that you could you
00:22:46.799
could have a better experience if you
00:22:48.799
were using my deserted browser and
00:22:50.799
that's it. We do I mean our best.
00:22:54.720
And I know that you're thinking, okay,
00:22:56.320
that's too much JavaScript, but you
00:22:58.880
know, you you're actually you're not
00:23:01.200
like this anymore. Um because you are
00:23:04.400
the Renaissance developers, you know, so
00:23:06.960
you can do this. I really believe you
00:23:09.039
can do because you are smart, guys.
00:23:11.840
There's something I'm jealous about the
00:23:13.200
Rails community is that you have the
00:23:15.520
best ecosystem. You have the best tools
00:23:17.520
to make your job. That's amazing. That's
00:23:19.760
why I love it, you know, and you of
00:23:22.159
course can handle it. Actually, there
00:23:23.840
are some people working on it. This
00:23:25.360
little guy here looks like he's working
00:23:26.720
on something. I don't know. Um, but his
00:23:30.480
idea is to compress the complexity of
00:23:32.640
the actual notifier, you know. So, I
00:23:35.360
mean, it's been there. I think that
00:23:36.720
would be pretty good because the
00:23:38.400
notification, I mean, it's a little bit
00:23:40.799
complex, you know. So, yeah, that's
00:23:42.559
that's bad. And for the other things
00:23:44.799
that we just saw, the whole JavaScript
00:23:46.880
things, the whole listeners, I mean,
00:23:48.880
they are all patterns. If you do it in
00:23:51.280
one app, it you you do the same in
00:23:53.120
another app. That's true, you know, and
00:23:56.080
for those patterns, we have this tool
00:23:57.919
already that's called workbox, you know,
00:24:00.159
and the workbox got all those patterns
00:24:02.480
and make it possible for us to use them.
00:24:05.039
So, let me show you how that code we had
00:24:08.080
would be with workbox. Remember the
00:24:09.919
precaching stuff, it would be just like
00:24:11.919
this much simpler, right? Just got a
00:24:14.799
package and you know, we did it. the the
00:24:18.080
first thing that we need to do the the
00:24:20.240
whole strategy of caching it becomes
00:24:22.960
just this. Okay, so much much simpler.
00:24:27.279
Now we have a call back to match the
00:24:28.799
browse and everything and you have a new
00:24:31.120
object to handle the strategy and you
00:24:33.760
can have as many strategies as you want.
00:24:35.840
You know can use anyone. Um, and then
00:24:39.200
for the caching stuff, you have
00:24:40.640
everything to deal with the the life of
00:24:43.520
the cache. And you know, it's a pretty
00:24:45.279
good tool that you can use.
00:24:48.000
And but I mean, you are the Renaissance
00:24:50.159
developers and you can do much better.
00:24:52.159
Uh, we can do much better, you know. Um,
00:24:55.039
that's because Rails allows you to do
00:24:57.760
stuff that is I have that tool and I
00:25:00.799
like the way it is, but I I'd like to be
00:25:03.360
let to be more Rails and we can do that.
00:25:05.840
And I love this tool that it's called
00:25:08.080
generators because we can bring all that
00:25:11.039
that thing into Rails and just use like
00:25:13.679
it was some Rails commands. I love it.
00:25:16.480
And I've been experimenting with this um
00:25:19.840
that doesn't have a name. It's called
00:25:21.279
PWA builders. So far it has just two
00:25:24.159
commands but it allows us to bring
00:25:27.520
workbox into a real application to make
00:25:29.360
it even simpler. So when installing the
00:25:32.559
the thing when installing the the the P
00:25:35.679
the workbox it will do some init
00:25:38.320
initializations it will bring workbox if
00:25:40.480
you want to vendorize it and it will um
00:25:44.159
do I don't know if you can see that but
00:25:46.240
you know it's just a a quick starter for
00:25:48.640
for for uh your service worker. I was
00:25:51.440
playing with it. You know, that's pretty
00:25:53.840
good. And I I love this command when
00:25:56.080
running the precache some route. You
00:25:57.760
just can keep putting routes on it. Of
00:26:00.400
course, it's still an experiment I've
00:26:01.919
been working on, but hopefully I'll be
00:26:04.240
able to make it a gem so everybody can
00:26:06.320
use it. I love I love real generators
00:26:08.640
and it's been an amazing experience to
00:26:10.400
work with with that.
00:26:13.120
um FD42 we are doing some effort on it
00:26:16.880
you know so I hope to bring more folks
00:26:18.559
to work on some tools for us you know to
00:26:21.120
make all this simpler
00:26:23.440
um and we've been I've been writing
00:26:25.919
about it in the code miners blog you can
00:26:27.600
check it out it's a whole series
00:26:29.279
everything you need to pwas um it has
00:26:32.799
three articles so far but I'm pretty
00:26:37.200
sure we need a little bit more because
00:26:39.200
there's some gaps to fill yet um so I If
00:26:42.559
you think something should be covered,
00:26:44.320
you know, just let me know too. And I
00:26:47.120
mean the final message is the same we
00:26:49.679
got from the fire fireside chat with
00:26:51.360
DTH. We need to go compress the
00:26:53.679
complexity. That's what I love in the R
00:26:55.440
community, the Ruby community. I am very
00:26:58.159
happy to be here. Uh it was pretty
00:27:00.240
amazing. I am I mean afraid that I won't
00:27:02.880
be speaking at the risk of next year.
00:27:05.760
That's the that's the last one. But it
00:27:08.960
was pretty amazing. A good experience.
00:27:10.559
I'd like to say thank you all for
00:27:12.159
everything. Thank you all for being here
00:27:13.520
today because I wasn't expecting that
00:27:16.320
that amount of people, you know.
00:27:19.600
So, thanks for that. And horse is in
00:27:21.760
front of me. I was very nervous. Um, and
00:27:24.640
I mean I just want to say that thank you
00:27:26.559
everybody.
