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