¿Por qué aprender Marionette.js?

Por Julio Giampiere Grados Caballero
¿Por qué aprender Marionette.js?

Marionette es una librería para aplicaciones web, complementaria a Backbone.js que simplifica y mejora la construcción de aplicaciones JavaScript de gran escala, de lado del cliente. Te invitamos a conocer por qué deberíamos aprender a utilizarla.

Marionette es una librería para aplicaciones web, complementaria a Backbone.js que simplifica y mejora la construcción de aplicaciones JavaScript de gran escala, de lado del cliente.

Es importante resaltar que en la actualidad, el desarrollo de aplicaciones de gran escala es cada vez mayor, y que Backbone no logra cubrir todas nuestras necesidades; es por ello que más de una persona ha empezado a buscar algún complemento para Backbone, como Marionette, la principal librería que añadida a nuestras aplicaciones web junto con Backbone, nos entrega una serie de funciones y utilidades.

Marionette se trata de una colección de patrones de diseño e implementaciones comunes que se encuentran en las aplicaciones.

Backbone ofrece un gran conjunto de bloques de construcción para nuestras aplicaciones de JavaScript. Proporcionando las construcciones básicas que se necesitan para implementar pequeñas aplicaciones, organizar eventos DOM de jQuery, o crear aplicaciones de una sola página que apoyan los dispositivos móviles y las necesidades empresariales. Pero Backbone no es una librería completa, deja mucho de lado, como el diseño de las aplicación por parte de la arquitectura y escalabilidad, de igual manera la gestión de memoria, vista de administración, y más, no son muy considerados.

Marionette trae una arquitectura de aplicaciones, junto con la construcción de vistas de administración y gestión de la memoria. Está diseñado para ser una librería ligera y flexible, contando con herramientas que se complementan junto con Backbone, las cuales proporcionan el marco para la construcción de una aplicación escalable, ofreciendo:

Application. En Marionette, es necesario crear una aplicación, que será el contenedor para el resto de código. Es recomendado para cada aplicación marionette tener al menos una instancia de aplicación.

- Regiones. Proporcionan utilizar un selector de jQuery para mostrar vista en el lugar correcto dentro del DOM

- ItemView. Un ItemView es una vista que representa un solo elemento. Ese elemento puede ser un Backbone.Model o puede ser un Backbone.Collection. Sea lo que sea sin embargo, serán tratados como un solo elemento. Marionetas tiene una clase Marionette.View que es la base sobre la que otras vistas se extienden. Esta vista base proporciona algunas funcionalidades y el núcleo para otras vistas a aprovechar.

- CollectionView. Un CollectionView es una vista que representa un conjunto de modelos, que representan a una colección. Por defecto, el CollectionView mantendrá la orden de una colección ordenada en el DOM.

- CompositeView. Un CompositeView se extiende desde CollectionView para ser utilizado como una vista compuesta para escenarios donde debe representar tanto un collectionview y itemview en una estructura del DOM, o para escenarios donde un colección tiene que ser dictada dentro de una plantilla de envoltura. Por defecto, el CompositeView mantendrá la orden de una colección a mostrar en el DOM.

LayoutView. Son ideales para la prestación de los diseños de aplicaciones con múltiples sub-regiones.  Puede actuar como una vista compuesta para agregar múltiples vistas.

Módulos. Un módulo permite crear la lógica de la aplicación de encapsulamiento modular. Se pueden utilizar para dividir aparte grandes aplicaciones en varios archivos, y construir componentes individuales de su aplicación.

Sub-Módulos. Permite crear módulos para casos en particular que necesitemos en las aplicaciones web.

Router. Nos permite reducir el código repetitivo de manejar eventos de ruta y luego llamar a un solo método en otro objeto.

Controller. Permite tener el control de acuerdo al llamado de una ruta, para mostrar determinados datos en las vistas representativas.

Rendering. Marionette tiene un trabajo profundo sobre la renderización de las vistas, a diferencia de Backbone View, todas las vistas de Marionette vienen con un potente método render.

Nota. Es importante tener claros los conceptos de Backbone, antes de introducirnos en el mundo de Marionettejs. 

 

 

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.