Building the Future of Web Development: Overcoming Performance Challenges

[tlgimenes]

Building the Future of Web Development: Overcoming Performance Challenges

Introduction

Our web development platform, powered by Deno and JSX, empowers users to create stunning e-commerce and other websites. Despite our success, we face two significant performance challenges:

1. Sluggish Third-Party APIs: External APIs, especially in the e-commerce domain, are painfully slow, with response times stretching up to 5 seconds.
2. Page Size Woes: Some pages become unwieldy, reaching a hefty 10Mb of HTML, posing challenges for loading times and user experience.

Initial Solutions and Realizations

Initially, we explored solutions like stale caching for API responses and server components to minimize asset downloads. However, a year into these endeavors, we've come to realize two crucial points:

1. The Personalization Shift: The future demands personalized content, rendering traditional caching ineffective.
2. Demand for Interactivity: Increasing user expectations for interactive pages make server components less practical.

Envisioning a Future Worth Building

Our vision for the future involves ensuring that:

1. p99 Response Time: Every page delivered by our infrastructure achieves a remarkable 100ms response time.
2. Page Speed Excellence: All pages consistently score 90+ on Google's Page Speed Insights.

But why do we currently face these challenges?

Current Challenges and Framework Comparison

Our current framework, Fresh, utilizes Preact in an Island architecture, minimizing JS delivery but forcing us to fetch all data upfront. Testing other frameworks like React 18 on Next.js, React 18 on ultrajs.dev, Solid.js, and Qwik revealed similar issues.

• React 18: Stream rendering is excellent, but the new RSC protocol for hydrating causes significant network payload sizes.
• Solid.js: Improves runtime but falls short on loading, crucial for e-commerce.
• Qwik: While cool, its lazy loading approach could pose production nightmares.

The Ideal Framework

Our ideal framework combines the best features:

1. Stream Rendering like React: Keeps response times low.
2. Network Payload Optimization: Avoids enormous payload sizes.
3. Simple Bundling and Dev Tools: Minimizes complexity.
4. HTML and CSS Centric Approach: Prioritizes foundational technologies.

The Promising Stack

Our exploration led us to a promising stack:

1. Deno for Backend: Enables running TypeScript files directly.
2. React 18 for Stream Rendering: Balances performance and interactivity.
3. htmx for Frontend: A route-based approach aligning well with our goals.
4. deco.cx for Remote Invoking and Routing: Resolves compatibility issues between htmx and JSX components.

Additionally, Tailwind CSS simplifies CSS generation, making it a one-stop solution.

With this, I made this version of our Shopify store. It's still very broken however we can take a look of what's possible. Some nice features are lazy loading of slow 3p APIs, add to cart, sliders etc, all without any additional JavaScript!

Seeking Your Input

As we navigate this journey, we value your feedback. What are your thoughts on the proposed framework? Do you have experiences or suggestions that could shape our path forward?

Let's collectively shape the future of web development.

[mcandeia]

How about migrating to: https://github.com/deco-cx/community

[tlgimenes]

Moved to deco-cx/community#5