Share
Trabajé como diseñador gráfico hace unos años y un problema común con el que me encontraba era escoger esquemas de color para nuevos proyectos. Uno de mis colegas dijo, "Solo elige una bonita foto y toma los colores de ahí". Esta técnica funciona bien porque las fotos te ofrecen una combinación natural de colores. Así que estaba pensando: "¿Por qué no transferir este mismo concepto a mi trabajo como programador?". Y aquí es donde entra en juego Organic. Cuando me introduje por primera vez en Organic, me sorprendió lo simple que era y, al mismo tiempo, lo flexible que es su enfoque. Finalmente, tuve algo que fomenta la programación modular, es tan útil como el patrón MVC y es una gran herramienta para la arquitectura..
Como habrás adivinado, el concepto orgánico se basa en la biología. Su aplicación principal actúa como un Célula, que tiene un Membrana y un Núcleo. Pero el verdadero trabajo de una célula es hecho por el Orgánulos, que se comunican entre sí con Productos quimicos. Por supuesto, los elementos y los procesos en Orgánico no son 100% idénticos a las células de la vida real, pero están bastante cerca. Ahora, sé que parece una locura, pero una vez que comience a trabajar con él, verá lo sencillo y natural que puede ser este enfoque cuando lo aplica a sus aplicaciones..
Organic se distribuye como un módulo Node. Así que deberías tener instalado NodeJS. Si no lo hace, vaya a nodejs.org y obtenga la última versión para su sistema operativo. Tu paquete.json el archivo debería verse así:
"name": "OrganicDevelopment", "version": "0.0.0", "description": "Desarrollo orgánico", "dependencies": "organic": "0.0.11", "author": "Your Nombre aquí "
correr npm instalar en el mismo directorio y el administrador descargará los archivos necesarios. El núcleo de Organic es en realidad bastante pequeño. Solo contiene la definición de los elementos principales: célula, núcleo, membrana, plasma, orgánulo, químico y ADN. Por supuesto que viene con algunas pruebas, pero es un paquete pequeño en general. Esto ayuda a que sea fácil de aprender y comenzar a desarrollar con casi inmediatamente.
Para este artículo, decidí crear un sitio web simple utilizando solo el núcleo de Organic. El código fuente se puede descargar en la parte superior de este artículo, si desea seguirlo. Creo que esta aplicación de ejemplo es la mejor manera de presentar este nuevo patrón. El sitio contiene dos páginas. - Casa y Acerca de. Aquí hay una captura de pantalla del sitio:
La aplicación contiene dos botones que enlazan a las dos páginas diferentes. los Acerca de La página tiene un poco más de texto que el Casa la página hace. Bastante simple, pero veamos que hay detrás de las cortinas. Aquí hay un diagrama que muestra el flujo de solicitudes básicas de nuestra aplicación:
El usuario envía una solicitud a nuestra aplicación NodeJs. El Servidor acepta la solicitud y la envía al Enrutador. Después de eso, el Render sabe qué página debe usarse y devuelve una respuesta al Servidor. Al final, la respuesta se envía al usuario..
Hay un elemento adicional, los Proveedores de datos, que prepara el CSS o JavaScript necesario para el Render (tenga en cuenta que en nuestra aplicación de ejemplo no usé JavaScript, solo hay un módulo CSS).
Así es como se vería nuestra aplicación como una célula, en orgánico:
En la célula, tenemos una membrana que mantiene los elementos internos alejados del mundo exterior. Dentro de esta membrana es donde colocaremos nuestro primer órgano, nuestro Servidor, porque aquí es donde los datos pueden entrar o salir de nuestra aplicación. Los otros orgánulos (Router, Render y CSS) se colocan en el plasma. Todos estos módulos se comunican entre sí a través de productos químicos (solicitud, página y css, marcado en rojo). El servidor emite un solicitud químico. El enrutador emite un página y el organel CSS envía el css. También debo mencionar que el plasma actúa como un bus de eventos para los químicos. Los orgánulos escuchan una sustancia química en particular y, si los encuentran, reaccionan.
Aquí hay otro diagrama de flujo de solicitud, pero esta vez con los productos químicos que se emiten (marcados en rojo):
Ahora, si este concepto aún no está claro para usted, no se preocupe, ya que avanzamos a través de las siguientes secciones y entramos en el código real, debería comenzar a tener más sentido.!
Todo comienza con el ADN (ácido desoxirribonucleico), que se puede considerar como una configuración de células. Este ADN es donde definirás tus orgánulos y sus configuraciones..
Vamos a crear un nuevo index.js Archivar y poner en el siguiente código:
Accentsconagua
var ADN = requiere ("orgánico"). ADN; var Célula = requiere ("orgánico"). Célula; var dna = nuevo ADN (membrana: Servidor: fuente: "membrana.Servidor", plasma: Enrutador: fuente: "plasma.Router", CSS: fuente: "plasma.CSS", archivo : "./css/styles.css", Render: source: "plasma.Render", templates: "./tpl/"); célula var = célula nueva (ADN); El código anterior es solo una definición para la inicialización del ADN y la célula. Como puede ver, hemos colocado nuestro Servidor en la membrana y el Enrutador, CSS y Render en el plasma, como vimos en la sección anterior. los fuente la propiedad es realmente obligatoria y contiene el camino a sus orgánulos individuales.
Tenga en cuenta que la expediente propiedad en el organel CSS y la plantillas Las propiedades en el organel Render son en realidad propiedades personalizadas, que yo establezco. Puedes agregar cualquier personalización que necesites aquí también..
Y solo para su referencia, la estructura de directorios de su aplicación debería tener este aspecto:
/ css /styles.css / membrane /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl
Químico var = requiere ("orgánico"). Químico; var Organel = require ("organic"). Organel; var util = require ("util"); module.exports = function YourOrganelName (plasma, config) Organel.call (this, plasma); // su lógica personalizada aquí util.inherits (module.exports, Organel); El código anterior muestra el formato básico para crear un organel. Si quieres usar esto.emit o Esto en necesitará asegurarse de heredar Organel como hicimos anteriormente. Y en realidad, la plasma variable de parámetro tiene exactamente los mismos métodos (emitir y en), para que pudieras usar plasma directamente y sáltate la herencia si quisieras.
Además, note la configuración parámetro; Este es el objeto que definió en su ADN, que es un buen lugar para cualquiera de sus configuraciones personalizadas..
El servidor es su organismo principal, que acepta solicitudes y envía respuestas al navegador. Así es como debería verse tu órgano servidor:
puerto var = 3000; module.exports = function Server (plasma, config) Organel.call (this, plasma); var self = esto; http.createServer (function (req, res) console.log ("request" + req.url); self.emit (new Chemical (type: "request", req: req), function (html) res .writeHead (200); res.end (html););). listen (puerto, '127.0.0.1'); console.log ('Servidor que se ejecuta en http://127.0.0.1:' + puerto + '/'); Dos cosas están sucediendo aquí. La primera es la definición del servidor NodeJS, que por supuesto tiene un controlador que acepta la solicitud (req) y la respuesta (res) objetos. Una vez que se recibe la solicitud, el órgano servidor envía un producto químico, con el tipo solicitud, Notificando al resto de los orgánulos. También se adjunta el req objeto, de modo que quien necesite más información sobre la solicitud entrante puede acceder a los datos del producto químico directamente.
los emitir El método luego toma un segundo argumento que es una función de devolución de llamada. Puede usar esto para devolver el flujo al organel, que envía el producto químico. Es decir. Una vez que el Render termina su trabajo, llama a la devolución de llamada del servidor. Toma el HTML producido y usando el res El objeto envía la página al usuario..
Para nuestro próximo órgano, el Router solo escucha una solicitud Producto químico, que es enviado por el servidor. Obtiene la URL de la req objeto y decide qué página debe mostrarse. Aquí está el código para el enrutador:
module.exports = function Router (plasma, config) Organel.call (this, plasma); var self = esto; this.on ("request", función (química, remitente, devolución de llamada) var page = chemical.req.url.substr (1, chemical.req.url.length); page = page == "" || page = = "/"? "home": page; self.emit (nuevo producto químico (type: "page", page: page, ready: callback));); Ahora, el enrutador solo emite un nuevo químico con un tipo de página. Tenga en cuenta que hay otros dos organismos que también escuchan este químico, pero por defecto, no se transfiere a todos los otros elementos en el plasma. Por supuesto, puede haber ocasiones en las que necesite dicha funcionalidad. Para hacerlo, solo necesitas falso retorno; En el oyente de la química. Veremos esto en acción en la siguiente sección..
module.exports = function CSS (plasma, config) Organel.call (this, plasma); var cssStyles = fs.readFileSync (config.file) .toString (); var self = esto; this.on ("page", function (chemical) self.emit (new Chemical (type: "css", value: cssStyles)); return false;); Este módulo es solo un simple organel de una tarea que obtiene el camino hacia el .css archivo, lo lee, y más tarde emite un producto químico que contiene los estilos CSS reales. Además, preste atención a la falso retorno; declaración en la parte inferior. Como dije en la sección anterior, es importante hacer esto, de lo contrario, el Render no recibirá la página Producto químico enviado por el Router. Esto sucede porque el organel CSS se define antes de la representación en el ADN.
Y por último, aquí está el código para nuestro organel Render:
module.exports = function Render (plasma, config) Organel.call (this, plasma); var getTemplate = function (file, callback) return fs.readFileSync (config.templates + file); var formatTemplate = function (html, templateVars) for (nombre var en templateVars) html = html.replace ("" + nombre + "", templateVars [nombre]); devolver html; var templates = layout: getTemplate ("layout.html"). toString (), home: getTemplate ("home.html"). toString (), about: getTemplate ("about.html"). toString (), notFound: getTemplate ("notFound.html"). toString () var vars = ; var self = esto; this.on ("css", function (chemical) vars.css = chemical.value;); this.on ("page", function (chemical) console.log ("Opening" + chemical.page + "page."); var html = templates [chemical.page]? templates [chemical.page]: templates. notFound; html = formatTemplate (templates.layout, content: html); html = formatTemplate (html, vars); chemical.ready (html);); Hay dos métodos de ayuda aquí: GetTemplate y formatTemplate que implementa un motor de plantillas simple para cargar un archivo HTML externo y reemplazar variables de estilo bigote. Todas las plantillas se almacenan en un objeto para un acceso rápido. Luego tenemos solo unas pocas líneas para el formato HTML y luego todo está listo para funcionar. El organel Render también escucha por css química y por último la aplicación proporciona una extraviado 404 páginas, si es necesario.
Así que aquí está la estructura de directorios de la aplicación final:
/ css /styles.css / membrane /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl /about.html /home.html /layout.html /notFound.html
Simplemente correr nodo index.js en la consola y deberías ver algo similar a esto:
Con su servidor en funcionamiento, ahora debería poder visitar http://127.0.0.1:3000 en tu navegador favorito Intente hacer clic en los enlaces para alternar entre las dos páginas varias veces y luego vuelva a la consola para ver el resultado..
Debería ver un buen informe sobre la actividad reciente de las aplicaciones. Ahora también puedes notar algo más en la consola:
solicitud /favicon.ico apertura de la página favicon.ico.
Puedes ver que hay una solicitud más que viene del navegador. Quiere cargar favicon.ico. Sin embargo, nuestro pequeño sitio no tiene un ícono de este tipo, por lo que simplemente abre la página 404. Puedes probar esto por ti mismo visitando: http://127.0.0.1:3000/favicon.ico.
Si desea consultar el código fuente completo de este tutorial, puede descargarlo utilizando el enlace de descarga en la parte superior de esta página..
En mi opinión, lo orgánico es un gran concepto. Es muy flexible y anima a producir mejores aplicaciones. Tenga en cuenta que el ejemplo de este artículo se basa en mi experiencia personal con otros patrones de diseño. Por lo tanto, mi uso de términos como Enrutador, Proveedor de datos o Render es completamente opcional y puede cambiar los nombres como mejor le parezca. Siéntase libre de experimentar creando nuevos módulos basados en Organic y hágame saber lo que piensa en los comentarios.!
El núcleo de Organic está desarrollado por Boris Filipov y Valeri Bogdanov, y recomiendo encarecidamente que los visites en Github. Si estás interesado en usar Organic, encontrarás cosas como Angel y WebCell que también son útiles..
