icono_twiter icono Facebook
Carlos García Pérez

Técnico especialista en informática de empresa (CEU).

Ingeniero Técnico en Informática de Sistemas (UPM)

Creador de MobileTest, Haaala!, Girillo, toi18n.

Charla sobre desarrollo de aplicaciones en Android.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-10-31

Tutorial visitado 6.769 veces Descargar en PDF
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/sortWordsReponse.js
resources/js/activities/sortwords/models/sortWordsReponses.js

Vistas de la aplicación.

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

Plantillas de las vistas 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

Internacionalización de los mensajes de la aplicación

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

Referencias

Conclusiones

Yo no soy muy seguidor de modas de programación, me gusta conocerlas para poder opinar con criterio.
En la actualidad hay una tendencia a delegar cada vez más lógica de negocio a los clientes, descargándose los servidores del trabajo de renderización y dejándoles que se ocupen del acceso a los datos a través de un api bien definido.

Yo personalmente no las veo gran futuro para portales transaccionales, principalmente debido la curva de aprendizaje y al SEO (aunque hay estándares para indexación de Javascript). Si lo veo en aplicaciones que forman parte de estos portales (componentes javascript) o aplicaciones independientes.

Claro que existen complejas webs construidas así, por lo que me puedo equivocar :-)

Lo que si puedo afirmar es que no hay motivo para continuar desarrollando código espageti :-)

Bueno, eso es todo, un saludo.
Carlos García.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2013-01-31-16:07:26

Autor: carlosgp

Gracias FDQUINONES.


Puedes descargartelos accediendo a la DEMO que monté:

http://www.carlos-garcia.es/tutoriales/backbone-requirejs/demo/sortwords.html

Saludos

Fecha publicación: 2013-01-30-05:58:17

Autor: fdquinones

Esta excelente el trabajo, pero talves puede completar todos los archivos necesarios para el proyecto.l