Jugando con javascript
-
Upload
paolo-carrasco -
Category
Technology
-
view
191 -
download
3
description
Transcript of Jugando con javascript
![Page 1: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/1.jpg)
Jugando con Javascript de forma segura
Paolo Carrasco
![Page 2: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/2.jpg)
Supuestos
Recordamos lo que es POOTenemos noción de cómo programar en JavaScript
![Page 3: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/3.jpg)
Hechos de la vida real
• Diseñaremos nuestro código• Revisaremos nuestro código• Cambiaremos nuestro código• Otras personas van a leer nuestro código• Habrán bugs
(citado de la charla de Rebecca Murphey en Full Frontal 2012)
![Page 4: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/4.jpg)
¿Cómo lidiar con esto?
![Page 5: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/5.jpg)
a) Codificar probando manualmente contra nuestra aplicación
![Page 6: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/6.jpg)
b) Haciendo Pruebas Integrales/Journeys
Ventajas● Cada prueba involucra
distintos componentes del sistema
● Interactúan únicamente con la interface más externa
● Casi nunca es necesario usar doubles
Desventajas● Demoran mucho● Cuando fallan, es difícil
rastrear cuál fue el motivo del error
![Page 7: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/7.jpg)
c) Haciendo pruebas unitarias (atómicas)
Ventajas
● Cuando fallan, es sencillo identificar cuál es el problema
● Son ejecutadas rápidamente
● Son simples, concisos y con una única intención
Desventajas
● Debe verificar el comportamiento solo de un componente
● En muchas ocasiones necesita el uso de mocks
![Page 8: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/8.jpg)
d) Haciendo ambas
![Page 9: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/9.jpg)
Pirámide de pruebas
![Page 10: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/10.jpg)
• Las pruebas son hechas al final (son difíciles y no son importantes)• No usamos patrones• Preferimos no tocar mucho lo que ya se hizo• Queremos tener claro el diseño de nuestra aplicación por adelantado
Pero cuando desarrollamos en el frontend…
![Page 11: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/11.jpg)
¿Por qué lo hacemos así?
● Porque hay poco tiempo● Porque pensamos que no se puede hacer TDD en Javascript
![Page 12: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/12.jpg)
¿Cómo lograrlo?
![Page 13: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/13.jpg)
Diseño evolucionario
![Page 14: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/14.jpg)
TDDNo trata sobre pruebas, sino de diseño
![Page 15: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/15.jpg)
¿Qué es Refactor?
Mejora del código ya existente sin modificar su comportamiento
![Page 16: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/16.jpg)
¿Por qué refactor?
Continuamente mejorando el diseñoCódigo limpio
Sencillo de leerSencillo de cambiarMenos code smells
![Page 17: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/17.jpg)
¿Por qué TDD?
Ayuda a tener confianza en cambiar el códigoForma predecible para desarrollarOportunidad para aprender del códigoEvita errores
![Page 18: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/18.jpg)
¿Cómo comenzar?
![Page 19: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/19.jpg)
Herramientas mainstream para unit testingJasmineQunitSinon.jsMocha
Chai.js
![Page 20: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/20.jpg)
Hello world
• Usando Javascript con TDD
![Page 21: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/21.jpg)
Algo más real• Listado de recetas
![Page 22: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/22.jpg)
En resumen...
¿Diseño evolucionario?¿TDD? ¿Refactor?
![Page 24: Jugando con javascript](https://reader033.fdocument.pub/reader033/viewer/2022052200/557ae41bd8b42a85648b543c/html5/thumbnails/24.jpg)
Para revisar
• Antipatterns Javascript• Test Pyramid • Phantom.js – Casper.js• Grunt