Post on 27-Jan-2015
description
Desarrollo y testeo modular de interfaces HTML5 / MVCSantiago Bustelo
CodeCamp Buenos Aires • 15 de octubre, 2011
@sbustelo
MEMBER
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
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
3
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Contexto:
Diseño y desarrollo de interfaces en sistemas de aplicaciones web complejas, usables y accesibles
4
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Aplicaciones y Sistemas de aplicaciones
5
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
6
Aplicaciones y Sistemas de aplicaciones
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
Desarrollo y testeo modular de interfaces •MEMBER
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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)
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.com/congo
Caracterí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
11
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Propuesta:
12
Desarrollo y testeo modular Congo framework
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Estructura: desarrollo modular
Nathan Curtis: Modularity & Design Hierarchy
14
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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 paraHTML/DOM, CSS y JavaScript
• Paralelo funcional: objeto en OOP
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Hello World!
23
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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'); ?>
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Testeo del componente button
26
buttonType: [ action, confirm, decline ]buttonText: text
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Explosión combinatoria
27
buttonTag: ['a', 'input']buttonText: [ Submit, Very very long buttonText ]buttonAHref: [ '#' ]buttonSize: [ '' , small, big ]buttonType: [ '', action, decline ]
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Pairwise: combinación de pares
28
Test Destination Class Seat Preference1 Canada Coach Aisle2 Mexico Coach Aisle3 (defect!) USA Coach Aisle4 Canada Business Class Aisle5 Mexico Business Class Aisle6 USA Business Class Aisle7 Canada First Class Aisle8 Mexico First Class Aisle9 USA First Class Aisle10 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
Test Destination Class Seat Preference1 Canada Coach Aisle3 (defect!) USA Coach Aisle5 Mexico Business Class Aisle8 Mexico First Class Aisle9 USA First Class Aisle11 Mexico Coach Window13 Canada Business Class Window15 USA Business Class Window16 Canada First Class Window
Michael Bolton: Pairwise Testing
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Pairwise testing
29
buttonTag: ['a', 'input']buttonText: [ Submit, Very very long buttonText ]buttonAHref: [ '#' ]buttonSize: [ '' , small, big ]buttonType: [ '', action, decline ]
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Testeo de un layout
30
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Indice del proyecto
31
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.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.ymlindex
login
products: index detail
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.com/congo
Desarrollo vs. Entregables
inputconfig.phpvariables.ymlcomponents
_html_layoutscomponente1componente2
outputdocumentation
documentation indexcomponents (TBD)
test comp1test comp2
public_htmlrsrc
images
33
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Platforms: Eat Your Own Dogfood
34
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Platforms: Eat Your Own Dogfood
35
Desarrollo y testeo modular de interfaces •MEMBER
icograma.com/congo
Platforms: Eat Your Own Dogfood
36
MEMBER
Desarrollo y testeo modular de interfaces •
icograma.com/congo
Now, eat our dogfood!
icograma.com/congo
37
• Interfaces más robustas
• Diseñadores y desarrolladoresmás saludables
• Sitios de cachorro a adultoen mucho menos tiempo