Performance vs Features / Qwik API vs SDK

Technical Questions
1

What are you trying to accomplish
I’m trying to decide whether to use the Qwik API or SDK within a Qwik app

Code stack you are integrating Builder with
*e.g. Qwik App

My Google page speed score is 96 if I use the Qwik API and about 85 if I use the HTML API, but it drops to 72 if I use the Qwik SDK(for exactly the same page in Builder).

(FYI, If the site is in edit mode, I switch to the SDK so I can edit it)

When I try to use binding within Builder, the SDK works as expected. However, if I use the Qwik API, the bindings are all undefined.

Question 1:
Are bindings in the editor supported by the Qwik API? Is there a reference somewhere that explains e-x-a-c-t-l-y what it supports and doesn’t?

Question 2:
Yes, Builder.io is flexible, and Qwik is quick. However, when used together, it’s hard to figure out the performance impacts of using the inbuilt editor features apart from constantly publishing and testing.

For example, if I drag a symbol onto the page, I seem to be able to tank the Pagespeed score by -20.

How do we use the flexibility of a drag-and-drop builder while intuitively knowing the performance impacts of doing so?

Are there any specific guidelines (not general web ones) regarding the performance of a page that references decisions (i.e.Symbol or no Symbol) you make in the builder editor?

i.e. if you drag a symbol onto the page, the impact will be xx.

2

Hello @latchdigital,

Question 1: Are bindings in the editor supported by the Qwik API?

Bindings in the editor are not supported by the Qwik API. This API has a limited set of features compared to the Qwik SDK, which does support bindings and other advanced features. The Qwik API is best suited for performance-optimized content delivery but lacks full compatibility with Builder’s interactive features.

You can refer to the Qwik API documentation for a detailed outline of its support and limitations. For applications needing the full range of bindings and editing capabilities, it is recommended to use the Qwik SDK instead .

Question 2: Performance Guidelines

Using Builder with Qwik can have performance implications that vary based on the type of components and features you use in the visual editor. Here are some insights and guidelines:

  1. Symbols and Components:

    • Symbols: Introducing symbols can affect performance as they add reusable content blocks that might carry their own dependencies and styles. Limiting the complexity and size of symbols can help mitigate performance drops.
    • Custom Components: Registering and using custom components judiciously can help maintain performance. Ensure that the components are optimized for minimal runtime processing.

  2. Optimization Techniques:

    • Lazy Loading: Use Qwik’s lazy loading capabilities to delay loading non-critical JavaScript, which can enhance the user experience by reducing initial load times.
    • Image Optimization: Utilize Qwik’s image optimization API to ensure images are loaded efficiently, reducing resource load and rendering times .

  3. Performance Monitoring:

    • Integrate performance monitoring tools to continuously assess the impact of newly added content and components. Qwik provides tools for developers to visualize and address performance issues continuously .

  4. Component Performance:

    • Avoid deeply nested components where possible. Simplify the component hierarchy to ensure fewer re-renders and lighter initial payloads.
    • Utilize server-side rendering (SSR) and caching strategies to optimize the content delivery of frequently accessed pages.

These strategies can help balance the flexibility of Builder’s drag-and-drop features with the need for high-performance web pages.

Reference:

  1. Optimizing Web Performance with Builder.io - Builder.io
  2. Introduction to Symbols - Builder.io
  3. Managing Content Size - Builder.io
  4. Builder.io Qwik API - Builder.io
3

Great, that makes sense; thank you!

Is there a more detailed list of the exact features it supports and doesn’t support? That page doesn’t go into exact detail and list all the features you have built into the editor.

From my testing, It DOES seem to support some advanced features like “API Data” and “Repeat For Each” and binding within the list.

However, if you try to do the same thing in the "Edit Content JS + CSS " code editor it doesn’t work.

Rather than me fumbling my way through the editor testing things would you be able to provide a list?

I’d loveto use this API (for a very basic site), it is amazingly fast. :smiling_face:

4

Hello @latchdigital,

For supported features by Qwik SDK, you can refer to the below link builder/packages/sdks at main · BuilderIO/builder · GitHub

The Qwik API offers a performance-optimized alternative suitable for serving static HTML content without the need for JavaScript to run. However, its feature set is considerably limited when compared to the Qwik SDK. Here is a detailed list of supported and unsupported features in the Qwik API:

Supported Features

  1. Basic Content Building: Supports essential content building blocks like sections, boxes, images, text, links, and columns.
  2. Essential Styling: Basic styles are supported.
  3. Targeting and Scheduling: You can target specific audiences and schedule content.

Unsupported (or Limited) Features

  1. Custom Components: While you can register and use custom components in Qwik, this is more efficiently managed through the Qwik SDK rather than the Qwik API.
  2. Symbols: Not all features related to symbols, such as dynamically updating data (like product data), are supported.
  3. Advanced Blocks: Custom liquid blocks, tabs, carousels, and accordion blocks are not supported.
  4. A/B Testing and Analytics: Features like A/B testing and analytics are not available.
  5. Dynamic Data: The automatic updating of dynamic data, like symbols, is not supported.
  6. Animations: Animations are not supported.

General Features Detailed in Qwik

  • Instant loading time with JavaScript streaming: Qwik delivers instant applications by keeping initial JavaScript costs constant.
  • Speculative Code Fetching: Ensures the required code is fetched as needed.
  • Lazy Execution: Delays the execution of code in the browser as long as possible.

For applications requiring full support for bindings and interactive features, using the Qwik SDK or the Builder SDK with Qwik-specific enhancements is advisable. The Qwik SDK provides all the advanced functionalities not available in the Qwik API.

I hope this helps!

Thanks,