Crea tu propio miniframework: MiniVue

How to create our own mini framework?

Creating a mini framework can seem like an overwhelming task at first, especially if you're new to programming. However, by breaking the process into manageable steps and understanding how the key components work, you can build your own simple framework inspired by one like Vue.js. This mini framework will focus particularly on reactivity and data handling through proxies and custom directives.

What is the structure of our mini framework?

To begin with, we must understand the basic structure that our framework will adopt. Taking inspiration from Vue.js, we will keep a syntax that includes a data function that returns an object with all the necessary information for the application. Our goal is to create custom directives, such as pText and pModel, to handle how the data is displayed in the HTML.

1. Create a framework file: The first step will be to create a .js file where we will develop all our framework code. For example, we will name this file platzi.js.

2. Declare a global variable: We need a global variable to act as the core of our application. This variable, called Platzi, will contain the special rules and syntax of our mini framework.

3. Define basic functions and classes:

   • createApp: Core function that will start the application and return a new instance of a class called PlatziReactive.
   • Directives: pText and pModel functions will be created to handle how the data interacts with the DOM.

How do we implement reactivity?

Reactivity is a key concept that allows changes in the data to be automatically reflected in the user interface (UI). In our framework, we will implement this feature using Reflect and Proxy.

Constructor and options

In the constructor of our reactive class, we will pass a set of options that includes the application data. Through these options, we will define an origin for our data (similar to data in Vue.js).

class PlatziReactive { constructor(options) { this.origin = options.data(); } // Other functions}

How do we assemble our application in the HTML?

To mount our application in the HTML, we will implement a mount function. This function will select all the elements containing the pText directive and apply the corresponding function to update the text in the DOM.

mount() { const elements = document.querySelectorAll('[p-text]'); elements.forEach(element => { const propertyName = element.getAttribute('p-text'); this.updateText(element, this.origin, propertyName); }); });}

What is the purpose of directives?

Directives are functions that allow you to bind and manipulate data directly in HTML. Our pText directive will take care of mapping the element's innerText to the property specified in the application's data.

function pText(element, dataTarget, propertyName) { element.innerText = dataTarget[propertyName];}

What's next in the evolution of the framework?

Up to this point, we have managed to create a solid foundation for an application that can handle data reactively with the help of proxies. However, this data source is not yet automatically responsive to changes. In future implementations, we will delve into how to convert this source to something more dynamic using proxies, creating a more fluid and efficient interaction between the application logic and its representation in the UI.

Putting together your own mini framework is not only a practical programming exercise, but also gives you valuable insight into the inner workings of popular frameworks. As you gain more experience, you can expand this base with more complex functions to suit your specific needs. Don't stop here and keep building and innovating!