Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework
1 recomendación1,735 vistas
El documento aborda el desarrollo y testeo modular de interfaces HTML5 en aplicaciones web complejas, resaltando la importancia de la usabilidad, accesibilidad y consistencia. Presenta un enfoque práctico, incluyendo un framework open source llamado 'congo', para facilitar la creación de código front-end modular y testeable. Se describen metodologías y herramientas que promueven una estructura eficiente y flexible en el diseño y desarrollo de interfaces.
![Desarrollo y testeo modular de interfaces •M E M B E R
kambrica.com/congo
Un componente simple…
components/button/html.php
<span class="button
<?= $this->buttonType ?>">
<input type="submit"
value="<?= $this->buttonText ?>" />
</span>
components/button/variables.yml
buttonType: [ action, confirm, decline ]
buttonText: text
components/button/styles.css
.button INPUT { background-color:grey;
color:white; }
.button.action INPUT { background-
color:blue; }
.button.confirm INPUT { background-
color:green; }
.button.decline INPUT { background-color:red; }
components/button/scripts.js
$('.button A').click(function() {
// Do something...
});
18](https://image.slidesharecdn.com/icograma-comcongo-codecamp15oct2011-111015191359-phpapp02/85/Desarrollo-y-testeo-modular-de-interfaces-HTML5-MVC-Congo-framework-18-320.jpg)
![Desarrollo y testeo modular de interfaces •M E M B E R
kambrica.com/congo
Testeo del componente button
26
buttonType: [ action, confirm, decline ]
buttonText: text](https://image.slidesharecdn.com/icograma-comcongo-codecamp15oct2011-111015191359-phpapp02/85/Desarrollo-y-testeo-modular-de-interfaces-HTML5-MVC-Congo-framework-26-320.jpg)
![Desarrollo y testeo modular de interfaces •M E M B E R
kambrica.com/congo
Explosión combinatoria
27
buttonTag: ['a', 'input']
buttonText: [ Submit, Very very long buttonText ]
buttonAHref: [ '#' ]
buttonSize: [ '' , small, big ]
buttonType: [ '', action, decline ]](https://image.slidesharecdn.com/icograma-comcongo-codecamp15oct2011-111015191359-phpapp02/85/Desarrollo-y-testeo-modular-de-interfaces-HTML5-MVC-Congo-framework-27-320.jpg)
![Desarrollo y testeo modular de interfaces •M E M B E R
kambrica.com/congo
Pairwise testing
29
buttonTag: ['a', 'input']
buttonText: [ Submit, Very very long buttonText ]
buttonAHref: [ '#' ]
buttonSize: [ '' , small, big ]
buttonType: [ '', action, decline ]](https://image.slidesharecdn.com/icograma-comcongo-codecamp15oct2011-111015191359-phpapp02/85/Desarrollo-y-testeo-modular-de-interfaces-HTML5-MVC-Congo-framework-29-320.jpg)
Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework
- 1. M E M B E R Desarrollo y testeo modular de interfaces HTML5 / MVC Santiago Bustelo CodeCamp Buenos Aires • 15 de octubre, 2011 @sbustelo Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar
- 2. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo ¿De qué tipo de desarrollo de interfaces estamos hablando? • Aplicaciones web complejas, escalando a sistemas de múltiples aplicaciones y sitios web con diferentes tecnologías back-end • Requerimientos de la interfaz: • Consistencia • Múltiples navegadores / dispositivos • Usabilidad, accesibilidad, SEO • No es aceptable generar la interfaz desde el código back-end • Es necesario construir HTML, CSS, JavaScript a nivel de producción 2
- 3. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo ¿Qué vamos a ver? • Contexto • Vista general del proceso de diseño y desarrollo front-end • Problemáticas específicas del desarrollo de interfaces HTML • Propuesta • Conjunto de prácticas y herramientas desarrolladas y probadas en proyectos reales para reducir desperdicios y asegurar calidad (¡y salud!) • Congo, nuestro framework open source para desarrollo y testeo modular HTML/CSS/JavaScript 3
- 4. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Contexto: Diseño y desarrollo de interfaces en sistemas de aplicaciones web complejas, usables y accesibles 4
- 5. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Aplicaciones y Sistemas de aplicaciones 5
- 6. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo 6 Aplicaciones y Sistemas de aplicaciones
- 7. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Proceso de diseño y desarrollo front-end 7 • IxD / AI / UX • Análisis, Wireframes • Validación: negocio / usuarios • Diseño de interfaces • Diseño a nivel de detalle • Validación: negocio / usuarios • Desarrollo de interfaces • Maquetado HTML/CSS/JavaScript • Validación: dispositivos • Prototipo navegable • Validación: negocio / usuarios
- 8. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Entregables de diseño y desarrollo de la interfaz para implementación • Documentación de procesos del usuario, elementos de la interfaz, operación y funcionamiento • HTML validado con negocio, usuario y dispositivos a ser generado por el back-end (“modelo terminado”) • El desarrollo front-end no se realiza sobre el framework de implementación, debido a que ello: • no permite trabajar la interfaz en el contexto correcto • no permite iteraciones económicas • genera apego a funcionalidades aunque no pasen validación UX 8
- 9. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Patrones de arquitectura de software Integración front/back end • MVC: Model-View- Controller • MVP: Model-View-Presenter • MVVM: Model-View- ViewModel • BBM: estándar de facto de arquitectura de software Desarrollo front-end • BBM 9
- 10. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo 10 • Trabajo reactivo sobre lo evidente e inmediato, poco o ningún planeamiento e infraestructura • Cada cambio “local” tiene consecuencias globales, obliga a repasar desarrollo previo (Shlemiel the painter) • Se acumulan incertidumbres que explotan tardíamente • Cada vez más difícil lograr escalabilidad, performance, mantenibilidad BBM: Big Ball of Mud (aka Shantytowns)
- 11. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Características desarrollo de código HTML, CSS, JavaScript • Poco modular por diseño (no existe “HTML include”) o implementación (IE toma sólo los primeros 31 STYLEs y SCRIPTs) • Capas geológicas, hacks, ofuscación • Múltiples formas de lograr un resultado similar, muchas erróneas • HTML: código no funcional • No podemos aplicar herramientas de testing de código funcional • Sobre el HTML debemos montar el código JavaScript, que pasa a heredar sus problemas estructurales 11
- 12. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Propuesta: 12 Desarrollo y testeo modular Congo framework
- 13. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo HTML no tiene estructura: hay que dársela • Estructuras, convenciones, mejores prácticas • Desarrollar herramientas transparentes y portables para: • brindar estructuras de soporte (scaffolding) no restrictivas • realizar pruebas sistemáticas • generar documentación y código para implementación de forma automática • Proceso eficiente y flexible a iteraciones • Productos: • código front-end modular, mantenible, testeable, reusable • documentación para implementación y mantenimiento de la interfaz 13
- 14. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Estructura: desarrollo modular Nathan Curtis: Modularity & Design Hierarchy 14
- 15. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Herramienta: Congo 15 • Para probar código funcional, podemos usar un mono loco • Para probar código no funcional (diseño), podemos usar… un mono pintor
- 16. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Desarrollo modular de la interfaz 16 • Separación del HTML en componentes independientes • Variables del componente permiten generar instancias de información, presentación y operación • Cada componente establece un contexto local para HTML/DOM, CSS y JavaScript • Paralelo funcional: objeto en OOP
- 17. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Componentes componente_full HTML template archivos JS archivos CSS variables y valores imagenes img1, img2… componente_minimo (todo es opcional) _componente_oculto HTML template 17
- 18. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Un componente simple… components/button/html.php <span class="button <?= $this->buttonType ?>"> <input type="submit" value="<?= $this->buttonText ?>" /> </span> components/button/variables.yml buttonType: [ action, confirm, decline ] buttonText: text components/button/styles.css .button INPUT { background-color:grey; color:white; } .button.action INPUT { background- color:blue; } .button.confirm INPUT { background- color:green; } .button.decline INPUT { background-color:red; } components/button/scripts.js $('.button A').click(function() { // Do something... }); 18
- 19. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Componentes, componentes, componentes components/formFoot/html.php <div class="formFoot"> <?php component( 'button', array('buttonText' => 'Submit') ); ?> or <a href="#">cancel</a> </div> 19
- 20. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Convenciones HTML, CSS y JS • El HTML siempre se abre y cierra por cada nivel. • Todo componente está contenido en un wrapper: SPAN (inline) o DIV (block) class="nombreDelComponente". • Evitar declaraciones CSS afectando elementos no contiguos • Cuanta más distancia haya entre un elemento y la regla de CSS que lo afecta, más difícil será seguirle el rastro. • Definimos globales sólo los tags principales (BODY, A, P…). Todas las demás declaraciones descenderán de .nombreDelComponente. • JavaScript no intrusivo, jQuery 20
- 21. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Componentes » Layouts components/_layouts/index/html.php <div class="layout-index"> <form> <div class="formBody"> Say hello to the world! </div> <?php component( 'formFoot' ); ?> </form> </div> 21
- 22. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Componente _html components/_html/html.php <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Hello world</title> <?php $this->resources('css'); ?> </head> <body> <?php $this->layout() ?> <?php $this->resources('js'); ?> </body> </html> • Incluye layout que le pasa el motor • Compila los recursos CSS y JS de todos los componentes • Recomendaciones Yahoo! Exceptional Performance: • Make JavaScript and CSS External • Put Stylesheets at Top • Put Scripts at Bottom • Minify JavaScript and CSS 22
- 23. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Hello World! 23
- 24. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Template tags 24 Evaluar una variable: <?= $this->variableName ?> Variables del motor: <?= $this->imgsPath ?> <?= $this->rsrcPath ?> TBD: root resources Incluir componente: <?php component( 'componentName' ); ?> <?php component( 'componentName', array('variableName' => 'value') ); ?> Para _html (se provee placeholder) <?php $this->layout() ?> <?php $this->resources('css'); ?> <?php $this->resources('js'); ?>
- 25. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Testeo del componente: combinatoria de variables • Se definen para cada componente grupos de valores de prueba para cada variable. • Al probar la combinatoria de variables y valores, se observan sistemáticamente todos los estados posibles del componente. • Paralelo funcional: unit testing 25
- 26. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Testeo del componente button 26 buttonType: [ action, confirm, decline ] buttonText: text
- 27. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Explosión combinatoria 27 buttonTag: ['a', 'input'] buttonText: [ Submit, Very very long buttonText ] buttonAHref: [ '#' ] buttonSize: [ '' , small, big ] buttonType: [ '', action, decline ]
- 28. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Pairwise: combinación de pares 28 Test Destination Class Seat Preference 1 Canada Coach Aisle 2 Mexico Coach Aisle 3 (defect!) USA Coach Aisle 4 Canada Business Class Aisle 5 Mexico Business Class Aisle 6 USA Business Class Aisle 7 Canada First Class Aisle 8 Mexico First Class Aisle 9 USA First Class Aisle 10 Canada Coach Window 11 Mexico Coach Window 12 (defect!) USA Coach Window 13 Canada Business Class Window 14 Mexico Business Class Window 15 USA Business Class Window 16 Canada First Class Window 17 Mexico First Class Window 18 USA First Class Window Test Destination Class Seat Preference 1 Canada Coach Aisle 3 (defect!) USA Coach Aisle 5 Mexico Business Class Aisle 8 Mexico First Class Aisle 9 USA First Class Aisle 11 Mexico Coach Window 13 Canada Business Class Window 15 USA Business Class Window 16 Canada First Class Window Michael Bolton: Pairwise Testing
- 29. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Pairwise testing 29 buttonTag: ['a', 'input'] buttonText: [ Submit, Very very long buttonText ] buttonAHref: [ '#' ] buttonSize: [ '' , small, big ] buttonType: [ '', action, decline ]
- 30. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Testeo de un layout 30
- 31. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Indice del proyecto 31
- 32. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Views 32 • Instancias de los layouts para documentación y prototipo navegable (TBD: variables) • Helper para generar layouts • Al generar un nivel en _sitetree.yml, se genera en _layouts un directorio con html.php placeholder • Genera estructura archivos para entregables finales components/_layouts/_sitetree.yml index login products: index detail
- 33. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Desarrollo vs. Entregables input config.php variables.yml components _html _layouts componente1 componente2 output documentation documentation index components (TBD) test comp1 test comp2 public_html rsrc images 33
- 34. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Platforms: Eat Your Own Dogfood 34
- 35. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Platforms: Eat Your Own Dogfood 35
- 36. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Platforms: Eat Your Own Dogfood 36
- 37. Desarrollo y testeo modular de interfaces •M E M B E R kambrica.com/congo Now, eat our dogfood! kambrica.com/congo 37 • Interfaces más robustas • Diseñadores y desarrolladores más saludables • Sitios de cachorro a adulto en mucho menos tiempo