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 :
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.
Notre expérience nous a conduits à identifier plusieurs critères principaux dans le choix d’un tel framework :
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.
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.
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 :
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 !
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
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
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+.
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.
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+.
Site officiel | Démo (note : la démo Android n'est pas totalement fonctionnelle à l'heure actuelle)
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.
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.
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.
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)
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)
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+.
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+.
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+.
ChUI propose deux modes de licence :