por .

Aplicaciones Móviles: ¿Nativo, Web, Híbrido?

El desarrollo de aplicaciones móviles crece cada día: al más personas contar con un dispositivo móvil y descubrir las bondades de tener tecnología al alcance de sus dedos, más personas vuelcan sus miradas a desarrollar nuevas aplicaciones que puedan utilizarse dentro de estos dispositivos, para así llegar a más consumidores.

Nosotros, como desarrolladores, debemos orientar a nuestros clientes a escoger de manera adecuada que rumbo coger en su siguiente aplicación, dentro de las tres opciones disponibles:

  • Aplicaciones web optimizadas para móviles
  • Aplicaciones móviles nativas
  • Aplicaciones híbridas


Facebook Movil vs. Facebook Web

En este artículo, explicaremos un poco la diferencia entre cada una de estas variantes de desarrollo móvil y orientaremos un poco a cómo escoger cual te beneficia para ese proyecto que tienes en mente.

Desarrollo Móvil Web y Desarrollo Móvil Nativo

Para tratar de comparar ambos, debemos definir primero cada uno de ellos:

Desarrollo Móvil Web

El desarrollo móvil web es el desarrollo de aplicaciones web regulares, pero optimizadas para ser visualizadas desde un dispositivo móvil o tablet. Por definición, estas aplicaciones serán accedidas utilizando el navegador que viene por defecto dentro de los dispositivos: ya sea Safari (o algún otro) en iPhone o iPad y digamos Dolphin (entre otros) para Android.

Características de aplicaciones móviles web

  1. Serán accedidas desde un navegador desde el teléfono.
  2. Para todos los dispositivos se desplegará casi que de la misma forma.
  3. Es prácticamente lo mismo que desarrollar cualquier aplicación o sitio web: utilizas HTML, CSS y JavaScript.

Panagamers Mobile
Panagamers Mobile

Ejemplos de aplicaciones móviles web: Facebook Móvil, Linked In Touch, Panagamers — Visto desde un móvil, entre otros.

Desarrollo Móvil Nativo

Por otra parte, el desarrollo móvil nativo es el desarrollo de aplicaciones que serán instaladas en el sistema de archivos de cada dispositivo y serán distribuídas por los mercados de aplicaciones móviles, como el AppStore (iOS) o el Play Market (Android).

Características de las aplicaciones móviles nativas

  1. Serán descargadas desde el mercado de aplicaciones para el sistema operativo: Play Market o el AppStore.
  2. Es una aplicación distinta por sistema operativo: una para Android y otra para iOS (y en muchos casos una para iPhone y otra para iPad).
  3. Se desarrollan con lenguajes como Java (Android) u Objective-C (iOS), pero hay alternativas como Appcelerator que permiten desarrollarlas utilizando JavaScript puro, para ambas plataformas.

CarteleraPanama
CarteleraPanama

Ejemplos de aplicaciones nativas: Foursquare, Camera+, Instagram, CarteleraPanama.

Desarrollo Móvil Web vs. Desarrollo Móvil Nativo

Desarrollo Web Móvil

Ventajas

  1. Compatibilidad: Se reutiliza casi en un 100% el mismo código fuente para todos los sistemas operativos orientados a móviles, así se tiene que dar mantenimiento sólo a una versión.
  2. Rango de usuarios: Se puede llegar a más tipos de dispositivos: no sólo a Android y iOS, sino que puede llegarse hasta el menos común, como Bada (Samsung).
  3. Fácil uso: No hace falta descargar nada, sólo con acceder a una URL los usuarios podrán utilizar tu aplicación.
  4. Actualizado siempre: Las actualizaciones llegan de inmediato, no debes esperar una semana para que el AppStore apruebe tu nueva actualización.
  5. Más sencillo y rápido de llevar a cabo en muchas veces: muchas veces, es mucho más fácil desarrollar y diseñar dentro de un browser utilizando HTML, CSS y JavaScript que hacer lo mismo en Java, Objective-C o JavaScript (Appcelerator, Sencha). Posicionar elementos, estilizarlos y ciertas flexibilidades son posibles en minutos con tecnologías móviles.

Desventajas

  1. Olvídate de utilizar la cámara y otros componentes nativos (al menos por ahora): Con aplicaciones web nativas, al ser accedidas desde el navegador, no tienes disponibilidad de ciertos componentes y funcionalidades nativas del teléfono, entre ellos la cámara.
  2. Cross-Browser Support versión 2.0: Antes te preocupaba Internet Explorer 6, ahora te preocupan otros tantos, como el pésimo soporte a los estándares en BlackBerry 4 y 5 (la mayoría en Panamá), lo que trae mayores costos de desarrollo en muchos casos.
  3. Posibilidad de usarla offline (en algunos): Tienes esta aplicación en mente que necesitas que se puedan utilizar en cualquier momento. Olvídate del "offline mode" cuando estés desarrollando con web. Esto no aplica para iOS y otros, ya que Safari implementa Web Storage de HTML5 y Offline Application Cache.

Desarrollo Móvil Nativo

Ventajas

  1. Posibilidad de utilizar funcionalidades nativas: siempre puedes utilizar funcionalidades nativas, como la cámara, el acelerómetro, etc.
  2. Nuevas alternativas para desarrollar multiplataforma: Aún cuando lo regular es desarrollar estas aplicaciones utilizando las herramientas oficiales (como el Android SDK y Java en Android), han surgido varias nuevas tecnologías para llegar a varios dispositivos con casi el mismo código fuente, como Titanium Appcelerator.
  3. Performance: Típicamente llegan a desempeñarse mejor que las aplicaciones web.
  4. Hay un "market" para estas aplicaciones: Las personas pueden encontrar tu aplicación utilizando el AppStore o el Play Market. n cualquiera de los casos, estas aplicaciones pueden ser puestas a la venta.
  5. Modo offline: Tu aplicación puede utilizarse sin necesidad de una conexión a internet.

Desventajas

  1. Típicamente son más costosas de llevar a cabo: Por lo general, son más costosas de llevar a cabo, ya que se necesita invetir mucho más tiempo.
  2. Mayores costos de mantenimiento: De igual forma, mantener varias versiones de la aplicación es costoso.
  3. Actualizaciones y aprobaciones: Poner una aplicación en el AppStore es tedioso, puede llevar hasta más de una semana. De igual forma, si tienes una nueva funcionalidad o descubriste un bug que quieres arreglar, debes esperar otra semana para que los chicos de Apple aprueben tus cambios.
  4. Aún cuando hay opciones como Appcelerator, no llegas a todos: Appcelerator, por ejemplo, permite desarrollar para Android, iPhone, iPad y móvil-web (nuevo). ¿Qué pasa con tus usuarios de Blackberry, Symbian o Bada (si es que hay alguno)? Segúramente tendrás que hacer una versión alternativa web para ellos.

Aplicaciones Híbridas: lo mejor de los dos mundos.

Luego de leer el artículo, pensarás: y ¿por qué no hacer una mezcla de ambas?. Esto es lo que conocemos como aplicaciones móviles híbridas, que se han hecho famosas gracias a Phonegap.

La idea es fácil: utilizar el desarrollo nativo cuando es mejor o es necesario (para utilizar la cámara, por ejemplo), pero utilizar tecnologías web y el desarrollo web cuando es más práctico (por ejemplo en interfaces más complejas).

Un maestro haciendo esto es Linkedin, quien en la última versión de su aplicación móvil decidió hacerla híbrida para iOS, pero nativa en Android:

  • Todas las listas infinitas en la aplicación son nativas.
  • Todas las ventanas son nativas, estas funcionan como contenedores de vistas web.
  • Todas las páginas que son detalles con información son JavaScript y HTML, por su fácil desarrollo.

Cuando las vistas son vistas web, se utiliza una ventana (un Web View) para mostrar el contenido o la página web. Así, nativo sólo es el contenedor o wrapper de la aplicación.

Este es un enfoque muy interesante que hemos estado llevando a cabo en varios nuevos proyectos. Para todas las vistas que representen gran complejidad y necesiten mayor flexibilidad utilizamos directamente HTML rodeada de una ventana nativa (para poner el botón de back, por ejemplo). También lo utilizamos para aquellas ventanas cuyo contenido seguramente cambiará muy a menudo, por ejemplo si es un contenido que cambia cada mes, no queremos sacar una nueva versión cada mes sólo para actualizar dicho contenido.

Por el otro lado, todas las ventanas que necesiten funcionalidad nativa del teléfono, como la cámara o detalles que queremos guardar en la aplicación, utilizamos componentes nativos.

Otro caso interesante de aplicaciones híbrida es Instagram. En Instagram utilizan nativo para tomar y publicar la fotografía, pero web para desplegar las fotografías y tu perfil. Esto permite que la aplicación pueda ser accedida fácilmente sin conexión a internet para editar y tomar una fotografía, pero hace fácil a los desarrolladores mejorar la lista de fotografías sin sacar una nueva versión (ya que tendrían solamente que trabajar en su servidor.

Si no tienes conexión la fotografía queda en un queue para ser subidas cuando vuelva tu conexión.


Instagram

Algunas de las herramientas más utilizadas hoy en día para crear aplicaciones híbridas son:

  • Phonegap: Quien permite realizar aplicaciones con HTML5, CSS3 y JavaScript, pero que serán empaquetadas como aplicaciones nativas. Seguramente si vas a utilizar Phonegap necesitarás ojear Sencha Touch o jQuery Mobile para la interfaz.
  • Trigger.io: Básicamente, casi igual que Phonegap. Ellos se adjudican ser 5 veces más rápidos que Phonegap.
  • Titanium Appcelerator: Utilizando Web Views para embeber un navegador web dentro de alguna ventana nativa.
  • O hasta Java (+ Android SDK) u Objective-C (+ Xcode), utilizando vistas web embebidas en la aplicación.

Conclusión y cual escoger en mi próximo proyecto

Llegado este punto surge una pregunta: ¿entonces cuál escoger?. La respuesta es simple: depende de tus necesidades:

  • Escoge móvil web si: quieres llegar a muchos dispositivos (Blackberry, Symbian, Android, iPhone) rápidamente, no quieres gastar mucho, tu aplicación necesita siempre conectividad a internet, no necesitas más que consumir recursos y no crearlos, eres un blog o un sitio web sencillo, entre otros. Ejemplo: Pixmat Studios tiene una versión optimizada para móvil, sin necesidad de una aplicación nativa.
  • Escoge nativo móvil (o híbrido) si: tu aplicación interactúa con funcionalidad nativa (el acelerómetro o la cámara, por ejemplo), vas a llegar a pocos dispositivos (por ejemplo Android y iPhone solamente), necesitas que tu aplicación pueda utilizarse normalmente sin conexión, quieres monetizar tu aplicación vendiéndola, entre otras. Ejemplo: Instagram, quienes necesitan funcionalidad nativa (la cámara y posición).
  • Desarrolla ambas si: necesitas todas las anteriores y el dinero no es un problema. Ejemplo: Facebook mantiene tanto una versión móvil como una versión nativa para Android, Windows Phone, Blackberry, iPhone y iPad. Idealmente es la opción a seguir, pero muchas veces no contamos ni con el equipo necesario de desarrolladores ni el dinero.

Tomando en cuenta estos puntos podrías fácilmente tomar una decisión para tu próxima aplicación. Mi recomendación es que bajes más aplicaciones parecidas a las que tienes en mente y las analices (puedes hasta utilizar un Proxy para ver que renderizan si no estás seguro).

Si aún estás dudoso, puedes contactarnos para darte soporte y orientarte sobre tu próxima aplicación o cotizar la misma sin ningún costo.

Demóstenes lidera el equipo de Ingeniería en Pixmat Studios. Es Ingeniero Electrónico y amante del café.


Comentarios

Nosotros

Pixmat Studios es una agencia de diseño y desarrollo de soluciones tecnológicas basado en Ciudad de Panamá.


Twitter

Continuemos la conversación en las redes sociales. ¡Síguenos en Twitter!



Artículos Recientes


Tags


Notice: Array to string conversion in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38

Fatal error: Uncaught Error: Function name must be a string in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php:38 Stack trace: #0 /var/www/pixmatstudios.com/htdocs/site/snippets/blog_sidebar.php(42): tagcloud(Object(page)) #1 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #2 /var/www/pixmatstudios.com/htdocs/kirby/lib/helpers.php(66): tpl::loadFile('/var/www/pixmat...', Array, false) #3 /var/www/pixmatstudios.com/htdocs/site/templates/article.php(73): snippet('blog_sidebar') #4 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #5 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(25): tpl::loadFile('/var/www/pixmat...', Array, true) #6 /var/www/pixmatstudios.com/htdocs/kirby/lib/site.php(206): tpl::load('article', Array, true) #7 /var/www/pixmatstudios.com/htdocs/kirby/system.php(65): site->load() #8 /var/www/pixmatstudios.com/htdocs/index.php(71): require_once('/var/www/pixmat...') #9 {main} thrown in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38