It's been a little while, since the last update, so I want to share how components work in Davaux.This is an example page, which is just plug and play in the Davaux server. You don't have to add any routes, it automatically detects pages and routes accordingly. This is just a typical GET request with server side component composition (2 different types of components) rendered within a single JSML page component.

import { createProvider, renderPage } from "@davaux/core";
import { Container } from "@davaux/ui";
import { Btn } from "@davaux/ui/oml";

export async function GET({ query: { name }}) {
  return renderPage(
    ExamplePage,
    { name },
    {
      title: "Test Page Example",
    },
  );
}

const ExamplePage = ({ name }) => {
  const provider = createProvider();

  provider.use({ Btn, Container });

  return provider.html`
    <Container fluid>
      <h1>Hello ${name}</h1>
      <Btn size="sm" variant="primary">Click Me</Btn>
    </Container>
  `;
};

@davaux/ui is one of the newer packages I've worked on and it's been refactored quite a bit, so disregard the import paths, those are subject to change. First of all, I only mixed the component types here for testing and this is an actual working test case, not just theoretical code. There are 2 types of components in Davaux core: OML (Object Markup Language) and JSML (JavaScript Markup Language). These are my terms, so if you've heard of those before, this is something different. In this example Container is JSML, which is nearly identical to JSX, except it runs purely server side and doesn't require any kind of compiler or bundling. Also in this example, Btn is OML, which other than the different import paths, you can't see a difference here, they use the same provider and are even used within the same component (ExamplePage is also JSML). The difference, though, is Btn is simply an object, which is transformed into an HTML button tag, but used exactly like a JSX (or JSML) tag in practice.

OML, like JSML, builds onto what a lot of JS frameworks do behind the scenes. The difference is how easily OML components can be built and extended. They are just simple wrappers that compose HTML in the end, which is what a lot of React components are anyway. The difference is it only has to be an object, which means you can do some interesting things concerning how that object is derived. It could be a class that is extended and then tailored to many different uses. It could just be a block of HTML and CSS that you use in a lot of places, like the Container component I decided to demonstrate as JSML instead. There are no real rules; you could have a JSML Grid component that uses OML Row and Column components. They all could be OML, which seems to be the recurring answer, but it's just based on how you need to declare the component. OML is basically static (with optionally dynamic attributes), while JSML is basically dynamic and supports more logic.

This is all server side rendered, nothing is bundled or compiled, and once this code is ran it will become pure HTML. I know what you may be thinking, "OK, but SSR is slow!" Well, first of all, it's not always slow. This site uses SSR and it's fairly quick to be on very limited hardware. Also, I've tested comparable page compositions (approximately equal amounts of rendered HTML markup) between Remix (what I use here) and Davaux, running locally on the same computer. Remix is fast...Davaux is ridiculously fast, like double digit times faster, even with browser caching turned off.

Now that SSR discussion is out of the way, Davaux has had quite a few architectural changes lately. Mostly in regard to the markup, but I've also been working on making it modular and allowing it to be used as needed. You should be able to use the Davaux server without using the templating (JSML and OML - included in Davaux core) for example. As far as Davaux server, you can definitely use it as just an API server, which the file based routing is really nice in that regard. You should also be able to use the templating on something other than Davaux server. Davaux UI can definitely be used without anything else from Davaux, as just a CSS framework. These are all self contained packages. Even though this article is to preview my markup, you don't actually have to use it. You can also pick a different CSS framework or just use your own CSS.

So that's one of the secrets of Davaux: its templating is JSX-like, without any need to compile anything. My next step is to build the documentation site and release an alpha version. As long as I don't have to refactor too much more, the next post should be announcing those :)