Desarrollo ágil de aplicaciones web

Yalmar Ponce Atencio

Contenido

• Aplicaciones web• Componentes• MVC

• Aplicaciones web modernas• Desarrollo ágil• Frameworks (lado cliente/lado servidor)

• Desarrollo ágil != Aplicaciones agiles • Desarrollo ++ágil• Generadores de código

Aplicaciones web

• En la actualidad existen muchas tecnologías que se pueden emplear para implementar Aplicaciones Web, donde las más importantes y son consideradas como estándares son:• HyperText Markup Language (HTML5)• JavaScript• CSS3

• En palabras de uno de los más prestigiosos diseñadores Web, Miguel Ripoll:• “A good website has to be fast to download, easy to navigate, appealing to the

eye, on brand and on target, offer something different from the rest, have added value, and constitute a unique experience. Simple, really.”

• “Una buena página web debe ser rápida, fácil de navegar, de apariencia agradable, objetiva, ofrecer algo diferente al resto, tener un valor agregado, y constituir una experiencia única. Simple, realmente.”

Componentes principales

• HTML5• Elementos principales • Organización del documento o página web

• CSS3• Aspectos visuales• Apariencia

• JavaScript• Comportamiento• Simula una aplicación

Historia de HTML

• 1991 HTML version preliminar – Tim Berners-Lee – HTML Tags• 1993 HTML• 1993 HTML 2 preliminar• 1995 HTML 2 – W3C• 1995 HTML 3 preliminar• 1997 HTML 3.2 – “Wilbur”• 1997 HTML 4 - ”Cougar” - CSS • 1999 HTML 4.01• 2000 XHTML preliminar• 2001 XHTML • 2008 HTML5 / XHTML5 preliminar• 2011 HTML5 especificaciones completas• 2022 HTML5 vigencia esperada

HTML5 un mejor HTML

• Más simple• Mejor documentado• Mejor organización• Más completo• Todo en uno

Nuevos elementos

Canvas

<canvas id="example" width="200" height="200">

Canvas no es soportado en este navegador

</canvas>

<script>

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = "rgb(255,0,0)";

context.fillRect(30, 30, 50, 50);

</script>

Video

<video width="360" height="240" controls= "controls" >

<source src="LittleWing.mp4“ type="video/mp4"> </source>

Video no es soportado en este navegador

</video>

Video

CSS3

• CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML• CSS se creó para separar el contenido de

la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas• Ahora posee control en el propio lenguaje

Características

• Algunas de las características que ofrece CSS3:• Bordes redondeados, con degradados, imágenes

• Cajas con sombra

Características

• Múltiples imágenes de fondo

• Múltiples columnas

Características

• Texto con sombra

Características

• Transparencia

JavaScript

• Es un lenguaje de programación interpretado• No requiere compilación• Utilizado en páginas web• Sintaxis semejante a la del lenguaje Java y el lenguaje C

JavaScript

• Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web• Se provee al lenguaje JavaScript para interactuar

con una página web mediante DOM• DOM(Modelo de Objetos del Documento) es una

interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML

JavaScript

• Para utilizar JavaScript en una página web, el método correcto es incluir como un archivo externo, tanto por cuestiones de accesibilidad, como practicidad y velocidad en la navegación.

<script src=“archivo.js”></script>• Es posible agregar JavaScript directamente en la

página web, pero no es recomendado

Juntando todo

Diferenciando página web de aplicación web

MVC (Modelo-Vista-Controlador)

Aplicaciones web modernas• La velocidad de transmisión de datos que se tiene ahora es tal

que ahora parece razonable diseñar aplicaciones Web que puedan substituir incluso las aplicaciones de escritorio más complejas.• Aún nos quieren convencer de que esto no se puede hacer

con los estándares actuales de la W3C (HTML, CSS, etc) y que se requiere agregar funcionalidad propietaria (flash, Silverlight) a los browsers para poder crear aplicaciones atractivas y poderosas.• La realidad es que esto no es cierto, los estándares han

evolucionado mucho y hoy en día es posible crear aplicaciones realmente sofisticadas basadas exclusivamente en estándares.

GMail (correo electrónico)

Outlook

Ms Office Web

AutoCAD 360

Lucida Chart (google)

WebGL (OpenGL)

¿Juegos? League of legends

Desarrollo ágil

• El desarrollo ágil de software son métodos de ingeniería del software basados en el desarrollo iterativo e incremental, donde los requerimientos y soluciones evolucionan mediante la colaboración de grupos auto organizados y multidisciplinarios

Desarrollo de software

• Notablemente dificil para entregar• A tiempo y• Con lo presupuestado

• Procesos formalizados• Organización para manejar procesos• Documentación

Desarrollo (de software) ágil• Actualmente es una práctica bien establecida• Está en crecimiento• Muchas compañias lo practican• Compañias son ágiles en la transisión

Diferencias

Comando y control

Dirigido por la documentación

Proceso serial por naturaleza

Diseño complejo y anticipado

Probar después

Burocratico

Pesado, procesos rígidos

Equipos auto-administrados

Comunicación fluida

Iterativo

Evolucionario/Diseño iterativo

Pruebas en etapas tempranas

Colaborativo

Ligero, proceso adaptable

Desarrollo tradicional

Desarrollo ágil

Desarrollo tradicional (Cascada)

Requerimientos del sistema

Detallar los requerimientos

Especificaciones funcionales

Diseño en alto nivel

Diseño detallado

Implementación

Pruebas

Entrega

Especificaciones de los requerimientos del sistema

Especificacion de los requerimientos del software

Documentación del Diseño en alto nivel

Documentación del Diseño detallado

Completar etapas de codificación

Documentación aceptada

Ejecutar producto

Scrum

Diseñar+codificar+probarPlanificarDefinir revisar

iterar

Herramientas (Frameworks)• La palabra inglesa "framework" (marco de trabajo)

define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfrentar y solucionar un problema particular, consecuentemente será capaz de tratar problemas de índole similar.

Ventajas y desventajas

• Eficientes• Seguros • Soporte• Costo

• Aprender a usarlos• Complicados de

personalizar• Código abierto

Frameworks para aplicaciones web• Lado del cliente• Interfaz de usuario• Interación con el usuario• Comunicación con el servidor de aplicaciones• Actualización de datos (requestupdate)

• Lado del servidor• Comunicación con el servidor de datos• Administración de los datos

Framworks lado cliente

• jQuery• jQuery UI• jQuery Grid• ExtJS• Prototype• Angular• Dojo

jQuery

• Simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX

jQuery UI

jQuery Grid

Sencha ExtJs

Recomendación

• Usted decida• Recomiendo ExtJs

Framworks lado servidor

• Manipulación y administración de datos• Conexión con la base de datos (servidor de datos)• MySQL, Oracle, PostgreSQL, SQLite, etc.

• CRUD• Create• Read• Update• Delete

Framworks lado servidor

• CodeIgniter• Yii• Symfony 2• Zend• Django• nodejs

Codeigniter

• Ventajas• Simple• Librerias básicas• Comunidad active• Buena documentación

• Desventajas• No posee maneras de crear datos tabulares• No ORM• No genera CRUD

Yii

• Ventajas• ORM con AR • Genera CRUD usando Gii• Posee generadores tabulares ajax• Nice layout and theming organisation

• Desventajas• Las funciones ajax no son bien documentadas es

necesario modificar código javascript.• AR no es tan Bueno como doctrine

Symfony

• Ventajas• Soporta ORM con doctrine• Genera la base de datos desde configuracion doctrine a

traves de YML

• Desventajas• Sobre configurado• Problemas de estabilidad con la version 2• Muy grande• Talvez un poco lento comparado con los otros

Zend

• Ventajas• De los creadores de PHP• Se supone que ellos saben lo major para PHP• Zend Server puede mejorar desempeño

• Cons• Decorators son horribles y gastan tiempo• Para crear formularios es necesario escribir código html• Frameworks deben ahorrar tiempo, no obligor a aprender

como configurar decoradores para decorar elementos básicos HTML

• Configuration basadas en XML?, por que no usar solamente arrays?

Recomendación

• Por lo expuesto

Yii• Pero …• No es necesario usar alguno de estos, es una

codificación relativamente simple y puede ser hecho por nosotros mismos.

Desarrollo ágil != Aplicaciones agiles• Buenas practicas • Uso de estándares• Uso de frameworks• Uso de metodologías

ágiles

• Buenas practicas• Código eficiente y

probado• Frameworks ligeros• Evitar mezclar

frameworks• Evitar sobrecargar la

aplicación

Desarrollo ++ágil

• ¿Como hacer más ágil el proceso de desarrollo de software?• Herramientas RAD• Generadores de software

Herramientas RAD

• Wysiwyg• Escritorio

• Delphi, VS.Net (VB, C#)• Web

• Sencha Architect

Generadores de software

• Abordaje no muy nuevo• Desde los 80’s

• Requiere de algunas especificaciones• Ideal para aplicaciones que comparten

características similares (sistemas de información)• No aplicable al desarrollo de software especifico• AutoCAD, Office, Juegos, etc.

Propuesta

• Define una base de datos• A partir de las tablas generar un proyecto para

Sencha Architect• Sencha Architect genera aplicación web

Demo

• Cree una base de datos y tablasCREATE DATABASE cursos;USE cursos;CREATE TABLE `estudiante` (`id` INT(8) NOT NULL AUTO_INCREMENT,`dni` INT(8) NOT NULL,`matricula` INT(8) NOT NULL,`escuela` VARCHAR(255) NOT NULL,`universidad` VARCHAR(255) NOT NULL,`nombres` VARCHAR(255) NOT NULL,`ap_pat` VARCHAR(255) NOT NULL,`ap_mat` VARCHAR(255) NOT NULL,`direccion` VARCHAR(255) NOT NULL,`nacimiento` VARCHAR(255) NOT NULL,`email` VARCHAR(255) NOT NULL,`telefono` VARCHAR(255) NOT NULL,`curso` VARCHAR(255) NOT NULL,PRIMARY KEY (`id`));...

Demo

• Algunas especificaciones<?php//database serverdefine('DB_SERVER', "localhost");//database login namedefine('DB_USER', "root");//database login passworddefine('DB_PASS', "123");//database namedefine('DB_DATABASE',"cursos");define('PROJECT_PATH', "cursos");?>

Demo

• Ejecutar el sistema generador de aplicaciones web• Este crea un proyecto para Sencha Arquitect• Puede ser usando otras herramientas

Demo (Usando Sencha Arquitect)

Demo Construir la aplicación (build)

Demo

• Creara los archivos necesarios para ejecutar la aplicación usando el framework ExtJs

DemoAplicación final

Conclusiones

• Proyecto de desarrollo de aplicación web• Usando código plano

• Tiempo estimado 50 hrs (ejemplo)• Usando Frameworks

• Tiempo estimado 10 hrs• Usando Generador de aplicaciones

• Tiempo estimado 1 hrs + ajustes• Puede ser menos tiempo