Okay, so our next speaker is Ayub who is tech lead at Serview, company based in Paris, I
think, right?
Yes.
And he's going to talk about how to leverage quick to improve performance in the web.
So big round of applause for Ayub.
Hello, so like you see here, my name is Ayub Elhuan.
I'm a software engineer working, so I'm a rocking engineer, but I'm working in Paris
for two years now.
And today it's my first time giving a talk here in Brussels, and I was here for two times
to attend to a BJS conf in the react Brussels, but this is my first time giving a talk here.
So I'm so happy about that, and I'm so happy that there is a packed room here, and I'm
so stressed with your questions.
By the way, so let's start.
Before starting talking about quick, let's make some context here.
So imagine you're in a restaurant waiting for a dish, for example, for Moroccan couscous.
Do you know couscous or not?
Okay.
Good.
So you are in a restaurant and you are waiting for your Moroccan couscous, but the waiter
said that you should wait 45 minutes.
That's a lot, but for Moroccan one, no, you should wait.
Okay.
But it's a lot of time, so you can't wait for it, and what you will do, you will maybe
go for another restaurant, you will write bad reviews, you will talk to your friends
and say, maybe they have a good Moroccan couscous, but you should wait 45 minutes.
That's a lot of time.
I can't do that.
Okay.
So imagine that you're working on websites and you're having the same issue.
You should wait for it to download all these JavaScript and show it to you.
So before talking about JavaScript, let's talk about the core web vitals, who are the
metrics that Google use to try to measure the performance of your websites.
So we'll start, for example, with LCP, largest contentful pens.
What is largest contentful pens?
It's the time that your website will take to show the most large content to the user.
Okay.
So if it takes more than 2.5 seconds, you need to improve it.
If it's more than four seconds, that's a lot.
Okay.
We have also the first input delay.
It's the time that take, for example.
For example, you have a button.
Okay.
But this button is not working and it's waiting for its JavaScript to work.
Okay.
The time that will take between showing the button and the button will work.
It's the first input delay.
If, for example, I show you a button and you should wait more than 300 milliseconds to work
with it, that's not a good thing to do in your website.
Okay.
And Google are calculating that.
We have also cumulative layout shift.
So what is cumulative layout shift?
Imagine, for example, you have your website and you want to click on login.
But in this time you click on login, you have an ad bar that's shown in the website and
you click on the ad bar.
That's a problem.
And Google is measuring that for our websites.
If you do that, they will lower your ranking in Google.
Okay.
In Google search.
I'm talking about Google search.
Now let's talk about performance.
Why your website should be performance.
Here Google's done some study cases about some websites that try to improve the performance
of their websites.
For example, we have here MOBIFI.
They improve their websites only, only with 100 milliseconds.
And they had 1% more conversion.
That's a lot.
Okay.
We have Cook, for example, with improving only 850 milliseconds.
It's not a second.
It's only 850 milliseconds.
They had 7% more conversion.
That's why performance matters.
Okay.
So by the question here that we have, why we have these problems with performance in
our websites?
Imagine, for example, you want more interactivity in your website.
What you should add.
You will add more JavaScript.
Okay.
So that your website will be more interactive.
And when you will add more JavaScript, you should download more JavaScript and that will
impact your performance.
Okay.
So here I will try to show a short about how SPA, single page application, works and
how we tried in these last years to improve it.
So when you have a website that you did with the SPA framework, you will send your HTML
to the browser and you will show a blank page.
And maybe because I'm experimenting that a lot with the websites to reserve my flight,
to register my flight.
And I had to, I will not say the name of it.
And I should wait for, I think, 3, 4 seconds.
And after that, in this 3, 4 seconds, I will get a blank page.
And after my 4 or 5 seconds, I will get my page.
Why?
Because the browser is trying to download the JavaScript, trying to execute this JavaScript.
And after that, it will render a page that is working.
Okay.
That you can work with.
So to improve this process, what we tried to do?
We tried to have something that's called hydration.
What is hydration?
We will send more HTML because here we didn't send a lot of HTML.
It's only an index.html with nothing.
This is why we show blank page.
Okay.
So now we will try to send a lot of HTML to show something to our user.
Okay.
But this thing that we will show, it's not working because there is no JavaScript.
You should also wait and download the JavaScript, try to execute it, and now, doing the reconciliation
process to have a working page.
So maybe we will wait more time than before, but we are trying here to trick our user.
The website will not work, but we'll show it to him.
Okay.
That's the thing.
And we should wait.
He can do nothing.
And if you're now on Twitter or on YouTube, you will find a lot of people who are talking
about these React server components, partial hydration, partial pre-rendering, streaming
HTML, streaming that.
Why they are trying to do that?
They're trying to do that to improve this process and to try to show to the user something
that works.
Like for example, streaming SSR, they will try to, this will work and you should wait
and we will download the JavaScript, execute this part.
They are trying to improve this process.
Here what I will talk about today is about Qwik.
So Qwik has another approach to improve the problem of hydration.
What Qwik will do will not have hydration, but it will have another concept that's called
resumability.
What is resumability?
Here we will send the same HTML that have a lot of HTML.
We can show a page and boom, the page is working.
It's interactive.
The problem that you can say now, does your page will be interactive without JavaScript?
That's not the case.
But there is a trick.
The page is working, but because we sent a little bit of an event listener here, a global
event listener who will listen to the interaction of the user and he will go and download the
necessary JavaScript that your website needs for this part.
Imagine you have a chart, a lot of data tables, a footer.
If you are using another framework, you will download all the JavaScript for this page and
maybe you will never use these JavaScripts.
But you will download it.
Here with resumability, you will not do that.
You will download on demand.
So the question that you can ask here is every time the user will click on a button, we should
send a request to the server and we should wait for this request, execute the little
JavaScript and it will work.
So because Quick has a mechanism, what is this mechanism?
Quick is using a service worker to download these chunks of JavaScript.
That's the thing here.
When you are using SBA, you have one single file of JavaScript that have all the JavaScript
needed for our page.
It's one thing.
If you are doing, for example, lazy loading, it will have more and more chunks, but for
other pages that are not shown for the first time.
You can't do this for pages that are shown in the first time.
Here Quick is using a Quick optimizer who tried to chunk all your websites.
All these pieces of interactivity here, you will have for each piece of interactivity
GS file.
And the framework, what you will do?
It will start to download in the background these files and store them in the cache, but
it will execute nothing.
So the DOM here, the DOM will be free.
Will not have a lot of JavaScript.
I will show you that in the demo code.
So that is the resumability.
You will have your page faster and also interactive.
And with using this concept of resumability, you will need maybe for your website more
JavaScript because you need more interactivity, but you will keep the same performance.
Why?
Because you will not have more files to download.
You can scale as you want and you will download on demand.
That's the thing.
Okay?
So what I will show you here, I will do the demo and I hope that it will work because
always live coding, you're in front of people, problems come.
Okay, I will try.
I'm stressed for that, but maybe it will work.
Okay?
So you can see my VS Code.
I'm a VS Code guy.
I don't use Vim.
It's too complicated for me.
Okay?
So here I created a file in our roots for our new page.
Okay?
I called it FOSDEM and here I will create a quick component.
Okay?
What you will see here is that the quick components, there is a resumblance with the react.
Okay?
Why?
Because quick is using also GSX.
Here what I will do, I will create a simple button.
I will name it console and here I will go click and console, log, test login.
Okay?
So here I have my page.
I have my button and if you see in the network, I don't have the VT files because it will
not have them in production and I have the GS files and if I click on refresh, I will
have nothing.
I will not have my GS files that I should download with SPI frameworks.
Okay?
Not only SPI if you use hydration, also you will need to download the GS files needed
for your first page.
Okay?
But here you will not have GS files.
When I will click on console, I will download the GS file needed only for that.
Okay?
So I will do another thing.
I will create second button.
Okay?
I do the same thing with login 2.
Okay?
So I will click here.
I will have this file for only this interaction.
I will click on console, log 2.
I will download the second file for this interaction.
Okay?
That's the thing about Qwikis.
They have chance for all your interactions in your website.
Okay?
So here I will create a account to have some simple example.
Keep it simple because I have 20 minutes.
And here I will create that.
And here I will have a count button.
And I will name it count.
And here I will display this count.
Okay?
So here I will click on the count.
I will have this JavaScript needed for this count.
Okay?
It's working.
That's good.
And here it's only the file for the framework, for Qwikis.
What I will do here?
I will go and create another button.
Okay?
We do simple console log.
And I will name it here.
I will do condition verified.
Why?
In this button, I will have a condition.
I will not show this console log only if the count is more than 14.
Okay?
Okay?
That's good.
So it's not count.
It's count value.
That's great.
Okay?
So I will click on, I will name it console.
Console.
I will click on console and I will get the condition verified.
Okay?
But I will show nothing because I should wait for it to become 15 and now it will work.
But the thing here is that we didn't use this condition.
First, when we had the count, when we had our count 12 and we clicked on console, we
didn't use it but we downloaded this JavaScript.
That's a problem.
Here with Qwik, we can do lazy execution.
So what I will try to do here?
I will try to lazy load this line because I don't need it.
I need it only if the condition is verified.
Okay?
So what I will do?
I will create a function here and I will wrap it with a dollar sign.
Okay?
And I will call this function.
So I used only a dollar sign to do what?
When I will click on console, I will get my file but without the console log and I will
get this only with a link to this console log because I don't need it.
So what I did here with this dollar sign is lazy executes a line because I need this line
only if the condition is verified.
Even when I will have the condition verified, I will click on console and I will get this
file with this condition verified and Qwik will take this file and it will use it to
the console log because now it will use it.
Okay?
I have really a loud voice.
I was working without you.
I have really a loud voice.
That's too much.
Maybe in the recorder recording, we will not get my voice but there is no problem.
They can hear me.
That's good.
That's good.
So, yes.
Thank you.
So here, like you see with me, what I did is only lazy load this line of code.
Okay?
So imagine this line of code is a lot of things to do and you can't do it in your front end.
You can't do it on the client side.
Okay?
You need to do it in this server.
What I didn't tell you is that Qwik has something called Qwik City.
It's metaframework.
Like for example, you have React.
You have with React, Next.js, remix, Gatsby, other things.
I don't know.
And with Qwik, you have Qwik City.
And with using Qwik City, we can do the back end for Qwik.
Okay?
Here, what I will try to do is this condition verified.
There's a lot of things to do.
So maybe I should do that in the server side.
Okay?
I will come here.
I will call server function and now I will go to my client side.
I will click on console.
Notifies it's Qwik City because I'm using the server.
I will get nothing in my console log.
Okay?
It will count more.
Now I have 16.
So the console log should work.
I will click here.
I will have nothing.
It's only some things here.
And I have nothing in the console log.
Why?
Because the console log will be in the server side.
Okay?
With only adding server to your line, you will execute all your code in the server side.
Imagine you're using Java, for example, for the back end.
You have on-giraffe for the front end.
You should refactor your verifications of a form and you want to do that in the back
end so you should do all of it, refactor all of the code, write it another time in Java
and all that.
Here with using Qwik, you can, you will also add a server function and it will work.
Here for example, I will say you should return me a result.
Okay?
This console log is good.
But after doing your work in the server, you should give me a return.
Okay?
So here I will give him a return from the server.
You will come here, have a const result.
Wait for it.
We'll have a thank in here.
You will cancel log your result.
Okay?
So like you see with me here, what I have?
I have this cancel log in the back end and I should return this thing to the client side.
Okay?
So here I should have the, I should have the condition verified.
Okay?
Its count is 16.
When I will click on cancel log, I will get my condition verified here and on my console
log, I will get my return from the server.
And here I'm trying to work with the server, the client in the same file, in the same file,
like I said.
And that's it.
This was my demo.
I think I didn't do more than 20 minutes.
So happy to be here and thank you so much.
I will keep the couscous image.
Speaking of couscous, if you want to avoid the 45 minutes, you can try Tunisian couscous.
It's way better.
He's saying that because he's Tunisian.
No, it's the Moroccan one.
So questions?
Yes.
Your question is that you're worried about the size of the framework here.
So for example here, I will use only the count.
You will get the framework.
So I think it's 15 or something like that of kilobyte.
I can't see it.
I'm stressed.
In the button?
Yes, 56.
That's it.
And if you will not need quick CT, it will not download it.
It download it only on demand.
You can deploy it simply with Versa, for example, or with the, it's like, it's a Node.js
version that is included in the quick framework.
You will not have the work of going searching for server trying to, no, you take the framework,
you add the only simple adapter here.
I don't have a good connection.
Here in the docs, you will get your references, deployments, and there is, in the documentation,
you have files, adapter files for each environment.
You can only use it, and it's really, really simple.
If you use, for example, Versa, you add only some configs in your files and it works.
Okay.
Yeah.
Since you allow for the code from the front end to the back end, how do you deal with code
injection?
How do you deal with?
Code injection.
Code injection.
From the front end to the back end, for example, in process of testing.
It's like I showed in the demo.
It's only, it's only with playing with, with your hooks that you have.
There is, if I had time for that, you have, for example, use resource, you have wrote
loader, you have wrote action.
It's only hooks that you deal with.
You take this code that is in the client side, you do it in this hooks or with using
server function, and it works.
In the same file, that's the thing.
You will not need to add another file for the back end, file for the client side.
No, you should only use the right hooks that you want, and it works.
Is it also possible to unit test your components?
I, I, I didn't, I didn't try, I didn't try to unit testing yet because I'm working on,
on a project now with, with Quick.
I didn't do that yet, but you can use, use, I think, it's the C-Press or the tools that
we are using for framework, for front end framework.
Yes.
Yes.
I, I didn't, I didn't do that yet.
I didn't do that yet.
There are other questions.
We still have time for one question.
Oh yeah.
Is there a way to pre-fetch the JavaScript files?
For example, if you have like the button click, and there would be more code to that, and
there's the console lock, and you might have a bad network connection if you do that in
the background, while the user's not clicking the button, is there a way to instruct the
user to download as long as your runtime is here?
Yes.
That's what it's doing with the, with the, with the service worker.
It's trying to download in the background the files.
Yes.
With Quick, you will not need to, to, to send another request to the server.
And the good thing about is that Quick has, has, has now, has now a new tool that works
with EI that you, you can use in your production, for example.
If you, you deploy your website after a month, you will get some data of, of how it works
and how users click on the buttons and which buttons they click first.
For example, if you're using e-commerce website, the first button is add, add the article,
and the second button is show the, the category or something like that.
So Quick after using it, after, after being in the production for, for example, one month,
they collect data and, and the second deployment, it will take the, this data and the, the,
the download in the background with the files that maybe the user will need.
Okay.
They will change the way how it download JavaScript and they will start with the files that maybe
you will need on, on your, on your website.
Thank you.
Yeah.
We don't have time for more questions, but you can find a, you will be around.
So big round of applause for you.
Thank you.