El documento describe las principales tecnologías para el desarrollo web ágil como Symfony, Bootstrap y Angular. Explica que Symfony es un framework PHP que sigue el patrón MVC, Bootstrap provee componentes front-end para diseños responsivos y Angular es un framework JavaScript que permite crear aplicaciones web dinámicas. También habla sobre metodologías ágiles como Scrum y XP y cómo estas tecnologías pueden usarse de forma conjunta.

1. Desarrollo Web Ágil con Symfony,
Bootstrap y Angular
Bayron Guevara
Investigador Independiente
FLISOL 2014

2. Contenido
● Principios del Desarrollo Ágil
● Metodologías y componentes del Desarrollo Ágil
● Scrum y XP: Metodologías ágiles más difundidas
● Symfony como framework de desarrollo Server-Side
● Bootstrap: Framework para Front-end
● Angular: Framework Javascript
● Colocando todo junto

3. Principios del Desarrollo Ágil
El desarrollo ágil o agile development en inglés es un
conjunto de metodologías de desarrollo de software
orientadas a agilizar o acelerar su lanzamiento inicial y
mejoramiento continuo.
Se fundamenta en tres (3) principios:
1. Ciclo corto de desarrollo (generalmente de 2 a 4
semanas).
Opuesto al enfoque tradicional donde el lanzamiento del
software se prolonga hasta satisfacer la mayoría de los
requerimientos del cliente, el desarrollo ágil promueve
ciclos cortos e incrementales -llamados iteraciones- que
permiten validar tempranamente la funcionalidad.

4. Principios del Desarrollo Ágil
2. Equipos auto-organizados y comunicación cara a cara.
Tratan de evitar demasiados formalismos y enfatizan la
comunicación directa entre los miembros del equipo de
desarrollo y el cliente.
3. Adaptabilidad y respuesta rápida a los cambios.
Se evalúan los resultados en cada iteración y se
mantiene un canal de comunicación constante con el
cliente para validar requerimientos y responder
oportunamente a los cambios que puedan surgir.

5. Principios del Desarrollo Ágil

6. Metodologías y componentes del
Desarrollo Ágil
Se han desarrollado numerosas metodologías o
implementaciones prácticas del desarrollo ágil.
Siendo las más populares las siguientes:
1. Scrum. Es la metodología actualmente más
utilizada en el desarrollo web y define un equipo
de trabajo con 3 roles: ScrumMaster (facilitador
del proyecto), ProductOwner (representante del
cliente) y el Team (desarrolladores). Cada ciclo
se llama sprint durante el cual se desarrollan
mejoras potencialmente entregables o
utilizables.

7. Metodologías y componentes del
Desarrollo Ágil
2. Lean Software Development (LSD).
Inspirado en el modelo de producción LEAN, el
cual fue originado en la Toyota, se basa en los
siguientes principios:
● Eliminar los desperdicios
● Ampliar el aprendizaje
● Decidir lo más tarde posible
● Reaccionar tan rápido como sea posible
● Potenciar el equipo
● Véase todo el conjunto

8. Metodologías y componentes del
Desarrollo Ágil
3. Programación Extrema (XP). Considera el
cambio de requerimientos como un aspecto
natural del desarrollo de software, además de
dar mayor importancia a las relaciones
interpersonales del equipo de trabajo.

9. Scrum y XP: Metodologías ágiles
más difundidas
Comprende varias reuniones que van desde obtener retro-
alimentación hasta definir los requerimientos.
● Scrum diario o stand-up meeting.
● Reunion de planificacion del Sprint
● Reunion de revision del Sprint
● Retrospectiva del Sprint
El Scrum mantiene una serie de documentos que le
permiten conocer el estado actual y futuro del proyecto:
Product Backlog, Sprint Backlog, Burn down Chart.
Scrum

10. Scrum y XP: Metodologías ágiles
más difundidas

11. Scrum y XP: Metodologías ágiles
más difundidas
Sus características fundamentales son:
● Entregas pequeñas
● Historias de usuario para documentar requerimientos
● El Cliente debe estar presente continuamente.
● Diseño simple para facilitar su comprensión por el equipo
● Pruebas unitarias continuas. Por ejemplo, el Desarrollo
Guiado por Pruebas (TDD)
● Refactorización del código (Refactoring).
● Programación en Parejas
● Propiedad compartida del código
Programación Extrema (XP)

12. Symfony como framework de
desarrollo Server-Side
Symfony es un framework para el desarrollo de
aplicaciones web en PHP. Con framework me refiero a
un conjunto de herramientas y a una metodología de
desarrollo. Alrededor de Symfony existe una
comunidad y una filosofía basada en el software libre
y de código abierto.
Symfony esta inspirado en otro framework llamado
Ruby on Rails que comparte el mismo patrón de
diseño de apps llamado Modelo-Vista-Controlador.

13. Symfony como framework de
desarrollo Server-Side
Los requests (solicitudes web) siguen el siguiente
flujo a través de Symfony.

14. Symfony como framework de
desarrollo Server-Side
Symfony posee una arquitectura orientada a
componentes llamados Bundles. Cada bundle puede
hacer uso de los servicios expuestos por otros
bundles a través de un mecanismo llamado Inyección
de Dependencias.
Arquitectura
Esta flexibilidad permite desarrollar
componentes con mayor facilidad.
Prueba de ello son los miles de
componentes de terceros que se pueden
encontrar en el repositorio KnpBundles
(http://knpbundles.com).

15. Symfony como framework de
desarrollo Server-Side
Symfony utiliza un administrador de dependencias para
aplicaciones PHP llamado Composer, el cual es similar
a YUM o APT para Linux, o a Bundler para Ruby.
"require": {
"monolog/monolog": "1.2.*"
}
Se le considera el sucesor de Pear ya que es
más completo y sencillo de utilizar. Por ejemplo
para indicar que la librería monolog es una
dependencia de nuestro proyecto, basta con
usar el siguiente código:

16. Symfony como framework de
desarrollo Server-Side
El patrón de diseño MVC es muy práctico en las
aplicaciones web, ya que permite dividirlas en tres
componentes: Modelo de datos, Vista del contenido
y Controlador de la lógica de la aplicación.
Twig como motor
de plantillas
Doctrine o Propel
para modelar la
base de datos

17. Symfony como framework de
desarrollo Server-Side
Una de las características más útiles que poseen
los frameworks modernos, y que es parte de la
filosofía RAD, es la capacidad de generar código
fuente y prototipos funcionales de manera
automática a partir de simples comandos.
Symfony posee generadores para crear Bundles,
Controladores CRUD (Create-Read-Update-
Delete) a partir de modelos de datos, crear
entidades de datos a partir de una BD, etc.
Generadores (Scaffolding)

18. Bootstrap: Framework para
Front-end
Es un framework para el desarrollo de interfaces de
usuario de aplicaciones web (front-end). Podemos
usarlo tanto por medio de CSS puro o mediante
extensiones del lenguaje como Less o Sass.
Esta fundamentado sobre la tendencia actual en web
respecto a diseñar primero para las pantallas móviles
(mobile-first) y en crear diseños responsivos
(responsive-design); de manera que nos permite
desarrollar aplicaciones web que luzcan y funcionen
bien tanto en móviles como en computadoras de
escritorio o laptops.

19. Bootstrap: Framework para
Front-end
Consta de los siguientes componentes prefabricados
que nos permitirán embellecer automáticamente
nuestros elementos web:
Componentes Principales
● Menú desplegable
● Grupos de botones
● Input Groups
● Barras de Navegación

20. Bootstrap: Framework para
Front-end
Componentes Principales
● Alertas
● Badges
● Jumbotron
● Paginación

21. Bootstrap: Framework para
Front-end
Componentes Principales
● Barras de progreso
● Listas
● Paneles
● Tablas

22. Bootstrap: Framework para
Front-end
Sistema de Grillas (Grid System)
Bootstrap se basa en un sistema de cuadricula de 12
columnas para crear el layout de una página web. Usa
la técnica de CSS conocida como media queries para
ajustar automáticamente el ancho de cada columna de
acuerdo al tamaño/resolución de la pantalla.
Además dispone de una serie de clases que nos
permiten especificar si un conjunto de grids (celdas)
continuas se mostrarán horizontalmente o por el
contrario se apilaran unas debajo de otras.

23. Bootstrap: Framework para
Front-end
Sistema de Grillas (Grid System)
Comportamiento del sistema de grillas a diferentes resoluciones y clases CSS

24. Bootstrap: Framework para
Front-end
Organización de la grilla en pantallas mayores a 992px (md: medium devices)
La misma grillla se apila automáticamente en resoluciones de pantalla pequeñas
(menores a 992px, ej: iPhone, Windows Phone)

25. AngularJS: Framework Javascript
Angular es un framework javascript para el
desarrollo de aplicaciones web dinámicas
mediante una arquitectura MVW (Model-View-
Whatever). A diferencia de otros, Angular extiende
el lenguaje HTML introduciendo etiquetas que
permiten controlar el comportamiento y agregar
dinamismo a una página web.
Fue desarrollado inicialmente por Google y esta
bajo la licencia MIT, que es una licencia permisiva
de software libre.

26. AngularJS: Framework Javascript
Veamos un sencillo ejemplo práctico en Angular
usando el clásico Hello World!, donde lo que
escribimos en el campo de texto se refleja
inmediatamente en el encabezado de abajo.

27. AngularJS: Framework Javascript
Este ejemplo consta básicamente de cuatro pasos:
1. Activar Angular dentro de una porción de
nuestra página: directiva ng-app
2. Incluir el código fuente de la librería:
angular.min.js
3. Declarar un modelo de datos y enlazarlo a un
formulario: directiva ng-model
4. Utilizar una referencia al modelo declarado
previamente: sintaxis {{modelName}}

28. AngularJS: Framework Javascript
● Data Binding. Permite actualizar la vista
automáticamente cuando el modelo cambia y
viceversa.
● Controlador. Permite definir acciones al interactuar
con los elementos del DOM (click, enviar un form).
● Deep Linking. Una forma de generar links (URIs)
que llevan a una ubicación especifica de la app.
● Validación de formularios. Podemos definir
validación client-side de formularios de manera
automática y declarativa.
Características principales

29. AngularJs: Framework Javascript
● Comunicación con el servidor. Posee servicios pre-
fabricados de comunicación basados en AJAX,
facilitando la integración con sistemas de terceros.
● Componentes reutilizables. Similar a los componentes
de Bootstrap pero usando nuevos tags o directivas
HTML.
● Exportable. Permite integrarlo fácilmente a otras
tecnologías.
● Inyectable. Las dependencias se definen de forma
declarativa y cualquier componente se puede
reemplazar por uno propio.
Características principales

30. Colocando todo junto
Hemos visto a grandes rasgos algunas de las
metodologías y tecnologías más populares para
el desarrollo web. Ahora vamos a aplicarlo todo
junto en un solo ejemplo.
Aunque por defecto Bootstrap emplea jQuery
como framework javascript para lograr la
interactividad de sus componentes,
alternativamente existen ports del mismo
implementados en otros frameworks. Para
AngularJS se encuentran: UI Bootstrap y Mobile
Angular UI.

31. Colocando todo junto
Por otra parte gracias a estas tecnologías de frontend,
ahora el desarrollo de backends -Symfony en nuestro
caso- se centra en proveer al frontend de los datos en
bruto para generar y almacenar dinámicamente el
contenido del sitio. Esto usualmente significa
desarrollar un webservice bajo los principios de la
arquitectura REST y usando JSON o XML como
formato de datos.
La ventaja de este enfoque es que el
mismo servicio de datos se puede
reutilizar en otras plataformas como son
apps móviles nativas, Smart TVs, etc. Emblema de
JSON

32. Colocando todo junto
Es un framework para el desarrollo web móvil
basado en Bootstrap y Angular. Se integra como
un módulo y adicionalmente provee funciones
para el reconocimiento de gestos propios de
pantallas táctiles entre los que se encuentran:
tap, fast-click, swipe, etc.
Podemos ver una demo en acción a través del
siguiente enlace:
http://mobileangularui.com/demo
Mobile Angular UI

33. Gracias por su atención.
Desarrollo Web Ágil con Symfony,
Bootstrap y Angular