A perfect web framework
In June 2023 I had my final frontend rage quit moment. The anger was so intense that I decided to change the direction of my career from a startup founder to a full-time OSS developer. I would devote all my time to fixing everything that is wrong with the current frontend ecosystem.
I soon created a project on GitHub and called it Nue. It would be to be the "web framework of my dreams". I wanted it to be "perfect" in the most literal sense of the word. In this article, I'll define the word perfect and explain the steps on how to make the dream become reality:
Hover/click items for more details
UX = improved user experience
DX = improved developer experience
The purpose of a website is to present content. To spread your thoughts or generate sales. For this obvious reason, your website should be optimized for content producers.
Ideally, content people should be able to create new content and update the information architecture without seeking assistance from designers or developers. Several authors could proceed in isolation and break nothing but their local language or grammar.
The content-first approach is the most important thing in a framework. It defines the overall system architecture and forms a solid ground for a semantic design system and universal template.
Note that single-page applications are no different: the content just comes from a database and not from a file. The design system can be shared.
World-class means the highest caliber design in the world. The top 1% of websites. The future Stripes, Amies, and Linears.
Everything is pixel-perfect down to the tiniest detail. From design tokens to motion design. The underlying design system makes sure that all areas of your site have the same, consistent look and feel. Be it minimalistic, heroic, or playful.
When a content-first design system is in place, content teams can ship great-looking content, without disturbing designers or developers.
motherfuckingwebsite.com is a developer meme from Barry Smith. This plaintext website carries an important message: get rid of the clutter and focus on content and performance.
The lesser-known fact is that you can build a design system that offers the performance levels of MF, and the design standards of Stripe and Linear.
A perfect web framework gives you exactly that: the fastest possible website with a pixel-perfect design. A Moterf**king Stripe if you will.
Consistent MPA+SPA experience
All areas of your website should offer a consistently great user experience. This includes your content-heavy areas like the documentation and blog, the customer-facing app, and your internal admin dashboard.
The same "motherf**king" performance levels and the same pixel-perfect look and feel. And with a seamless "turbo" linking between your multi-page- and single-page apps.
Current frameworks lack a hybrid multi-page/single-page application development model. You end up mixing services and domain names. Say Astro for marketing pages, Nuxt for documentation, Medium for blog, and Vite for the SAAS app. It's impossible to offer a uniform design, performance, and user experience across the board.
Instant development loop
A perfect framework should show a live preview of your change after you save a file. Be it content, styling, layout, server component, or client-side reactive component — you should see the change immediately. And if you make a mistake, the framework will tell you exactly what went wrong.
This kind of universal hot-reloading offers a true WYSIWYG experience for content producers, designers, and developers. Instant development loop gives a significant boost to your daily productivity.
Easy to scale
An ideal framework lets people with different backgrounds take part in scaling the system. Content teams scale the content, UX engineers focus on design and user experience, and JS developers work on the business model, networking, and infrastructure.
They use the same system for content-focused apps and single-page apps and enjoy the productivity boost from universal hot-reloading. They share components and design elements so they can move faster and keep things consistent.
Sub-second deploy times
When you push out a new blog entry or a product release, something always goes wrong: typos, wording issues, missing links, broken styling on mobile ... you name it. In this situation, it's critical to have a fast shipping engine in place. You want to fix your errors before the next bunch of visitors arrives.
This sort of hot deployment engine is an extension to a full-blown git-based deployment system with support for versioned pushes, rollbacks, and staging environments.
Shipping with Vercel or Netlify is slow. Deployment always triggers a full rebuild: all the pages, styles, scripts, and images are re-pushed. Production pushes take several minutes, sometimes more than an hour. Even if it was just a small typo.
The universal template is a central starting point for hybrid multi-page and single-page applications. It lets you quickly create a blog, startup, e-commerce site, or anything in between. First, you choose the desired apps, and then you link them to a chosen look and feel.
For example, you might choose a rich front page, documentation area, blogging area, onboarding flow, admin dashboard, and login page. Then you choose the design: minimalistic, modern, playful, or heroic. Or perhaps abstract, brutal, pixelated, or retro.
And of course, your site is automatically content-first, pixel-perfect, and motherf**king fast.
Tailwind, Bootstrap, or WordPress templates have no concept of apps and the tightly coupled design has limited customization possibilities. You only get what's there and implement the missing pieces from scratch.
Built-in cloud services
A perfect SAAS template comes with integrated customer relationship management, billing, and charging — along with unified analytics for traffic, people, and revenue.
This pack of services is connected to a desired cloud storage and the generated single-page application becomes part of your project directory. It automatically inherits your look and feel and extreme performance characteristics.
The best part: you can use this generic single-page app as a template for your customer-facing app.
We're looking at the fastest way to start a new, fully functional business.
Vercel, Heroku, or Render don't have integrated services. You need to build them yourself or fall back to external services like HubSpot or Google Analytics. It's impossible to get a consistent UX/DX across the board.
The basis for the content-first development model
Server-side templating engine and a lightweight client-side UI library for building reactive components.
Sep 2023 Nuekit
The website and web app generator with a content-first development model and universal hot-reloading.
Dec 2023 Nuemark
An intuitive Markdown dialect for rich, interactive content.
Jan 2024 Nue Color
Syntax highlighting and Nuemark code blocks for all common languages.
Generic design system for websites and single-page applications
Universal site layout
Generic, classless layout system for multi-page applications. Think CSS Zen Garden 2.0
Mar 2024 CSS design system
Scaleable CSS architecture for the content-first development model
Mar 2024 Motion design
Design system extension for CSS transitions and animations
Q2 2024 Single-page apps
Generic layout system for single-page applications
Universal template for hybrid multi/single-page applications
Generic template with universal site layout and content-first development model
April 2024 Startup template
Generic startup template with Minimalistic, Functional, and Heroic themes
Q2 2024 E-commerce template
Generic startup template with product management, charging, and billing
Q3 2024 Specialized themes
Extend the universal template with more specialized themes like Luxurious, Memphis, Hippie, Typographic, and Retro
Specialized cloud for content-first development
Custom domains and global delivery for multi- and single-page apps
Q3 2024 Hot deployment
10-100x faster deployments
Q3 2024 Cold deployment
Git-based versioned shipping, rollbacks, and staging environments
Pluggable backend for the universal template
Registration, authentication, and CRM
Q1 2025 Analytics
Traffic, engagement, conversions, and web vitals
Q1 2025 E-commerce
Products, customers, charges, and billing