Desarrollo Web Ágil con Symfony, Bootstrap y Angular

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

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

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.

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.

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.

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

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.

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

más difundidas

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)

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.

Los requests (solicitudes web) siguen el siguiente
flujo a través de Symfony.

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).

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:

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

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)

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.

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

Front-end
● Alertas
● Badges
● Jumbotron
● Paginación

Front-end
● Barras de progreso
● Listas
● Paneles
● Tablas

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.

Front-end
Sistema de Grillas (Grid System)
Comportamiento del sistema de grillas a diferentes resoluciones y clases CSS

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)

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.

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.

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}}

● 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

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

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.

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

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

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

Desarrollo Web Ágil con Symfony, Bootstrap y Angular

Recomendados

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Desarrollo Web Ágil con Symfony, Bootstrap y Angular (20)

Último (13)

Desarrollo Web Ágil con Symfony, Bootstrap y Angular