Designed to be pre-rendered on the server.
Hydrates only the parts you really need.
Generates bundles as small as svelte.
Server-side rendering on node and deno.
Nano JSX does not depend on any external libraries.
Nano JSX is designed to build ultra fast MPAs and SPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno.
Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You
can even call
Nano.render() inside a Component, which then renders some JSX code
to manage another part of your app.
You have full control over what the client and what the server renders. All Components are designed to work
For example, the api of the built-in Router Component works the same way Client-Side and Server-Side.
In the past, I did a lot of websites/apps using Isomorphic React (Pre-Rendering on the Server and Hydrating on the client). Once the website did load all scripts, it was very fast (not so much on mobile though). But the scripts were always way too big.
Instead of navigating to the next page with a client-side router (which is also possible), I prefetch the pages that the user will most likely navigate to next.
For a huge app, I still use client-side React and Redux. But for everything else, like website, blog, online shop small to medium sized apps and even some mobile apps, I now use Nano JSX.
Some of you might remember the old days of React when Class Components managed all states and functional Components did only render JSX Elements. That's the approach I like and use. I find it much more clear to read and write.
The goal is to have a very small and very stable jsx library that can easily be included into any website. Just kind of like jQuery was at the time.
The library by it self is already small and fast, but in combination with its awesome capabilities, it becomes even faster.
It's designed to be pre-rendered on the server and to then be partially hydrated on the client. The client will therefore have to download and render much less code.
Not every component needs to be hydrated immediately. Lazy Hydration reduces First Input Delay (FID).
Although, the simple example below is 0.2kB bigger using nano JSX, once adding more features to your App like Event Handling, Component Lifecycle, Store or SVG support, the nano JSX application will generate a slightly smaller bundle size compared to Svelte.
The same app with preact is 4.7kB, 8.6kB with inferno and 41.7kB with react.
You can define your components written with Nano JSX via `Nano.defineAsCustomElements` like svelte compiler. Nano JSX is ultra light UI library so web components made with Nano JSX is also light. You can make a light web components with the high developer experience, declarative UI and state management thanks to Nano JSX.
Nano JSX provides some useful Built-In Component, like Link, Img, Visible and Helmet and hopefully many many more in the future. All Built-In Components are as lightweight as possible and especially designed for Nano JSX.
Visit Components to learn more.
Modify here or on codepen.io.