Code and Beer: Introducción a Browserify y Babel

En esta nueva edición de nuestro querido Code and beer hicimos un par de demos simples sobre Browserify (manejador de módulos y bundle para Javascript) y Babel (Una para utilizar ECMAScript 6 para el desarrollo y compilar para navegadores actuales ).

Les dejo el link del video.

Y algunos links a los proyectos:

Nos leemos.

Desarrollo de aplicaciones híbridas con Ionic Framework

El día de hoy, presentamos los conceptos básicos y las diferentes tecnologías con las que se puede construír una aplicación híbrida para Android/iOS/WP.

Video: http://www.youtube.com/watch?v=cytsFgCHqyM

Links últiles:

ionicframework.com
https://cordova.apache.org/
http://ngcordova.com/
https://nodejs.org/
https://angularjs.org/
http://gulpjs.com/
http://bower.io/
http://sass-lang.com/
http://yeoman.io/
https://github.com/mwaylabs/generator-m

Parámetros globales en peticiones Ajax con jQuery

jQuery nos permite realizar peticiones Ajax a través del método $.ajax(), o alguna de sus versiones más cortas ($.get(), $.post(), etc.). En algunas ocasiones, suele plantearse la necesidad de agregar parámetros de datos globales a todas las peticiones de una misma página. Para resolver este tipo de situaciones, jQuery nos provee el método $.ajaxSetup().

Cabe aclarar que, si bien en este post se menciona al método $.ajaxSetup() como un medio para agregar parámetros de datos globales, también se puede utilizar con otros fines, como por ejemplo, para ejecutar cierto código previo al envío de las peticiones.

Ahora bien, veamos cómo agregar parámetros de datos globales. Una de las opciones es utilizar lo siguiente:

$.ajaxSetup({
    beforeSend: function(jqXHR, settings) {
        settings.data = $.extend(settings.data, { say: 'hello' });
        return true;
    }
});

Uno de los problemas que presenta esta solución, es que no está considerando el tipo de mensaje de la petición. Podemos mejorar un poco el código previo, y hacer lo siguiente:

$.ajaxSetup({
    beforeSend: function(jqXHR, settings) {
        if(settings.type === 'GET') {
            settings.url = ...; // agregar parámetro a la url
        }
        else {
            settings.data = $.extend(settings.data, { say: 'hello' });
        }
        return true;
    }
});

Si bien ahora se están cubriendo más casos, agregar parámetros a peticiones de tipo POST no suele ser tan directo. En definitiva, nuestra solución puede mejorarse para que se aproxime al comportamiento esperado, pero supone trabajar aún más e introducir código.

Vemos así, que recurrir al método beforeSend no nos provee una solución directa, sino que debemos considerar varios casos puntuales. Ahora bien, jQuery nos provee una alternativa más que, a comparación de la solución anterior, es más directa y sencilla.

La otra alternativa consiste en utilizar:

$.ajaxSetup({
    data: {
        say: 'hello'
    }
});

Curiosamente, este método se ejecuta de manera acumulativa y no sobreescribe los datos que tiene la petición, sino que agrega los parámetros de nuestra petición (al final de la URI en caso de un GET). A continuación se pueden ver dos capturas con ejemplos. Una de ellas representa un GET y la otra un POST.

Espero que les sirva de ayuda. Saludos!

 

JavaScript Tip #4–Llaves

Algo que en JavaScript sí importa es la forma en cómo escribimos el texto que hace al código. En este caso, más allá de la sintaxis, la gramática es importante.

function A() {
   return
   { valor = 123 };
}

En el código anterior, algo que podría ser tomado como natural o posible en otros lenguajes, en JavaScript puede ser un problema. Si llamamos a la función A, esta, al finalizar, en vez de retornarnos un objeto con una propiedad llamada “valor”, retornará undefined.

function A() {
   return {
      valor = 123
   };
}

El código anterior puede verse idéntico desde la perspectiva de funcionalidad, pero el colocar la llave de apertura inmediatamente después del return hará que el código funcione como se espera.

Es importante, entonces, siempre colocar las llaves en la misma línea a la cual pertenece.

JavaScript Tip #3–Igualdades

Si estamos acostumbrados a otros lenguajes de programación, en especial aquellos con raíz en C o C++, les puede resultar extraño ver código JavaScript donde aparecen no dos iguales (==) sino tres (===) en el análisis de las condiciones.

JavaScript, para este caso, incluye el operador === (Junto a la variante !==) el cual es recomendado a la hora de comparar dos elementos:

var a = ‘1’;
var b = 1;
if (a == b) { … }

En el ejemplo anterior, a y b serán iguales, ya que JavaScript deberá hacer las conversiones necesarias para poder comparar los dos lados de la igualdad. Esto, por supuesto, consume tiempo.

if (a === b) {
   …
} else {
   …
}

En este caso, la condición será falsa, ya que el tipo de dato no es igual y no se realizarán conversiones para verificar la igualdad.

JavaScript Tip #2–Clases

Sí, sabemos que (Aún) las clases como tales no existen, y tampoco una sintaxis o nomenclatura. Por lo que, para hacer algo similar, usamos funciones que contiene otras funciones dentro.

El siguiente suele se un caso típico:

function ClaseA() {
   this.funcion = function () {
   };
}

Luego, al crear una instancia de ClaseA obtenemos un objeto más o menos clásico si lo vemos desde la óptica de lenguajes tipados.

Pero JavaScript tiene otra forma de hacer las cosas que es más… JavaScript.

var ClaseA = (function () {

   var claseA = function () { };

   claseA.prototype.funcion = function () { };

   return claseA;
})();

El modelo anterior hace uso de prototype para crear nuevos puntos de entrada y encapsula de mejor forma (Además de se más óptimo) la pseudo clase y las funciones dentro de ella.