Desarrollo móvil multiplataforma
 

Frameworks CSS3 específicos para aplicaciones móviles HTML5

Frameworks CSS3 específicos para aplicaciones móviles HTML5

A la hora de desarrollar una aplicación móvil HTML5 es probable que nos decantemos por algún framework especializado como pueden ser Ionic, Sencha Touch o jQuery Mobile. Estos frameworks proporcionan el conjunto de componentes de interfaz de usuario típicos como pueden ser barras de herramientas, sliders, botones, componentes de formulario, etc. Pero a su vez, nos obligan a casarnos con una determinada arquitectura o tecnología. Por ejemplo, Sencha Touch ofrece su propio esquema MVC y manipulador DOM, Ionic se apoya en AngularJS o jQuery Mobile sobre jQuery.

Existen situaciones en las que únicamente necesitamos los elementos de interfaz de usuario, ya sea porque la aplicación sea extremadamente sencilla, tal vez porque únicamente necesitamos un prototipo o porque ya tengamos desarrollada gran parte de la aplicación haciendo uso de un determinado framework JS que implemente su propio esquema MVC o MVVC.

Para esos casos conviene conocer algunos frameworks CSS que básicamente nos proporcionan eso, conjuntos de componentes para definir el aspecto visual de nuestra aplicación que podamos acoplara a cualquier stack de tecnologías que estemos utilizando. Algo similar a Bootstrap pero especializados en componentes para aplicaciones móviles.

Ratchet

Ratchet webpage screenshot

Desarrollada por algunos de los creadores de Bootstrap y también nacida desde las entrañas de Twitter, Ratchet nos ofrece un conjunto de componentes especializados en interfaces móviles basados en HTML, CSS y JavaScript. Es muy fácil de aprender y permite tanto a diseñadores como a desarrolladores realizar prototipos de una forma muy rápida. Puedes acoplarlo a cualquier tecnología frontend que estés utilizando pues el código que incluye solo afecta a los componentes que proporciona, al estilo de su primo-hermano Bootstrap.

Está en la versión 2 y ofrecen personalizaciones para iOS y para Android, aunque la versión de android no la han actualizado a las nuevas interfaces basadas en material design y esto puede ser un punto en contra. Sin embargo, la versión iOS está muy lograda.

TopCoat

Topcoat

Librería CSS pura que no contiene ningún módulo de script. La principal ventaja de este framework es la optimización del mismo, donde destacan que se trata de uno de los frameworks más rápidos del momento. Dado que las aplicaciones móviles HTML5 pecan en ciertas plataformas de un bajo rendimiento, es interesante plantearnos el uso para la capa visual de un framework CSS bien optimizado para atenuar esos problemas.

Sobre él se han montado otros frameworks HTML5 como onsen.io, con una filosofía similar a Ionic donde usaríamos AngularJS para la arquitectura de la aplicación, aunque recientemente también han incluido el soporte para jQuery.

Tal vez se hecha en falta alguna funcionalidad adicional al estilo de bootstrap donde te da algunos componentes interactivos, pero va como anillo al dedo si lo único que necesitamos es el aspecto visual.

Tiene una versión para aplicaciones web de escritorio y otra versión para aplicaciones móviles, donde para cada una encontraremos dos variantes, una en tonos oscuros y otra en tonos claros. Sin embargo, no encontraremos personalizaciones para plataformas como iOS o Android.

ChocolateChip-UI

ChocolateChip-UI

Inicialmente puede funcionar con jQuery, pero ellos ofrecen también una “versión especializada” de manejador DOM llamadado ChocolateChipJS y que está optimizado para navegadores móviles. No es una librería CSS pura como podría ser TopCoat pues ofrece widgets funcionales implementados en JavaScript, donde también han creado las versiones en TypeScript.

Sus principales plataformas objetivo son iOS, Android y Windows Phone, para los cuales disponemos de temas especializados para cada una de ellas.

Actualmente el proyecto está un poco parado pues lleva unos meses sin actualizarse, pero

Framework7

Framework7

Sin duda uno de los frameworks más potentes y el que personalmente más me gusta. No solo proporciona un completo set de componentes UI que imitan a la perfección los componentes nativos de cada plataforma, sino podremos gestionar transiciones entre pantallas, menús contextuales, control de scroll nativo, etc. Dispone de temas para iOS y para Android (Material Design), y como he comentado el nivel de similitud conseguido respecto a los controles originales de cada plataforma es espectacular.

No se trata de una librería CSS pura ya que al menos tendremos que incorporar código JavaScript de inicialización para arrancar las vistas y que pueda funcionar el sistema de transiciones. Sin embargo, este JavaScript es muy limpio y sencillo que podremos acoplar perfectamente a cualquier framework MVC tipo AngularJS, ember, backbone.js, etc. Además, no se apoya en ninguna librería de terceros ya que implementa su propio manipulador DOM optimizado para móviles que han llamado Dom7.

En cuanto pueda escribiré un tutorial sobre este framework porque realmente merece la pena.