What if you can use the fastest JavaScript framework along with React? What if you can build applications that feel fast regardless of application size?
Let's see how incredible Qwik is along with React.
What if you can use the fastest JavaScript framework along with React? What if you can build applications that feel fast regardless of application size?
Let's see how incredible Qwik is along with React.
Reshapability in the next generation of front-end frameworks with OOV one loading time. Quick is a web framework that loads instantly and does not require hydration. QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. This represents a significant shift in front-end frameworks.
Reshapability in the next generation of front-end frameworks with OOV one loading time. The concept of reshapability is a mental shift from the current generation of front-end frameworks. Hydration in JavaScript frameworks slows down the initial loading time. Quick is a web framework that loads instantly and does not require hydration. It focuses on super fast load times and delivers the fastest user experience by optimizing server-side HTML and lazy loading JavaScript.
Reshapability in the next generation of front-end framework with OOV one loading time. I spice up a little bit of my TED talk and it's called Reshapability in the next generation of front-end frameworks with OOV one loading time.
Hi, my name is Ruby Jane Kabagnot. I'm originally from the Philippines but I have been working in Oslo Norway for the past few years now. And I think some people are already familiar with the term Reshapability. This was coined by the creators of QUIC including the so-called father of Angular JS, Misko Hevry, who said this idea of reshapability is a mental shift or a paradigm shift from the way the current generation of front-end frameworks works, which is the hydration process.
And so to explain the Reshapability, we need to understand the so-called hydration process of the current generation of frameworks. Because the fundamental problem in this hydration thing in front-end frameworks is that our application or app needs to hydrate at least once in the server and then do the same thing in the browser. But you may ask so what? Well, basically, it just means that the so-called DTI, or Time to Interactive of the application becomes slower. And this can be very frustrating or felt by your end users, especially if you got a big application or your users are using a slower network connection or just older devices. And of course, no one wants a frame website that takes forever to download, right?
And why they need to hydrate? So to explain this further, the hydration in JavaScript frameworks is like turning your static painting or static painting into an interactive touchscreen. So basically, the server provides the initial painting or HTML. And then we need but we need to actually touch controls or the event handlers, right? And the features which is the application state to make everything interactive or your application interactive. But the thing is, this step can slow down the initial loading time of the application. So making your painting look touch ready when it's not, which is really frustrating for your users. Like what I said, simply put the hydration step in the client side is to make our application interactive. So what about Quick? So Quick is a new web framework that makes your web apps or our web application loads instantly, no matter how big or complex they are. Basically, it just uses, they said one kilobyte or one KB of JavaScript to start. So ensuring a fast performance of any scale. Now, unlike other frameworks, Quick doesn't require hydration, so your apps are interactive right away. So this is achieved by feature what they say, region mobility. Basically, Quick focuses on super fast load times. And even on, even if you're using mobile or because it's just serving HTML as needed. No, sorry, it just loads the HTML needed and loading and just loaded the JavaScript incrementally. So overall, Quick aims to deliver the fastest possible user experience by optimizing your server side HTML and rendering, HTML rendering and lazy loading the JavaScript. So what is this region mobility? So because Quick is different because it does not require hydration or eager execution of your code on the client side. It uses region mobility. So meaning not requiring hydration is what makes the Quick application startup almost instantaneous. So the browser or your client does not need to do anything because it already has all the information that it needs. It has information that needs in so-called stateful HTML to basically determine where the things are in the application, which includes these three important things that you are event listeners, the framework code, and the application code.
Quick allows pages to become interactive without downloading and executing client-side JavaScript, serving HTML with minimal JavaScript. Quick knows how to serialize closures, allowing the app to resume from the server to the client without hydration. Quick applications act like streamable apps, saving server state and resuming on the client. Getting started with Qwik involves choosing a package manager and running the CLI command. Qwik is a resumable and replayable framework that doesn't require executing all components on the client. Qwik is showcased with a simple app featuring a counter component.
So Quick. So the way Quick operates is that the page can become interactive without downloading and executing the JavaScript on the client. So this means that the page is almost instantaneous or over one loading time. So this is the primary premise of the Quick framework is that to serve HTML with minimal JavaScript with only increasing interaction as needed.
So here's an image of the hydration for the typical current frameworks, front-end frameworks, and this is reachability for Quick. So how is Quick doing this reachability? In a nutshell, Quick knows how to serialize your closures. And this is the thing that other frameworks are not able to do. So what are closures? So closures are if you remember JavaScript closures are a function that has a state or data. So basically, Quick can take that closure and serialize it, which is essentially how Quick is able to just resume or bring your app into life right away from the server to the client without having to do the hydration process. So this is the thing that what makes Quick resumable or replayable is because the client doesn't need to execute all the components to figure out where the listeners are.
So Quick is progressive, so this means that the user starts to interact with the page because Quick will start downloading, executing all the necessary code for that interaction. So in this way, Quick applications act more like streamable apps rather than downloading everything upfront before interaction. So bridge streamability is supposedly simple in concept. You save the server site state and then move it to the client and then continue or resume where the server left off. But it may be simple in concept, but it's hard to implement until Quick. So because Qwik can take that closure and serialize it. This is essentially how Qwik is able to just resume or bring your app into life right away from the server to the client without having to do the hydration process or eagerly executing your code. So this is the thing about what makes Qwik resumable or replayable, is that because the client doesn't need to execute all the components to figure out where the listeners are.
Getting started. So you can choose your preferred package manager. So you can run the following command. You can do the npm create Qwik app latest, pnpm, yarn. And then we have this thing now, bond, which is the latest runtime now, JavaScript, that is competing for our attention. So I know it's powered by ZIG, so it aims to be an all-in-one JavaScript runtime and toolkit. Yeah, so anyway, back to Qwik. So the CLI will guide you through the interactive menu to set the project name, and then select one of the starters, and ask you if you want to install dependencies.
So let's see Qwik in action. So I have here the homepage or the landing page of a simple Qwik app. And if you open up DevTools here, we can see that there's no JavaScript delivered to the browser because this is just a simple side page and no interactivity required. And we have here a counter component.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments