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