Component basics

The smallest Drayman component code looks like this:

export const component: DraymanComponent = async () => {  return () => {    return <h1>Hello, world!</h1>;  };};

It displays heading saying "Hello, world!":

http://localhost:3033

Hello, world!

In comparison to classic front-end frameworks, Drayman acts differently. Component data and methods are stored server-side. A user browser receives only JSON representation of what should be shown on a screen. This way a server-side code can be securely combined with UI code inside a single component script.

Creating a component#

Every component should be placed under src/components directory (this behavior can be changed in configuration). In fact, if you have already installed Drayman using Getting started guide, a "Hello, world!" component inside home.tsx file is already placed there:

my-app└── src   └── components      └── home.tsx

caution

You must create separate file for each component.

Let's create a simple component which increases counter on button click. Add a new file to src/components directory called counter.tsx. Add this code:

src/components/counter.tsx

export const component: DraymanComponent = async ({ forceUpdate }) => {  let count = 0;
  return () => {    return (      <>        <h3>{count}</h3>        <button          onclick={async () => {            count++;            await forceUpdate();          }}        >          +1        </button>      </>    );  };};

Now we need to show this component on a page. There are two ways of how to do it and they are described below.

Using component in other component#

As well as any HTML element, we can use created component from other components. Let's modify default home.tsx component:

src/components/home.tsx

export const component: DraymanComponent = async () => {  return () => {    return (      <>        <h1>Hello, world!</h1>        <counter />      </>    );  };};

We have added <counter /> and now in addition to "Hello, world!" text, home.tsx displays our newly created counter component.

tip

Components can also have properties. You can read about props here.

Using component as web component#

With Drayman, you can use created components anywhere on page. Any framework which allows web component usage, also can render Drayman component. This allows you to use server-side components in any environment.

If you have created a project using Getting started guide, starting point of application is located inside public/index.html:

public/index.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>Drayman Framework</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <script src="/drayman-framework-client.js"></script>  </head>
  <body>    <drayman-element component="home"></drayman-element>
    <script>      initializeDraymanFramework();    </script>  </body></html>

As you can see:

A drayman-framework-client.js script is loaded inside header.
It is initialized inside body using initializeDraymanFramework() function.
Initial component home.tsx is loaded using special web component called drayman-element.

You can pass any component name (without extension) from src/components directory as an attribute. Let's do it for our counter.tsx component:

public/index.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>Drayman Framework</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <script src="/drayman-framework-client.js"></script>  </head>
  <body>    <drayman-element component="home"></drayman-element>    <drayman-element component="counter"></drayman-element>
    <script>      initializeDraymanFramework();    </script>  </body></html>

Now in addtion to "Hello, world!" component, a counter component is rendered on page.