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.

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