Nue: The UX Framework for the Web

Hello, everyone. My name is Tero Pihlainen, and I'm a software engineer from Helsinki, Finland. I'm mostly known for a video player called Flowplayer and then a jQuery tools library. These were back in the days.

More modern ones are Riot.js, a JavaScript library, which is kind of a bigger... This new framework I'm building at the moment is by far the most ambitious project I'm being into. So I'm happy to introduce this to everyone out there.

So let's start. Here's the tagline. It's the UX framework for the web. For this, I will introduce what that means. It's basically three things. You will have better tooling, better code, basis, and the resulting websites are better. By better, I mean compared to the established frameworks like Next.js or Beat or Astro.

So let's start with the tooling. For this, the first thing you will realize when using Nuke is that it's very fast. For this, here we have a comparison. On the left, you see the Next.js blogging starter framework. And on the right side, you see the... For this, it's a similar thing, but from Nuke. The feature set is similar, and overall, they can be compared like basically apples to apples. And when you build it, Next.js takes like 10 seconds. But Nuke is a whole different game. It's like 100 times faster. Everything basically is faster. The hot reloading times when you save a file and you see the reaction, how React responds to you. For this, it's so much faster. And for this, let me just demonstrate. Here is this blog building with Next.js. For this...

And it... For this... It's doing things. For this... For this... And took roughly... For this... Nine seconds. And with Nuke, press Enter and it's ready. Here it took 48 milliseconds. So it takes, every time you click it, or at least on my machine, it's under 100 milliseconds.

For this... The second thing with Nuke is that it's simpler. For this... So many less things to think about. For this... API methods and overall complexity is a whole different game.

For this... Here I will show the difference. Again, comparing how the blog is built in Next.js versus Nuke. For this... For this... The Next.js blog... For this, I installed it with NPM. It downloads these 227 packages, altogether 300 plus megabytes. But with Nuke, it's all like 10 times smaller of what it is. For this... A whole different game. And this is not just the size of things. It's just the overall complexity and flexibility of the system, and the size of the stack traces when debugging things, and how many surprises you get, and the errors you get, and that sort of thing.

So it's a big thing to be simple. For this... For this... The third thing about tooling... For this, it's the developer experience. And when you consider about the web frameworks, there is this thing about taking a file, saving it, and seeing the response. For this, with Nuke, it's again kind of a different game. You not only get the server components or client components, but every file you save, you will see the browser react to it instantly. For this, it's important to have content over here, and of course, styling. For this, there's data. For this, if you go and save another page, the browser will update. You can have even multiple browsers, multiple browser vendors, and they will all react to things. CSS errors. It's all built to this idea of hot reloading, which is a huge part of the developer experience.

Let me show you. For this, a video. For this, and on the left side, you will see a block. For this, this new block, a starter block. And on the right side, you see different kind of file types. And when editing them, you will see how the browser hot reloads while I'm developing the site. For this, I'm kind of editing this. For this, a YAML data, which represents the information objects. And you will see this new header items appearing here when editing. For this, to this front page. For this, I've added some area. For this, when it's saved, the browser updates. For this, it's not the reloading of the page. It's a DOM diffing operation. There's minor network traffic going on with the server and clients, so it really should be instant. And kind of a different experience you have with this big JavaScript framework.

For this, another example is I just edit another file, and the browser reacts to it. Same thing here. Here, I actually edited the metadata, the actual content area. For this, metadata is here on the front matter. Here, I'm familiar with the markdown terminology.

Finally, I'm editing a CSS file and particularly a Mac switch property in the body. So anything you say, you will see here. So yeah, that's the idea. For this, for this, for this, for this. That's why new has better tooling.

The next thing I'm going to focus on here is better code, meaning that, again, an example. Here is a Tailwind front page compared to new front page, and how it is basically coded. For this, the difference here is that for this, for this, for this, yes, the Tailwind front page is built with Next.js. And the whole idea there is that when there's a complex page, you will start with JavaScript and import various kind of stuff. For this, do the basic React function and return the stuff here. You have the metadata here, and then you have the HTML layout and the styling is embedded with these Tailwind-specific expressions and utility classes. So it's really a JavaScript project.

And with new, for this, it all comes down to content. Every page you do, and no matter how complex it is, it's all about the content. So one of the major ideas in new is that it's content-first development environment, and everything is like this. So it's kind of a different thing. Even non-technical people can develop pages and not just simple Pog entries, but they're like front pages and old landing pages there. For this, for this, another huge thing between these two frameworks, for this, is the kind of code you do. Here we compare the actual code behind this button, and compare it with the button in new front page.

For this, the slogan here is that the skills are timeless, because again, you are moving from this JavaScript mesh to something modern and standard space. Let's see the difference. So here again, it's the source code of this button on the Tailwind front page. For this, you start with importing these things. I'm not very familiar with Radix UI, React Slots, Class Variance on Authority. For this, some stuff from React, CN from Utils. For this, this Tailwind Utility Classes and Expressions. Also you have different names for different contexts for the button, and then these React specific things. So it's a very kind of a mainstream way of modern JavaScript development. For this, it's all about going to modern CSS. It does the same thing. It's standard. It's like a book. For this, you have comments. You don't have comments here, but you can do comments, unlike you cannot do between these utility classes, and the states, and there's this different kind of... But anyway, if you are in the CSS, this is what you do. And most UX developers definitely do this. And I'm going to look this with the left eye. For this, and for this, and for this, and then for this... One kind of a major thing between how you do websites with Nix.js versus Gnu is that the whole ideology behind doing things. For this engineering, it's JavaScript engineering and Gnu is design engineering, also called as UX development. Basically, it means that the code base in Nix.js is all about JavaScript or TypeScript, but in Gnu, it goes into CSS. For this, time goes into coding and debugging here in Nix.js, but in Gnu, you kind of think in terms of design and user experience. Also, the amount of code is a decent ballpark. In Nix.js, it tends to grow as the application grows, but in Gnu, it stops while you have done the design systems, and then you can just scale the content. It's more minimalistic, it's simpler, it's more standard space-based when you talk about design engineering versus JavaScript engineering. Here, we see the difference. For this actual source code from GitHub for the Nix.js block starter template, you can see it's all about this TypeScript files. For this, I mixed with React, the JSX or CSS templating system. Yeah, there's a lot of these files, and they all look like this.

But in Gnu, for this, the bulk of the code base is CSS. For this, I'm establishing the design system. And yeah, for this, you have less code, and it's all standard space CSS. And you can use the modern CSS because Gnu is backed with the module called Lightning CSS, so you can use nesting, and all sorts of modern CSS stuff in here. But yeah, very different mindsets when developing websites.

Finally, after looking at the tooling and code, we see the actual results when building with Gnu. For this first thing, you will see that Gnu websites are very, very small, which means very fast. And here we compare the Nix.js documentation versus Gnu documentation. I took this as an example because these are very similar, very same functionalities. You can just go there and see it yourself. They are very similar.

Let's just dive into under the hood and see what's behind these websites. For this, the Nix.js is first of all 645 kilobytes of HTML, CSS, and JS. I have featured these important assets and ignoring the content, and images, and stuff like that. So, yeah, it's mostly JavaScript and very large ones, and ending up to 52 requests of HTML, CSS, and JS. For this, a pretty large one. But Gnu, again, very similar site, very different payload. The payload is only 27 kilobytes, biggest asset being the document. For this, the biggest JavaScript file being three kilobytes. For this, there are view transitions, all sorts of modern stuff included. And yeah, the download amounts and the time figures are pretty decent.

And yeah, the download amounts and the time figures are pretty decent. For this, the second thing in websites is that Gnu has built-in so-called turbo-linking, basically that the page switches are instant, and they are coupled with view transition motion effects. For this, and overall with modern CSS, you can implement motion and this user experience enhancements in a pretty easy way.

Let's see the difference. For this, the new block starter templates, right off the bat, and you will see how smooth it is, how fast it is. For this, and you don't need to do much to get into this experience level. There are some reactive islands in there. For this, yeah, pretty cool stuff, I'd say.

And as a final slide of what Gnu is and why is it good, this is a little bit of upcoming stuff. For this, and because Gnu requires that you are quite experienced with CSS, but with templates, all that stuff is kind of taken care of. And you will get this very professionally designed and high-level user experience stuff with motion design. For this, like all done, you just take care of the content. Let's see how the upcoming templates would look like. There are quite a few things to realize here. First of all, for this, you see kind of titles doing different kind of motion things when you click on this hero image. For this, there's a big transition and taking care of the image transition as well like that. And you should see the title. Also, all sorts of things like lazy loaded images with... For this, detecting when they are on the viewport and doing various animations. Also, in this page, the brand color is very easily changed. For this, Nike, which is the customer of this theoretical website. Also, you saw this pretty cool animation there. When you scroll down, there's a slight transition on the hero image. For this, even zooming and selecting gives you the brand coloring buttons, blah, blah, blah. It's kind of a very highly ranked design. For this, system-backed thing, and yeah. Those kind of things are our second on the roadmap. Right now, we are here. You can go to the new website, download and try the things and you will see the starter blogging template and you can do very... It's pretty far.

Onboarding is cool and the development experience is cool. Basically what I saw you here are all there. There's some documentation clarification that needs to be done. Then the templates thing, basically what I saw you glimpse with the Nike thing. For this, I made single-page applications.

Right now, I'm showing you how to do this content-heavy websites, but there are similar kind of problems to be fixed on how doing single-page apps. They can be much simpler, faster and smaller. Also, like the websites focusing on the user experience. The cloud, there's much to improve, especially the performance things. We can do 100x improvements in there as well.

So, yeah. That's it. Thank you for listening. I'm pretty excited myself. This is what I think is pretty amazing in the website development scene. Thank you.