Desarrollo de aplicaciones web móviles: cuándo, por qué y cómo

Hay 6.800 millones de personas en el planeta, 5.100 millones de las cuales poseen un teléfono celular. Y hoy, un porcentaje cada vez mayor de estos dispositivos son teléfonos inteligentes. Según un estudio reciente del Pew Research Center, la cantidad de usuarios que acceden a Internet en sus teléfonos inteligentes se ha más que duplicado en los últimos 5 años, al igual que la cantidad de usuarios que descargan y usan aplicaciones móviles. De aquellos que usan Internet o el correo electrónico en sus teléfonos, más de un tercio se conecta principalmente a través de sus dispositivos portátiles.

De hecho, la informática móvil se está volviendo cada vez más omnipresente... y es impresionante.

Excepto, por supuesto, cuando no lo es.

Como usuario de un dispositivo móvil, pocas cosas son tan frustrantes y difíciles de navegar como una aplicación web móvil mal diseñada, o incluso una aplicación nativa.

Y como desarrollador de aplicaciones móviles, pocas cosas pueden ser tan intensamente irritantes como esforzarse por admitir la mayor variedad posible de clientes móviles, cada uno de los cuales tiene su propio conjunto frustrante de idiosincrasias. Ya sea que elija desarrollar una aplicación web móvil, nativa o híbrida, la búsqueda para admitir múltiples navegadores móviles, dispositivos más exóticos y enfrentarse a varias plataformas puede ser una experiencia bastante desgarradora.

Por supuesto, no todos los desarrolladores de hoy deben preocuparse por admitir clientes móviles. Pero la naturaleza cada vez más omnipresente de los dispositivos y aplicaciones móviles sugiere fuertemente que aquellos que no necesitan brindar soporte a los clientes móviles en la actualidad probablemente necesitarán hacerlo en un futuro no muy lejano. Entonces, si aún no está pensando en el desarrollo de aplicaciones móviles, probablemente debería hacerlo.

Aplicación web móvil frente a aplicación nativa frente a aplicación híbrida

Como sucede con la mayoría de las selecciones de tecnología, no existe una respuesta única para todos cuando se trata del tipo de aplicación móvil que se debe desarrollar. Existen numerosas mejores prácticas de aplicaciones web a considerar, no todas las cuales son técnicas. ¿Quién es tu público objetivo? ¿Es más probable que prefieran una web móvil o una aplicación nativa? ¿Cuál es la diferencia entre aplicaciones nativas e híbridas? ¿Qué recursos de desarrollo tiene y con qué tecnologías móviles están más familiarizados? ¿Cuál es el modelo de licencias y ventas que está imaginando para su producto?

En términos generales (aunque siempre hay excepciones), la ruta de la aplicación web móvil es más rápida y económica que la ruta de la aplicación móvil nativa, especialmente cuando el objetivo es admitir una amplia gama de dispositivos. Por el contrario, puede haber capacidades nativas del dispositivo móvil (como el sensor de movimiento, etc.) que son esenciales para su aplicación, pero a las que solo se puede acceder a través de una aplicación nativa (lo que, por lo tanto, haría que la elección de la aplicación web móvil no sea necesaria). arranque para usted).

Y más allá de la pregunta entre las aplicaciones web antiguas y las aplicaciones nativas, una aplicación móvil híbrida puede ser la respuesta correcta para usted, según sus requisitos y limitaciones de recursos. Las aplicaciones híbridas, como las aplicaciones nativas, se ejecutan en el propio dispositivo (a diferencia de dentro de un navegador), pero están escritas con tecnologías web (HTML5, CSS y JavaScript) y, por lo general, están respaldadas por un marco de aplicaciones híbridas. Más específicamente, las aplicaciones híbridas se ejecutan dentro de un contenedor nativo y aprovechan el motor del navegador del dispositivo (pero no el navegador) para representar el HTML y procesar el JavaScript localmente. Una capa de abstracción de web a nativa permite el acceso a las capacidades del dispositivo a las que no se puede acceder en las aplicaciones web móviles, como el acelerómetro, la cámara y el almacenamiento local.

Pero cualquiera que sea la elección que haga, ya sea una aplicación web móvil, una aplicación nativa o híbrida, tenga cuidado de investigar adecuadamente y confirmar sus suposiciones. Como ejemplo, a los efectos de este tutorial de desarrollo de aplicaciones web móviles, es posible que haya decidido desarrollar una aplicación móvil nativa para comercio electrónico para vender sus productos. Pero, según Hubspot, el 73 % de los usuarios de smartphones dice que usa la web móvil más que las aplicaciones nativas para hacer sus compras… Así que, en este caso, puede que hayas apostado al caballo equivocado.

Y luego, por supuesto, están las consideraciones prácticas de tiempo y presupuesto. Como dice uno de mis dichos favoritos, "más rápido, mejor, más barato... elige dos" . Si bien el tiempo de comercialización y las limitaciones de costos son de suma importancia en el desarrollo de aplicaciones web, es crucial no comprometer demasiado la calidad en el proceso. Es bastante difícil recuperar la confianza de un usuario que ha tenido una mala primera experiencia.

De hecho, las aplicaciones móviles web, nativas e híbridas son bestias radicalmente diferentes, cada una con su propio conjunto único de beneficios y desafíos. Este tutorial de desarrollo web móvil se enfoca específicamente en las metodologías y herramientas a emplear, y las trampas que se deben evitar, en el desarrollo de aplicaciones web móviles altamente funcionales, intuitivas y fáciles de usar.

El desarrollo de aplicaciones web móviles requiere una planificación detallada

Identificar sus requisitos (o los de su cliente) es una de las mejores prácticas más esenciales en el desarrollo de aplicaciones, móviles o de otro tipo. Investigue cuidadosamente las capacidades específicas para determinar si se pueden lograr en su aplicación web móvil. Es bastante frustrante y altamente improductivo darse cuenta de que una o más de sus funciones esenciales de cliente no son compatibles, cuando ya ha invertido el tiempo y los recursos para diseñar la interfaz basada en web y la infraestructura de soporte.

Otro problema común para los desarrolladores de aplicaciones web móviles novatos es suponer que el código basado en la web para un navegador de escritorio funcionará "tal cual" en un navegador móvil. No. Definitivamente hay diferencias y, si no eres consciente de ellas, definitivamente pueden morderte. La funcionalidad de reproducción automática de la etiqueta HTML5 <video> , por ejemplo, no funciona en navegadores móviles. De manera similar, las propiedades de transition y opacity de CSS no son compatibles (o al menos no son compatibles de manera constante) en la mayoría de los navegadores móviles en la actualidad. También tendrá problemas con algunos métodos de API web en una plataforma móvil, como la API de transmisión de música SoundCloud que requiere Adobe Flash, que no es compatible con la mayoría de los dispositivos móviles.

Un factor particularmente complicado en el desarrollo de aplicaciones web móviles es que la vida útil de los dispositivos móviles tiende a ser mucho más corta que la de las pantallas de escritorio (la vida útil promedio de un teléfono celular en los EE. UU. es de alrededor de 21 meses). Estos períodos de vida más cortos de los dispositivos, acompañados de lanzamientos constantes de nuevos dispositivos y tecnologías móviles, producen un panorama en constante cambio de dispositivos a los que se apunta. Si bien trabajar en un navegador alivia un poco este problema al protegerlo de una serie de problemas específicos del dispositivo, aún deberá diseñar una vista basada en navegador que admita muchas resoluciones de pantalla diferentes (además de ajustarse adecuadamente para orientaciones horizontales y verticales). ).

También se debe pensar en admitir las pantallas Retina de Apple (pantallas de cristal líquido que tienen una densidad de píxeles lo suficientemente alta como para que el ojo humano no pueda discernir píxeles individuales a una distancia de visualización típica). Varios productos de Apple, incluidos iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini y iPad Air, ofrecen pantallas Retina. Para una aplicación web móvil en particular, es importante tener en cuenta que una pantalla Retina hace que las imágenes de baja resolución (que generalmente se muestran en dispositivos móviles) se vean borrosas y se puede producir pixelación. La mejor solución de desarrollo de aplicaciones en estos casos es hacer que el servidor reconozca que la solicitud proviene de un dispositivo Retina y luego proporcionar una imagen alternativa de mayor resolución al cliente.

Si desea utilizar algunas de las funciones geniales de HTML5, recuerde verificar de antemano que la funcionalidad que está buscando sea compatible con el entorno de dispositivos que probablemente usarán sus clientes. Por ejemplo, en iOS 6 y superior, no hay soporte para la funcionalidad getUserMedia del navegador ya que solo se puede acceder a la cámara a través de aplicaciones nativas. Dos excelentes recursos para verificar qué es compatible con dispositivos y navegadores específicos son caniuse.com y html5test.com.

Las consultas de medios CSS3 también pueden ayudarlo a proporcionar contenido personalizado para cada dispositivo. Aquí hay un código de ejemplo para capturar diferentes características del dispositivo, como la densidad de píxeles, la resolución de la pantalla y la orientación:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Optimización del rendimiento de su aplicación web móvil

"¡Dios mío, esto es tan lento!" Como desarrollador de aplicaciones web móviles, esas son probablemente las últimas palabras que desea escuchar de uno de sus usuarios. Por lo tanto, debe pensar detenidamente cómo reducir y optimizar cada byte y transferencia del servidor para reducir el tiempo de espera del usuario. No es realista esperar que las transferencias siempre se realicen a través de una red Wi-Fi, y debe saber que el 60 % de los usuarios de la web móvil dicen que esperan que un sitio se cargue en su teléfono móvil en 3 segundos o menos (fuente). De manera similar, Google descubrió que, por cada cinco segundos adicionales de tiempo de carga, el tráfico se redujo en un 20% (y también vale la pena señalar que los motores de búsqueda consideran los tiempos de carga como parte de su cálculo del puntaje de calidad de la página).

Como parte de este tutorial de desarrollo de aplicaciones web móviles, aquí hay algunos consejos que pueden ayudar a optimizar el rendimiento de sus aplicaciones web móviles y minimizar la latencia:

• Optimización de imagen. Se sabe que el tiempo de carga de la imagen es uno de los mayores problemas de rendimiento que afectan la carga de la página en los dispositivos móviles. El uso de optimizadores de imágenes en línea, como smushit.com, puede ser útil para solucionar este problema.
• Compresión de código. La compresión de sus archivos JavaScript y CSS, según la cantidad de código que tenga, puede tener un impacto potencial significativo en el rendimiento.
• Consultas de base de datos.
  • Algunos navegadores de dispositivos móviles no aceptan tantas cookies como los navegadores de escritorio, lo que puede resultar en la necesidad de ejecutar más consultas de lo habitual. Por lo tanto, el almacenamiento en caché del lado del servidor es especialmente crucial cuando se admiten clientes de aplicaciones web móviles.
  • Recuerde emplear los filtros apropiados para evitar la inyección de consultas SQL que de otro modo podría comprometer la seguridad de su sitio y servidor.
• Redes de entrega de contenido (CDN). Si planea proporcionar muchos videos, imágenes, archivos de audio u otros tipos de medios, se recomienda encarecidamente el uso de un CDN. Algunos de los CDN comerciales más comunes incluyen Amazon S3, Microsoft Windows Azure y MaxCDN. Las ventajas de usar un CDN son numerosas e incluyen:
  • Rendimiento de descarga mejorado. Aprovechar los recursos de una CDN le permite distribuir la carga, ahorrar ancho de banda y aumentar el rendimiento. Las mejores CDN ofrecen mayor disponibilidad, menor latencia de red y menor pérdida de paquetes. Además, muchas CDN brindan una selección de centros de datos distribuidos globalmente, lo que permite que las descargas se realicen desde un servidor más cercano a la ubicación del usuario (lo que resulta en menos saltos de red y descargas más rápidas).
  • Más descargas simultáneas. Los navegadores normalmente limitan la cantidad de conexiones simultáneas a un solo dominio, después de lo cual se bloquean las descargas adicionales hasta que se complete una de las descargas anteriores. A menudo puede ver este límite en acción al descargar muchos archivos grandes desde el mismo sitio. Cada CDN adicional (en un dominio diferente) permite descargas simultáneas adicionales.
  • Análisis mejorado. Muchos CDN comerciales brindan informes de uso que pueden complementar los análisis de su propio sitio web y que pueden ofrecer una mejor cuantificación de las vistas y descargas de videos. GTmetrix, por ejemplo, tiene una excelente herramienta de informes de sitios web para monitorear y optimizar las fuentes cargadas en su sitio.

Herramientas de desarrollo de aplicaciones web móviles

“Las herramientas correctas para el trabajo correcto” es un viejo adagio que se aplica tanto al desarrollo de software como a cualquier otro dominio. Este tutorial proporciona una introducción a algunas de las herramientas más populares y ampliamente utilizadas para el desarrollo de aplicaciones web móviles, pero tenga en cuenta que puede haber otras herramientas que sean las "adecuadas" para desarrollar su aplicación web móvil, dependiendo de sus requerimientos y recursos disponibles.

Elegir el marco de aplicación web móvil de JavaScript adecuado

Dado que el desarrollo de aplicaciones web móviles tiende a crear muchos de los mismos desafíos comunes, como la compatibilidad entre navegadores y HTML y CSS incoherentes en los navegadores móviles, se han desarrollado marcos (basados ​​en HTML5 y CSS3) que están diseñados específicamente para abordar estos problemas y para trabajar de la mejor manera posible en una amplia gama de teléfonos inteligentes y tabletas. La mayoría de estos marcos de aplicaciones web móviles son livianos, lo que ayuda a facilitar la navegación web móvil rápida sin comprometer la apariencia de su sitio.

Ampliando nuestra visión más allá del panorama móvil, si hay un marco JavaScript popular que vale la pena mencionar, es jQuery. Si está familiarizado con la versión de escritorio, le recomiendo probar jQuery Mobile para su aplicación web móvil. Tiene una biblioteca de widgets que convierte el marcado semántico en un formato compatible con gestos, lo que facilita las operaciones en las pantallas táctiles. La última versión consta de una base de código realmente liviana que incluye una gran cantidad de elementos gráficos que realmente pueden mejorar su interfaz de usuario.

Otra alternativa, Sencha Touch, también está ganando cuota de mercado rápidamente. Ofrece un rendimiento excelente en general y ayuda a producir una interfaz de usuario web móvil que en gran medida se ve y se siente como una nativa. Su biblioteca de widgets con todas las funciones se basa en la biblioteca JavaScript ExtJS de Sencha.

Aquí hay algunas diferencias clave a considerar al comparar jQuery Mobile y Sencha Touch:

• Mira y siente. En términos generales, la apariencia de una aplicación Sencha Touch es más nítida y superior a la de una aplicación móvil jQuery, pero es importante recordar que tales reacciones tienden a ser muy subjetivas.
• Extensibilidad. jQuery Mobile ofrece muchas extensiones de terceros y está inherentemente diseñado para ser altamente extensible, mientras que Sencha Touch es actualmente mucho más un marco "cerrado".
• Soporte de dispositivos. jQuery Mobile actualmente apunta a una sección transversal más grande de dispositivos que Sencha Touch.
• HTML “vs.” JavaScript. jQuery se centra en gran medida en HTML (es decir, amplía y manipula HTML existente en JavaScript), mientras que la codificación de Sencha Touch está completamente basada en JavaScript. (Este es un ejemplo, por cierto, del conjunto de habilidades de su equipo de desarrollo que es importante tener en cuenta al hacer sus selecciones de tecnología).
• Dependencias externas. jQuery mobile requiere jQuery y jQuery UI para la manipulación de DOM, mientras que Sencha Touch no tiene dependencias externas.
• Curva de aprendizaje. La mayoría de los desarrolladores encuentran que el tiempo de aceleración con jQuery es menor que el de Sencha Touch, quizás impulsado por el gran porcentaje de desarrolladores web que ya están familiarizados con las bibliotecas estándar de jQuery.

Marcos receptivos y aplicaciones web móviles

En los últimos años, ha comenzado a surgir un número cada vez mayor de marcos receptivos, y dos de los más populares actualmente son Bootstrap y Foundation. En resumen, los marcos receptivos simplifican y agilizan el diseño y la implementación de la interfaz de usuario receptiva basada en la web, encapsulando los diseños y paradigmas de interfaz de usuario más comunes en un marco reutilizable y optimizado para el rendimiento. Basados ​​principalmente en CSS y JavaScript, muchos de estos marcos son de código abierto, de descarga gratuita y fácilmente personalizables. A menos que tenga un conjunto de requisitos muy peculiar, es probable que el uso de uno de estos marcos reduzca el nivel de esfuerzo para diseñar e implementar su aplicación web móvil.

Al examinar las dos opciones principales, Bootstrap y Foundation, algunas de las diferencias clave a considerar incluyen:

• Plataformas dirigidas. Si bien Bootstrap es compatible con dispositivos móviles, tabletas y computadoras de escritorio, está orientado principalmente al uso de computadoras de escritorio. Foundation, por otro lado, está diseñado para prácticamente todos los tipos y tamaños de pantalla.
• Compatibilidad del navegador. Bootstrap es compatible con IE7 o superior, mientras que Foundation solo es compatible con IE9 o superior.
• Diversidad de diseños y componentes. Bootstrap tiene una colección significativamente mayor de elementos de interfaz de usuario que la que ofrece Foundation.
• Cambio de tamaño automático. Con Foundation, la cuadrícula se contrae y se estira según la altura y el ancho del navegador actual, mientras que Bootstrap solo admite un conjunto predefinido de tamaños de cuadrícula en función de un conjunto estándar de tamaños de pantalla.

Depuración y prueba de aplicaciones web móviles

La depuración de aplicaciones web móviles puede ser complicada y un tanto frustrante, especialmente si necesita buscar diferentes dispositivos para probar o instalar SDK para una emulación (generalmente imperfecta) de las plataformas de clientes específicas.

En este contexto, una clara ventaja del desarrollo web móvil (en comparación con el desarrollo de aplicaciones nativas) es que puede utilizar herramientas de desarrollo estándar basadas en navegador para depurar su aplicación. Basado en mi preferencia personal por la depuración remota, el que recomiendo en este tutorial de desarrollo de aplicaciones es Chrome con sus DevTools. Otras opciones estándar incluyen Firefox con Firebug o las herramientas Dragonfly de Opera.

Algunas de las razones por las que prefiero Chrome con sus DevTools incluyen:

• Emulador móvil en DevTools de Chrome. Esta es quizás una razón suficiente para seleccionar Chrome para la depuración de aplicaciones web móviles. Las características clave incluyen la emulación de eventos táctiles, la suplantación de agentes de usuario, la limitación del ancho de banda de la red, las anulaciones de geolocalización, las anulaciones de orientación del dispositivo y la emulación de tipo de medio CSS.
• Redactor interactivo. Capacidad para editar JavaScript o CSS sobre la marcha.
• Depurador superior de JavaScript. Permite puntos de interrupción DOM y brinda la capacidad de perfilar el tiempo de ejecución de su código JavaScript.
• Visores JSON y XML incorporados. Evita la necesidad de complementos para inspeccionar las respuestas del servidor.
• Compatibilidad con el protocolo Android Debug Bridge (ADB) directamente a través de USB. Facilita la instanciación sencilla de una sesión de depuración remota. (Aquí hay un buen tutorial de Google sobre cómo comenzar a depurar de forma remota en Chrome).
• Inspección dinámica de recursos. Le permite inspeccionar las fuentes de datos locales de su aplicación, incluidas las bases de datos IndexedDB o Web SQL, el almacenamiento local y de sesión, las cookies y los recursos de caché de aplicaciones. También puede inspeccionar rápidamente los recursos visuales de su aplicación, incluidas imágenes, fuentes y hojas de estilo.

Para probar el diseño y la compatibilidad de navegación cruzada de su aplicación web, también puede usar algunas herramientas útiles en línea, como BrowserStack. Simplemente ingrese la URL de su aplicación, seleccione el navegador, la versión y el sistema operativo, y obtendrá la vista emulada (y la velocidad de carga) de su sitio en ese entorno. Otra herramienta útil para este propósito es CrossBrowserTesting.

Envolver

Con la continua y rápida expansión del número, la variedad y la sofisticación de los dispositivos móviles en el mercado y en uso hoy en día, es probable que aumente sustancialmente la necesidad de aplicaciones móviles eficaces, fáciles de usar y de alto rendimiento. Ser capaz de desarrollar estas aplicaciones de manera inteligente y eficiente, por lo tanto, seguirá siendo de suma importancia.

Se deben considerar muchos factores al elegir entre opciones de aplicaciones móviles web, nativas e híbridas para dispositivos móviles. Cada uno tiene sus propias ventajas, pero las aplicaciones web móviles a menudo representarán su opción de desarrollo más eficiente (y, por lo tanto, de tiempo de comercialización). Si elige seguir ese camino, espero que este tutorial de desarrollo de aplicaciones web móviles lo ayude a llegar de manera más directa y exitosa a su destino.