DEV Community: Maxime Bétrisey

Exploring Generics in Aventus: Empowering Customized Forms

Maxime Bétrisey — Sun, 02 Jul 2023 09:45:00 +0000

Introduction

In our previous article, we delved into the concept of inheritance within Aventus. Today, we continue our exploration by diving into the world of generics. Generics provide a powerful tool for creating flexible and reusable components, and they play a crucial role in enhancing the customization capabilities of Aventus. In this article, we will walk you through a practical example that demonstrates the usage of generics in creating dynamic forms. But first, let's revisit the file extensions we've encountered before.

Understanding the File Extensions

In Aventus, we utilize the following file extensions:

*.wc.avt (Web Component): This file contains the logic, style, and structure of the component.
*.data.avt (Data): This file defines the data structure used by the application.
*.ram.avt (RAM - Runtime Accessible Memory): This file handles the management of data in the application's memory.

The Power of Generics in Object-Oriented Programming

Generics provide a means to create reusable components that can work with multiple types of data. By utilizing generics, we can design more flexible and adaptable code, reducing redundancy and increasing code efficiency. In Aventus, generics are instrumental in creating components that can handle various data types seamlessly.

Example: Building a Generic Form Component

To illustrate the practical usage of generics in Aventus, let's walk through the creation of a generic form component. This component will serve as a foundation for building customized forms for different data types.

Step 1: Defining the Data Structure

We start by creating a data class, in this case, the Person.data.avt file. The data class represents the structure of the data we want to work with. For our example, we define a simple Person class with properties such as id, firstname, and lastname.

export class Person extends Aventus.Data implements Aventus.IData {
    public id: number = 0;
    public firstname: string = "";
    public lastname: string = "";
}

Step 2: Implementing the RAM

Next, we create a RAM (Runtime Accessible Memory) class, Person.ram.avt, responsible for managing the data in memory. The RAM class extends the Aventus.Ram class, where T represents the type of data it handles. In this case, we use the Person class as our data type.

import { Person } from "../data/Person.data.avt";

export class PersonRAM extends Aventus.Ram<Person> implements Aventus.IRam {

    public static getInstance() {
        return Aventus.Instance.get(PersonRAM);
    }

    public override defineIndexKey(): keyof Person {
        return 'id';
    }

    protected override getTypeForData(objJson: Aventus.KeysObject<Person> | Person): new () => Person {
        return Person;
    }
}

Step 3: Building the Generic Form Component

Now, we move on to creating the core component - the generic form component. The GenericForm.wc.avt file serves as the base class for all our custom form components. It is an abstract class that takes a generic type T, which must implement the Aventus.IData interface.

<script>
    export abstract class GenericForm<T extends Aventus.IData> extends Aventus.WebComponent implements Aventus.DefaultComponent {

        //#region static

        //#endregion


        //#region props
        @Property((target: GenericForm<T>) => {
            target.loadItem();
        })
        public data_id: number;
        //#endregion


        //#region variables
        protected data: T;
        protected ram: Aventus.Ram<T>;
        //#endregion


        //#region constructor
        constructor() {
            super();
            this.ram = this.defineRAM();
        }
        //#endregion


        //#region methods
        protected abstract defineRAM(): Aventus.Ram<T>;

        private async loadItem() {
            this.data = await this.ram.get(this.data_id);
        }

        protected async save() {
            if(this.data) {
                let result = await this.ram.updateWithError(this.data);
                if(!result.success) {
                    alert(result.errors.map(e => e.message).join(", "));
                }
            }
        }
        //#endregion

    }



</script>

<template>  
    <!-- let the slot to define needed input inside child -->
    <slot></slot>
    <div class="footer">
        <button @click="save">Save</button>
    </div>
</template>

<style> 
    :host {}
</style>

Within the GenericForm component, we define methods for loading and saving data. The defineRAM method, which is abstract, allows each derived form component to define its corresponding RAM class.

Step 4: Creating the PersonForm Component

To demonstrate the usage of the generic form component, we create the PersonForm.wc.avt file. This component extends the GenericForm class and defines the specific form elements for capturing a person's firstname and lastname. It also overrides the defineRAM method to return the PersonRAM instance.


<script>
    import { PersonRAM } from "../../ram/Person.ram.avt";
    import { Person } from "../../data/Person.data.avt";
    import { GenericForm } from "../GenericForm/GenericForm.wc.avt";

    export class PersonForm extends GenericForm<Person> implements Aventus.DefaultComponent {

        @ViewElement()
        protected firstname: HTMLInputElement;
        @ViewElement()
        protected lastname: HTMLInputElement;

        protected override defineRAM(): Aventus.Ram<Person> {
            return PersonRAM.getInstance();
        }

        private updateFirstname() {
            this.data.firstname = this.firstname.value;
        }
        private updateLastname() {
            this.data.firstname = this.lastname.value;
        }
    }


</script>

<template>  
    <div>
        <label>Firstname</label>
        <input @element="firstname" @input="updateFirstname">
    </div>
    <div>
        <label>Lastname</label>
        <input @element="lastname" @input="updateLastname">
    </div>
</template>

<style> 
    :host {}
</style>

Conclusion

Generics in Aventus provide a powerful means to create reusable and customizable components. By leveraging the flexibility and adaptability of generics, developers can build dynamic forms that cater to various data types effortlessly. Aventus emerges as a new contender in the world of web frameworks, empowering developers to create exceptional web experiences with its rich set of features.

To learn more about Aventus and its capabilities, visit the official website: https://aventusjs.com.

Exploring Component Inheritance in Aventus

Maxime Bétrisey — Sun, 25 Jun 2023 10:22:32 +0000

Introduction

In the world of web development, reusability and modularity are crucial aspects. One powerful technique that aids in achieving these goals is the concept of inheritance. In this article, we will delve into how Aventus, the innovative web framework, leverages object-oriented programming (OOP) principles to enable component inheritance. We will explore the implementation of a Shape component and demonstrate how it serves as the foundation for creating specialized components like Rectangles and Triangles. Join us on this journey as we unlock the potential of component inheritance in Aventus.

Preamble - Understanding Aventus Component Files

Before we dive into exploring component inheritance in Aventus, let's take a moment to understand the different types of files used in Aventus and their respective purposes. Aventus adopts a modular approach to web component development, separating the logic, style, and view of each component into distinct files. These files are typically denoted with different extensions to signify their roles.

The following file extensions are commonly used in Aventus component development:

.wcl.avt (Web Component Logic): This file extension is used for writing the logic of a web component in TypeScript. It contains the component class definition, properties, methods, and other related logic.
.wcs.avt (Web Component Style): The .wcs.avt files hold the styling information for a web component. They are written in SCSS (Sassy CSS) and define the visual appearance, layout, and other presentational aspects of the component.
.wcv.avt (Web Component View): The .wcv.avt files describe the structure of a web component using HTML. They define the markup and layout of the component, including the placement of elements and slots.

In addition to these separate files, Aventus also supports a consolidated file format for convenience:

.wc.avt (Web Component): The .wc.avt file combines the logic, style, and view of a web component into a single file. It encapsulates all the necessary code and provides a compact representation of the component.

Understanding these file types and their purposes will help you navigate and work effectively with Aventus components. With this knowledge, let's proceed to the main sections of the article, where we explore the concept of component inheritance and its implementation in Aventus.

Feel free to refer back to this preamble section whenever you encounter these file extensions while working with Aventus components.

Introducing the Shape Component

The Shape component acts as an abstract class that defines the fundamental behavior and properties shared by various shapes. Let's take a look at the code for the Shape component:

// Shape.wcl.avt
/**
 * The shape class is an abstract class that define basic behavior for a shape
 */
export abstract class Shape extends Aventus.WebComponent implements Aventus.DefaultComponent {

    // Properties
    @Property((target: Shape) => {
        target.style.setProperty("--shape-width", target.width + 'px');
    })
    public width: number = 100;

    @Property((target: Shape) => {
        target.style.setProperty("--shape-height", target.height + 'px');
    })
    public height: number = 100;

    // View Element
    /** Selector for the div where the name will be displayed */
    @ViewElement()
    protected nameDisplay: HTMLDivElement;

    // Methods
    /** Force child to define a name */
    protected abstract defineName(): string;
    /** Force child to define the calculation method */
    public abstract getArea(): number;

    protected override postCreation(): void {
        this.nameDisplay.innerHTML = this.defineName();
    }
}

/* Shape.wcs.avt */
:host {
    height: var(--shape-height);
    margin: 40px;
    position: relative;
    width: var(--shape-width);
    background-color: red;

    .name {
        height: 25px;
        left: 0;
        position: absolute;
        top: -25px;
    }
}

<!-- Shape.wcv.avt -->
<div class="name" @element="nameDisplay"></div>
<slot></slot>

The Shape component defines the basic behavior for a shape, including properties for width and height, as well as a name display element. Child components will inherit from this abstract class and provide their own implementation of the defineName() and getArea() methods.

Extending Shape with Rectangles

In this example, we will create a Rectangle component that extends the Shape component we defined in previous section. Since the Rectangle component shares the same style and structure as its parent, there is no need to create separate Rect.wcs.avt and Rect.wcv.avt files. We will focus on implementing the required functions defined by the parent.

To create the Rectangle component, we only need to create the Rect.wcl.avt file in the Rect folder. Aventus's auto-completion feature will assist us in generating the missing functions automatically.

Here's the content of the Rect.wcl.avt file:

import { Shape } from "../Shape/Shape.wcl.avt";

export class Rect extends Shape implements Aventus.DefaultComponent {

    /**
     * @inheritdoc
     */
    protected override defineName(): string {
        return "Rectangle";
    }

    /**
     * @inheritdoc
     */
    public override getArea(): number {
       return this.width * this.height;
    }
}

With just a few lines of code, we have created a Rectangle component that inherits the behavior and properties of the Shape component. The defineName() function returns the name of the shape as "Rectangle," and the getArea() function calculates the area of the rectangle based on its width and height.

Triangle Component - Extending the Style and Structure

In this section, we will create a Triangle component that extends the Shape component using a single file to consolidate the logic, style, and structure. By doing so, we can efficiently define the unique characteristics of the Triangle component.

To create the Triangle component, we will create the Triangle.wc.avt file in the Triangle folder. This file will contain the script, template, and style sections. We will override the parent's style to remove the red background defined by the Shape component and add custom styles to draw the triangle shape. Additionally, we will modify the structure by adding a <div> element with the "triangle" class to represent our triangle shape. This <div> element will replace the <slot> tag in the Shape component.

Here's the content of the Triangle.wc.avt file:

<script>
    import { Shape } from "../Shape/Shape.wcl.avt";

    export class Triangle extends Shape implements Aventus.DefaultComponent {
        /**
        * @inheritdoc
        */
        protected override defineName(): string {
            return "Triangle";
        }

        /**
        * @inheritdoc
        */
        public override getArea(): number {
            return (this.height * this.width) / 2;
        }
    }
</script>

<template>
    <!-- Replace the slot with the triangle shape -->
    <div class="triangle"></div>
</template>

<style>
    :host {
        /* Override parent's rule to remove the red background */
        background-color: transparent;

        .triangle {
            /* Define the triangle shape */
            border-bottom: var(--shape-height) solid red;
            border-left: calc(var(--shape-width) / 2) solid transparent;
            border-right: calc(var(--shape-width) / 2) solid transparent;
            height: 0;
            width: 0;
        }
    }
</style>

In this code snippet, we define the Triangle component by extending the Shape component. We override the defineName() function to return the name "Triangle" and the getArea() function to calculate the area based on the triangle's width and height. The structure of the Triangle component includes a <div> element with the "triangle" class, which represents the visual representation of the triangle shape.

Final result

To visualize the result of our code, let's create a file with the following code. This will showcase the final outcome of our Shape, Rect, and Triangle components working together seamlessly.

Create a new HTML file, let's name it index.html, and include the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/shape.js"></script>
</head>
<body>
    <av-triangle height="75" width="50"></av-triangle>
    <av-rect height="75" width="50"></av-rect>
</body>
</html>

Once you have created this index.html file, you can open it in a web browser to see the final result. The Shape, Rect, and Triangle components will be rendered on the screen with the specified dimensions. This allows you to visually observe the outcome of our code and appreciate the flexibility provided by inheritance in Aventus.

Conclusion

In conclusion, Aventus emerges as a promising challenger in the realm of web frameworks by introducing a powerful mechanism for web component inheritance. Leveraging object-oriented programming (OOP) principles, Aventus empowers developers to create complex and reusable components with ease. The ability to define an abstract base component and extend it with specialized child components brings tremendous flexibility and scalability to web development projects.

By embracing the concept of inheritance, Aventus fosters code reusability, promotes a modular design approach, and enhances developer productivity. Whether you're building simple UI elements or sophisticated application components, Aventus offers a solid foundation for structuring and organizing your codebase.

To delve deeper into the world of Aventus and explore its vast array of features and capabilities, we invite you to visit the official Aventus website at https://aventusjs.com. There, you'll find comprehensive documentation, tutorials, and examples to help you harness the full potential of Aventus and unlock new possibilities for web development.

Thank you for joining us on this journey through the realm of web component inheritance in Aventus. We hope this article has provided you with valuable insights and inspiration for your future projects. Happy coding with Aventus!

Introducing Aventus: Simplifying Web Development with Efficiency and Elegance

Maxime Bétrisey — Sun, 18 Jun 2023 15:59:33 +0000

Introduction

We are thrilled to unveil Aventus, a groundbreaking framework designed to bring simplicity and efficiency to developers. Currently available as a VSCode extension, Aventus aims to streamline the development process by offering a comprehensive set of features and a unique approach to web development. Built on TypeScript, it empowers developers with robust type management and scalability. With its template creation capabilities and utilization of Web Components, Aventus provides an unparalleled development experience.

Simplicity and Scalability with TypeScript

At the core of Aventus lies TypeScript, a powerful programming language that enables developers to efficiently manage types and ensure code integrity. By harnessing the benefits of TypeScript, Aventus simplifies development tasks, enhances code quality, and facilitates scalability. The framework's type system assists in catching errors early, making refactoring easier, and improving overall code maintainability.

Time-saving Template Creation

Aventus introduces a powerful template creation feature, allowing developers to create reusable templates for recurring projects. With just a few clicks, developers can set up custom templates tailored to their specific project needs. This time-saving capability eliminates the need for repetitive project configurations and guarantees consistency across different applications. By leveraging templates, developers can kickstart their projects swiftly and focus on building exceptional experiences.

Harnessing the Power of Web Components

Aventus adopts the Web Components standard, leveraging its benefits for modular and isolated graphical elements. Web Components bring object-oriented programming concepts like inheritance and generality to the web development landscape. By encapsulating HTML, CSS, and JavaScript logic into self-contained components, Aventus ensures code modularity, reusability, and easy maintenance. This approach enhances code organization and fosters collaboration among developers.

Efficient File Separation

Aventus emphasizes clear and organized file separation to help developers manage their projects effectively. The framework defines a consistent and intuitive file structure, with designated files for models, stores, websocket communications, application states, Web Component logic, styles, views, and more. This file organization promotes code readability, simplifies navigation, and eases collaboration within development teams.

Built-in Live Server

To further enhance the development experience, Aventus includes a built-in live server. This live server allows developers to instantly preview their changes in real-time, eliminating the need for external server setups or manual refreshes. With the live server feature, developers can iterate quickly, debug efficiently, and ensure a smooth development workflow.

Conclusion

Aventus revolutionizes web development by offering simplicity, efficiency, and elegance. With its focus on TypeScript, template creation, Web Components, file separation, and built-in live server, Aventus empowers developers to build exceptional applications without the hassle of managing multiple packages. Join the Aventus community today and experience a new era of web development.

To learn more and get started with Aventus, visit our website at aventusjs.com