Rocket Translator - El traductor HTML
¿Has pensado en crear componentes para Angular, React o Vue directamente con HTML? No son cosas de locos ni nada. Ya que ahorra valioso tiempo al usar directamente HTML. ¡Aprende como hacerlo!
Rocket Translator
Rocket Translator es una herramienta de NodeJS, exactamente una CLI (Console Line Interface) o Interfaz de Linea de Consola. Escrita en JavaScript, la cual con un archivo HTML con ciertos cambios se pueden obtener componentes de Vue, React y Angular.
La idea detrás de Rocket Translator es ayudar a desarrolladores novatos en estos frameworks a poder traducir sus plantillas HTML. Y ademas poder ahorrar tiempo de desarrollo al poder crear un componente en HTML y poder utilizarlo en proyectos de los distintos frameworks.
Esta herramienta fue basada principalmente en Vue, ya que sigue algunas reglas de sintaxis que utiliza este framework. Y también tomo algunas formas de asignación y modificación de datos. Como por ejemplo. Las Computed Properties y los Watchers.
Pero el núcleo de la herramienta toma estos features de Vue y los lleva a los otros frameworks.
¡Dejémonos de charlas y veamos como funciona!
Antes que nada tenemos que instalar Rocket Translator desde Yarn o NPM. Y lo instalamos globalmente.
NPM:
npm i -g rocket-translator
O con Yarn:
yarn add global rocket-translator
Vamos a crear un nuevo archivo HTML. Vamos a llamarlo "mi-componente.html" y vamos a escribir:
<div>
<h1>Hola {name - state - "Mundo"}</h1>
</div>
Ahora en la consola nos movemos a la carpeta donde esta el archivo HTML y ejecutamos:
rocket react mi-componente.html salida
Se nos creara una carpeta llamada "salida" y dentro tendremos el componente final.
Vamos a examinar un poco ambos archivos.
Parte fundamental del funcionamiento del traductor es este: {name - state - "Mundo"}
Aquí declaramos el nombre del estado. En este caso es "name". Declaramos el tipo, los tipos pueden ser prop, state, computed y sin tipo. En este caso es: "state", que representa un estado. Y el tercer parámetro que se pasa es el valor. Este es opcional y se usa solo para asignar el valor a un estado.
En Rocket Translator hay 2 formas de declarar estados. En este caso es "in-template", pero se pueden declarar desde Javascript (como veremos mas adelante).
Ahora veamos como se crea un estado llamado "name" con valor "Mundo". Y automáticamente se reemplaza la declaración con la llamada del estado.
import React, {Component} from "react";
class MiComponente extends Component {
constructor() {
this.state = {
name: "World"
}
}
render() {
return (
<div>
<h1>Hola {this.state.name}</h1>
</div>
)
}
}
export default MiComponente;
Ahora intenta crear un componente de Angular y uno de Vue. La idea detrás de este traductor es poder crear componentes de distintos frameworks desde un HTML base, y que tengan exactamente el mismo comportamiento.
¡Pero También Hablamos de Javascript!
¡Cierto! Vamos a ver algo que apareció en la versión 2: Los Ciclos de Vida. Esto es algo básico de todos los frameworks, y los traemos en dicha versión. Se añadieron 2 Ciclos de Vida que no están en los frameworks: setInitialState y setStateWatchers.
Pero vamos a fijarnos en: setInitialState. Este se usa también para declarar estados. Solo que no necesariamente necesitan mostrarse en la plantilla. Ya que el siguiente ejemplo lo hace necesario vamos a ver las Computed Properties.
Estas son funciones que retornan un valor que se muestra en la plantilla. Veamos el Ejemplo:
<div>
<span>Hola Mi Nombre Es: {fullName - computed}</span>
</div>
<script>
function setInitialState() {
return {
name: "David",
lastName: "González"
}
}
function fullName() {
return name + " " + lastName
}
</script>
Todos los métodos, computed, y ciclos de vida se declaran como funciones. Los computed, setInitialState y setStateWatchers deben retornar un valor. String o Number en el caso de los computed. Y un objeto con los valores a asignar en lo otros dos casos.
Otra curiosidad que tiene esta herramienta es que auto filtra los estados dentro de las funciones (hay sus excepciones pero trabajo para arreglarlos).
Vamos a traducir a otra vez React.
import React, {Component} from "react"
class MiComponente extends Component {
constructor() {
super();
this.state = {
name: "David",
lastName: "González"
};
this.fullName = this.fullName.bind(this);
}
fullName(){
return this.state.name + " " + this.state.lastName
}
render(){
var fullName = this.fullName();
return(
<div>
<span>Hola Mi Nombre Es: {fullName}</span>
</div>
)
}
}
export default MiComponente;
Y vemos como todo se asignan los estados. Como se trata de imitar la funcionalidad de las computed properties de Vue en React. Y como se filtran los estados dentro de la función fullName.Pero falta un pequeño truquito de los estados: Asignar el valor de variables a los estados.
¿¡Y Como es esto?!. ¡Sencillo! Solo creas una variable y la asignas en la plantilla. Veamos un Ejemplo sencillo.
<div>
<span>var name = {mundo - state - name}</span>
</div>
<script>
var name = "Mundo";
</script>
Asignamos el valor de la variable name al estado mundo. Es sencillo y sirve para cuando necesitemos asignar el mismo valor en varias partes.
import React, {Component} from "react"
class Test extends Component {
constructor() {
super();
this.state = {
Mundo: "Mundo"
};
}
render(){
return(
<div>
<span>var name = {this.state.Mundo}</span>
</div>
)
}
}
export default Test;
¡Y ahora es que hay tela por cortar de este traductor! Apenas vimos la introducción a los estados. Faltan los props, métodos, computeds, ciclos de vida, watchers, modelos, condicionales, bucles, manejo de Javascript, etc.
¡Empieza a usarlo! Esta disponible en NPM como rocket-translator.
Si quieres colaborar, ya sea con mejoras o creando un issue. puedes hacerlo en Github.
Comentarios
Publicar un comentario