AngularJS + Drupal = Un Dúo Superheróico
DrupalCon Latinamerica Bogota 2015

@brolag - @argosbass
Nosotros
Alfredo Bonilla


Danny Mora
¡Pura Vida!
:)
Headless Drupal ¿Qué es?

Headless Drupal
Drupal sin su sistema front end nativo. Siendo utilizado como backend y sirviendo como modelo de datos a una aplicación front en
Existen varios tipos de aplicaciones que se pueden considerar Headless Drupal, entre ellos aplicaciones móviles, frameworks front end, incluso Drush.
Headless Drupal no es la nueva manera de hacer Drupal. Es una de ellas.
Ventajas
- Mayor control sobre el front end.
- Permite utilizar tecnologías front end de vanguardia.
- Nos permite utilizar Drupal como una parte del stack solamente y no como todas las capas de este.
- Podemos utilizar las herramientas de modelado de contenido que Drupal ofrece.
Desventajas
- Perdemos las funcionalidades y facilidades que nos ofrece Drupal para el front end (funciones de theming, módulos como display suite o panels, manejo de bloques, etc).
- Debemos crear el modelo de datos dos veces: en Drupal y en la aplicación.
- Necesitamos equipos de trabajo muy especializados para cada parte del stack.
Angular JS
Es un framework de JavaScript de código abierto mantenido por Google que utiliza el patron MVC (o como lo describe Igor Minar MVW whatever-works-for-you) y ayuda a la creación de aplicaciones del lado del cliente del tipo Single Page Application o aplicaciones de una sola página.
¿Por qué AngularJS?
- Two-way data binding. En palabras simples cuando el modelo cambia, la vista refleja esos cambios y viceversa.
- Inyección de dependencias: las dependencias que necesitamos en nuestros módulos son instanciadas y proporcionadas por AngularJS.
- Un crecimiento acelerado en popularidad.
Búsquedas en Google

Desventajas
- Curva de aprendizaje muy empinada.
- Documentación oficial no muy amigable.
- En páginas con muchos elementos interactivos Angular puede volverse muy lento. Se recomienda no tener más de 2000 bindings en un mismo documento.
Curva de aprendizaje AngularJS

Angular JS: Buenas prácticas
- Tener cuidado con la estructura de los archivos. Yeoman (http://yeoman.io/) nos podría ayudar mucho.
- Utilizar convenciones en nuestro código. Ver https://github.com/mgechev/angularjs-style-guide
- Utilizar directivas. Esto con el motivo de poder tener un único lugar donde el DOM es modificado y también porque podemos crear pruebas unitarias para estas.
- Mantener nuestros controladores lo más pequeños posible.
REST y Drupal 8
Drupal 8.0.0-beta6
https://www.drupal.org/node/2415675
REST UI
https://www.drupal.org/project/restui
Cors-drupal8
https://github.com/Brolag/cors-drupal8
Recursos
- Tutorial: ¿cómo crear un servicio web REST en Drupal 8? http://www.appnovation.com/blog/setup-drupal-8-restful-web-services-3-easy-steps
- Tutorial: ¿cómo crear un recurso REST en Drupal 8?http://www.7sabores.com/blog/como-crear-un-recurso-rest-drupal-8
Drupal + AngularJS
https://github.com/argosbass/angularjs-drupal8
Agradecimientos especiales
dmouse
enzo
jmolivas
juampy
omers
Preguntas y Respuestas
Gracias por su atención
https://slides.com/alfredobonilla/angularjs-drupal-un-duo-superheroico
AngularJS + Drupal = ¡Un Dúo Superheróico!
By Alfredo Bonilla
AngularJS + Drupal = ¡Un Dúo Superheróico!
- 972