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.

Sous les conseils d’un des développeurs assistant à ma formation Sencha Touch, je me décide à proposer mes services non plus exclusivement en tant que développeur freelance mais maintenant aussi en tant que formateur afin de partager ma très bonne connaissance du framework, de la philosophie -particulière- de Sencha Touch/Ext-JS ainsi que des possibilités, erreurs habituelles et autres tips qui viennent avec l’expérience sur les frameworks Sencha.

Contenu de la formation

Ayant aussi été contacté plusieurs fois pour des formations ou conseils, voici ce que dont les formations que je dispense sont composées.

- Présentation du web mobile en général, pourquoi/comment, des frameworks existants (jQuery mobile, Sencha Touch, jQtouch..), du développement multi-plateformes (avantages, contraintes)

- Présentation de Sencha : entreprise, histoire, licences, support, documentation, communauté..

- Présentation fonctionnelle du framework Sencha Touch : philosophie du package Ext.Data et de la gestion des données (Ext.Store,Ext.Proxy, Ext.Model…) ainsi que l’organisation interne des composants (Ext.Component, dérivés, interfaces, composants, actions et évênements…)

- Présentation technique : architecture d’application hors-MVC, avec MVC, les controllers/models/stores/et vues, les requêtes AJAX et JSON-P (cross-domains ajax), héritage, xtypes, configs

- Explications du système interne de theming basé sur SASS (SCSS) dans Sencha Touch : framework Compass, mixins, héritages, etc..

- Déploiement d’une webapp : PhoneGap/Sencha Touch 2 native wrapper, compression avec JSBuilder, offuscation, distribution sur les markets et licences associées

- Ouverture sur Sencha Touch 2 : actuellement en developer preview, beaucoup de composants ne sont pas encore utilisables. Introduction au nouveau système de classe Sencha Touch 2 dérivé d’ExtJS 4, premiers pas avec Sencha Touch 2 et ses possibilités

- Tout au long de la formation, développement d’une application MVC permettant de mettre en pratique ces acquis, le choix du type de l’application vous est laissé, cela permet de peut-être initier l’application que vous souhaitez développer

Durée de la formation

2 à 3 jours en fonction du niveau en JavaScript/HTML5 et web mobile des élèves, mais la durée est libre

Prix

350 HT (TVA non applicable) par jour,  hors frais d’avion+hotel sur place, possibilité d’un forfait
 

Dates

Libres! Je suis sur Montréal mais mon travail permet d’arranger mes disponibilités.

- Deux sessions éventuelles : entre le 14 et 29 Avril 2012 / Début Juillet 2012

- A voir pour d’autres dates, me contacter

Pré-requis

Maitriser la syntaxe JavaScript, l’AJAX, ainsi que le développement web client->serveur

Si vous êtes intéressés, contactez-moi par le formulaire de ce blog (en bas) ou envoyez-moi un mail à mon adresse contact at flxcreations.fr ! Je vous répondrai rapidemment.

Augmentation très significative des performances, du Layout manager et du support d’Android

La grosse différence est transparente au développeur, elle concerne les performances. De très gros efforts ont été fait sur cet aspect qui, il faut le dire, faisait partie des points noirs du framework : la rapidité/les performances. Le démarrage de l’application est beaucoup plus rapide, cela vient du fait de l’injection du code HTML plus rapide suite à la mise à jour du Layout manager : rendu plus vite, moins gourmand.

Voici un comparatif établi par les équipes chez Sencha, sur le lancement de leur application « Kitchen Sink » :

Comparatif des performances Sencha Touch

L’autre aspect non négligeable concerne le support amélioré d’Android, qui avait aussi pas mal de difficulté sur les rendus CSS3, comme les animations, les dégradés etc qui faisait -beaucoup- ramer les applications web développée avec Sencha Touch. Les scrolling par exemple (que Sencha Touch émule avec -webkit-translate) sont plus fluides et plus rapides.

Ajout du système de classes tiré d’Ext-JS 4 : génération automatique des getters/setters, dépendances, héritage…

La grosse modification côté développeur concerne l’ajout du système de classe introduit dans Ext-JS 4. Celui-ci est assez phénoménal il faut bien le dire. Pour étendre une classe, fini Ext.extend. On utilisera désormais Ext.create qui prend en premier paramètre la classe à étendre, et en deuxième un objet de configuration de propriétés.Ces propriétés bénéficieront automatiquement de getter et setter, même et surtout si elles ne sont pas tirées du frameworks (objets customs) : c’est très pratique ! Vous pourrez utiliser getYourProperty et setYourProperty sans devoir les développer. Pareil, si vous souhaitez faire des vérifications avant ces assignations, applyYourPropery sera là pour ça : s’il ne renvoie pas de valeur, le set/get n’est pas fait.

Le native packaging : distribuer son application compactée dans une native, avec accès aux APIs (caméra, contacts..) et sélection des dépendances

Peut-être est-ce du à la montée en puissance de PhoneGap ces derniers mois, très utilisé et très pratique, qui a poussé Sencha à en faire de même. Toujours est-il, qu’avec la mise à disposition du SDK Sencha, il est maintenant possible de déployer dans une application native (iOS pour l’instant) sans même avoir le SDK natif d’installé notre webapp. Encore mieux, il faut maintenant sélectionner très facilement les composants de Sencha que nous utilisons, et ainsi éviter de charger des composants que vous n’utilisez pas ! Encore une fois, très gros travail d’optimisation. A terme, il sera aussi possible d’utiliser les APIs du téléphone, pour l’instant elles ne sont pas disponible dans la béta.

Nouvelle documentation

Autre aspect important, la documentation est totalement revue, et adopte le style d’Ext-JS 4 ou Touch Charts : nombreux guides, recherche plus facile, exemples, vidéos… Elle intègre aussi désormais tous les mixins utilisés avec Compass dont Sencha a besoin. Elle est disponible ici : http://docs.sencha.com/touch/2-0/

Sencha a sorti la deuxième version de leur framework cette semaine en version béta. Nous venons de finir ces derniers jour le livre, portant entièrement sur la version 1.

Vous êtes nombreux à nous demander la date de sortie et surtout s’il portera aussi sur la version 2. Nous avons décidé de prendre en compte les nouveautés Sencha Touch 2 et de les intégrer au livre, afin d’avoir un livre très complet. Il sera donc question du nouveau système de classes principalement, et des autres petites avancées que j’ai détaillée dans l’article ici : http://www.florentlamoureux.fr/blog/les-nouveautes-de-sencha-touch-2-native-packaging-performances-android-speed-ext-js-class-system/

La sortie est donc repoussée pour quelques semaines, il est probable qu’il soit disponible courant Décembre. Désolé pour ce petit délai supplémentaire, mais après avoir intégré Touch Charts, il était logique de parler de Sencha Touch 2 : cela n’en fera qu’un livre plus complet et surtout plus intéressant !

Si vous souhaitez être prévenu lors de sa sortie, n’hésitez pas à commenter l’article comme beaucoup l’ont fait sur les précédents.

Vous l’avez peut-être déjà vu, le HTML5 ajoute de nouvelles APIs accessibles en JavaScript aux navigateurs récents/modernes.

Parmi celles-ci, le sessionStorage et le localStorage en font partie et permettent de stocker en local jusqu’à 5 Mo de données sous la forme d’un tableau clé->valeur.

Principes d’architecture d’application afin d’utiliser le localStorage à bon escient, mode offline et synchronisation

Lorsque vous développez une application web qui accède à des données pas forcément mises à jour souvent, il est alors utile et intelligent de réduire les appels ajax et d’utiliser celles stockées sur le client !

Le principe est en fait de toujours faire appel aux données locales. Cependant, afin d’avoir les mises à jour, un appel Ajax peut être lancé au démarrage de l’application afin de connaitre la date de dernière mise à jour des données côtés serveur (timestamp) et de comparer avec la dernière date côté client. Ensuite, si les données clientes sont obsolètes, on les rafraichit. Attention aux navigateurs qui seront utilisés pour votre application, le localStorage est récent, fait partie des spécificités HTML5 et n’est pas supporté par tous.

Comment faire ?

C’est très simple. Comme dit plus haut, une api supplémentaire est disponible et atteignable en js l’objet localStorage dans le navigateur. Voyons comment l’utiliser.

Pour ajouter un élément à ce tableau :

Pour récupérer un item du tableau :

Pour supprimer un item ou tous les items :

Voilà c’est tout ! Ayant du l’utiliser là où je travaille et trouvant le concept intéressant, j’ai voulu le partager.

Bonjour à tous !
Quelques nouvelles du livre sur Sencha Touch que je co-écris avec un collègue.
Initialement prévu d’être terminé fin Aout, il le sera fin Septembre, nous avons en fait intégré les nouveautés de chez Sencha (ils ne choment pas !) à savoir Sencha.io SRC et SYNC, et aussi Touch Charts, le nouveau plugin de graphiques tactiles pour Sencha Touch.

Donc une fois terminé fin Septembre, il devrait être disponible fin Octobre/début Novembre !

Je tiendrai au courant bien évidemment tout ceux qui ont laissé leur adresse mail dans les précédents articles de cette sortie.

C’est en fait un principe mis en place par Sencha sur ce framework, permettant, après avoir étendu une classe, de lui attribuer un « xtype », qui pourrait correspondre à un nom de prototype de classe, afin de ne plus avoir qu’a utiliser ce xtype pour instancier notre classe réécrite. Peu clair ? Voyons un peu de code :

Dans ce cas là, nous avons étendu la classe Panel de Sencha afin de la faire correspondre à notre besoin, et ensuite « enregistrée » avec Ext.reg comme correspondant au xtype « app-master ». Nous pourrons ensuite dans notre application instancier cette classe simplement, comme nous l’avons fait pour « app-accueil », par :

C’est avec plaisir que je vais co-écrire un livre sur le framework Sencha Touch après avoir été contacté par les éditions Digit Books. Je vais l’écrire avec mon collègue Mathias Extremo, de Avril Consulting, l’entreprise ou je travaille actuellement.

Le livre couvrera tout les aspects de Sencha. En premier, une présentation des web apps ainsi que du framework assez poussée, les différents composants, intéractions et interfaces ; puis en fil rouge le développement d’une application de A à Z pour iPhone et une pour tablette ; et enfin les bests practices, erreurs fréquentes et autres extrapolations possibles.

Je posterai bien évidemment un article lors de sa sortie, en fin d’été 2011.

Allez, après un moment d’absence dû à de nombreux, très nombreux, projets, ainsi qu’à mes études à SUPINFO, je vais me lancer dans l’écriture de petits articles pratiques sur le framework Sencha Touch, que je commence à très bien maîtriser. J’ai eu plusieurs contacts de la part de développeurs ayant des questions, alors autant en faire profiter à tout le monde !

La fréquence sera environ d’un article par semaine. Le premier traitera des xtypes, principe clef dans les framework ExtJs et Sencha Touch.

1) Présentation du framework Sencha Touch

Sencha Touch est le premier framework mobile JavaScript & HTML5. Il permet de développer des applications web entièrement optimisées pour mobile, c’est à dire gérant les évènements des nouveaux smartphone tactile comme le multitouch, les mouvements de doigts, tout en ayant un affichage adapté à leur écran.

2) Créer l’environnement pour développer avec Sencha Touch

Pour pouvoir importer le framework Sencha Touch dans votre application, vous devez d’abord créer un fichier HTML de base.
Ensuite, il faut insérer les composants Ext, c’est à dire le fichier sencha-touch.js et le fichier sencha-touch.js pour les styles.

Voilà ! Le framework Sencha Touch est maintenant intégré à votre page, vous pouvez commencer à l’utiliser

3) Création de la structure de notre application

Nous allons maintenant modifier notre script, c’est à dire notre application. Pour cela, nous devons créer une nouvelle instance de Ext, soit Sencha, pour lui déclarer notre application.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {

    }
});

Nous allons maintenant voir ligne par ligne ce que l’on a écris. La partie Ext.setup est l’instance Singleton de notre application. Celle-ci sers à définir les paramètres de celle-ci, ainsi que l’action à exécuter lorsque l’application est prête à démarrer (event onReady). Comme paramètres, nous avons ici spécifié « phoneStartupScreen » qui, comme son nom l’indique, permet de définir une image lorsque on lance l’application (fonctionne quand la web-app est ajouté au springboard sur iPhone, pour la faire réagir comme une vrai appli). Nous aurions pu ajouter tabletStartupScreen par exemple si nous voulions définir une image pour les tablettes (Galaxy Tab, iPad…). Ensuite, le paramètre « glossOnIcon » ajoute simplement un effet d’ombre sur l’icone de l’application sur ‘iPhone/iPad.
Nous avons défini les paramètres de config de notre application. Maintenant, nous allons ajouter des éléments dans notre application, et sous Sencha, l’élément coeur est le Panel, dérivé en tabPanel, FormPanel etc.

4) Création de la navigation par onglet et du TabPanel

La première chose que nous voulons faire sur notre application est une navigation par onglet, comme cela se fait pour les applications Cocoa sur iPhone.
Pour ça, nous insérons un tabPanel dans l’évènement onReady de notre application. Concrètement, lorsque le DOM sera chargé, Sencha va alors insérer le tabPanel.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              { title:'Accueil'},
                              { title:'Onglet 2'}
                        ]
               });
    }
});

Analysons maintenant le code. Le TabPanel est un objet du framework Sencha Touch qui permet de créer une navigation par onglet. Celui-ci peux prendre beaucoup de paramètres, nous avons ici spécifié seulement le fullscreen (on ne divise pas notre écran) et l’animation « slide » entre les changements d’onglets. Comme autre paramètre, celui ci prend deux objets, définis dans items.
Ces objets sont implicitement pas nommés, mais nous aurions pu faire un new Ext.Panel() ou tout autre objet. Comme ces deux onglets sont des objets, ils ont chacun leur lots de paramètres, pour l’instant nous ne définissons que leur titre.
Voici le résultat visuel :

Comme vous pouvez le voir, l’application est très sommaire mais fonctionne. Deux onglets en haut.
Pour l’agrémenter très légèrement, nous allons mettre le tabPanel en bas en le « dockant » à l’écran en bas. Puis ajouter des icones pour nos deux onglets. Pour ça, nous redéfinissons le paramètre tabBar de la TabPanel.
Le code :

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
			tabBar: {
				dock: 'bottom',
				layout: {
				   pack: 'center'
				}
			},
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              { title:'Accueil', iconCls:'favorites'},
                              { title:'Info', iconCls:'info'}
                        ]
               });
    }
});

Le résultat est quand même un peu mieux !

5) Ajout du contenu à l’intérieur des onglets

Maintenant que nous avons notre menu par onglet, on va voir comment ajouter du contenu très simple à l’intérieur de ces onglets. Comme vous vous en doutez surement, ça va se définir la ou nous ajoutons nos « items » de TabPanel. C’est en fait l’architecture en cascade de Sencha qui est utile ici. Nous avons d’abord un TabPanel avec deux items, deux onglets. Puis chaque items (onglet) va contenir lui aussi des items (Panel) qui seront le contenu de cette onglet. Pour faire simple, nous n’allons pas insérer d’objet dans nos onglets, mais simplement du html.
Pour cela, rien de très compliqué, nous redéfinissons le paramètre « html » de nos onglets, afin d’insérer dans le DOM notre html.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
						tabBar: {
							dock: 'bottom',
							layout: {
								pack: 'center'
							}
						},
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              {
								title:'Accueil',
								iconCls:'favorites',
								cls:'tab1',
								html:'

SUPINFO

Bienvenue sur la web-app du Laboratoire RIA de l\'école Supérieure d\'Informatique SUPINFO. ', }, { title:'Info', cls:'tab2', iconCls:'info', html:'

www.labo-ria.com

Tutoriel par Florent Lamoureux, www.florentlamoureux.fr ', } ] }); } });

Maintenant on ajoute un peu de CSS, et ça nous donne une bien jolie application !

6) Conclusion

Voilà, vous avez créé une webapp optimisée pour iOS, et qui fonctionne sous Android (écrans larges comme le Samsung Galaxy S ou le HTC Desire). Vous avez maintenant de petites bases pour comprendre comment ça fonctionne.
Je ferai ensuite d'autres tutoriel plus poussé, en présentant plus en détail le framework Sencha Touch et ces objets très nombreux, ainsi que la réalisation d'une application utile !
N'hésitez pas à commenter pour toute remarque ou aide