Backbone JS y Drupal. App móvil con pareja de conveniencia

BackboneJS y DrupalAplicación móvil con una pareja

de conveniencia

www.danielprimo.es@delineas

Drupal

JS

¿Quienes somos?● Daniel Primo● @delineas● www.danielprimo.es● Freelance● Programador PHP y

analista Drupal

● Borja Quevedo● @niltsiar● Ingeniero de

Telecomunicaciones● Programador .NET y

Java

¿Dónde nos encontramos?

1. Conseguir buenas y sosegadas prácticas de programación

2. Tecnología común conocida pero no de uso intensivo: Javascript

¡Recomendamos empezar por Katas de programación!

Ecosistema Drupal

Ecosistema App Javascript

Comienzan las curvas

● Con Javascript se puede hacer de todo

● Muchas herramientas, gran fragmentación

● Perdidos! Cambios de versiones constantes

● Casi todo “está muerto” antes de empezar a usarlo

● Boilerplate como punto de partida

¡VIVA PRUSIA!

¿Por qué esta tecnología?● Desarrollo para Android e iPhone● Teórica curva de aprendizaje sencilla

○ HTML5 + Javascript● Sencha

○ primer intento, resultados malos○ demasiada “magia”

● Ionic + AngularJS○ el futuro más inmediato○ “verde” en el momento del inicio

La próxima con Ionic

¿Por qué BackboneJS y jQuery Mobile?

● “Sencillo”● Flexible y escalable● Amplias comunidades de desarrollo● Veteranía y soporte continuado● Boilerplates “a punta pala”● Necesitan jQuery● Artículo: http://moduscreate.com/5-best-mobile-web-app-frameworks-jquery-mobile-backbone-part4/

BackboneJS

● Modelo MVC: Permite gestionar una estructura en la programación

● Elementos desacoplados● Tus datos son modelos, si los modelos

cambian, tus vistas lo harán solas● Los modelos se agrupan en colecciones● Router: el hook_menu en el lado del cliente● Depende de underscore y jquery

● Arquitectura de aplicación escalable sobre Backbone○ Nos da soluciones para mejorar nuestra app

● Módulos● Vistas especializadas -> item, colección...● Bloques para “pintar” nuestro HTML● Eventos globales

MarionetteJS

jQuery Mobile

● Montar y listo: ideal para programadores● Solo se encarga de la interfaz, evitamos que

gestione el enrutado (ya lo hace Backbone)● No existe una integración inicial ● Disponibilidad de themes diferentes

Caso concreto: Blog

● Module● Router● Controller● Collection - Model● View● Template

También nos ayuda

● RequireJS: inyector de dependencias● Underscore: helpers● Fastclick: no esperar 300ms al doble click● Grunt: automatizador de tareas● Bower: gestión de paquetes● Handlebars: gestión de plantillas● Leaflet: mapas

Cordova / PhoneGap

● Crear aplicaciones nativas basadas en aplicaciones de HTML5 + Javascript

● Multiplataforma● Sencilla adaptación para web developers● Nos da acceso a funcionalidades de

dispositivo desde JS○ cámara, geoposicionamiento, aparato conectado...

● Por línea de comandos○ cordova create MiApp○ cordova platform add android○ cordova build|emulate|run android

Cordova / PhoneGap

● Adobe compra PhoneGap● Cordova es la versión libre de PhoneGap

gestionada por Apache● PhoneGap tiene un constructor de

aplicaciones online: PhoneGap Build● Los comandos de uno y otro son

intercambiables

Cordova / PhoneGap

● Problemas de rendimiento● “Las aplicaciones híbridas no son nativas”● Hay que afinar lo máximo posible el

rendimiento del backend● Simplificar la interfaz (KISS)

○ jQuery Mobile puede ser un estorbo más que una ayuda

Debug en móvil, ¿posible?

● Google Chrome Web Inspector● Weinre: WEb INspector REmote

○ El insepctor de Chrome te permite hacer los mismo sin necesidade de este extra

● Genymotion: emulador de distintos dispositivos de Android. Emula cámara y posición

● Eclipse: necesario para generar android● Xcode: necesario para emular y generar ios

Drupal como backend

● Aprovechar un sitio existente para crear una API REST de contenidos, usuarios...

● Módulo Services para proveer la funcionalidad○ No siempre es rápido○ URL’s de API inteligentes○ Cuidar el control de acceso

Services en Drupal

Complementos de Services

● Services views○ Integrar services con views

● JSON field formatter○ Formateo en JSON

● Image URL formatter○ Imagen como URL (también estilos de imagen)

● OAuth○ Autenticación

Publicar contenido

● Crear formulario● Capturar posición geográfica● Capturar imagen (fotografia o libreria)● Subir imagen● Enviar contenido

En camino

● Optimizar rendimiento● Minimización y compresión de ficheros● Publicar versión de iPhone iOS8 desde

Yosemite● Añadir mejores controles de acceso al

backend

eskerrik askomuchas gracias

[email protected]@delineas