Applications mobiles web et hybrides : bien choisir son « UI framework »

25.04 / 2014

SPÉCIFICITÉ

Technologie mobile

TECHNOLOGIE

ENYO
CHOCOLATE CHIP UI

Mobile

Réalisation

Blog

Pourquoi se baser sur un framework ?

Au cours du développement d’une application mobile, l’un des plus importants défis à relever concerne la réalisation de l’ensemble de l’interface. En effet, à chaque système d’exploitation (OS) mobile correspond une expérience utilisateur (UX) spécifique. Cela se traduit à la fois par des codes visuels et des modes navigation particuliers.

Il est possible de faire le choix de ne partir de rien et de développer l’intégralité de l’interface. Cela présente toutefois au moins trois inconvénients majeurs :

  • le temps de réalisation est très conséquent et est potentiellement multiplié par le nombre d’OS auxquels est destinée l’application
  • les différences entre composants d’interface types peuvent aller de modérées (entre iOS et Android par exemple) à majeures (entre iOS et Windows Phone par exemple)
  • les webviews réagissent très différemment suivant l’OS et sa version. Typiquement, iOS propose une très bonne compatibilité avec les technologies HTML5/CSS3 depuis sa version 6, tandis qu’Android est notoirement buggué sur de nombreux aspects (sans évolutions notables en dépit des montées de versions). En tout état de cause, l’expérience montre que chaque OS présente des problèmes bloquants spécifiques.

C’est pourquoi il s’avère bien souvent préférable de s’appuyer sur un « UI framework » (framework d’interface utilisateur qui gère le graphisme, l’ergonomie et la navigation) dont les développeurs et la communauté œuvrent ensemble à la création d’un outil stable et performant. Sur cette base peut ensuite être montée votre propre interface personnalisée.

Notre entreprise ayant choisi depuis plusieurs années d’axer ses développements mobiles sur PhoneGap, nous découvrons et testons régulièrement de nombreux frameworks. Que vous développiez des applications hybrides, des web apps ou même des sites mobiles en HTML5, notre objectif est de vous donner suffisamment de visibilité pour être en mesure de choisir un UI framework adapté à vos besoins.

Image application

 

Critères de sélection

Notre expérience nous a conduits à identifier plusieurs critères principaux dans le choix d’un tel framework :

  • Fluidité : l’un des écueils majeurs d’une application basée sur les technologies web est le manque de réactivité et de fluidité. Ce critère n’est pas toujours immédiatement repérable lorsqu’on teste un framework depuis un ordinateur. C’est pourquoi nous vous recommandons de vérifier comment se comportent les démos de chacun des frameworks qui vous intéressent sur quelques-uns des appareils cibles de votre application.
  • Compatibilité avec différents OS : une tendance majeure des UI frameworks est de fonctionner très bien sous iOS mais de proposer une expérience dégradée ou bugguée sous Android, voire de ne même pas fonctionner sous Windows Phone. Nous privilégions pour notre part ceux qui présentent une grande compatibilité.
  • Fonctionnalités / Widgets : ce sont à la fois les composants d’interface (barres de navigation, listes, loader...) et les modes de navigation (scrollers, menus latéraux, navigation par swipe, galleries…). Assurez-vous de choisir un framework proposant les fonctionnalités et widgets dont vous prévoyez d’avoir besoin, car vous prenez le risque de « lutter » contre celui-ci dans le cas contraire.
  • Styles : dans l’idéal, un framework orienté mobile devrait posséder des styles adaptés selon les différents systèmes d’exploitation. A minima, ses styles de bases doivent être agréables et modernes. Cela étant, ceux-ci ne formant en général qu’une base par rapport à l’interface utilisateur finale, ce critère est à pondérer selon le degré de personnalisation envisagé.
  • Pérennité : à moins que votre application ne soit qu’un « one shot » et que vous ne voyiez pas d’inconvénient à changer régulièrement vos habitudes de développement, nous vous recommandons de vous baser sur un framework dont la communauté est active et œuvre sans cesse à son évolution.
  • Prix : de nombreux UI frameworks sont open source, mais certains d’entre eux nécessitent une licence payante en vue d’une exploitation commerciale.

Veuillez noter que tous les UI frameworks ne sont pas absolument équivalents dans le sens où certains se focalisent sur l’interface utilisateur (en proposant uniquement des widgets et des feuilles de styles), tandis que d’autres représentent une solution complète avec leur propre architecture et un mode de fonctionnement spécifique.

 


 

Enyo

Site officiel  |  Démo

 

Enyo

 

Présentation

Il s’agit d’un framework Javascript open source destiné au développement d’applications multi-plateformes pour mobiles, web apps, TV et bureaux. Ciblant à l’origine webOS (et plus spécialement le TouchPad de Hewlett-Packard), la version 2 d’Enyo a été réécrite pour élargir sa compatibilité à tous les environnements web récents, tels que iOS, Android, Safari, Firefox, Chrome et IE8+.

La toute dernière version (2.4.0) vient tout juste de sortir et apporte de nombreuses nouveautés parmi lesquelles une structuration MV* qui lui manquait jusqu’alors.

 En détail

Enyo fonctionne selon un modèle d’encapsulation modulaire, soit par création de composants Javascripts imbriqués. Si cela se traduit par un grand dirigisme au niveau du code, il faut avouer que c’est très efficace : les composants sont très facilement ré-exploitables et la réactivité de l’interface est impressionnante. Même sur des smartphones tournant sous Android 2.3 (version maudite qui fait trembler les développeurs mobiles au moins autant que la mention d’IE6 fait pâlir ceux web), tout est très fluide, y compris certaines fonctionnalités avancées comme la navigation par glissé latéral.

Les différents layouts proposés sont très puissants, à la fois en termes de possibilités mais surtout de par leur compatibilité étendue. C’est d’ailleurs une grande qualité de l’ensemble du framework : qu’il s’agisse des widgets, des panneaux, des événements, etc., tout fonctionne très bien sur tous les supports où nous avons eu l’occasion de le tester. Du point de vue structuration de la navigation, nous vous recommandons d’associer les scrollers (pour la navigation interne à une page) avec les arrangers(pour la navigation entre pages). Ces derniers sont au cœur du framework et permettent, par exemple, de mettre en place facilement une navigation latérale infinie.

Enyo propose par ailleurs plusieurs librairies UI distinctes :

  • Onyx, la bibliothèque de composants originelle et optimisée pour les appareils mobiles. On y trouve des composants basiques mais fondamentaux tels que barres de navigation, boutons, champs, date pickers, tooltips, popups…

 

Enyo progress bar

 

  • Moonstone, une nouvelle librairie sortie avec la dernière version d’Enyo. Il s’agit d’une bibliothèque de widgets optimisés pour TV (accordéons, panneaux, drawers…) mais utiles aussi pour vos projets mobiles. Moonstone propose un modèle de navigation par panneaux, plus typique des applications TV, et propose deux thèmes de bases (clair et sombre). Veuillez noter que la compatibilité avec les différents OS mobiles est a priori moins grande que pour Onyx et qu’un certain nombre de styles devront être adaptés pour les plus petits écrans.

 

Enyo screen

 

  • Mochi, projet entamé par la branche webOS UX d’Enyo et mis en pause après que la société ait décidé de se focaliser sur les TV (en créant notamment Moonstone). Au tout début du mois d’avril, cette librairie a été rendue publique avec pour objectif sa finalisation et sa maintenance par la communauté. Mochi comporte de nombreux widgets parfois communs aux autres libraires (boutons, champs, barres de navigations, etc.) et d’autres plus spécifiques (sélecteurs de vue, badges…).

 

Enyo présentation

 

Du point de vue du pur design, Mochi est la librairie la plus intéressante de par son ergonomie et son graphisme épuré. Moonstone se prête très bien à un style Metro UI brut, mais nécessitera clairement de grandes adaptations graphiques pour Android et iOS. De même, Onyx est un canevas intéressant mais totalement insuffisant par lui-même. Soyez donc prévenus que des compétences en CSS sont indispensables !

Un dernier mot concernant la communauté qui est à la fois active et réactive. De nombreux composants utiles et de bonne qualité sont partagés librement au sein de la « Community Gallery », les messages sur le forum reçoivent une réponse très rapidement, l’équipe d’Enyo travaille continuellement à l’amélioration du framework… Autant de signes très positifs quant à la longévité de celui-ci !

Avantages

Fluide et réactif, y compris sur Android 2.3

Compatibilité maximale entre les différents systèmes d’exploitation (y compris navigateurs et TV)

De très nombreux composants

Des outils de structuration ergonomique puissants

En constante évolution

Documentation très complète, bien qu’un peu austère

Inconvénients

Très dirigiste de par son architecture et son flux de développement particuliers

Nécessite une solide base Javascript

Des styles de base peu graphiques

À l’origine orienté TV, ce qui se traduit par le fait que certains composants sont plus adaptés pour les grands écrans et que leurs styles doivent être retravaillés pour les smartphones

Recommandé pour iOS ?

OUI. Le framework est stable et très fluide sur cet OS.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions iOS 6+.

Recommandé pour Android ?

OUI. Le framework est stable sur cet OS, mais certains composants sont curieusement plus fluides sur Android 2.3 que sur Android 4+. Cela peut provenir de l’accélération matérielle et des transformations CSS 3D qui sont notoirement connues pour générer des bugs dans la webview d’Android.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions Android 4+, mais sachez qu’il s’agit d’un des seuls frameworks qui se comporte vraiment bien sur Android 2.3.

Recommandé pour Windows Phone ?

OUI. Le framework est stable et fluide sur cet OS.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions WP 8+.

Liens utiles

Docs

GitHub

Bien démarrer

Galerie communautaire

Forums

Blog

Licence

Licence Apache 2.0

 


 

Chocolate Chip UI

Site officiel  |  Démo  (note : la démo Android n'est pas totalement fonctionnelle à l'heure actuelle)

 

Chocolate chip

 

Présentation

Ce framework, dont le développement a débuté voici environ 3 ans, a été créé par un seul homme : Robert Biggs. Devant l’impossibilité de trouver un frameworks répondant à ses besoins, il décida de créer le sien. Ainsi, Chocolate Chip UI (ChUI) a été pensé pour être un framework léger, fluide, facile à appréhender et adapté aux OS majeurs. Pari réussi puisque la société Sourcebits, impressionnée, a décidé d’acquérir le framework et d’intégrer Biggs à son équipe de développement.

Autrefois basé sur sa propre librairie propriétaire, le framework s’appuie aujourd’hui sur jQuery. Depuis la version 3.0, il a été complètement réécrit pour être optimisé iOS 7, Android 4 et Windows Phone 8.

 

Chocolate chip présentation

 

En détail

ChUI est un pur framework d’interface : son champ d’action concerne essentiellement les composants et les styles. Bien qu’il intègre la communication AJAX, la gestion d’événements, un modèle simple de navigation, du templating basique, etc., on préférera lui associer un framework architectural tel que Backbone ou Angular pour gérer la logique d’une application complexe.

En revanche, il s’avère très performant dans le domaine de l’UX. Il est capable de prouver à ceux qui en doutaient que la frontière web/natif commence à s’estomper. Les transitions sont très fluides, les widgets efficaces, l’interface agréable et réactive. Cette réactivité tient en partie au fait que le framework utilise ses propres événements pour lutter contre le problème classique du délai, dans les webviews, entre l’appui de l’utilisateur et sa prise en compte réelle (un délai d’au moins 300 ms est en effet présent pour permettre de distinguer un appui simple d’un double, ce qui se traduit par une latence perturbante). Il est aussi possible d’utiliser une librairie telle que Fastclick pour résoudre ce problème.

Le framework est souple et cloisonné, mais il réclame cependant une structuration HTML très précise à base de balises HTML5 et de classes données, le tout selon un ordre spécifique. Si cela permet une grande clarté grâce à la valeur sémantique des balises utilisées, il existe aussi un risque réel de conflit avec d’autres librairies ou de problèmes en cas de déviation du modèle prévu.

 

Logo technologie

 

ChUI tire très bien parti des fonctionnalités CSS3 comme les transitions, les transformations, le modèle Flexbox ou l’accélération matérielle. Cela induit par contre par une compatibilité limitée aux plus récentes versions des OS mobiles et des navigateurs.

Il s’agit par ailleurs du seul framework open source à proposer trois feuilles de styles totalement différentes pour iOS, Android et Windows Phone. Celles-ci sont très bien réalisées et reproduisent les styles par défaut de chacun de ces environnements. Un petit bémol cependant : ChUI fait usage des masques CSS pour afficher des icônes intégralement CSS et adaptées à toutes les résolutions. Malheureusement, cette fonctionnalité n’est que peu supportée sur Android. Suivant la version ciblée, il peut s’avérer utile de les remplacer par des « font icons » de type FontAwesome.

De nombreux widgets sont proposés. Si certains sont classiques (barres de navigation, loader, popup, etc.), d’autres sont moins fréquents et néanmoins très utiles : listes sélectionnables, listes supprimables, « sheet » (menu qui recouvre l’écran), « paging » (qui permet d’alterner rapidement entre différentes sections)…

Au niveau stabilité, le framework s’en tire avec les honneurs sous iOS et Windows Phone. Sous Android, les choses sont un peu plus problématiques. En effet, ChUI fait en sorte d’utiliser le scroll naturel de la webview de chacun des OS. Le problème est que celui est très « brut » sous Android et que certaines propriétés CSS génèrent des bugs. Cela est particulièrement visible lorsque l’on scrolle au sein du widget « paging », y compris dans la démo en ligne. Une autre piste d’amélioration concerne l’état actif des composants : le framework fait usage du sélecteur CSS :hover qui se déclenche dès que l’utilisateur touche un élément et reste actif jusqu’à ce qu’à l’appui sur une autre zone de l'écran, créant une impression étrange. Une solution simple consiste à remplacer ce sélecteur par :active pour les mobiles.

Fort heureusement, ChUI a été créé de façon modulaire afin de faciliter les modifications du code et des styles. Il suffit de cloner le dossier GitHub, d’apporter les changements voulus puis de lancer une compilation via Node.js et Gulp.js, le tout étant très simple et expliqué dans la documentation. Celle-ci est d’ailleurs complète et bien faite. On apprécierait toutefois de pouvoir tester en ligne chacun des widgets. Les démos existent, mais il vous faudra d’abord compiler un projet et explorer celui-ci pour les trouver.

Cette nécessité de « fureter » met en évidence l’un des écueils du framework : il ne dispose d’aucune communauté en tant que telle. Si les utilisateurs s’expriment à travers les demandes d’évolution et les retours d’erreurs postés via GitHub ou Google Groups, il n’existe aucun réel point de convergence autour du framework. Le fait que ce dernier reçoive un accueil très favorable de la part des développeurs laisse espérer des changements à ce niveau. En tout état de cause, il faut reconnaître le travail impressionnant du créateur qui travaille constamment à faire évoluer ChUI et à apporter son aide à tous les développeurs rencontrant des problèmes.

 

UI

 

Avantages

L’œuvre d’un seul homme, ce qui lui donne une grande cohérence

Léger et performant

Des thèmes spécifiques à iOS, Android et Windows Phone

Des widgets originaux

Une documentation agréable à parcourir

Courbe d’apprentissage rapide pour les développeurs jQuery

Suivi sans faille de la part du créateur

Prise en compte des alphabets droite-gauche (l'unique UI framework à proposer cela à notre connaissance)

Inconvénients

L’œuvre d’un seul homme, ce qui pose question quant à l’avenir du framework si celui-ci décide d’en abandonner le développement

Aucune réelle communauté à l’heure actuelle

Compatible uniquement avec les navigateurs et OS mobiles récents

Nécessite une structure HTML spécifique

Une partie du code source manque d’optimisation (notamment au niveau des sélecteurs jQuery)

Recommandé pour iOS ?

OUI. Le framework est stable et très fluide sur cet OS.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions iOS 6+.

Recommandé pour Android ?

OUI et NON. Il n’est pas envisageable de l’utiliser en l’état en raison essentiellement des bugs relatifs au scroll. L’intégration d’une bibliothèque telle que iScroll est une solution, mais cette intégration ne se fait pas sans mal.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions Android 4+, mais suivant les widgets utilisés il peut même s’avérer nécessaire de viser celles 4.2+.

Recommandé pour Windows Phone ?

OUI. Le framework est stable et fluide sur cet OS.

Pour des raisons de compatibilité HTML5/CSS3, il est préférable de cibler les versions WP 8+.

Liens utiles

Docs

Tutoriels

GitHub

Google Group

Licence

ChUI propose deux modes de licence :

À lire aussi

Blog

Le mobile : Au plus proche des ses clients / administrés