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

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.

@cgpcosmad

Ver todos los tutoriales del autor

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

Tutorial visitado 2.647 veces Descargar en PDF

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

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

require.config( {
	baseUrl: "resources/",
	paths: {
        "jquery": 	  "js/helpers/jquery",
		"underscore": "js/helpers/underscore",
		"json2": 	  "js/helpers/json2",
		"backbone":   "js/helpers/backbone",
		"text":	 	  "js/helpers/text",
		"i18n":	 	  "js/helpers/i18n",
		"activity":	  		 "js/activities/sortwords/models/activity",
		"sortWordsActivity": "js/activities/sortwords/models/sortWordsActivity",
		"sortWordsResponses": "js/activities/sortwords/models/sortWordsResponses",
		"sortWordsResponse": "js/activities/sortwords/models/sortWordsResponse",
		"userActivityAnswer": "js/activities/sortwords/models/userActivityAnswer",
		"activityView":		 		  "js/activities/sortwords/views/activityView",
		"sortWordResponseView":		  "js/activities/sortwords/views/sortWordResponseView",
		"sortWordResponseAnswerView": "js/activities/sortwords/views/sortWordResponseAnswerView",
		"sortwordResultView": 		  "js/activities/sortwords/views/sortWordResultView",
	},
    shim: {
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone",
        },
    },
	waitSeconds: 10,
});

require(["backbone", "underscore", "activity", "sortWordsActivity", "sortWordsResponse", "activityView"],  
		function(Backbone, _, Activity, SortWordsActivity, SortWordsResponse, ActivityView){
	console.log("sortwords module loaded");
	
	Backbone.emulateHTTP = true;
	
/*
	var sortWordsActivity = new SortWordsActivity({id: 1});
	sortWordsActivity.fetch({
		   success: function () {
			   var v1 = new ActivityView({model: sortWordsActivity});
			   v1.render();
		   }, 
		   error: function (collection, response)  {
			   alert("Error");
		   }
		});
*/	
	
	var sortWordsActivity = new SortWordsActivity({id: 1, alias: "alias1", timeLimit: 30, attempts: 2, title: "Ordene de las siguientes provincias espa$ntilde;olas de norte a sur"});
	sortWordsActivity.addWord(new SortWordsResponse({word: "Barcelona", position: 0}));
	sortWordsActivity.addWord(new SortWordsResponse({word: "Madrid",	position: 1}));		
	sortWordsActivity.addWord(new SortWordsResponse({word: "Granada",	position: 2}));

var v1 = new ActivityView({model: sortWordsActivity});
	v1.render();
});

Modelo de la aplicación

resources/js/activities/sortwords/models/actitity.js

resources/js/activities/sortwords/models/sortWordsActitity.js

define("sortWordsActivity", ["activity", "sortWordsResponses", "sortWordsResponse", "userActivityAnswer", "underscore", "backbone"],  function(Activity, SortWordsResponses, SortWordsResponse, UserActivityAnswer, _, Backbone){
	console.log("sortWordsActivity module loaded");
	
	var SortWordsActivity = Activity.extend({
 		url : function() {
 			  var base = "http://localhost:8080/mobiletest/activities/";
 			  if (this.isNew()) return base;
 			  return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
 		},
		defaults: {
				words:    new SortWordsResponses(),
				answeres: new SortWordsResponses(),
				category: "SortWords",
		},		
		parse: function(obj) {
			for (var i = 0; i < obj.words.length; i++){
				var word = obj.words[i];
				this.get("words").add(new SortWordsResponse({position: word.position, word: word.word}), {silent: true});
				this.get("answeres").add(new SortWordsResponse({position: i, word: ""}), {silent: true});
			}
	        delete obj.words;
	        
	        // Now backbone init rest properties
	        return obj;
	    },
		getWordCount: function() {
			return this.get("words").length;
		},
		getAnsweres: function() {
			return this.get("answeres");
		},
		addWord: function(w) {
			this.get("words").add(w, {silent: true});
			this._addEmpyAnswerGapForWord(w);

},
		_addEmpyAnswerGapForWord: function(word){
			var index = this.getWordCount() - 1;
			var answer = new SortWordsResponse({position: index, word: ""});
			this.get("answeres").add(answer, {silent: true});
		},
		clearAnswers: function(){
			var i  = 0;
			this.get("answeres").each(function(answer){ 
				answer.set({"position": i++});
				answer.clearWord();
			});
		},
		isValid: function(){
			var answeres = this.get("answeres");
			var words    = this.get("words");		
			var toReturn = true;
			
			var numWords = this.getWordCount();
			for (var i = 0; i < numWords; i++){
				var word   = words.at(i);	// TODO: Â¿Sort by position first?
				var answer = answeres.at(i);
				if (! word.equals(answer)){
					toReturn = false;
					break;
				}
			}
			return toReturn;
		},
	});	
	
	// Enable property inheritance
	SortWordsActivity.prototype.defaults =  _.extend(Activity.prototype.defaults, SortWordsActivity.prototype.defaults);
	 
	return SortWordsActivity;
});

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

define("activityView", ["jquery", "underscore", "backbone",  "sortWordsActivity", "userActivityAnswer", "sortWordResponseView", "sortWordResponseAnswerView", 
	"sortwordResultView", "text!js/activities/sortwords/views/templates/sortwords-template.html", "i18n!js/activities/sortwords/views/nls/strings"],  
	function($, _, Backbone, SortWordsActivity, UserActivityAnswer, SortWordResponseView, SortWordResponseAnswerView, SortWordResultView, sortwords_template, str){
	
	var ActivityView = Backbone.View.extend({
		el : 	  $("#activity-container"),
		template: _.template(sortwords_template),
		initialize: function() {
			this.bind("mobiletest:activity:finished", 	this.onAttemptsFinished, this);
			this.bind("mobiletest:activity:timeEnd",	this.onTimeFinished, this);
			this.model.bind("change", this.render, this);
			
			this.numFails  = 0;
			this.timeLimit = this.model.get("timeLimit");
			this.timerID   = setInterval(function(){this.tick();}.bind(this), 1000);
			
		},
		events : {
			"click #cancel": "clearUserAnsweres",
			"click #accept": "doAccept",
		},
		render: function() {
			this.model.set({"i18n": str});
			$(this.el).html(this.template(this.model.toJSON()));

if (this.timeLimit <= 0){
				this.trigger("mobiletest:activity:timeEnd");
			} else if (this.timeLimit <= 20){
				$("#timeLimit").addClass("littleTime");	
			}
		},
		onTimeFinished: function(){
			this._disableUserGUIControls();
			var resultView = new SortWordResultView({model: this.model, playTimeout: true});
			resultView.render();
		},
		resetTimer: function(){
			if (this.model.get("timeLimit") > 0){
				clearInterval(this.timerID);
			}
		},
		clearUserAnsweres : function(ev) {
			this.model.clearAnswers();
			$("#alert-incomplete-activity").hide();
		},
		_disableUserGUIControls: function(){
			this.resetTimer();
			$("#cancel").attr("disabled", true);
			$("#accept").attr("disabled", true);
		},
		_loadAnsweresModelFromUI: function(){
			var wordsWritten = $("input[name='response']");
			var modelRef 	 = this.model;
			this.model.clearAnswers();
			
			$.each(wordsWritten, function(index, value) { 
				var currentSortWordsResponse = modelRef.get("answeres").at(index);
				currentSortWordsResponse.set({"word": $(value).val()});
			});
		},
		_verifyExistAllWords: function(){
			var answeres = this.model.get("answeres");
			var words    = this.model.get("words");		
			var toReturn = true;
			
			for (var i = 0; i < answeres.length; i++){
				var answerText  = answeres.at(i).get("word");
				var existWord	= false;
				
				for (var j = 0; j < words.length; j++){
					var wordText = words.at(j).get("word");
					if (answerText == wordText){
						existWord = true;
						break;
					}
				}
				
				if (! existWord){
					toReturn = false;
					break;
				}
			}
			return toReturn;
		},		
		
	});
		
	return ActivityView;
});

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

Catálogo de servicios Autentia

Síguenos a través de:

Últimas Noticias

Últimos Tutoriales

Últimos Tutoriales del Autor

Últimas ofertas de empleo

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