Slide 1

Slide 1 text

Be modular, be decoupled...

Slide 2

Slide 2 text

@andru255 from @frontendlabs

Slide 3

Slide 3 text

el problema

Slide 4

Slide 4 text

➔ Administrador de módulos ➔ Código mantenible ➔ Mantiene tus aplicaciones escalables ➔ Una librería desarmable (por sus componentes) ➔ Liviano (~10kb) yOSONJS

Slide 5

Slide 5 text

Principios de yOSON ➔ ¿Qué es un módulo? ➔ ¿A qué se orienta yOSON en el patrón modular? ➔ ¿Por qué usar ese patrón?

Slide 6

Slide 6 text

Qué es un módulo? Es una unidad funcional independiente que es parte de la estructura en tu aplicación. módulo aplicación

Slide 7

Slide 7 text

Los motivos por el uso de este patrón es: yOSON en el uso del patrón modular mantenibilidad portabilidad desacoplado

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

var yOSON = { module: "default", controller: "index", action: "index" }; y O S O N Variables que deben proveerse por lado back.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Flujo de ejecución Funcionalities schema _runModule( ) Sequencial DependencyManager ModularManager Gestiona dependencias Gestiona modulos Ejecución en cola

Slide 14

Slide 14 text

yOSON in action Ejemplos de uso...

Slide 15

Slide 15 text

Preguntas.

Slide 16

Slide 16 text

Gracias :)