Creación de un Widget JavaScript usando Backbone.js y Require.js

Creación de un Widget JavaScript usando Backbone.js y Require.js

Índice

Introducción

Hace un tiempo participé en un proyecto que me hizo darme cuenta que mi forma de programar en JavaScript era más parecido a programación espagueti, que a un código que siga patrones de diseño, fácilmente comprensible, modular, mantenible, testeable.

Mi código Javascript realizaba su función correctamente usando JQuery y JSON, pero repito, no era un código de calidad, ¿lo es el tuyo?

En este tutorial vamos a crear una aplicación JavaScript tipo Widget usando las siguientes tecnologías:

  • Backbone: Para crear la aplicación siguiendo el patrón Modelo-Vista-Controlador.
  • RequireJS: Para descomponer en módulos (AMD) la aplicación (modelos, vistas, controladores) con sus dependencias gestionadas por RequireJS.
  • Plantillas (Templating): Usaremos el sistema de plantillas (html) que tiene por defecto Backbone y que se basa en underscore.
    Las plantillas no estará hardcodeada en el código fuente, sino que estarán en un archivo de texto independiente que será cargado por el plugin text.js de RequireJS.
  • Internacionalización de cadenas (i18n) Los mensajes que genere la aplicación estarán internazionalizados usando el plugin i18n.js de RequireJS.
NOTA IMPORTANTE:

Este tutorial está dirigido a personas que ya tengan conocimientos sobre JavaScript, JQuery, Undescore, Require.js y Backbone.
Lo publico para que sirva de guia de consulta, pues hay muy pocos ejemplos en donde se puedan ver estas tecnologías trabajando juntas.

Si no es tu caso y te interesa aprender te recomiendo que veas la sección refererencias en la parte inferior de este tutorial.

Aplicación a construir. Ver aplicación en vivo

Captura de pantalla de la aplicación a construir:

Los requisitos funcionales son:

Una actividad tiene:

  • Un enunciado y un numero indeterminado de palabras a ser organizadas según las instrucciones del enunciado.
  • El usuario podrá responder haciendo click en la palabra (en cuyo caso se colocará en el primer hueco libre), arrastrándola o escribiéndola directamente.
  • Un tiempo máximo en segundos para ser contestada, pasado ese tiempo el usuario ya no podrá responder. Además cuando queden 20 segundos el contador cambiará a color rojo.
  • Un número máximo de intentos, además el indicador de número de intentos cambiará a rojo al primer fallo que cometa el usuario.
  • Al hacer clic en cancelar se borrarán todas las respuestas que el usuario habia dado hasta el momento.
  • Al hacer clic en la X se borrarán todas las respuestas asociada.
  • La aplicación deberá controlar que el usuario no introduzca palabras que no formen parte del enunciado previniéndose así errores de introducción de datos.

Código fuente de la aplicación

Captura de pantalla de la estructura de archivos y directorios:

El HTML que importa el JS principal de la aplicación

El Widget JavaScript se autoenlazará al DOM en la capa con id “activity-container”.

sortwords.html

El JS principal de la aplicación

resources/js/activities/sortwords/sortwords.js

Modelo de la aplicación

resources/js/activities/sortwords/models/actitity.js
resources/js/activities/sortwords/models/sortWordsActitity.js
resources/js/activities/sortwords/models/sortWordsResponse.js
resources/js/activities/sortwords/models/sortWordsResponses.js

Vistas de la aplicación

resources/js/activities/sortwords/views/activityView.js
resources/js/activities/sortwords/views/sortWordResponseAnswerView.js

Plantillas de las vista de la aplicación

resources/js/activities/sortwords/views/templates/sortwords-template.html
resources/js/activities/sortwords/views/templates/sortwords-response-template.html
resources/js/activities/sortwords/views/templates/sortwords-result.html
resources/js/activities/sortwords/views/templates/sortwords-timeout-result.html

Internacionalizacón de los mensajes de la aplicaión

resources/js/activities/sortwords/views/nls/es/strings.js