Con la tendencia de la Web moderna han surgido nuevas librerías y marcos de trabajo (“frameworks”) que brindan mejor disposición sobre el entorno gráfico aprovechando las capacidades de un navegador actual. Riot es una librería muy interesante dada su simplicidad para desarrollar interfaces de usuario (UI) basadas en componentes (Web), tiene un tamaño pequeño y velocidad de respuesta atractiva (ideal para páginas web estáticas), con un estilo cercano al estándar HTML, incluso legible para diseñadores gráficos en un equipo interdisciplinario. Pensaría que esta es la mayor prestación si se compara con una librería tan reconocida como React que tiene el respaldo de Facebook y una gran comunidad, en la que se requiere mayor uso de javascript y no se enfoca en plantillas, sólo quién programe se entiende internamente con componentes.
Aunque si se indaga para qué sirve que un diseñador aporte en la programación de un componente habrá quién encuentre alguna utilidad o por el contrario, no lo vea necesario al tratarse de algo muy interno o avanzado, cuestión del contexto, opiniones y maneras de hacer las cosas. Para OnMind es un hecho y camino elegido, estando abierto a revisión en futura versión, que no ocupa tiempo por el momento, para otros aspectos visuales o de integración nativa con móviles consideramos Flutter.
En tanto se cuente con un entorno preparado con librerias de funciones útiles o clases, como es el caso de OnMind, la implementación se vuelve específica. Este documento presenta una síntesis de comprensión y estándar para abordar código de componentes escritos en OnMind usando Riot, por lo que como prerrequisito debe haberse iniciado en dicha librería que es simple de aprender, además de comprender HTML5 y javascript. Veamos las siguientes pautas para un archivo de componente con extensión riot y leer así codigo escrito o crear nuevas personalizaciones bajo criterios de OnMind.
<script>
import Abstract from '../../control/Abstract.js' // Occasional Class or other
const kit = window.kit.load()
const use = new Abstract()
const it = use.init(use)
// => ... here comes others assignments with "it"
const to = {
components: kit, // or { kit.Component }
onBeforeMount(props, state) {
// => ... here comes more assigments using "props"
it.set(it,this) // or it.use.whenMount(it,this)
}
}
// => ... here comes others assignments with "to"
export default to
</script>
La clase
Abstractde OnMind es genérica mas no aplica en componentes muy elementales, además existen otras clases según el componente.
En el HTML principal se incluyen los scripts siguientes
<script defer src="../app/onmind-gui.bundle.js"></script>
<script defer src="../app/onmind-nub.bundle.js"></script>
<script defer src="../app/onmind-kit.bundle.js"></script>
Para efectos de OnMind y como se puede apreciar en el código de muestra, en principio se aplican los siguientes 7 criterios o elementos de código para un componente:
| Elemento | Descripción |
|---|---|
const kit |
Inicializa conjunto de objetos de los componentes del Kit de interfaz de usuario de OnMind (UIK). No se necesita si se trata de un componente sin dependencias. Puede inicializarse asignando window.kit.load() |
const use |
Inicializa objeto que hace de controlador, posibilitando el uso de métodos del Kit de interfaz de usuario de OnMind (UIK) |
const it |
Objeto para manejo de variables internas usando it.. Estándar que se implementa como facilitador en el uso de métodos de clases de OnMind, por ejemplo, it.use = new Abstract(). Incluso, para mezclarse o hacer mapeo de la clase con el objeto a exportar (to). Esto se hace debido a que se exporta un módulo javascript que es un objeto (no una clase) |
const to |
Objeto a exportar como módulo. Esto permite incorporar los métodos usando to., sobretodo aquellos que se agregan (distintos a los eventos de Riot). También permite una presentación clásica brindando una estética con menos indentacion en componentes cargados de código. Es opcional, de no implementarse se hace uso interno de this |
components: kit |
Referencia para relacionar components. No se necesita si se trata de un componente sin dependencias. Además, pueden especificarse componentes específicos (ej. components: { component1, ... }) |
onBeforeMount |
Método correspondiente a los eventos de Riot, que generalmente incluiría al final la asignación it.set(it,this), salvo que un componente use it.use.whenMount(it,this). Esto permite a las clases de OnMind usar it.do.props para acceder al valor de un atributo, o it.do.update() para actualizar los atributos visuales del componente |
export default to |
Exporta el objeto to como módulo javascript, colocándose al final. En realidad, si no se superan 30 líneas en la asignación del objeto a exportar o por estética del componente, se puede simplificar usando la sentencia nativa export default {...} en lugar de usar const to |
Para actualizar, refrescar o renderizar cambios visuales, si bien se puede usar
it.do.update()se dispone deit.render(it)el cual reasigna además valores parastate
El escenario más común es el siguiente:
<script>
const AbstractApp = window.nub.AbstractApp // Web Application Class
const kit = window.kit.load() // Library with OnMind Components
const use = new AbstractApp() // Library for OnMind Routines & Utilities
const it = use.init(use) // Private variable for Objet Data
// => ... here comes others assignments with "it"
it.stage = {}
const to = { // Target Object for Javascript Module
components: kit, // or { kit.Component }
onBeforeMount() { it.use.onBeforeMount(it, this) }, // Riot event covered by OnMind
onMounted() { it.use.onMounted(it, this) }, // Riot event covered by OnMind
onUpdated() { it.use.onUpdated(it) }, // Riot event covered by OnMind
started(res) {
it.use.started(it, res, 'ask', 'box', 'SHEET', true) // OnMind definition to start
}
}
// *!!* First Thing To Do When Started
to.first = () => {}
export default to // Export Javascript Module
</script>
En el caso de un componente sencillo, que no requiere la librería del Kit de interfaz de usuario de OnMind (UIK), la plantilla se podría ver de la siguiente manera:
<script>
import Abstract from '../../control/Abstract.js' // Class may vary
const use = new Abstract()
const it = use.init(use)
// => ... here comes others assignments with "it"
export default {
onBeforeMount(props, state) {
// => ... here comes more assigments using "props"
it.set(it,this) // Commonly implemented at the end
}
}
</script>
Si no se usa ninguna clase de OnMind y sólo en el caso de llegar a ser de utilidad, se podría implementar el uso del objeto it de un modo nativo, por ejemplo:
<script>
const it = { do: null, get: () => { var x = it; delete x.do; return x } }
// => ... here comes others assignments with "it"
export default {
state: it.get(),
onMounted(props, state) {
it.do = this // Always implemented
}
}
</script>
state: it.get()establece referencia destate(objeto interno deRiotpara atributos mutables) con el objeto internoitpara manejar los mismos valores, a modo de alias o sinónimo. Difieren principalmente por el elementodoque se asigna dentro deitcomo alias detoal lanzarseonMounted. También podría usarse enonBeforeMountaunque esto dependería de la dinámica del componente.
Un componente aún más simple correspondería al estilo común de Riot, basicamente: export default {...} que es el estándar de esta librería.
Para efectos del script principal que invoca los componentes o gestiona las rutas de un módulo de aplicación, se tiene el siguiente ejemplo.
'use strict';
import * as riot from 'riot';
import route from 'riot-route';
import FormDummy from '../views/bit/form-dummy.riot';
const element = '#onmind';
riot.register('form-dummy', FormDummy);
riot.mount(element, null, 'form-dummy');
© 2019 by César Arcila