JavaScript para desarrolladores de C# Edin Kapić

JavaScript para desarrolladores de C#

Edin Kapić

JavaScript

Edin Kapić

C#!=

JavaScript: “With or Without You”

Brendan Eich“El padre de la

criatura”

¿Cómo llegamos hasta aquí?

1995Netscape Navigator

2.0Mocha/LiveScript

1996Internet Explorer

3.0JScript

1997ECMAScript

1999XMLHttpRequest(OWA Exchange

2000)

2005Jesse James

GarrettAJAX

2006John Resig

jQuery

2009PhoneGap

2010Node.js

2011Windows 8

2012SharePoint 2013

TypeScript

TypeScript

Hay que saltar de una vez

JsFiddle

Firebug / IE Dev Tools

JSLintJSHint

Las herramientasFirebugLite

JavaScript es bueno ...• Lenguaje dinámico• Notación literal potente• “Loose-typed”

• “JS is Lisp in C Clothing” (Douglas Crockford)

http://bit.ly/Qn0qLi

... pero tiene cosas malas• Variables globales implícitas• Variable hoisting• Function hoisting• Prototype Leaking• ==

'' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // falsefalse == null // false null == undefined // true ' \t\r\n ' == 0 // true

JavaScript != C#

• C#– Corta el pan– Tiene mecanismos

de seguridad– Es complejo

• JavaScript– Corta el pan– Te puedes hacer

daño– Es un trozo de

metal con un mango

Bueno en C#, malo en JS• La sintaxis parecida nos puede llevar

a hacer lo que en C# son buenas prácticas

• ...pero en JS pueden tener consecuencias graves

• “If it walks like a duck...”

JS != C# 1: Tipos de datosSimples• Number• String• Boolean• Undefined• Null

Complejos• Object• Array• Function• RegExp• Date

JS != C# 2: Variables globales

• Toda variable no asignada a un objeto, se asigna a window

• var a = 1;• window.a = 1;

http://jsfiddle.net/wQDwN/

JS != C# 3: “Variable Hoisting”

• Sólo dos niveles: global i función– { } no crea ámbito de variable (como

C#)

• La variable declarada sube hasta el inicio de la función en la que está declarada– /*.....*/ var a = 1;– var a; /*.....*/ a = 1;

http://jsfiddle.net/NE2Km/3/

Recomendación• Ser consciente de los tipos de

datos• No contaminar window• Declarar variables lo más arriba

possible (hacer hoisting explícito)

Testvar imAGlobal = true; function globalGrabber() { imAGlobal = false; return imAGlobal;} console.log(imAGlobal); console.log(globalGrabber()); console.log(imAGlobal); // true o false?

Testvar imAGlobal = true; function globalGrabber() { var imAGlobal = false; return imAGlobal;} console.log(imAGlobal); console.log(globalGrabber()); console.log(imAGlobal); // true o false?

http://jsfiddle.net/JxESg/

JS != C# 4: this• this apunta al objeto contenedor de la función

en la que está (en ejecución) y es modificable

console.log(this); // windowvar myFunction = function() { console.log(this);}myFunction(); // window

http://jsfiddle.net/UsCtz/ y http://jsfiddle.net/8tBEM/

JS != C# 5: Wrappers• JS estilo C#

var myVar = new Object();var myArr = new Array();

• JS estilo purovar myVar = {};var myArr = [];

Recomendación• No usar wrappers innecesariamente• Aprender la notación literal de

objetos de JS

Testvar a = new Object();a.nombre = 'Edin';console.log(a.nombre);

Testvar a = { nombre: 'Edin'};console.log(a.nombre);

Testvar a = function(){ this.nombre = 'Edin'; return this;}();console.log(a.nombre);

Testvar a = function(){ this.nombre = 'Edin'; return this;}();console.log(a.document.URL);

Testvar a = function(){ var obj = {}; obj.nombre = 'Edin'; return obj;}();console.log(a.document.URL);

JS != C# 6: Truthy / FalseyValores que dan true

• "0"• "false"• Objetos vacíos• Todos los demás

Valores que dan false

• false• 0• ""• null• undefined• NaN

Recomendación• Simplificar los condicionales

if(myVar != "" || myVar != undefined)if(myVar)

• Inicializar los valores por defectoif(myVar == "") { myVar = "Hola"; }myVar = myVar || "hola";

JS != C# 7: Operador ==• Comparación

if(false == 0) // trueif(false === 0) // false

• El operador == intenta convertir los valores y casi siempre es algo que no queremos

Comparación “indeterminista”(false == 0); // true (false == ""); // true (0 == ""); // true (null == false); // false(null == null); // true(undefined == undefined); // true(undefined == null); // true(NaN == null); // false(NaN == NaN); // false

Recomendación• Usar los operadores === i !== por

defecto• No hacen la conversión de valores• Se comportan como los operadores

“habituales” == y != de C#

JS != C# 8: Otras “perlas”• parseInt() • Operador + http://jsfiddle.net/tbMX2/• NaN http://jsfiddle.net/vVgB9/ • “Prototype Leak”• Inserción de ;

Funciones

Funciones de JavaScript• Son objetos, por tanto se les

pueden agregar propiedades• Se pueden pasar como

parámetros a otras funciones• Hay dos maneras de declarar

funciones

Manera 1: Declaración• La declaración de la función se

hace confunction foo() { /* .... */ }

• La función declarada hace “hoisting” y està disponible en todo el código JS, independientemente del orden de ejecución

http://jsfiddle.net/TQ6LG/

Manera 2: Expresión• También podemos asignar la función a

una variable mediante una expresión:var foo = function () { /* ... */ };

• En este caso no hay “hoisting”• Podemos pensar que una declaración es

realmente una expresión puesta al principio

http://jsfiddle.net/NrQhM/

Equivalencias• function foo() { /* .... */ }• var foo = function () { /* ... */ };• var foo = function foo () { /* ... */ };• var foo = function bar () { /* ... */ };

• Las dos últimas se usan para funciones recursivas• Las expresiones hacen explícita la declaración

Código de un solo uso (IIFE)• Podemos asignar una función

anónimamente y no recogerla como resultado

• Útil para ejecutar un código privado y de una sola vez

• (function () { /* ... */ })();http://jsfiddle.net/YAe9S/1/

Anidamiento de funciones• Las funcions son objetos y pueden

contener otras funciones

var foo = function() { function bar() { /* ... */ } return bar();};foo();

http://jsfiddle.net/XUswD/

Cierres (Closures)• El cierre es una manera de asociar la

función con sus parámetros de entrada– Es el mantenimiento de las variables

locales después de que la función haya acabado

var bind = function(x) { return function(y) { return x + y; };}var plus5 = bind(5); alert(plus5(3));

http://jsfiddle.net/xWAm4/

Recomendaciones• Dedicar tiempo para jugar con las

funciones en JS es imprescindible– Hay muchos ejemplos que se pueden

probar con JsFiddle

• Comprender los cierres es importante para entender los event handlers y encapsulamiento (http://jsfiddle.net/GBfPf/)

JavaScript en el siglo XXI

¿Vamos tirando?

¿O estamos al día?

Regla #1: Unobtrusive JavaScript

• El JS se tieen que añadir sin impactar el HTML de la página<input type="text" name="date“ onchange="validateDate()" />

window.onload = function() { document.getElementById('date').onchange = validateDate;};

Regla #2: Modularidad• No colisionar con otros

JS presentes (es decir, “comportarnos bien”)

• Encapsulemos nuestro código en namespaces

• Usemos try/catch

Métodos de encapsulamiento• Ninguno (objeto window)• Todo privado (función anónima auto-

ejecutada)

• Todo público (objeto literal)• Mezcla público/privado (Revealing

Module)

Objeto literalvar car = {    status: "off",    start: function() {        this.status = "on";    },    getStatus: function() {        return "the car is " + this.status;    }};car.start();alert(car.getStatus());

http://jsfiddle.net/DY2Zw/

Revealing Modulevar car = (function() { var pubCar = {}, var innerStatus = "off"; pubCar.start = function() { innerStatus = "on"; } pubCar.status = function() { return "the car is “ + innerStatus; } return pubCar;}());car.start();alert(car.status());

http://jsfiddle.net/AUzNT/

Recomendaciones• Usar Revealing Module para tenir el

encapsulamiento totalmente controlado por nosotros

• Aislarnos de otras librerías http://jsfiddle.net/uKuLw/

• Usar objetos literales para objetos sencillos (p.ej. DTOs)– La sintaxis es diferente

Regla #3: Abstracción• Nos abstraeremos de los detalles

del navegador concreto

• Existen librerías que unifican y abstraen las diferencias: jQuery, AmplifyJS, Modernizr

Microsoft TypeScript• Es un lenguaje basado en JavaScript• Añade la comprobación en tiempo

de compilación de referencias, tipos, clases e interfaces

• (Trans)compila a JavaScript “puro”• Disponible para VS2012• http://www.typescriptlang.org/

Resumen

Recomendaciones• Invertir tiempo en aprender los

principios de JS y experimentar con los ejemplos

• Repasar el código existente con JSHint

• Tener en cuenta las librerías de JS como factor arquitectónico en las aplicaciones

• JS está aquí para quedarse

Bibliografia• Douglas Crockford “JavaScript: The

Good Parts” (O’Reilly)• Addy Osmani “JavaScript Design

Patterns” http://bit.ly/bMyoQ9

• http://jsbooks.revolunet.com/ • http://superherojs.com