backbone js y drupal. app móvil con pareja de conveniencia
TRANSCRIPT
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
