• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework
 

Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework

on

  • 1,323 views

Presentación en CodeCamp BA, 15 de Octubre de 2011. ...

Presentación en CodeCamp BA, 15 de Octubre de 2011.

Al desarrollar interfaces para aplicaciones y sistemas de aplicaciones web HTML complejas con requerimientos de usabilidad, accesibilidad y SEO cubriendo múltiples plataformas (e.g, múltiples navegadores, responsive design), el diseño y desarrollo de la interfaz replica el modelo de "Shlemiel el pintor": en cada etapa se repiten pasos ya recorridos previamente, acumulando complejidad e incertidumbre hasta sobrepasar lo manejable.

Se presenta un conjunto de prácticas y herramientas desarrolladas y probadas en proyectos reales con distintos equipos de desarrollo, que permiten:
- Llevar el proceso de desarrollo de la interfaz a tiempo lineal en lugar de cuadrático.
- Incorporar pairwise testing cubriendo todos los casos durante el proceso de desarrollo, en lugar de tener que esperar a implementar la interfaz completa, operarla para encontrar casos imprevistos en QA y volver atrás.
- Reducir o eliminar los costos que impiden diseño y desarrollo de la interfaz por iteraciones.
- Reducir o eliminar costos de producción de documentación, prototipos para pruebas de usabilidad y entregables finales.
- Reducir o eliminar los costos de integración con entorno de producción.

Se presentará Congo, nuestro framework opensource en desarrollo para maquetación y testeo modular HTML5, como caso concreto, aplicable y extensible de estos conceptos.

Statistics

Views

Total Views
1,323
Views on SlideShare
1,129
Embed Views
194

Actions

Likes
1
Downloads
22
Comments
0

7 Embeds 194

http://www.icograma.com 163
http://192.168.50.15 11
http://192.168.0.15 8
http://www.piolaestudio.com 8
http://www.icograma.com.ar 2
http://www.linkedin.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework Presentation Transcript

    • Desarrollo y testeomodular de interfacesHTML5 / MVCSantiago Bustelo @sbusteloCodeCamp Buenos Aires • 15 de octubre, 2011 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina MEMBER http://creativecommons.org/licenses/by/2.5/ar
    • icograma.com/congo¿De qué tipo de desarrollo de interfacesestamos 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 Desarrollo y testeo modular de interfaces • 2 MEMBER
    • icograma.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 Desarrollo y testeo modular de interfaces • 3 MEMBER
    • icograma.com/congoContexto:Diseño y desarrollo deinterfaces en sistemas deaplicaciones web complejas,usables y accesibles Desarrollo y testeo modular de interfaces • 4 MEMBER
    • icograma.com/congoAplicaciones y Sistemas de aplicaciones Desarrollo y testeo modular de interfaces • 5 MEMBER
    • icograma.com/congoAplicaciones y Sistemas de aplicaciones Desarrollo y testeo modular de interfaces • 6 MEMBER
    • icograma.com/congoProceso de diseño ydesarrollo front-end• 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 Desarrollo y testeo modular de interfaces • 7 MEMBER
    • icograma.com/congoEntregables de diseño y desarrollo de lainterfaz 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 Desarrollo y testeo modular de interfaces • 8 MEMBER
    • icograma.com/congoPatrones de arquitectura de softwareIntegración front/back end Desarrollo front-end• MVC: Model-View- • BBM Controller• MVP: Model-View-Presenter• MVVM: Model-View- ViewModel• BBM: estándar de facto de arquitectura de software Desarrollo y testeo modular de interfaces • 9 MEMBER
    • icograma.com/congoBBM: Big Ball of Mud(aka Shantytowns)• 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 Desarrollo y testeo modular de interfaces • 10 MEMBER
    • icograma.com/congoCaracterísticas desarrollo de códigoHTML, 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 Desarrollo y testeo modular de interfaces • 11 MEMBER
    • icograma.com/congoPropuesta:Desarrollo y testeo modularCongo framework Desarrollo y testeo modular de interfaces • 12MEMBER
    • icograma.com/congoHTML 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 Desarrollo y testeo modular de interfaces • 13 MEMBER
    • icograma.com/congoEstructura: desarrollo modular Nathan Curtis: Modularity & Design Hierarchy Desarrollo y testeo modular de interfaces • 14 MEMBER
    • icograma.com/congoHerramienta: Congo• Para probar código funcional, podemos usar un mono loco• Para probar código no funcional (diseño), podemos usar… un mono pintor Desarrollo y testeo modular de interfaces • 15 MEMBER
    • icograma.com/congoDesarrollo modular de la interfaz• 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 Desarrollo y testeo modular de interfaces • 16 MEMBER
    • icograma.com/congoComponentes componente_full componente_minimo HTML template (todo es opcional) archivos JS archivos CSS _componente_oculto variables y valores HTML template imagenes img1, img2… Desarrollo y testeo modular de interfaces • 17 MEMBER
    • icograma.com/congoUn componente simple… components/button/html.php components/button/styles.css <span class="button .button INPUT { background-color:grey; <?= $this->buttonType ?>"> color:white; } <input type="submit" .button.action INPUT { background- value="<?= $this->buttonText ?>" /> color:blue; } </span> .button.confirm INPUT { background- color:green; } .button.decline INPUT { background-color:red; } components/button/variables.yml buttonType: [ action, confirm, decline ] components/button/scripts.js buttonText: text $(.button A).click(function() { // Do something... }); Desarrollo y testeo modular de interfaces • 18 MEMBER
    • icograma.com/congoComponentes, componentes, componentes components/formFoot/html.php <div class="formFoot"> <?php component( button, array(buttonText => Submit) ); ?> or <a href="#">cancel</a> </div> Desarrollo y testeo modular de interfaces • 19 MEMBER
    • icograma.com/congoConvenciones 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 Desarrollo y testeo modular de interfaces • 20 MEMBER
    • icograma.com/congoComponentes » 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> Desarrollo y testeo modular de interfaces • 21 MEMBER
    • icograma.com/congoComponente _html components/_html/html.php <!DOCTYPE HTML> • Incluye layout que le pasa el motor <html> • Compila los recursos CSS y JS de <head> todos los componentes <meta charset="utf-8" /> <title>Hello world</title> • Recomendaciones Yahoo! <?php $this->resources(css); ?> Exceptional Performance: </head> <body> • Make JavaScript and CSS External <?php $this->layout() ?> <?php $this->resources(js); ?> • Put Stylesheets at Top </body> </html> • Put Scripts at Bottom • Minify JavaScript and CSS Desarrollo y testeo modular de interfaces • 22 MEMBER
    • icograma.com/congoHello World! Desarrollo y testeo modular de interfaces • 23 MEMBER
    • icograma.com/congoTemplate tagsEvaluar una variable: Incluir componente: <?= $this->variableName ?> <?php component ( componentName ); ?> Variables del motor: <?php component <?= $this->imgsPath ?> ( componentName, array (variableName => value) ); ?> <?= $this->rsrcPath ?> TBD: root resources Para _html (se provee placeholder) <?php $this->layout() ?> <?php $this->resources(css); ?> <?php $this->resources(js); ?> Desarrollo y testeo modular de interfaces • 24 MEMBER
    • icograma.com/congoTesteo 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 Desarrollo y testeo modular de interfaces • 25 MEMBER
    • icograma.com/congoTesteo del componente button buttonType: [ action, confirm, decline ] buttonText: text Desarrollo y testeo modular de interfaces • 26 MEMBER
    • icograma.com/congoExplosión combinatoria buttonTag: [a, input] buttonText: [ Submit, Very very long buttonText ] buttonAHref: [ # ] buttonSize: [ , small, big ] buttonType: [ , action, decline ] Desarrollo y testeo modular de interfaces • 27 MEMBER
    • icograma.com/congoPairwise: combinación de paresTest Destination Class Seat Preference Test Destination Class Seat Preference1 Canada Coach Aisle 1 Canada Coach Aisle2 Mexico Coach Aisle 3 (defect!) USA Coach Aisle3 (defect!) USA Coach Aisle 5 Mexico Business Class Aisle4 Canada Business Class Aisle 8 Mexico First Class Aisle5 Mexico Business Class Aisle 9 USA First Class Aisle6 USA Business Class Aisle 11 Mexico Coach Window7 Canada First Class Aisle 13 Canada Business Class Window8 Mexico First Class Aisle 15 USA Business Class Window9 USA First Class Aisle 16 Canada First Class Window10 Canada Coach Window11 Mexico Coach Window12 (defect!) USA Coach Window13 Canada Business Class Window14 Mexico Business Class Window15 USA Business Class Window16 Canada First Class Window17 Mexico First Class Window18 USA First Class Window Michael Bolton: Pairwise Testing Desarrollo y testeo modular de interfaces • 28 MEMBER
    • icograma.com/congoPairwise testing buttonTag: [a, input] buttonText: [ Submit, Very very long buttonText ] buttonAHref: [ # ] buttonSize: [ , small, big ] buttonType: [ , action, decline ] Desarrollo y testeo modular de interfaces • 29 MEMBER
    • icograma.com/congoTesteo de un layout Desarrollo y testeo modular de interfaces • 30 MEMBER
    • icograma.com/congoIndice del proyecto Desarrollo y testeo modular de interfaces • 31 MEMBER
    • icograma.com/congoViews• Instancias de los layouts para components/_layouts/_sitetree.yml documentación y prototipo index navegable (TBD: variables) login• Helper para generar layouts • Al generar un nivel en products: _sitetree.yml, se genera en index _layouts un directorio con detail html.php placeholder• Genera estructura archivos para entregables finales Desarrollo y testeo modular de interfaces • 32 MEMBER
    • icograma.com/congoDesarrollo vs. Entregables input output config.php documentation variables.yml documentation index components components (TBD) _html test comp1 _layouts test comp2 componente1 public_html componente2 rsrc images Desarrollo y testeo modular de interfaces • 33 MEMBER
    • icograma.com/congoPlatforms: Eat Your Own Dogfood Desarrollo y testeo modular de interfaces • 34 MEMBER
    • icograma.com/congoPlatforms: Eat Your Own Dogfood Desarrollo y testeo modular de interfaces • 35 MEMBER
    • icograma.com/congoPlatforms: Eat Your Own Dogfood Desarrollo y testeo modular de interfaces • 36 MEMBER
    • icograma.com/congoNow, eat our dogfood!icograma.com/congo• Interfaces más robustas• Diseñadores y desarrolladores más saludables• Sitios de cachorro a adulto en mucho menos tiempo Desarrollo y testeo modular de interfaces • 37 MEMBER