Quick Start (MVC)

This quick start guide will walk you through the best practices for working with the Stratox Framework. We will show you how to create views, controllers, set up routes, and finally connect to a model, to get you started building a dynamic application using Stratox.

View

First, create a new JavaScript file for your view, for example: src/views/ShoppingList.js.

/**
 * This is the main view
 * It will also render the shopping list block component later
 */
export default function ShoppingList({ props }) {
  return `
    <article class="card-1 border-bottom">
      <header class="content-header">
        <h1 class="headline-1 mt-0">${props.title}</h1>
      </header>
    </article>
  `;
}

Now that the layout has been created, we just need to display it.

Controller

Next, we need to add a controller to manage the view. Create a new file named src/controllers/ShoppingListController.js.

// Start by importing our view
import ShoppingList from "@/templates/views/ShoppingList";

/**
 * This is a quick start example on how to work with Stratox and MVC
 */
export default class ShoppingListController {
  /**
   * Index page
   */
  index({ http, services, helper, context }) {
    // Render the ShoppingList view with the title "My shopping list"
    this.layout(ShoppingList, { title: 'My shopping list' });

    return this;
  }

  /**
   * Show single page
   */
  show() {
    // You can try to add a single product page here
    // linked from API model at the end of the guide
    return this;
  }
}

Setting Up Routing

To specify where the page should be displayed, use the Stratox router. Open the file src/routes/app.js and modify it like below. I also slightly modified the start page example so that it does not take to much place.

import { Router } from '@stratox/pilot';
import HttpStatus from '@/controllers/HttpStatus';
// 1. Import the controller:
import ShoppingListController from '@/controllers/ShoppingListController';

const router = new Router();

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

// 2. Connect the controller and page to a GET route
router.get('/list', [ShoppingListController, "index"]);

// Handle 404 and 405 HTTP status errors
router.get('[STATUS_ERROR]', [HttpStatus, "statusError"]);

export default router;

Now, visit your development URL with the path /#list, for example: http://localhost:5173/#list. Your shopping list will be displayed.

Extending the View with a Component Block

Let's create a dynamic shopping list by modifying the layout and adding a component block called RenderShoppingList at the top of the view in src/views/ShoppingList.js. Also, make sure to render the block inside the main view so that it is displayed.

/**
 * This is the dynamic list block
 */
function RenderShoppingList({ props, view, context }) {
  // This will set default data for the props if it's parameter "is" missing
  context.setDefault({
    products: []
  });

  // Bind function to add a new item to the list
  const handleAddList = view.bind((props) => {
    const title = `List ${props.products.length + 1}`;
    props.products.push({ title: title });
  });

  // Render the HTML list
  return `
    <section class="product-list">
      <ul class="listing">
        ${props.products.map((product) => `
          <li class="post-item">${product.title}</li>
        `).join("")}
      </ul>
      <button class="button" onclick="${handleAddList}">Add New Product</button>
    </section>
  `;
}

/**
 * This is the main view
 * It will also render the shopping list block component
 */
export default function ShoppingList({ props, view }) {
  // Render the main HTML with the shopping list
  return `
    <article class="card-1 border-bottom">
      <header class="content-header">
        <h1 class="headline-1 mt-0">${props.title}</h1>
      </header>
      <section>
        <h2 class="headline-3 mt-0 pt-6">My list</h2>
        ${view.block(RenderShoppingList)}
      </section>
    </article>
  `;
}

Now, visit your development URL with the path /#list (e.g., http://localhost:5173/#list), and you will see that a click event has been added to create a list. You will use the same bind function for every event (e.g., onclick, onchange, oninput) to automatically trigger changes. If needed, you can disable the automatic updates by passing false as the second argument to the bind function.

Model Example

Let us fetches some data from an API model to display additional information. Let's add a quick example to demonstrate how easy it is to fetch data and use it in our RenderShoppingList block component.

Open the file src/views/ShoppingList.js and add a ajax fetch request to a dummy API (se the 3 points in example below).

// 1. Import the Stratox fetch library
import { StratoxFetch } from '@stratox/core';

/**
 * This is the dynamic list block
 */
function RenderShoppingList({ props, view, context }) {
  // 2. Return a loading screen if fetch request is currently loading...
  if (context.isLoading()) {
    return `<div class="p-5">Loading...</div>`;
  }

  // This will set default data for the props if it's parameter "is" missing
  context.setDefault({
    products: []
  });

  // Bind function to add a new item to the list
  const handleAddList = view.bind((props) => {
    const title = `Post ${props.products.length + 1}`;
    props.products.push({ title: title });
  });

  // Render the HTML list
  return `
    <section class="product-list">
      <ul class="listing">
        ${props.products.map((product) => `
          <li class="post-item">${product.title}</li>
        `).join("")}
      </ul>
      <button class="button" onclick="${handleAddList}">Add New Product</button>
    </section>
  `;
}

/**
 * This is the main view
 * It will also render the shopping list block component
 */
export default function ShoppingList({ props, view }) {
  // 3. Render the main HTML with the shopping list 
  //    propagated with data using Stratox Fetch library
  return `
    <article class="card-1 border-bottom">
      <header class="content-header">
        <h1 class="headline-1 mt-0">${props.title}</h1>
      </header>
      <section>
        <h2 class="headline-3 mt-0 pt-6">My list</h2>
        ${view.block(RenderShoppingList, StratoxFetch.get("https://dummyjson.com/products?limit=3"))}
      </section>
    </article>
  `;
}

Now, visit your development URL with the path /#list and you will see the updated list that includes fetched data from the API.

Summary

This quick start guide showed you how to create a view, a controller, set up routing, and extend functionality using the Stratox Framework. You also learned how to add dynamic components and a modal example to extend the functionality of your views. Stratox provides a simple and user-friendly way to build powerful, dynamic applications with an organized MVC structure.

Feel free to experiment and expand upon these examples to build your application!

Continue to read more about components and features or jump to the Step by Step Tutorial.