Understanding Winnetoujs

The Winnetou.js framework was initially designed to streamline the reuse of HTML components within web applications by encapsulating them in classes that could be invoked programmatically in JavaScript. Over time, it has evolved into a comprehensive solution for building and scaling modern web applications.

WinnetouJs now offers a wide range of capabilities, including the implementation of dynamic routing systems, theme management, multilingual support, lightweight and efficient SVG icon handling, and state management. Additionally, it facilitates the creation of a single, obfuscated, and minified production-ready bundle. With a pre-configured Webpack setup, WinnetouJs eliminates the complexity of manual configuration, providing developers with a seamless development experience.

How it works?

WinnetouJs is built on Vanilla JavaScript, leveraging its simplicity and robustness to implement all functionalities without additional dependencies. By design, it maintains a clear separation between HTML and JavaScript, avoiding their integration in a single file. Instead, it introduces "constructos," transpiled web components that encapsulate reusable HTML structures. To facilitate this process, WinnetouJs provides the Winnetou Bundle Releaser (WBR), an executable Node.js utility. WBR is responsible for parsing and converting constructos into JavaScript modules, enabling seamless integration into your codebase. With WBR's real-time watch functionality, any changes or additions to constructos are instantly processed, making them immediately available for use. This streamlined approach ensures that constructos remain the sole abstraction layer within WinnetouJs, preserving the framework's lightweight and efficient nature.

Constructos

Constructos are blocks of HTML code that are transpiled by the Winnetou bundler (WBR) and made available via import in your native javascript code.

Winnetou html constructo example.

    
<winnetou>
  <div id="[[navbar]]" class="navbar">
    <!-- content ...-->
  </div>  
</winnetou>
   
  

The code above will make the navbar constructo available in your javascript code.

Using the constructo created in our html file.

    
import {navbar} from "./constructos/navbar.js";
navbar().create('#app');

   
  

This is just an introductory example of how simple WinnetouJs is. Did you see that in myAwesomeApp.js no type of abstraction was used, just pure javascript? With this mentality our framework was created, we believe javascript is already beautiful and robust enough, it doesn't need any decorations (besides here we all love vanilla ice cream).