{"id":7198,"date":"2023-11-27T21:20:39","date_gmt":"2023-11-27T20:20:39","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=7198"},"modified":"2024-01-29T10:53:05","modified_gmt":"2024-01-29T09:53:05","slug":"qwik-the-first-html-framework-as-fast-as-a-lightning","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/qwik-the-first-html-framework-as-fast-as-a-lightning\/","title":{"rendered":"Qwik – the First HTML Framework as Fast as a Lightning"},"content":{"rendered":"\n

If you’ve read my last<\/b> article about Bun<\/b><\/a>, you know that I like to try programming novelties. If any of them interest me, I usually share my experience on this blog as well. This time, however, I deliberately took my time. Qwik came out in its stable version 1.0 on May 1, 2023 and since then, I’ve been testing, researching, comparing and trying to understand it properly. And while I’m still waiting for further improvements, I think I can bring this new HTML framework closer to you. Let\u2019s do it.<\/b><\/p>\n\n\n\n

Why does the creator of Angular use React?<\/b><\/h2>\n\n\n\n

The subtitle is intentionally a bit sensational, but it doesn’t mislead. The <\/span>co-founder of Qwik is none other than the father of Angular, Slovak Mi\u0161ko Hevery<\/b>. I, as an angularist, like it, however, I’m less impressed that Qwik itself uses the syntax and methods of React. <\/span><\/p>\n\n\n\n

However, the truth is that it has good reasons for doing so. React is basically minimalist, and if something is to be ultrafast, it must adhere to minimalist principles (the backend language GoLang is also an example). The bottom line is that <\/span>if you know React, you know Qwik.<\/b><\/p>\n\n\n\n

What is revolutionary about Qwik?<\/b><\/h2>\n\n\n\n

Basically, everything we know about frontend frameworks. <\/span>The main goal of Qwik is to be fast.<\/b> I mean really fast – it ranges somewhere on the level of pure HTML without JavaScript, without performing complex component rendering and meaningless loading of everything that’ll be used later. And it\u2019s successful at that.<\/span><\/p>\n\n\n\n

Just go to the <\/span>main page of Qwik<\/span><\/a>, where you’ll find demonstrations of sites where the framework is already implemented. Average ratings of their speed are 97% <\/span>according to Google metrics<\/span><\/a>.<\/span><\/p>\n\n\n\n

How is it possible that Qwik is so fast?<\/b><\/h2>\n\n\n\n

Qwik combines some of the basic principles<\/b> we already know from various other frameworks <\/span>and some of its own revolutionary ideas<\/b> put into practice.<\/span><\/p>\n\n\n\n

    \n
  1. SSR – Server Side Rendering: <\/b>The initial load of the page and the execution of the basic states are performed on the server side where the page is hosted. Only HTML will then return to the client.<\/span><\/li>\n\n\n\n
  2. The framework itself isn’t transmitted to clients:<\/b> only Qwik Loader, which has less than 1-2 kb, is transmitted.<\/span><\/li>\n\n\n\n
  3. Qwik is compatible with <\/b>B<\/b>un<\/b><\/a>, <\/b>Deno<\/b><\/a>, <\/b>Netlify<\/b><\/a> and <\/b>Node.js<\/b><\/a> and works with <\/b>Vite<\/b><\/a> and <\/b>esbuild<\/b><\/a> in the background<\/b><\/li>\n<\/ol>\n\n\n\n

    These principles are well known and, if well covered, can help any framework. But what is Qwik really the best at? Let’s compare it.<\/span><\/p>\n\n\n\n

    How a regular website works<\/b><\/h2>\n\n\n\n

    A regular modern site downloads basic HTML and a bunch of JavaScript on the first load.<\/b> Then it lazy-loads a lot of JavaScript and then creates various component structures, listeners, etc. using a frontend framework. This whole process is also called hydration. In complex applications, it sometimes takes up to seconds to see something and be able to interact. <\/span><\/p>\n\n\n\n

    How Qwik works<\/b><\/h2>\n\n\n\n

    Qwik, on the other hand, doesn’t know hydration in the true sense of the word.<\/b> HTML is first loaded on the server where the page is hosted. Subsequently, it creates a session for the given client\/browser, performs basic states and finally sends only minimalistic HTML to the said client. <\/span><\/p>\n\n\n

    \n
    \"\"<\/a>
    Hydration in a normal application and in Qwik<\/span><\/i><\/figcaption><\/figure><\/div>\n\n\n

    But we wouldn’t do much with pure HTML. We need to run events, interact with actions, store statuses and solve renderings.<\/b> How does Qwik do it? Like this:<\/span><\/p>\n\n\n\n

      \n
    1. All variables, component states or temporary values are recorded as an attribute in HTML<\/b> on the elements.<\/span><\/li>\n\n\n\n
    2. Events and actions are also recorded, in the form of text in an attribute.<\/b><\/li>\n\n\n\n
    3. Qwik serializes everything using JSON.stringify –<\/b> it solves errors such as cyclic references, serialization of built-in objects (date, maps), DOM references, promise as well as functions.<\/span><\/li>\n\n\n\n
    4. Only one global listener <\/b>is used.<\/span><\/li>\n\n\n\n
    5. Thanks to querySelectorAll, all events are globally captured<\/b> and then compared and evaluated on the basis of selectors.<\/span><\/li>\n\n\n\n
    6. Qwik uses built-in state management<\/b> – for reactivity, it uses a proxy, which is very similar to signals. The difference is only that the input is always an object and not a primitive type. Everyone who knows the signals, knows that no change detection \u00e0 la Angular is necessary.<\/span><\/li>\n\n\n\n
    7. Each component that is visible renders only HTML.<\/b> The other components, the code itself and the actions are delayed as long as possible.<\/span><\/li>\n<\/ol>\n\n\n
      \n
      \"\"<\/a>
      This is what HTML looks like when everything is recorded as an HTML text attribute.<\/span><\/i><\/em><\/figcaption><\/figure><\/div>\n\n\n

      In short – everything is lazy-loaded<\/b><\/h2>\n\n\n\n

      In Qwik, therefore, everything that’s possible to lazy-load, is lazy-loaded.<\/b> Each component is loaded only when it’s really necessary to render it. The same applies to actions – when initializing the signal on the SSR, text HTML button is returned, but it isn’t executed. The action occurs only with a successful pressing, which is captured in the global listener. Subsequently, a part of the onClick$ event is downloaded and executed, and the value is rendered and serialized into HTML.<\/span><\/p>\n\n\n\n

      How does Qwik do it? Thanks to division.<\/b> A component can be written in one file and Qwik will make sure that each of its methods, actions, HTML, styles and everything else are divided and compiled into separate files and chunks. So if your app has 10,000 files, Qwik will split them so that they can easily become hundreds of thousands of files. <\/span><\/p>\n\n\n\n

      And when Qwik, at the moment when the user presses the button, finds out that it doesn’t have the method yet, it simply quickly downloads the file from the server (which usually requires only a few bytes\/kilobytes) and then executes it. <\/span><\/p>\n\n\n\n

      So a HTML code for the button looks like this:<\/span><\/p>\n\n\n

      \n
      \"\"<\/a><\/figure><\/div>\n\n\n

      Qwik marks the text attribute of the global listener above the button and when pressed, it defines what to download and which method to perform.<\/span><\/p>\n\n\n

      \n
      \"\"<\/a><\/figure><\/div>\n\n\n

      And to make it even easier, Qwik determines, in addition to the division of components, their life cycle. It divides it into three states:<\/span><\/p>\n\n\n\n

        \n
      1. Task: <\/b>Performs a task before rendering or after a status change – executable on both SSR and client.<\/span><\/li>\n\n\n\n
      2. Render: <\/b>Renders the component after Task and before VisibleTask.<\/span><\/li>\n\n\n\n
      3. VisibleTask: <\/b>Performs the task when the component is rendered and visible at the same time – executable only on the client.<\/span><\/li>\n<\/ol>\n\n\n
        \n
        \"\"<\/a><\/figure><\/div>\n\n\n

        Based on them, it can then quickly determine where individual tasks will be performed. <\/span><\/p>\n\n\n\n

        What is the future of Qwik?<\/b><\/h2>\n\n\n\n

        So what exactly is Qwik? It’s React, Svelte and Angular with SSR in one \ud83d\ude42<\/b> But it’s nothing new. When I look at what Bun comes with, or what Angular is currently adding in versions 16 and 17, I know that in the IT field everyone learns from and gets inspired by everyone. And that’s how it should be.<\/span><\/p>\n\n\n\n

        And what do I think about Qwik after more than 5 months of testing? <\/span>Well, it’s crazy fast, but also crazy simple<\/b>, which I don’t like so much. But I can imagine that<\/span> it can be a great inspiration for other, more mature frameworks<\/b>. SSR with initialized status, only one global listener and as much lazy-loading as possible are ideas really worth addressing.<\/span><\/p>\n\n\n\n

        Sources:<\/span><\/i><\/p>\n\n\n\n

        \nhttps:\/\/dev.to\/builderio\/a-first-look-at-qwik-the-html-first-framework-af\n<\/div><\/figure>\n\n\n\n
        \nhttps:\/\/www.builder.io\/blog\/qwik-v1\n<\/div><\/figure>\n\n\n\n

        Cover Image:<\/span><\/i><\/p>\n\n\n\n

        \nhttps:\/\/www.builder.io\/blog\/why-progressive-hydration-is-harder-than-you-think\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"If you’ve read my last article about Bun, you know that I like to try programming novelties. If…","protected":false},"author":17,"featured_media":7278,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199,516],"tags":[312,246,505,504],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7198"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=7198"}],"version-history":[{"count":2,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7198\/revisions"}],"predecessor-version":[{"id":7410,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7198\/revisions\/7410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/7278"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=7198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=7198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=7198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}