Blog post

Insights

The Qwik Framework Review: Accelerating eCommerce

The same approach, the new outcome. See what the Qwik framework brings to the table and how it differs from popular JavaScript frameworks.

A Headless CMS Meets Visual Editing: Streamlining Content with Builder.io

On May 1, 2023, the Builder.io team announced Qwik v1.0, a full-stack web framework that aims to deliver instant loading of apps of any size or complexity at scale. The highly anticipated teaser for Qwik 2.0 has just been unveiled on the Builder.io blog this February.

In this blog post, we look into the Qwik’s framework capabilities and the problems it solves. What is more, the team at Amitech Group went hands-on with the tool, sharing implementation insights.

Not another JavaScript framework

Frontend frameworks for eCommerce have transformed web development, making it more efficient. Despite their speed, scalability, and ease of maintenance, there is a persistent issue: keeping the initial bundle size small. It is a challenge that has never found a proper solution.

Front-end frameworks’ performance compared

That is where Qwik comes in. It brings a brand-new approach with a core goal: delivering instant-on applications that are both scalable and performant, whether on web or mobile.

The challenge: hydration and performance

To make websites responsive, we rely on the process of hydration. It takes the static HTML code to make it dynamic, running large amounts of JavaScript.

However, as web complexity has increased, so has the codebase. This results in more JavaScript, causing delays in network bandwidth and startup times. Slower networks and less powerful devices suffer the most.

The Qwik solution: less JavaScript, more efficiency

We need less JavaScript. However, the existing tools are not built to minimize code delivery. Furthermore, optimizing the code leads to larger bundle sizes that hinder web performance. Qwik framework provides a solution:

Delay execution for speed

Qwik offers lightning-fast performance, requiring a minimal amount of JavaScript code to become interactive. By postponing and balancing code download and execution, Qwik provides near-instant startup time. This is a feature hardly seen in other modern frameworks.

Resumable JavaScript with Qwik

Qwik’s unique resumability feature transforms the way web apps operate. While hydration-based tools duplicate the app logic in the browser, Qwik apps halt code execution on the server. User interaction with a website triggers JavaScript execution. The focus here lies in transmitting server-client data over unnecessary JavaScript download.

Lazy-loading feature

In addition, Qwik employs lazy-loading, executing the code only upon user actions with a website. By breaking up code into manageable chunks, it is possible to optimize the app’s performance and improve user experience.

Hydration vs. resumability

Qwik vs existing front-end frameworks

Popular frameworks do not support resumability out-of-the-box. Implementing these features becomes challenging without fundamentally changing the tools. Furthermore, frameworks would grow incompatible with the existing ecosystem, which adds extra development and operational issues.

Should you use Qwik for your next project?

The need and the challenge

Initially, we had an online store builder for the B2B food service industry. The cross-platform app enabled food businesses to solve niche tasks: quickly create orders/reorders, oversee shipping and payments, handle catch-weight items, manage complex pricing models, etc.

Qwik Storefront Experience Out-Of-The-Box

Building a fully functional online store in minutes

EXPLORE

We aimed to go further and extend the functionality to the B2C sector that can accommodate a wide spectrum of eCommerce scenarios.

However, some limitations in the React framework resulted in the app's slower loading on both desktop and mobile. In B2C, this is a crucial factor, as even a slight delay could drive users away.

To ensure an unparalleled user experience, we needed a rapid solution that would seamlessly cater to B2B and B2C segments, addressing technical limitations, improving performance, and enabling a high level of personalization.

Choosing Qwik

Our team evaluated several options in the market and strategically opted for Qwik, as it has all the functionality to boost the solution’s performance and personalization.

“While the framework is relatively new with a lower adoption rate, we saw this as an opportunity rather than a limitation. Being among the early adopters allowed us to proactively engage with the framework, being the first to identify and address emerging challenges”.

Maksim Huretski

Full-Stack Engineer at Amitech Group

Integrating Builder.io as a CMS solution further justified our choice, aligning perfectly with Qwik's features and enabling us to build a functional eCommerce application.

Tangible benefits

By adopting Qwik, we noticed significant improvements thanks to the following:

Resumability laid the groundwork for excellent performance, especially for complex applications.

Micro Frontends enhanced agility and modularity to effectively manage and customize user experiences on demand. For instance, we could cache different interface views, reducing frequent database queries to display them on the UI.

Additionally, we are optimizing our approach by utilizing static prerendered files whenever possible, and Cloudflare is serving static files for free. This strategic move reduces the amount of CPU calculations, lowers the cost of infrastructure, contributing to overall performance.

JavaScript streaming is another killer feature. It delivers web content partially for a specific user interaction, making applications instantly responsive, regardless of their size and complexity, even on slow networks.

Personalization capabilities provide means for delivering unparalleled user experiences, responding swiftly to market demand, fostering user loyalty, and boosting conversions rates.

The architecture of a B2C accelerator built with Qwik

The result

Qwik demonstrated its capability to boost web applications, improve SEO, and enhance user experiences, making it a valuable framework for building fully functional B2B/B2C web apps. The application now loads in 3 seconds on mobile devices with a slow network and milliseconds on desktops, delivering a seamless and lightning-fast user experience.

As a result, we delivered a white-label solution optimized for the current digital landscape of B2C commerce. As Amitech Group continues to evolve in the online food service industry, we eagerly explore new possibilities with Qwik and Builder.io.

Planning your optimal B2B/B2C solution? Get professional advice to refine your strategy

Last updated: February 19, 2024

About the authors

Maksim Huretski

Maksim is a seasoned full-stack developer with 3 years of development and 3 years of QA experience, demonstrating strong IT leadership skills over 4 years. With a specialization in front-end development, Maksim excels in JavaScript, TypeScript, React and frameworks like Next.js, Remix, Astro, and Spring. Maksim's expertise lies in seamlessly integrating web and mobile platforms, leveraging his skills in customization and performance optimization to deliver successful and high-quality eCommerce projects.

Valeryia Vishavataya

Valeryia is a proficient Technical Content Writer adept at crafting engaging and user-friendly copy for B2B audiences. With a proven track record, her expertise spans across diverse subjects, including software technology, cloud computing, and eCommerce development. During her career, Valeryia led commercial projects in partnership with industry leaders, such as Amazon Web Services and The Linux Foundation.