Sencha Touch : le framework HTML5/JavaScript mobile au crible
Sencha Inc, anciennement Ext-JS Inc. jusqu'à 2010, est une entreprise fondée à Palo Alto en 2007, qui apporte aux développeurs des frameworks HTML5 et JavaScript, leur permettant de développer des applications web très riches avec pour objectif de produire rapidement et ainsi de diminuer le "time to market", d'accélérer le retour sur investissement et de favoriser un travail itératif et des cycles de mise en production rapprochés. Ses produits principaux sont Ext-JS, un framework d'applications web considérablement reconnu et utilisé par les plus grandes entreprises, comme HSBC, McKesson, Adobe, (etc.), ExtGWT, une bibliothèque Java pour construire des applications web basés sur Google Web Toolkit, et depuis juillet 2010, Sencha Touch, un framework mobile. Plus d'un million de développeurs utilisent activement ces différents frameworks, élevant Sencha au rang de leader en fournisseur d'applications web open source. Parallèlement à l'expansion de l'entreprise, une cinquantaine de développeurs sont recrutés courant 2011, portant le nombre d'employés de l'entreprise à une centaine.
Sencha Touch, une combinaison de projets open source
Sencha Touch, lancé en version 1.0 au milieu de l'année 2010, est le premier framework HTML5 et JavaScript permettant de développer des applications web mobiles grâce à de nombreux composants visuellement dérivés des composants natifs mobiles et apportant la gestion des nouveaux évènements apparus avec les interfaces tactiles, de plus en plus utilisées. Ce framework est développé et maintenu par l'entreprise Sencha, à l'origine de Ext-JS, un framework JavaScript très utilisé et extrêmement puissant de développement d'applications web sur bureau. Partant de leur expérience en termes de contraintes des applications web, comme la gestion des données, le rafraîchissement de l'information et les fonctionnalités inhérentes à la gestion de contenu, Sencha a lancé le framework Sencha Touch, à la syntaxe et au mode de fonctionnement identiques à Ext-JS.
La force de Sencha Touch repose en fait sur le regroupement de plusieurs projets open source, orientés mobile : Raphaël et jQtouch ; ceux-ci combinés à la puissance en gestion de contenu et de données de Ext-JS. Raphaël est une bibliothèque JavaScript permettant de dessiner des composants à l'aide de technologies web sur les navigateurs. Elle permet de représenter toutes sortes d'interfaces grâce à l'exploitation du SVG et de CSS3. Chaque composant, étant inséré dans le DOM JavaScript, peut réagir à des évènements définis et spécifiques. Sa compatibilité entre les différents navigateurs et son mode de fonctionnement, entièrement JavaScript et CSS, ont particulièrement intéressé les futurs fondateurs de Sencha Touch.
A ce projet, permettant le dessin d'interfaces web, les développeurs Sencha ont associé jQtouch, un plugin jQuery développé par David Kaneda, qui rejoindra l'équipe de Sencha Touch, en tant que Creative Director, responsable également du look and feel des sites Sencha et de leurs logiciels. Ce plugin permet de réagir aux évènements des nouvelles interfaces tactiles et de réaliser des sites mobiles rapidement par une adaptation du design et des composants utilisés, si le navigateur détecté est mobile.
Ces deux projets innovants dans le milieu du Web ont été associés au framework Ext-JS, concevant alors un framework extrêmement poussé et puissant. Cette association de capacités, de talents et de fonctionnalités différentes, tout en gardant la syntaxe connue et la gestion de données utilisées par des centaines de milliers de développeurs Ext-JS, a permis à Sencha Touch de s'imposer comme référence pour le développement d'applications web mobiles.
La philosophie de Sencha Touch
Sencha Touch se veut un environnement de travail basé sur le paradigme objet à la manière des incontournables frameworks .NET et Java.
A la différence de jQuery Touch – déclinaison mobile de jQuery – qui s'appuie principalement sur des plugins applicables sur la structure HTML, Sencha Touch dispose d'une hiérarchie complète d'objets-classes.
Bien que le JavaScript n'implémente pas les notions de classe et interface, les concepteurs ont choisi de s'en inspirer fortement pour créer l'arborescence d'objets du framework. La documentation reprend même des termes tels que Class et Subclasses pour classe et classes enfants servant à qualifier les objets disponibles. Ainsi, des objets primaires reprennent en partie la philosophie des interfaces en définissant comportements et caractéristiques des objets, on trouve les objets Observable – gestion des évènements –, Draggable et Droppable – gestion du glisser-déposer – ou encore Sortable – gestion du tri. Ces derniers sont destinés à être utilisés tels quels, mais en accord avec le principe d'interface, ils sont implémentés par d'autres objets pour hériter de comportements. Il est à noter que les objets interface ne sont pas uniquement des déclarations de méthodes et contiennent malgré tout les corps de méthodes même si celles-ci peuvent être redéfinies par des objets enfants.
Certains objets reprennent le principe de classe abstraite et doivent être dérivés de même que les objets interface quand bien même aucune instruction en JavaScript ne l'oblige en opposition aux mots-clés MustInherit ou abstract dans d'autres langages.
Organisation générale
La bibliothèque complète est organisée en packages. L'objet de base est dit un singleton dans le sens où c'est une instance non duplicable qui contient les méthodes de services tels que la lecture/écriture de flux JSON, la récupération de instances d'objets Ext ou d'éléments HTML. Cet objet contient également les packages qui classifient les composants Ext suivant leurs attributions. On trouve les packages :
Ext.data : stockage de données
Ext.form : composants de formulaires
Ext.layout : gestion de la disposition des composants
Ext.lib : bases des composants graphiques (sous-classes)
Ext.form et Ext.field : composants de formulaire
Ext.util : objets de services utilisés par les composants
Ext.chart : composants de reporting sous forme de graphique
Ext.device : objets permettant d'exploiter les données recueillies par
le périphérique
Les autres composants se situent directement dans le package Ext :
classes natives et natives étendues ;
composants visuels ;
composants controller.
Cet article est constitué à partir de bonnes feuilles tirées de l'ouvrage "Sencha Touch, Le framework des applications mobiles" publié chez Digit Books.