Primeros pasos

“hola mundo” desde cero

Para crear el proyecto de meme.js más simple posible, haremos los siguientes pasos:

1. Mediante la terminal, crearemos un directorio vacío.
2. Dentro de este directorio, crearemos el archivo: index.mh
3. Preferentemente editaremos el archivo anterior con VSCode (pero en realidad puedes editarlo con tu editor favorito), y le pondremos dentro:

   index.mh

   copiar

   h1>hola mundo

4. Ahora levantaremos este proyecto y abriremos una pestaña en nuestro navegador por defecto, con el siguiente comando en la terminal: copiar

   me -s -no-demon -open

Con estos simples pasos podemos ver varias cosas:

• La simpleza de meme.js, solo con un archivo index y el SDK, tendremos un sitio web. meme.js, no necesita de complejos sistemas de archivos ad hoc, un sin número de dependencias o sistemas complejos de administración de eventos y propagación de estados. Todo esto solo para poder usarse. meme.js es simple y eficaz.
• La independencia de meme.js es absoluta. Es decir, meme.js no necesita nada para funcionar, ni para las páginas, ni para los componentes más complejos. Si abres las herramientas de desarrollo e inspeccionas la red, veras como meme.js, no descargo ningún tipo de dependencia para poder funcionar.
• El performance de meme.js es el mejor. El SDK es una nueva forma de escribir la web, por que lo que escribes con meme.js, es la web estándar, no escribes componentes de un framework. Y como tal, no habrá nada independiente que reduzca el rendimiento de tu software.
• La potencia de meme.js. Y que si te digo que ese hola mundo que acabamos de hacer, podría tener server side render solo con agregar 34 caracteres más (para que la línea quede de la siguiente manera: copiar

  h1>hola mundo {request global.x??=0; return ++x}

  , ahora solo guardamos y refrescamos nuestra página), pero esto no es nada, podemos hacer un sin número de cosas con el código justo, creando los componentes más increíbles de la forma más simple y lógica.

Mi primer componente

Ahora vamos a crear un componente de memeJS, para poder consumirlo desde nuestro index. Para esto seguiremos los siguientes pasos:

1. Creamos un archivo llamado mi_componente.mj. cabe resaltar que cualquier componente que será consumido en el front, debe de estar compuesto por 2 o más palabras, ya que los custom elements de una sola palabra están reservados por el estándar. De modo que nuestra carpeta quedaría de la siguiente forma:

   carpeta

   index.mh

   mi_componente.mj
2. Ahora colocamos el siguiente código dentro del archivo que acabamos de crear:

   mi_componente.mj

   copiar

   class {
   	View() {
   		h1>hola desde mi_componente
   	}
   	Style() {
   		h1
   			background-color: pink
   	}
   }

3. Para consumir el componente en index.mh escribiremos en la última línea, la etiqueta con el nombre de nuestro componente mi_componente, con lo que quedaría de la siguiente forma:

   index.mh

   copiar

   h1>hola mundo {request global.x??=0; return ++x}
   mi_componente

4. Por último guardamos y refrescamos nuestra página en nuestro navegador.

Con este ejercicio acabamos de ver cómo se crea y se consume el más simple de los componentes (solo tiene una vista y estilos). También podemos ver como los estilos que escribamos en el componente tienen un alcance definido, es decir todos los estilos que se escriban en el componente, solo afectarán a este mismo y a sus hijos.

Creación de un chat en tiempo real

Ya hicimos el 0, por lo que ahora toca hacer el 100 😏, ya que ahora te mostrare el uso de los protocolos de meme.js, la programación de un back completamente funcional y la forma en la que front y back se funden en una sola entidad, todo esto en 84 líneas totales de código, por supuesto contando con el código bien formateado, (nada de todo en una sola línea de código 😂), y de igual forma cuento las líneas del index y hasta las de la configuración 😌.

Para este ejemplo, podemos borrar todos los archivos de nuestra carpeta de proyecto o crear una nueva. luego crearemos los siguientes archivos:

Y ahora tendremos el siguiente contenido en los archivos:

module.exports = {
	repositories: ['mimix.red'],
	port_driver : 9000,
	app         : { port:9001 },
	api         : { port:9002 },
	res         : { port:9003 },
};

mx_scripts
pr_chat

class {
	// back-socket
	get_message( message ) {
		for ( const socket of this.sockets ) {
			socket.Trigger( 'set_message', message, socket.id===this.id ? 'right' : 'left' );
		}
	}

	// back-public
	View() {
		! (set_message)=onSetMessage

		.cont
			*messages
			.box
				input*inp (keyup)=onKeyUp
				button*btn (click)=onClick>enviar
	}
	Style() {
		>.cont
			border        : solid 1 red
			display       : flex
			flex-direction: column
			height        : 80vh
			left          : 50%
			position      : absolute
			top           : 50%
			transform     : translate(-50%, -50%)
			width         : 500
			>.messages
				align-items    : flex-start
				display        : flex
				flex-direction : column
				flex           : 1
				gap            : 20
				justify-content: flex-end
				padding        : 10
				>.balloon
					background-color: mistyrose
					border-radius   : 10
					padding         : 10 20
					&.right
						place-self: flex-end
						>.box
							align-items: center
							display    : flex
							gap        : 10
							padding    : 10
							>.inp
								flex: 1
	}
	Create() {
		socket.Connect();
	}

	onKeyUp( event ) {
		if ( event.key==='Enter' )
			refs.btn.Trigger( 'click' );
	}
	onClick() {
		const { value } = refs.inp;

		if ( !value ) {
			console.error( 'el mensaje está vacío' );
			return;
		}

		refs.inp.value = '';
		refs.inp.focus();
		this.Trigger( 'pr_chat/get_message', value );
	}
	onSetMessage( _, message, type ) {
		refs.messages.Add({mh .balloon.{type}}>{message} });
	}
}

me -s -no-demon -open