Le hecho un vistazo a Malina JS

El logo de Malina.js junto al de PEIT (Primer Empleo IT)

Introducción.

En los ultimos 10 años proliferaron centenas de librerias para mejorar la codificación en JavaScript.
Algunas son muy utilizadas, como ReactJs, otras son aceptadas en la comunidad pero aún les cuesta penetrar en el mercado (como VueJs) y otras aún están dándose a conocer, como Svelte.
Entre las mas nuevitas aparece MalinaJS. Ésta es una libreria muy liviana para construir web de una manera muy rápida. Acompañame a darle una primera ojeada ;)

NOTA: Para leer este artículo entiendo que ya tenés nociones de manejo en HTML, JavaScript y estás familiarizado con alguna libreria del estilo Vue o React (Sino los tenés podes mandarme un mail a fernandomatiasdv@gmail.com y te informo cuando arrancan mis próximos cursos en desarrollo web).

Instalación.

Acá te dejo el npm: https://www.npmjs.com/package/malinajs
y la documentación oficial: https://malinajs.github.io/

Para instalar el CLI debemos levantar el powershell o el símbolo de sistema (cmd) y correr:

npm i -g create-malina

Debés tener instalado npm (Node Package Manager), sino lo tenés andá a la página nodejs.org y descarga la versión LTS que figura en la primer pantalla, dale “siguiente” cuantas veces sea necesario y chadan! Tenés node y npm instalado!

Si se instaló satisfactoriamente debería aparecerte un cartel mas o menos parecido a este:

Generemos nuestra primer app!

Generá una carpeta nueva (en donde quieras! En mi caso me hice una carpeta malina/proyecto-malina) y sobre ella corré

npx create-malina intro

En este caso está corriendo el CLI y generará un proyecto llamado “intro”. Debería aparecerte nuievamente un cartel parecido a éste:

Y acá fijate que ya nos informan que:
1) Se descargó un template generado por malina!
2) Instalaron las dependencias necesarias (Según la página de NPM son 3: acorn, astring y css-tree).

Finalmente te da las felicitaciones, luego te dice que ingreses a la carpeta “intro” y ejecutes:

npm run dev

Hagamoslo!!

Por un lado te dice que los cambios que debas modificar se harán sobre src/main.js y el bundle se generará sobre public/bundle.js

Luego que un servidor local le asignó el puerto 7000 (por lo tanto ingresemos a él) y que hay un “watch” que está esperando cambios (para refrescarse), para ésto vayamos paso a paso!

Ingresá a tu navegador (yo uso firefox) y tipeá localhost:7000

Y como bien dice el footer: Editemos el archivo src/App.xht para recargar la página!

Estructura del proyecto.

Ingresá con tu editor favorito (en mi caso VSCode) y fijate la estructura de archivos y carpetas.

No voy a detenerme mucho en este punto porque no hace a la programación sino a la arquitectura del template que genera Manila, igual te doy una referencia rápida como para saber qué tocar y que no (Spoiler: Solo tocá App.xht).

Por un lado tenés el node_modules, que contiene a todas las dependencias. Ésta carpeta omitila por completo!

Luego tenés public que será en donde tenés el código que finalmente “verá” el navegador. Fijate que dentro tenes un index.html que llama al archivo bundle.js

No toques nada ya gracias al watch que vimos anteriormente se encarga de subir el contenido de App.xht. Pero no te quemes con ésto que no tiene sentido comprenderlo ahora.

La carpeta src tiene un main.js que llama al archivo App.xht, por lo tanto LO UNICO QUE DEBEMOS TOCAR ES App.xht.

Los otros archivos que vienen luego son de configuración, de nuevo, no te quemes con esto por ahora.

A codear :)

Abrí App.hxt y, a simple vista, verás 3 secciones bien diferenciadas:
<script> </script>: Es donde escribiremos nuestro código JS.
Tags de HTML: Es donde irá la estructura del HTML.
<style></style>: Es donde irán todos los estilos.

Ummmm Será el primito menor de Vue?

Borrá TODO el contenido dejando solo esto:

Expressions.

Las expresiones se usan para mostrar nuestros datos. Generá una variable y llamala desde un tag HTML, y para mostrar el valor de la variable la tenés que encerrar entre llaves { }. Veamos el ejemplo mas sencillo:

Junto a su resultado:

Dentro de las llaves no solo podes pasarle variables sino también llamar a funciones propias de JS, en este caso llamo a toUpperCase(), que pone en mayúsculas las palabras que contenga la variable:

Así como usas variables que contienen strings podes pasarle números y dentro de las expresiones podes hacer cálculos:

BINDING

El proceso de binding en Malina se usa para unir el valor de una variable con un tag en HTML.

Vamos a diferenciar dos tipos de bindings: Los one-way (o unidireccionales) y los two-way (o bidireccionales).

Un ejemplo de binding one-way son los que usamos en los puntos anteriores, en donde declarábamos variables y los llamábamos desde el párrafo. Ahora veremos ejemplos de un two-ways.

En scripts únicamente declaramos variables. Las que cambiarán su estado son: checked y comentarios, mientras que terminos y aceptaste se mantienen estáticos.

En la línea 1 (la que está comentada) aparece :checked. Su valor puede ser true o false y con ésto haremos que la casilla aparezca tildada (o no). Éste checked está ligado a la variable que lleva el mismo nombre.
Así como lo llamamos checked con los puntos podemos usarlo de esta forma bind:checked, tal como lo usamos en la linea 3 bind:value={comentarios}.
Y verificamos que comentarios, al cambiarlo se modifica también en el párrafo de la línea 4.
Por otro lado, vemos que pueden ver que podemos usar el operador ternario para habilitar/des-habilitar el párrafo.

Probalo y verificá como modificas el valor de las variables y como se traduce en la pantalla.

NOTA: Probablemente hayas tenido problemas al tratar de visualizar corrrectamente los caracteres especiales, como las palabras tildadas. Para corregir este inconveniente tendrás que ingresar a /public/index.html y debajo del tag <title> agregá la siguiente sentencia:

<meta charset=”UTF-8">

EACH.

Podemos iterar sobre elementos listados utilizando la sentencia #each. Veamnos el siguiente ejemplo:

Para visualizar a cada ítem de la lista tendremos que pasarlo dentro de las llaves {#each luego darle un alias con “as” y finalmente el nombre que quedaría finalmente a loopear, en este caso historieta.
Una vez generado se lista directamente sobre el alias.

Iterando objetos.

Ahora veremos un ejemplo de la iteración sobre objetos, en donde le diremos por cada entrada a qué “clave” queremos ingresar.

Condicionales.

Ya vimos que podemos utilizar un operador ternario ( {a?b:c}), ahora veremos cómo usar el If/Else:

Y el resultado que nos arrojó:

Agreguémosle estilos.

Hay, al menos (quizá haya otras pero no las conozco!), cuatro formas de agregarle estilos a nuestros proyectos:
1) Anteponiéndole el nombre class y pasándole como parámentro el nombre de la clase referenciada. Ej: class=”cajaAzul”
2) Anteponiéndole la palabra class luego dos puntos seguido del nombre de la clase, el igual y la condición que se debería dar para que se ejecute la clase. En este ejemplo vamos a ver class:cajaRoja={condicion}. Condición es una variable que puede tomar el valor true o false. En el código le pasé true pero vos cambiásela para ver como se modifica.

3) Se le puede pasar el style directamente sobre el tag con el valor que queremos ver, el cual, puede pasársele como variable.
4) Podemos usar el operador ternario para variar el estilo y que se maneja de manera dinámica.

En la próxima veremos cómo generar un todo-list usando funciones y usaremos segmentos de código HTML para generar dinámicamente la página.

Bien, hoy vimos una introducción a esta nueva libreria!! SIEMPRE estate un paso adelante si querés sobresalir. No dejes de practicar y recordá que si necesitas hacer un curso de cero me envies un mail a fernandomatiasdv@gmail.com