Javascript Patterns

Presentación hecha en las oficinas de COMPEC.

Links:
https://github.com/javichito/design-patterns-js

Transcript

1. A journey through by  @javichito  
2. ¿Qué es Javascript? Antes que nada…
3. ECMAScript  (Javascript)  es  un  lenguaje  de   programación  orientado  a  objetos  que   permite  realizar  computación  y  manipulación   de  objetos  dentro  de  un  entorno  anfitrión.   hDp://www.ecma-­‐internaIonal.org/publicaIons/files/ECMA-­‐ST/Ecma-­‐262.pdf    
4. ¿Por qué debería importar aprender otro lenguaje?
7. Javascript está en todos lados y va quedarse por un largo tiempo
8. Antes
9. Ahora
10. Nuevos requerimientos Mejores tiempos de respuesta
11. Nuevos requerimientos Mejores tiempos de respuesta Interactividad
12. Nuevos requerimientos Mejores tiempos de respuesta Interactividad Mayor calidad
13. Resultado Miles de líneas de código, muchas veces con responsabilidades entrelazadas
14. ¿Cómo reducir el caos? Estructura
15. ¿Cómo reducir el caos? Estructura Patrones
16. ¿Cómo reducir el caos? Estructura Patrones Automatización
17. ¿Qué es un patrón? Es una solución probada a un problema recurrente
18. ¿Qué es un patrón? Es una solución a un problema común Una abstracción útil, una plantilla para resolver categorías de problemas
19. ¿Por qué son importantes? Nos ayudan a escribir mejor código usando prácticas probadas.
20. ¿Por qué son importantes? Nos ayudan a escribir mejor código usando prácticas probadas. Mejoran la comunicación entre desarrolladores
21. ¿Cuál es su antítesis? Lo opuesto a un patrón es un anti patrón. Es un aprovechamiento común que se usa al intentar resolver un problema pero que genera más problemas que soluciones.
22. Peor aun… Un antipatrón es exponencialmente negativo porque cualquier persona nueva al proyecto lo replicará alegremente (sin mala intención) y lo esparcirá por donde fuera que vaya.
24. Peculiaridades Javascript es un lenguaje muy singular, tiene herencia orientada a prototipos pero existe un operador new (como en los lenguajes de herencia clásica).
25. Peculiaridades Las funciones son objetos, por lo tanto, son ciudadanas de primera clase. Funciones pueden devolver funciones, recibir funciones como argumento, como lo harían con cualquier otro objeto.
26. ¿Creías que era como Java? Lamento decepcionarte. Fuera de la sintáxis, Javascript se parece más a lenguajes funcionales como Lisp que a Java.
27. Hay mucho por aprender ¡Empecemos!
29. Orientado a Objetos Solo existen 5 tipos de datos primitivos (undefined, null, number, string y boolean). TODO lo demás son objetos.
30. El objeto de activación
31. Objeto de activación Cuando defines una variable, esta se convierte automáticamente en una propiedad de un objeto interno (window, global) conocido como el Objeto de activación.
32. Objeto de activación Por este motivo es fácil llenar el alcance global de propiedades. En la medida que la aplicación crece se hace necesario determinar una estrategia para organizar los distintos objetos que conforman la aplicación.
33. Javascript es como una utopía Marxista: No tiene clases
35. Prototipos Javascript facilita la reutilización de código a traves de prototipos (herencia prototípica) que es básicamente una forma de adquirir propiedades de otro objeto. Toda función posee una propiedad “prototype” que es un puntero a otro objeto.
37. Patrón “Observer” Cuando un objeto cambia su estado, notifica de este cambio a todos los objetos que lo esten observando. Es un patrón muy común en el desarrollo de aplicaciones del lado del cliente.
39. KEYPRESS  
41. Patrón “Facade” Provee una interfaz simple a una pieza de código más compleja con el objetivo de hacerla más fácil de usar.
44. Patrón “Decorator” Permite agregar funcionalidad adicional a un objeto dinámicamente en tiempo de ejecución.
46. Patrón “Module” Es uno de los patrones más usados en Javascript. Provee estructura y ayuda a organizar tu código en la medida en que crece.
48. Constructor  
49. Área  de  definición  de  métodos  
50. Función  auto-­‐ejecutada  
51. Funciones  Privadas  
52. Reemplaza  al  objeto  “this”   dentro  de  la  función  
53. Métodos  EstáDcos  
54. Let´s get dirty (live coding) https://github.com/javichito/design-patterns-js
55. Lo único seguro es el CAMBIO