Exploring Secutio Task by Task. Setting "Events" Like Stylesheets!

Introduction

This article aims to showcase some of the features of the Secutio Framework. While the framework is still under development, its progress indicates that it provides an alternative with a quick learning curve. This allows anyone to create and prototype web applications, abstracting them from the complexity of using JavaScript.

Feature Demonstration

The following demos showcase some of the functionality already present in the framework, allowing users to explore its capabilities. Similar to the htmx framework, template rendering can be done server-side. However, only examples that do not require a backend are presented here."

Inline Tasks with CSS

In this demo, we demonstrate the ability to request a joke from a remote site without using JavaScript. During the request, a "loader" is displayed. Additionally, the demo illustrates the capability to change styles using only subtasks. Please review the code and give it a try!

The list of tasks specified inline can be provided from a JSON file: <script data-tasktable type="application/json" src="tasks.json"></script>.
Both modes can coexist, and there can even be multiple inline task and task declaration files, similar to CSS stylesheets. In the future, the specification of tasks should be done using a custom HTML element, as shown in the following example: <task src="tasks.json"></task>.

Show Dialog on Error

The demo below not only displays a joke but also presents a dialog with an error message if an error occurs during the request. In this instance, an incorrect URL is used to simulate this functionality.

If we examine the HTML code, the subtask to close the dialog can be executed either by clicking the close button within the dialog or by clicking the button to request a joke.

Fetch JSON Example

This last demo, borrowed from the MDN website for comparison, demonstrates a food shopping list obtained from a remote JSON file using only tasks and CSS.

The example also showcases the use of inline templates, employing JavaScript Template Literals. The JSON data obtained from the GET request is accessible through the "data" variable.

<script id="food-list-tpl" type="text/template">
  <ul>
    ${data['products'].map(record => `<li><strong>${record["Name"]}</strong>
      can be found in ${record["Location"]}. Cost: <strong>${record["Price"]}€</strong>
    </li>`).join("")}
  </ul>
</script>

Map is syntactic sugar for the JavaScript Array.map() method, which creates a new array from an existing one and is a convenient method for listing products through a loop. In the end, all the elements in the list are concatenated. There are several ways to accomplish this. There are several ways to achieve this, and conditional statements can be used to filter the elements.

Additional information and explanations for each of the properties used in the demos can be found in the framework documentation.

Conclusion

As evident from the HTML code in the demos, employing the concept of "Cascading Task Sheets", similar to style sheets, offers a practical means of overwriting tasks later. This can be accomplished either on the server side via the HTTP header or on the client side. Creating an application with dynamic content becomes simple and productive in a short amount of time. There is still much to be done, including the writing of documentation, but these demos provide insight into how it works and the way forward.

The source code for this library is available here.

Thank you for reading!