Arquitectura MVC en FrontEnd

readme.md

Arquitectura MVC en FrontEnd

Crear un arquitectura mvc utilizando javascript en frontend para organizar el código.

1. Objetivo y descripción
2. Dependencias
3. Puesta en marcha
4. Referencias
5. Créditos y autor

Objetivo y descripción

La arquitectura de desarrollo de software MVC es una de las más difundidas y utilizadas ya que permite separar el código en capas y y diferentes lógicas. El objetivo principal es crear una arquitectura MVC que permita organizar el código de frontend y trabajar con componentes reutilizables.

Dependencias

• JavaScript - JavaScript is a dynamic computer programming language.[5] It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user.

Puesta en marcha

Paso 1: Identificando componentes.

• M ( Model):
  Es el componente que abstrae los datos del servidor y permite manipularlos.
• V (View): Es el componente que se encarga de gestionar los elementos de la interface de usuario.
• C (Controller): Es el componente que se encarga de gestionar los eventos e interaccion entre los dos componentes y los usuarios.

Paso 2: Delimitando tareas por componente.

• Model
  • Gestionar el acceso a los modelos de datos.
  • Gestionar el procesamiento de los modelos de datos.
  • Gestiona las peticiones al servidor de modelos de datos.
• View
  • Gestiona los elementos de la interface grafica (botones, listas, etc).
  • Despliega la informacion de los modelos.
• Controller
  • Escuchar los eventos de la interface de usuario.
  • Hacer las peticiones a los modelos de los datos.
  • Ejecutar las acciones en las vistas.

Paso 3: Estructurando el modelo.

• Creamos el archivo model.js dentro de la carpeta public/j que contendrá el código del modelo.
• Primero vamos a colocar la definición básica del modelo.
• Una buena práctica es fijar el modelo al objeto window para que sea global y podamos instanciarlo en otro archivo.

// public/js/model.js
(function (window) {

	'use strict';

    // Constructor
    function Model(defaultParams) {
		this.defaultParams = defaultParams;
	}

    // Create
    Model.prototype.create = function () {
		// ... actions to create
	};

    // Delete
    Model.prototype.delete = function () {
		// ... actions to delete
	};

    // List
    Model.prototype.list = function () {
		// ... actions to list
	};

    // Export to window
	window.app = window.app || {};
	window.app.Model = Model;

})(window);

Paso 4: Estructurando la vista.

• Creamos el archivo view.js dentro de la carpeta public/j que contendrá el código de la vista.
• Primero vamos a colocar la definición básica de la vista.
• Algunas de las tareas principales de la view es cachar los selectores y declarar las funcionalidads.

// public/js/view.js
(function (window) {

	'use strict';

    // Constructor
    function View(defaultParams) {
		this.defaultParams = defaultParams;
        this._cacheElements();
	}

    // Cache elements
    View.prototype._cacheElements = function () {
		// ... cache elements
	};

    // Delete element
    Model.prototype.deleteElement = function () {
		// ... actions to delete
	};

    // Export to window
	window.app = window.app || {};
	window.app.View = View;

})(window);

Paso 5: Estructurando el controlador.

• Creamos el archivo controller.js dentro de la carpeta public/j que contendrá el código del controlador.
• Primero vamos a colocar la definición basica del controlador.
• Recordando que el controlador es el que lleva toda la aplicación este será el que tenga que llamar al modelo y a la vista cuando sean requeridos.
• Algunas de las tareas principales del controlador son registrar los eventos y procesar y mandar a llamar a las acciones tanto en la view como en el modelo.

// public/js/controller.js
(function (window) {

	'use strict';

    // Constructor
    function Controller(model, view) {
    	this.model = model;
        this.view = view;
        this._bindEvents();
	}

    // Cache elements
    View.prototype._bindEvents = function () {
    	this.view.element1.on("click", this.deleteElement.bind(this));
		// ... cache elements
	};

    // Delete element
    Model.prototype.deleteElement = function () {
    	// Call delete model function
        this.model.delete(params);
        this.view.deleteElement(params);
		// ... actions to delete
	};

    // Export to window
	window.app = window.app || {};
	window.app.Controller = Controller;

})(window);

Paso 5: Inicializando la aplicacion.

• Creamos el archivo app.js dentro de la carpeta public/j que contendra el código de inicialización de la aplicación.
• Hay que denotar que este archivo se auto ejecuta cuando se carga en el navegador.
• Este archivo será el encargado de inicializar los componentes modelo, view y pasarlos al controlador.

// public/js/app.js
(function () {

	'use strict';

	// Constructor
	function App() {
		this.model = new app.Model(params);
		this.view = new app.View(params);
		this.controller = new app.Controller(this.model, this.view);
	}

	function initApp() {
		var app = new App();
	}
	$on(window, 'load', initApp);
})();

Referencias

• Projecto ToDoMVC:
  • ToDoMVC
• Lenguajes basados en clases frente a basados en prototipos:
  • Prototipos Mozilla Developer Network
• Javascript Object Oriented:
  • JavaScript Orientado a Objectos

Créditos y autor

• Autor del snippet: Mario Andrade @TheVansters
• Los snippets pertenecen a KamikazeLab