Différences entre PhoneGap, Appcelerator Titanium, Sencha Touch et jQuery Mobile

Lors du démarrage d’un projet mobile, le choix de la technologie est évidemment la plus importante. Soit vous souhaitez développer une app spécifique à un OS, dans ce cas la vous limitez la portée de votre application ainsi que multipliez le développement et les coûts. Depuis toujours, je favorise le développement multi plateforme : je n’ai jamais été fan de l’objective-C ou du Java.

Deux choix s’offrent à vous : du web mobile ou du mobile natif. Sachez qu’il est tout à fait possible de faire du cross-platform dans ces deux camps.

Développer une webapp mobile HTML5 multi-plateforme : Sencha Touch, jQuery et PhoneGap

La solution la plus « simple » et surtout la plus portable est d’utiliser une technologie récente que j’utilise, privilégie et aime énormément : le HTML5, c’est à dire les nouvelles possibilités offertes par les navigateurs (mobiles) modernes. En dehors de la nouvelle spécification du markup HTML, comme les nouvelles balises video, audio, header, footer etc, la nouveauté réside dans l’apport de normes pour des API/fonctionnalités très présentes dans notre monde actuel : le stockage local, la géolocalisation, les nouveaux champs de formulaire de type email, number, leurs validations, les vidéos et audio sans plugins… Le développement d’une webapp permet d’utiliser les mêmes sources et écrans pour tous les navigateurs et appareils visés, c’est à dire qu’à partir d’une URL votre application web s’affichera sur Android, iPhone, iPad…

Les frameworks basés sur les technologies HTML5/JavaScript/CSS3 commencent à être de plus en plus nombreux, et plus ou moins riche. Le plus abouti, de mon point de vue, reste Sencha Touch. Le principe, contrairement aux développements web classiques, est d’utiliser le framework pour injecter de l’HTML, vous ne faite que du JavaScript et lui se chargera de rendre vos compsants dans la page. Il vous permet de développer une architecture cliente très riche, suivant le design pattern MVC et permettant une abstraction entre la source, le traitement et l’affichage des données très simple. Egalement, il contient de nombreux composants, et beaucoup d’interfaces tactiles sont facilement utilisables (carousels, formulaires, slider). A ça s’ajoute une gestion complète des évenements, touch, swipe etc. Il est compatible iPhone et iPad et est très très puissant sur ces plateformes. Sur Android, seuls les téléphones récents/moyen-haut de gamme pourront profiter pleinement de Sencha Touch, les anciens ou plus bas de gamme ne sont pas assez rapide pour les animations, évenements.. Sencha Touch fonctionne aussi sur les Blackberry, à partir de BB6.

jQuery Mobile, à l’inverse de Sencha Touch, élève les possibilités du DOM et de l’HTML de la page selon sa façon. Vous devez d’abord construire vos listes de menus, espaces de données etc et en y ajoutant une classe de type « list » ou autre, jQuery Mobile va transformer le visuel et l’afficher de façon plus intuitive sur mobile. C’est une philosophie à l’entière opposition de Sencha Touch. Néanmoins, le rendu visuel est compatible pour quasiment tous les appareils mobiles, de façon plus ou moins dégradée, notamment sur Windows Phone 7.

Pour pouvoir distribuer votre application sur les markets App Store ou Android Market, vous pouvez utiliser PhoneGap qui se charge de créer une webview native et y lance à l’intérieur votre application HTML5. Mais ce n’est pas tout, il ajoute au composant webkit de la webview de nombreuses fonctions javascript vous permettant d’accéder à la caméra, aux contacts et autres directement dans votre code JavaScript. Une fois finie, vous la packagez et l’envoyez comme n’importe quelle application native.

Développer une app native multi-plateforme : Appcelerator Titanium

Le framework Titanium d’Appcelerator est différent. Toujours à partir de code JavaScript, il va en fait compiler ce code en code native grâce à son framework qui fait office de passerelle entre les composants instanciés en JavaScript et le résultat qui est du code natif Cocoa/Android. Vous allez donc utiliser les mêmes objets pour les différentes plateformes, les mêmes composants et le même code, à quelque nuances près évidemment, pour ensuite lui dire de compiler/transformer ça pour Android ou pour les appareils iOS. Vous aurez à la fin une application native, avec les composants et l’interface natifs du mobile visé, ce qui sera entièrement transparent pour l’utilisateur !

 

J’espère que ces petits résumés vous seront utiles, j’ai eu de nombreuses questions sur l’utilisation de tel ou tel framework. Il n’y a pas un meilleur que les autres, cela dépend des utilisations et du but recherché. Je sors bientôt un livre sur Sencha Touch, et courant 2012 nous allons également écrire un livre sur Titanium.

  • http://thibaut-baillet.com Freelance html5

    Un très bon résumé sur les possibilités actuel.
    Pour avoir un rendu qui ressemble le plus à une app native, jQuery mobile n’est pas très bien adapté, par contre pour du web mobile il est génial !

  • Yeppao

    PhoneGap couplé avec Kendo UI Mobile, tout devient plus simple, et l’app ressemble beaucoup plus a une app mobile native (multi plateformes en plus !)

  • http://www.ahwebdev.fr AHWEBDEV

    Après avoir testé plusieurs outils de portabilité, je trouve que l’alliance phoneGap + Sencha Touch 2 en MVC est vraiment le plus simple, plus souple, plus rapide et moins buggy que Jquery mobile. (étant vraiment optimisés pour des appli HTML5)

    Il y a aussi Neomad (En Java) qui permet de compiler l’application pour chaque environnement natif des mobiles visés.
    Il paraît même qu’ils travaillent actuellement sur un outil permettant de traduire une app native dans les autres formats. Ce qui reviendrai à coder son app nativement en Objective C et de la « traduire » en java. Le tout adaptant l’ui natif.

  • http://samoht.fr Samoht

    Merci pour cet article. Il résume bien ce que je cherchais. C’est un peu la jungle tous ces frameworks !

    Par contre, je pense que ce qui aide à choisir tel ou tel framework sont les tutos que l’ont peut trouver sur internet, ou les livres. Je trouve que la doc de Sencha est pleine d’exemple mais je n’ai pas trouvé de tuto intéressants/poussés.

    Bonne journée.

  • Tim

    Bonjour, merci pour cet article très intéressant

    La ou je m’y perds,

    Je veux créer un site web responsive et une application native multiplate-forme (grace à phonegap)

    Dois-je créer tout mon site avec le framework senchatouch ?

    Ou dois-je créer mon site en responsive avec html5boilerplate et un framework css
    et utilise sencha tool pour développer en MVC pour ensuite le complier sur phonegap mais la partie sencha tool (ne sera jamais vu par les navigateur mobile)

    En gros dois tout faire avec sencha tool (desktop nclus)

    ou dois je faire un site web responsive et utiliser sencha tool + phonegap pour créer l’application native multi-plateforme ?

    Merci

  • Saxoprane

    Il y a beaucoup plus simple et tout intégré :)
    Le projet viens de sortir de beta et est très prometteur.
    Je pense m’en servir pour mon prochain projet cross plateforme + web.

    http://www.applicationcraft.com/

  • Pingback: Cadres de programmation pour mobiles » Web mobile, social, sémantique, pervasif()