Marko: Marko facilita la representación de su interfaz de usuario mediante una sintaxis similar a HTML . Es una biblioteca de interfaz de usuario amigable y súper rápida que hace que la creación de aplicaciones web sea una diversión soportable. Es tan parecido a HTML que puede usarlo como reemplazo de un lenguaje de plantillas como handlebars, mustache o pug.
Sin embargo, Marko es mucho más que un lenguaje de plantillas. Es un lenguaje que le permite crear una aplicación de forma declarativa al describir cómo cambia la vista de la aplicación con el tiempo y en respuesta a las acciones del usuario. En el navegador, cuando cambien los datos que representan su interfaz de usuario, Marko actualizará el DOM de manera automática y eficiente para reflejar los cambios.
Instalación: si está comenzando desde cero, puede usar los comandos cli de Marko para crear rápidamente una aplicación de inicio:
npx @marko/create
El compilador Marko se ejecuta en Node.js y se puede instalar usando npm:
npm init -y // The -y installs the default package.json
Necesitamos instalar las siguientes bibliotecas requeridas:
npm install express --save // install express module npm install marko --save // install marko module or using yarn: yarn add marko
Ejemplo: Nombre de archivo: template.marko
html
<!doctype html>
html
head
title -- Hello World
body
h1 -- Hello, ${data.fname} ${data.lname}
h3 -- Welcome to, ${data.host}'s bar.
p -- We offer you
b -- ${data.drinks[0]}, ${data.drinks[1]}, ${data.drinks[2]}.
Código equivalente de Plantilla.marko:
html
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, ${data.fname} ${data.lname}</h1>
<h3>Welcome to, ${data.host}'s bar.</h3>
<p>
We offer you ${data.drinks[0]},
${data.drinks[1]}, ${data.drinks[2]}.
</p>
</body>
</html>
Nombre de archivo: index.js
javascript
// Node.js program to implement the
// marko.js template
// Allow Node.js to require and load
// `.marko` files
require("marko/node-require");
// Importing express module
var express = require("express");
// Importing marko module
var markoExpress = require("marko/express");
// Importing template module
var template = require("./template.marko");
var app = express();
// Enable res.marko(template, data)
app.use(markoExpress());
// Routing
app.get("/", function(req, res) {
console.log("Routing done all fine...");
res.marko(template, data={
fname: "Devanshi",
lname: "awasthi",
host: "Vikas",
drinks : ["Wine", "Beer", "Champagne"]
});
});
// Listening on 2020 port number
app.listen(2020, ()=>{
console.log("Server started at port: 2020...");
});
Ejecute el archivo index.js usando el siguiente código en cmd:
node index.js
Salida (en consola):
El servidor comenzó en el puerto 2020…
El enrutamiento se realizó correctamente…
En el navegador:
Ejecutando localhost en el puerto 2020
Nota: Después de ejecutar el servidor en la consola, crea automáticamente un archivo template.marko.js , que tiene una referencia a todos los archivos de plantilla.
Referencia: https://markojs.com/docs/getting-started/
Publicación traducida automáticamente
Artículo escrito por amitkumarjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA