Exploring JavaScript MV Frameworks Part 1 – Hello Backbonejs

JavaScript se ha convertido en uno de los lenguajes de programación más populares en la web. Al principio, los desarrolladores no lo tomaron en serio, simplemente porque no estaba destinado a la programación del lado del servidor.

Katie Mikova Last Updated Feb 21, 2025 14min read

Era un error común entre los desarrolladores profesionales que este lenguaje estaba destinado a "aficionados", ya que se centraba solo en la interfaz de usuario. JavaScript se convirtió en el centro de atención cuando el uso de Ajax salió a la luz y los programadores profesionales dieron importancia a la capacidad de respuesta de la página. Pero ahora el lenguaje se ha vuelto más popular que nunca, ya que la experiencia del usuario se ha convertido en la parte clave del desarrollo web. El acceso a la web no se limita solo a los navegadores: hay muchos dispositivos con diferentes tamaños de pantalla que acceden al mismo contenido. Con el auge de HTML5 y CSS3, la web se volverá más adaptable y receptiva que nunca, y JavaScript juega un papel importante en ello. También ha ganado popularidad en la programación del lado del servidor, lo que es posible gracias al marco NodeJS.

El aumento en el uso de JavaScript en las aplicaciones modernas exige que los desarrolladores escriban código que se pueda mantener, separen las preocupaciones y mejoren la capacidad de prueba. JavaScript es un lenguaje sin "clase" y no fue diseñado para soportar la Programación Orientada a Objetos, sin embargo, puede lograr resultados similares mediante soluciones alternativas. Entonces, si eres un desarrollador de un mundo de Programación Orientada a Objetos, te resultará difícil hasta que te acostumbres. Aunque hay algunas bibliotecas de manipulación de DOM como jQuery que simplifica el scripting del lado del cliente de HTML, en realidad no resuelven el problema de manejar eficazmente la separación de preocupaciones. Terminarás escribiendo muchos selectores de jQuery y devoluciones de llamada para mantener los datos sincronizados entre el HTML, JavaScript y los datos obtenidos del servidor y todavía estamos atrapados con el código Spaghetti.

Afortunadamente, hay algunas bibliotecas y frameworks que vienen al rescate. ¡Exploremos algunos conceptos y bibliotecas que ayudan a estructurar aplicaciones de JavaScript!

Esta publicación es la primera parte de una serie de blogs sobre marcos y bibliotecas de JavaScript y exploraré BackboneJS aquí. ¡Estén atentos para los demás!

¿Qué es MV*?

Aunque todos los marcos de trabajo intentan ser MVC, no necesariamente siguen el patrón estrictamente. La idea de todos los patrones es separar el Modelo, la Vista y la Lógica que engancha los dos detrás de los cuales está el controlador. Sin embargo, BackboneJS incrusta la lógica del controlador en la propia vista, aunque mantiene la separación de manera eficiente. Por otro lado, tenemos otras bibliotecas que implementan los patrones Model-View-Presenter (MVP) y Model-View-ViewModel (MVVM). Por esta razón, nos referiremos a estos marcos como implementación MV*.

¿Qué es MVC?

Modelo – Vista – Controlador es un patrón arquitectónico que existe desde hace mucho tiempo y se utiliza ampliamente en la programación del lado del servidor. Hay algunos frameworks como ASP.net MVC, Ruby on Rails, etc. que ayudan a los desarrolladores web a programarlos fácilmente.

Modelo: se refiere a los datos de la aplicación y las reglas de negocio. (también conocido como modelo de dominio, entidades)

Ver: ¡lo que ve el usuario! (Página HTML en el navegador web)

Controlador: mediador entre los dos. Manipula el modelo en función de la interacción del usuario. Maneja toda la lógica.

Image Source: Wikipedia

MVC In JavaScript?

La creación de aplicaciones de una sola página con JavaScript se está volviendo popular en estos días y buenos ejemplos de ellas son GMail y Google Docs. Cuando te propones construir este tipo de aplicaciones, lo más probable es que inventes muchas de las piezas que componen un paradigma de codificación MV*. Entonces, en su lugar, puede hacer uso de algunas de las bibliotecas famosas como BackboneJS, KnockoutJS, AngularJS, EmberJS.... Exploremos estos marcos en detalle, comenzando con BackboneJS.

¿Marco o simplemente una biblioteca?

Antes de elegir trabajar en un marco de JavaScript o una biblioteca en particular, es importante comprender la diferencia entre los dos. Las bibliotecas simplemente se ajustan a su arquitectura existente y agregan una funcionalidad específica, mientras que un Framework le brinda una arquitectura y deberá seguir las reglas. Para que sea más sencillo para usted, Backbone y Knockout son bibliotecas de JavaScript y Ember y AngularJS son marcos. A medida que los exploremos, verá la clara diferencia.

Hello Backbone

Backbone es una biblioteca ligera de JavaScript creada por Jeremy Ashkenas, también conocido por CoffeeScript. Está diseñado para admitir aplicaciones web de una sola página y depende de la biblioteca UnderscoreJS, que proporciona funciones de utilidad para tareas comunes de JavaScript.

Con Backbone, los datos se representan como modelos, que se pueden crear, validar y guardar en el servidor. Las vistas muestran el estado del modelo y se vuelve a representar cuando se desencadena un cambio (a través de un evento de "cambio") en el modelo debido a una interacción de la interfaz de usuario. De esta manera, Backbone proporciona un enfoque estructurado para mantener los datos sincronizados con la interfaz de usuario HTML.

Algunos de los principales sitios web que utilizaron Backbone incluyen USA Today, LinkedIn Mobile, Hulu, WordPress, Foursquare, Bitbucket, Khan Academy y más.

Primeros pasos con Backbone

Script Dependency

Backbone depende de UnderscoreJS o Lo-Dash para las funciones de utilidad y se basa en jQuery o Zepto para las manipulaciones del DOM. Así que asegúrate de agregarlos a tu página.

<script type="text/javascript" src="../common/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../common/lodash.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>

Backbone.Model

$(function(){
      var Person = Backbone.Model.extend({});
      var person = new Person({name: "James", age: 51});
      var name = person.get("name");
      var age = person.get("age");
      console.log(name + ":" + age);
});

Para crear una clase Model propia, extienda Backbone.Model y pase un objeto JavaScript al constructor y establezca los atributos. A continuación, puede recuperar fácilmente los valores de una función get. Alternativamente, puede establecer los atributos mediante una función set.

Backbone.View

Set a template first:

<script type="text/template" id="person-template">
    <div class="view">
        <p>Name: <input type="text" value="<%- name%>"/></p>
        <p>Age: <input type="text" value="<%- age%>"/></p>
    </div>
</script>

Establezca un contenedor para la representación:

<div id="container">Your content will load in a bit..</div>

Define a view in the script:

//define view
var AppView = Backbone.View.extend({
el: '#container',
model: person,
template: _.template($("#person-template").html()),
initialize: function(){this.render();},
render: function(){this.$el.html(this.template(this.model.toJSON()));}
});
// initialize view
new AppView();

Las vistas en Backbone son casi más convencionales que código, por lo que tendrá que confiar en alguna biblioteca de plantillas de JavaScript como plantillas de Underscore o Mustache.js para hacer una separación más limpia de la interfaz de usuario. En el ejemplo anterior, he utilizado la solución de plantillas de Underscore para lograr la separación.

Se pueden crear sus propias vistas personalizadas con la ayuda de Backbone.View.extend. Hay algunas propiedades básicas que debe tener en cuenta para establecer la vista.

el –DOM en el que se renderizará la vista. En este caso es el elemento <div> con el id "container"
$el –un objeto jQuery (o Zepto) almacenado en caché para el elemento de la vista
model : establezca los datos del modelo que se crearon con Backbone.Model
plantilla–La red troncal es independiente con respecto a su método preferido de plantillas HTML. En este caso, la función de plantilla de Underscore se utiliza para establecer la plantilla que se define en la "plantilla de persona"
initialize –esta función será llamada por Backbone en el momento de la creación de la vista
render: esta función se utiliza para representar el elemento con la plantilla de vista y los datos. En este caso, reemplazamos el valor en el "contenedor" con la vista con plantilla que consta de datos del modelo

Como se indica en la documentación de Backbone, la clase View también se puede considerar como una especie de controlador que envía eventos que se originan en la interfaz de usuario, con la plantilla HTML que sirve como la vista verdadera. Esto lleva a una discusión sobre si Backbone sigue o no los principios reales de MVC. Sin embargo, si no lo aprendes como una biblioteca MVC y le das importancia a la forma en que separa las preocupaciones, debería estar bien.

Hace un tiempo, Backbone sí tenía el suyo,Backbone.Controller pero se renombró como Router porque la denominación de este componente no tenía sentido por la forma en que se estaba configurando para usarse.

Tamaño del archivo, descarga y otros enlaces útiles

Tamaño del archivo: 6.3Kb - minificado y 56kb con fuente completa y comentarios.

Download: Backbone website

Annotated Source: http://backbonejs.org/docs/backbone.html

CDN: cdnjs, jsdelivr

¿Quién lo está usando?: Echa un vistazo a su sección de ejemplos

Estén atentos

Así que esa fue una introducción rápida a BackboneJS y una explicación sobre los frameworks de JavaScript en general. En las próximas publicaciones también se le presentará Ember, Knockout y Angular. ¡Así que estad atentos!

If you have any questions write to me nish@infragistics.com or find me on twitter @nishanil

Para esta publicación, asumo que eres un programador como yo y que el diseño es un planeta fuera de tu universo. Si eres del planeta del diseño, tú también puedes seguir leyendo; ¡Puede ser que también haya algo para ti!

Escribir CSS es divertido, emocionante y fácil hasta que tu sitio web engorda con páginas y diseños complicados. Si alguna vez has intentado arreglar un diseño en una página de este tipo, sabes a lo que me refiero. ¿Hablé de arreglar un diseño? Oh, sí, gracias a todos los navegadores.

Muchas veces, mientras escribía CSS, deseaba poder escribirlo de manera más programática que simplemente estilizarlos. Por ejemplo, si CSS hubiera permitido declaraciones de variables, podría simplemente haber mantenido los valores en variables, realizar pocas operaciones y reutilizarlos en propiedades. ¡Pero eso es demasiado pedir de un lenguaje de hojas de estilo que solo debería hacer estilo!

Afortunadamente, hay algunos preprocesadores como Sass & LESS que extienden muy bien CSS y agregan todo lo que un programador siempre quiso. Después de investigar un par de veces, elegí LESS para ver cómo funciona. Pasé unas horas rediseñando algunas de mis demos con LESS y debo decir que estoy completamente impresionado con este lenguaje. Así que aquí te explico sobre LESS.

So LESS

LESS es un lenguaje de hojas de estilo dinámico que extiende CSS y le agrega características agradables como variables, mezclas, operaciones y funciones. Y lo que es más importante, los desarrolladores necesitan menos esfuerzos para escribir CSS complejo y crear sitios web de aspecto increíble muy rápido. LESS utiliza la sintaxis CSS existente que hace que el aprendizaje sea muy sencillo y siempre puedes recurrir a CSS.

La primera versión de LESS fue escrita en Ruby y se utilizó como un lenguaje del lado del servidor que al compilar emitió CSS. Sin embargo, en las versiones posteriores, el uso de Ruby está obsoleto y reemplazado por JavaScript. Agregar LESS.js archivo JavaScript a su página HTML permite la compilación en tiempo real dentro de los navegadores. También es compatible con la compilación del lado del servidor con la ayuda de Node.js lo que facilita a los desarrolladores la elección entre los dos.

Adding Less.js – Client-Side Usage

Todos los archivos LESS deben tener la extensión ".less" y puede tenerlos en el directorio CSS de su servidor web.

Agregue las siguientes líneas de código a su página HTML para asegurarse de que la precompilación de CSS se realice en su navegador:

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less-1.3.3.min.js"></script>

Nota: Si está trabajando en un sistema de archivos local, es decir, si está accediendo a la página usando "file:///" en Chrome o IE, puede incurrir en un error de "Las solicitudes de origen cruzado solo son compatibles con HTTP" o "Acceso denegado" respectivamente. Estos son algunos errores relacionados con la seguridad y no encontré la manera de deshacerme de ellos. Alójalos en un servidor de desarrollo y verás que esto desaparece. Sin embargo, no encontré ningún problema con Mozilla Firefox.

Server Side Usage

Si el rendimiento es lo que se ejecuta en su mente, entonces puede considerar compilar estos archivos en el lado del servidor. Primero, descargue e instale Node.js, luego use npm descargue el compilador (lessc.cmd).

Para compilar, use este comando:

lessc styles.less > styles.css

Para obtener más opciones como la minimización de CSS, ejecute lessc sin parámetros.

Hay pocos editores agradables que te permitan compilar estos archivos en vivo. Por ejemplo, uso WebStorm, que compila muy bien LESS a CSS a medida que escribo. Si está en un proyecto grande y la mayoría de sus desarrolladores se sienten cómodos con LESS, puede agregar el paso de compilación del lado del servidor a su tarea de compilación.

Ahora que sabes cómo hacer archivos ".less" y compilarlos en CSS, veamos este lenguaje en detalle.

variables

Como se mencionó anteriormente, las variables son una buena característica para tener en las hojas de estilo. LESS le permite agregar variables con la ayuda del símbolo @ y usarlas en propiedades. A continuación encontrará un ejemplo en el que establezco el color de fondo y el color del cuerpo con la ayuda de variables.

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

Estas variables ahora se pueden reutilizar en el resto del código y cualquier cambio que realice en el color se aplicará a todas. Los códigos CSS pueden coexistir con LESS: si observa que solo dos de las propiedades fueron establecidas por variables y el resto es CSS.

Operaciones

Ahora que sabes que las variables son una posibilidad en la hoja de estilo, debes estar contento de saber que puedes realizar operaciones con ellas. ¡Es fácil! Aquí hay un ejemplo de cómo hacerlo:

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

Eche un vistazo a cómo @backgroundColor, @color y font-size obtiene el valor calculado de una operación. Encuentre a continuación la salida que se genera.

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

Los mixins te ayudan a reutilizar todo el conjunto de propiedades de un conjunto de reglas en otro conjunto de reglas. He aquí un ejemplo:

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

En el código anterior, puede ver cómo se reutiliza el conjunto de reglas .gradients en #body. Es una característica bastante buena, ¡piensa en cuánto menos código necesitas escribir ahora!

Alcance variable

Al igual que cualquier otro lenguaje de programación, LESS también proporciona un alcance variable. Las variables se buscan localmente primero y, cuando no se encuentran, se buscan globalmente. En el ejemplo anterior, puede ver que el @baseColor se utiliza en ambos.gradientes y #body. Si tiene variables de ámbito local como @gradientStartColor y @gradientEndColor no se puede acceder a ellas fuera del ámbito a menos que estén mezcladas. En el ejemplo anterior #body puede acceder a esas variables dentro de ya que se hace referencia a.gradients.

Echa un vistazo a Scope para obtener más información.

Parametric Mixins

Este es un tipo especial de conjunto de reglas que se puede mezclar en clases similares, pero acepta parámetros. A continuación, se muestra un ejemplo que configura el radio de borde para diferentes navegadores.

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

Si te fijas #body llama sin parámetros, eso se debe a que LESS permite establecer valores predeterminados de parámetros, que en este caso es 4px. Mire en #sidebar para llamar con parámetros. También puede establecer varios parámetros, consulte esto para obtener más información.

Funciones

LESS proporciona pocas funciones auxiliares para transformar colores, manipular cadenas y hacer cálculos. A continuación encontrará un ejemplo de la documentación de LESS que utiliza el porcentaje para convertir de 0,5 a 50%, aumenta la saturación de un color base en un 5% y luego establece el color de fondo en uno que se aclara en un 25% y gira en 8 grados:

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

Consulte la Referencia de funciones para obtener más detalles.

Resumen

A estas alturas ya tendrías una idea clara de lo que LESS aporta a la mesa. Pero tenga en cuenta que LESS no es el único preprocesador de CSS. Está Sass, que significa hojas de estilo sintácticamente impresionantes y algunas otras, pero no son populares. Hay varios blogs que te harán una buena comparación entre los dos. ¡Te sugiero que pruebes ambos y te ciñas a la sintaxis que te guste! Al fin y al cabo, emiten CSS Smile

¿Tienes algún comentario? Encuéntrame en twitter @nishanil

Cómo