JavaScript para desarrolladores de C#

Presentación del tema: "JavaScript para desarrolladores de C#"— Transcripción de la presentación:

1 JavaScript para desarrolladores de C#
Edin Kapić

2 JavaScript != C# Edin Kapić

3 JavaScript: “With or Without You”
Brendan Eich “El padre de la criatura”

4 ¿Cómo llegamos hasta aquí?
1995 Netscape Navigator 2.0 Mocha/LiveScript 1996 Internet Explorer 3.0 JScript 1997 ECMAScript

5 1999 XMLHttpRequest (OWA Exchange 2000) 2005 Jesse James Garrett AJAX 2006 John Resig jQuery

6 TypeScript 2009 PhoneGap 2010 Node.js 2011 Windows 8 2012
SharePoint 2013 TypeScript

7 Hay que saltar de una vez

8 Las herramientas Firebug / IE Dev Tools JSLint JSHint JsFiddle Firebug
Lite Las herramientas

9 JavaScript es bueno ... Lenguaje dinámico Notación literal potente
“Loose-typed” “JS is Lisp in C Clothing” (Douglas Crockford)

10 ... 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 // false false == null // false null == undefined // true ' \t\r\n ' == // true

11 JavaScript != C#

12 C# JavaScript Corta el pan Tiene mecanismos de seguridad Es complejo
Te puedes hacer daño Es un trozo de metal con un mango

13 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...”

14 JS != C# 1: Tipos de datos Simples Complejos Number String Boolean
Undefined Null Object Array Function RegExp Date Undefined = No sé de que m’estàs parlant o no m’has donat cap valor inicial Null = M’has dit que no té cap valor, explícitament Typeof(null) == object (és un bug de JS) Els wrappers també son objects, però és millor no fer-los servir

15 JS != C# 2: Variables globales
Toda variable no asignada a un objeto, se asigna a window var a = 1; window.a = 1;

16 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;

17 Recomendación Ser consciente de los tipos de datos
No contaminar window Declarar variables lo más arriba possible (hacer hoisting explícito)

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

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

20 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); // window var myFunction = function() { console.log(this); } myFunction(); // window y

21 JS != C# 5: Wrappers JS estilo C# JS estilo puro
var myVar = new Object(); var myArr = new Array(); JS estilo puro var myVar = {}; var myArr = [];

22 Recomendación No usar wrappers innecesariamente
Aprender la notación literal de objetos de JS

23 Test var a = new Object(); a.nombre = 'Edin'; console.log(a.nombre);

24 Test var a = { nombre: 'Edin' }; console.log(a.nombre);

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

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

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

28 JS != C# 6: Truthy / Falsey Valores que dan true Valores que dan false
"0" "false" Objetos vacíos Todos los demás false "" null undefined NaN

29 Recomendación Simplificar los condicionales
if(myVar != "" || myVar != undefined) if(myVar) Inicializar los valores por defecto if(myVar == "") { myVar = "Hola"; } myVar = myVar || "hola";

30 JS != C# 7: Operador == Comparación
if(false == 0) // true if(false === 0) // false El operador == intenta convertir los valores y casi siempre es algo que no queremos

31 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

32 Recomendación Usar los operadores === i !== por defecto
No hacen la conversión de valores Se comportan como los operadores “habituales” == y != de C#

33 JS != C# 8: Otras “perlas” parseInt()
Operador + NaN “Prototype Leak” Inserción de ; Parseint leading 0  octal

34 Funciones

35 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

36 Manera 1: Declaración La declaración de la función se hace con
function foo() { /* .... */ } La función declarada hace “hoisting” y està disponible en todo el código JS, independientemente del orden de ejecución Validar amb JSLint per a veure el warning

37 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

38 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

39 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 () { /* ... */ })();

40 Anidamiento de funciones
Las funcions son objetos y pueden contener otras funciones var foo = function() { function bar() { /* ... */ } return bar(); }; foo();

41 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));

42 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 (

43 JavaScript en el siglo XXI

44 ¿Vamos tirando?

45 ¿O estamos al día?

46 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; };

47 Regla #2: Modularidad No colisionar con otros JS presentes (es decir, “comportarnos bien”) Encapsulemos nuestro código en namespaces Usemos try/catch

48 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)

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

50 Revealing Module var 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());

51 Recomendaciones Usar Revealing Module para tenir el encapsulamiento totalmente controlado por nosotros Aislarnos de otras librerías Usar objetos literales para objetos sencillos (p.ej. DTOs) La sintaxis es diferente

52 Regla #3: Abstracción Nos abstraeremos de los detalles del navegador concreto Existen librerías que unifican y abstraen las diferencias: jQuery, AmplifyJS, Modernizr

53 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

54 Resumen

55

56 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

57 Bibliografia Douglas Crockford “JavaScript: The Good Parts” (O’Reilly)
Addy Osmani “JavaScript Design Patterns”

58