yOSONJS intro

yOSONJS basic use and workflow.

Transcript

1. Be modular, be decoupled...
2. @andru255 from @frontendlabs
3. el problema
4. ➔ Administrador de módulos ➔ Código mantenible ➔ Mantiene tus aplicaciones escalables ➔ Una librería desarmable (por sus componentes) ➔ Liviano (~10kb) yOSONJS
5. Principios de yOSON ➔ ¿Qué es un módulo? ➔ ¿A qué se orienta yOSON en el patrón modular? ➔ ¿Por qué usar ese patrón?
6. Qué es un módulo? Es una unidad funcional independiente que es parte de la estructura en tu aplicación. módulo aplicación
7. Los motivos por el uso de este patrón es: yOSON en el uso del patrón modular mantenibilidad portabilidad desacoplado
8. Características ➔ Uso del patrón modular ➔ Ejecución síncrona de módulos ➔ Manejo de versionado de dependencias ➔ Manejo de cache de dependencias ➔ Ejecución de módulos por vistas ➔ Por defecto para uso con MVC
9. Estructura de un módulo yOSON yOSON.AppCore.addModule("module-gallery", function(Sb){ var welcome = function(){ document.body.innerHTML = "bye bye bad code"; }; return { init: function(){ welcome(); } } }, ["dependency-fancybox.js"]); 1 4 3 5 2 1. Un nombre como identificador. 2. Entidad conocida como sandbox 3. Métodos privados 4. Métodos públicos tanto obligatorios como opcionales 5. Dependencias
10. var yOSON = { module: "default", controller: "index", action: "index" }; y O S O N Variables que deben proveerse por lado back.
11. var schema = { 'modules':{ 'allModules': function(){ //alert("sector donde corre sin importar el nombre del modulo"); }, 'usuario':{ 'allControllers': function(){ //alert("sector donde corre sin importar el nombre del controller en el modulo usuario"); }, 'controllers':{ 'aviso': { 'allActions':function(){ //alert("corre sin importar si hay actions o no"); }, 'actions':{ 'dashboard': function(){ yOSON.AppCore.runModule("demoA"); yOSON.AppCore.runModule("demoB"); }, 'byDefault':function(){ //alert("si no existe un action, este action corre por defecto"); } } }, 'byDefault': function(){ //alert("si no existe un controller debería ser por default este controller"); } } }, 'byDefault': function(){ //alert('corriendo modulo por defecto'); } S C H E M A
12. var objLoader = new yOSON.Components.Loader(schema); objLoader.init(yOSON.module, yOSON.controller, yOSON.action); L O A D E R Instanciamos el lector del schema en la vista
13. Flujo de ejecución Funcionalities schema _runModule( ) Sequencial DependencyManager ModularManager Gestiona dependencias Gestiona modulos Ejecución en cola
14. yOSON in action Ejemplos de uso...
15. Preguntas.
16. Gracias :)