Getting started

We'll create an example that is fully available and installable through the installation process. However, it's recommended that you begin without relying on existing examples, as this tutorial will guide you through building the example step by step.

Let us start with a minor example that we will improve upon through the guide.

Begin by updating the router file located at src/routes/app.js as follows:

router.get('/', function(request, container, helper, builder) {
	return `
	<article class="relative card-1 border-bottom ingress">
		<div class="wrapper md">
		    <h1 class="headline-1">Hello World</h1>
		    <p>Lorem ipsum dolor</p>
	    	</div>
	</article>`;
});

router.get('/about', function(request, container, helper, builder) {
	return `
	<article class="relative card-1 border-bottom ingress">
		<div class="wrapper md">
		    <h1 class="headline-1">About us</h1>
		    <p>Lorem ipsum dolor</p>
	    	</div>
	</article>`;
});

Visit your browser to see the results.

There's nothing wrong with managing code this way. However, as the app grows larger, this approach can become challenging, particularly when the router file starts to become lengthy. This is where template views and controllers come in handy. They improve the manageability and modularity of your app, making it easier to organize and maintain.

Creating Your View

Let's begin by exploring Stratox's template system for creating dynamic views and components. Later on, we'll discuss controllers.

Let's proceed by creating a new template view file named src/templates/views/text.js.

export function text(data, container, helper, builder) {
	return `
	<article class="relative card-1 border-bottom ingress">
		<div class="wrapper md">
		    <h1 class="headline-1">${data.headline}</h1>
		    <p>${data.content}</p>
		</div>
	</article>
	`;
}

Modifying the Router Example

To create dynamic start and about pages, you only need to update the router file src/routes/app.js as shown below:

First, add an import statement at the top of the router file to import the text view:

import { text } from "@/templates/views/text";

Next, integrate the views into each router callable:

router.get('/', function(request, container, helper, builder) {
    this.view(text, {
        headline: "Hello world!",
        content: "Lorem ipsum dolor",
    });
    return this;
});

router.get('/about', function(request, container, helper, builder) {
    this.view(text, {
        headline: "About us",
        content: "Lorem ipsum dolor",
    });
    return this;
});

Note: You can reuse the same view multiple times within the same method, as explained in more detail in the views section.

Visit your browser to see the results.

Response Arguments

If you want to know more about the response arguments, then visit the Response Arguments page.

Template Views

Here are some important options to consider when loading and initializing views:

• Static Views: These are views that are bundled and loaded synchronously with the application. They are commonly used for static content that does not change frequently. Read more

• Asynchronous Views: Asynchronous views are loaded dynamically when needed, which can help improve performance by reducing initial load times. They are useful for content that may change frequently or is not required immediately upon application startup. Read more