Nue is a toolset for making frontend development more enjoyable. It’s a complete overhaul to ecosystems like Vue, React, and Svelte as well as web development frameworks like Vite, Next.js, and Astro.
Nue uses progressive enhancement, separation of concerns, and semantic web design to deliver new levels of performance, better scalability, and massively improved development experience.
Nue is open-source software released under the MIT license. It’s an engineering attempt to bring a long-term solution to the prevailing frontend fatigue. It’s a work im progress with the following release schedule:
Create both websites and webapps
Nue is a web application builder with first-class support for both single-page applications (SPA) and multi-page applications (MPA):
- Consist of multiple HTML pages
- Blog, docs, marketing pages, etc.
- Rendered server-side
- Search engine optimized
In multi-page mode, the development experience is optimized for UX developers and content creators.
- Consist of a single HTML page
- Admin dashboards, onboarding flows, surveys…
- Rendered client-side
- Typically hidden from search engines
In single-page mode, the development experience is optimized for UX developers and JS/TS developers. The application is rendered with client-side Nue JS.
Nue embraces separation of concerns to make your code easier to read, understand, and scale for all the members of your web team. This helps you move significantly faster because your team members can work in isolation without blocking others or breaking their code.
UX developers use Nue JS to focus solely on the structure, layout, and interaction design without spending time on hooks, effects, or other complex framework internals.
Copywriters, marketers, and other non-technical people can use a human-friendly Nuemark syntax for content management. They focus purely on the content without the ability to break styling or create JS bugs.
🖐 No more spaghetti, please!
With separated concerns, you avoid the issues with “spaghetti code” where different programming languages and coding styles are mixed. This kind of mixed code is hard to understand, maintain, and scale. Here’s how Tailwind front page looks like under the hood:
It’s hard to see how it works and you’ll have challenges explaining it to fellow developers. It also makes your code less reusable when everything is hardcoded together and made specific to a single context.
Universal hot reloading
With content, styling, layout, and logic neatly separated Nue provides a powerful feature called “universal hot-reloading”:
Everything you do: editing content, adding new assets, changing the layout, modifying server-side components, editing reactive components, or making design changes, the change is instantly reflected on the browser.
Current frameworks, UI widgets, single-page applications, websites, and build tools are 10-100x bigger and more complex than they could be. Here is the source code of React compared to Nue:
👉 Less is More
Easier to maintain: When you have 10x less code, you need significantly fewer people to maintain and develop the project.
Easier to use: There are very few API methods and configuration variables. There is less to learn and you need less “boilerplate” code so you can move faster.
Fewer bugs: Nue codebase is small: there’s less surface for issues and the bugs are easier to locate.
Faster: Nue is faster due to simpler internal logic and there are fewer kilobytes to transfer.
The amount of code developers want to write has gotten slightly out of hand. Here’s what the world looks like today:
Frontend obesity crisis
The size of the project directory created with create-react-app is an unacceptable 321Mb 🤯 and create-vite-app is 31MB. A blank project created with Nue is under 1 MB.
Thanks to minimalism, Nue can shoot for the fastest possible page rendering performance you can technically achieve on the Internet. The secret is to respect the 14kb rule in TCP slow start algorithm. When your HTML request with all the content and styling to render the initial viewport is under 14kb, you have significantly faster page loads:
While frameworks like Astro have taken steps towards improved load performance they have a hard time fitting the content and CSS to the first HTTP packet because CSS-in-JS does not play well with progressive enhancement.
Nue will offer a
nue stats command (not yet available) to check that everything is good regarding TCP slow start and the page load performance.
In the above CSS1 stands for primary css and CSS2 is secondary css. The final row is the combined size of HTML and inlined primary CSS after being gzipped. Red rows require at least two TCP packets to render the first contentful paint.