1. Desarrollo Web gil con Symfony, Bootstrap y Angular Bayron Guevara InvestigadorIndependiente FLISOL 2014

2. Contenido Principios del Desarrollo gil Metodologas y componentes del Desarrollo gil Scrum y XP: Metodologas giles ms 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 ingls es un conjunto de metodologas 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 mayora 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 comunicacin cara a cara. Tratan de evitar demasiados formalismos y enfatizan la comunicacin directa entre los miembros del equipo de desarrollo y el cliente. 3. Adaptabilidad y respuesta rpida a los cambios. Se evalan los resultados en cada iteracin y se mantiene un canal de comunicacin constante con el cliente para validar requerimientos y responder oportunamente a los cambios que puedan surgir. 5. Principios del Desarrollo gil 6. Metodologas y componentes del Desarrollo gil Se han desarrollado numerosas metodologas o implementaciones prcticas del desarrollo gil. Siendo las ms populares las siguientes: 1. Scrum. Es la metodologa actualmente ms 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. Metodologas y componentes del Desarrollo gil 2. Lean Software Development (LSD). Inspirado en el modelo de produccin LEAN, el cual fue originado en la Toyota, se basa en los siguientes principios: Eliminar los desperdicios Ampliar el aprendizaje Decidir lo ms tarde posible Reaccionar tan rpido como sea posible Potenciar el equipo Vase todo el conjunto 8. Metodologas y componentes del Desarrollo gil 3. Programacin Extrema (XP). Considera el cambio de requerimientos como un aspecto natural del desarrollo de software, adems de dar mayor importancia a las relaciones interpersonales del equipo de trabajo. 9. Scrum y XP: Metodologas giles ms difundidas Comprende varias reuniones que van desde obtener retro- alimentacin 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: Metodologas giles ms difundidas 11. Scrum y XP: Metodologas giles ms difundidas Sus caractersticas fundamentales son: Entregas pequeas Historias de usuario para documentar requerimientos El Cliente debe estar presente continuamente. Diseo simple para facilitar su comprensin por el equipo Pruebas unitarias continuas. Por ejemplo, el Desarrollo Guiado por Pruebas (TDD) Refactorizacin del cdigo (Refactoring). Programacin en Parejas Propiedad compartida del cdigo ProgramacinExtrema(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 metodologa de desarrollo. Alrededor de Symfony existe una comunidad y una filosofa basada en el software libre y de cdigo abierto. Symfony esta inspirado en otro framework llamado Ruby on Rails que comparte el mismo patrn de diseo de apps llamado Modelo-Vista-Controlador. 13. Symfony como framework de desarrollo Server-Side Los requests (solicitudes web) siguen el siguiente flujo a travs 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 travs de un mecanismo llamado Inyeccin 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 ms completo y sencillo de utilizar. Por ejemplo para indicar que la librera monolog es una dependencia de nuestro proyecto, basta con usar el siguiente cdigo: 16. Symfony como framework de desarrollo Server-Side El patrn de diseo MVC es muy prctico en las aplicaciones web, ya que permite dividirlas en tres componentes: Modelo de datos, Vista del contenido y Controlador de la lgica de la aplicacin. 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 caractersticas ms tiles que poseen los frameworks modernos, y que es parte de la filosofa RAD, es la capacidad de generar cdigo fuente y prototipos funcionales de manera automtica 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 disear primero para las pantallas mviles (mobile-first) y en crear diseos responsivos (responsive-design); de manera que nos permite desarrollar aplicaciones web que luzcan y funcionen bien tanto en mviles como en computadoras de escritorio o laptops. 19. Bootstrap: Framework para Front-end Consta de los siguientes componentes prefabricados que nos permitirn embellecer automticamente nuestros elementos web: ComponentesPrincipales Men desplegable Grupos de botones Input Groups Barras de Navegacin 20. Bootstrap: Framework para Front-end ComponentesPrincipales Alertas Badges Jumbotron Paginacin 21. Bootstrap: Framework para Front-end ComponentesPrincipales Barras de progreso Listas Paneles Tablas 22. Bootstrap: Framework para Front-end SistemadeGrillas(GridSystem) Bootstrap se basa en un sistema de cuadricula de 12 columnas para crear el layout de una pgina web. Usa la tcnica de CSS conocida como media queries para ajustar automticamente el ancho de cada columna de acuerdo al tamao/resolucin de la pantalla. Adems dispone de una serie de clases que nos permiten especificar si un conjunto de grids (celdas) continuas se mostrarn horizontalmente o por el contrario se apilaran unas debajo de otras. 23. Bootstrap: Framework para Front-end SistemadeGrillas(GridSystem) Comportamiento del sistema de grillas a diferentes resoluciones y clases CSS 24. Bootstrap: Framework para Front-end Organizacin de la grilla en pantallas mayores a 992px (md: medium devices) La misma grillla se apila automticamente en resoluciones de pantalla pequeas (menores a 992px, ej: iPhone, Windows Phone) 25. AngularJS: Framework Javascript Angular es un framework javascript para el desarrollo de aplicaciones web dinmicas 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 pgina 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 prctico en Angular usando el clsico 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 bsicamente de cuatro pasos: 1. Activar Angular dentro de una porcin de nuestra pgina: directiva ng-app 2. Incluir el cdigo fuente de la librera: 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 automticamente 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 ubicacin especifica de la app. Validacin de formularios. Podemos definir validacin client-side de formularios de manera automtica y declarativa. Caractersticasprincipales 29. AngularJs: Framework Javascript Comunicacin con el servidor. Posee servicios pre- fabricados de comunicacin basados en AJAX, facilitando la integracin con sistemas de terceros. Componentes reutilizables. Similar a los componentes de Bootstrap pero usando nuevos tags o directivas HTML. Exportable. Permite integrarlo fcilmente a otras tecnologas. Inyectable. Las dependencias se definen de forma declarativa y cualquier componente se puede reemplazar por uno propio. Caractersticasprincipales 30. Colocando todo junto Hemos visto a grandes rasgos algunas de las metodologas y tecnologas ms 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 tecnologas 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 dinmicamente 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 mviles nativas, Smart TVs, etc. Emblema de JSON 32. Colocando todo junto Es un framework para el desarrollo web mvil basado en Bootstrap y Angular. Se integra como un mdulo y adicionalmente provee funciones para el reconocimiento de gestos propios de pantallas tctiles entre los que se encuentran: tap, fast-click, swipe, etc. Podemos ver una demo en accin a travs del siguiente enlace: http://mobileangularui.com/demo MobileAngularUI 33. Gracias por su atencin. Desarrollo Web gil con Symfony, Bootstrap y Angular