13 outils de programmation essentiels pour le Web mobile

Lorsqu'il s'agit de programmation pour appareils mobiles, le choix devient rapidement un dilemme. Visez-vous le marché lucratif de l'iPhone au détriment de la marée montante d'Android? Êtes-vous natif ou écrivez-vous du code sur le Web mobile? Et si une seule pile de code qui fonctionne de manière optimale sur un éventail de plus en plus large de plates-formes, de facteurs de forme et d'appareils serait le rêve, la réalité est un essai fragmenté dans lequel les tâches rudimentaires peuvent souvent être un défi.

Mais avec les défis et les opportunités viennent les esprits curieux. Et la multitude de développeurs qui se consacrent à la création d'outils et de bibliothèques mobiles établissent rapidement un écosystème dynamique pour aider les développeurs mobiles, en particulier ceux qui ont choisi de cibler le Web mobile.

[Aussi sur .com: Découvrez 4 façons de créer des applications Web pour smartphone sans passer par l'App Store d'Apple. | Tenez-vous au courant des informations clés sur le développement d'applications avec le blog Fatal Exception et la newsletter Developer World. | Restez informé des actualités et des perspectives mobiles grâce au blog Mobile Edge et à la newsletter Mobilize. ]

Pendant un certain temps, cet ensemble était limité. Mais la promesse de HTML5 a ouvert les yeux de nombreux développeurs sur la myriade d'avantages du Web mobile par rapport à la tentative d'installation de logiciels natifs sur l'appareil.

Premièrement, les sites Web sont ouverts. Il n'est pas nécessaire de jouer à «Mother May I» avec l'équipe d'approbation de l'App Store lorsque le produit est lancé ou mis à jour.

Deuxièmement, les développeurs peuvent récolter 100% des revenus de leurs applications mobiles. Bien sûr, vous devez trouver un moyen de collecter vous-même l'argent, ce qui n'est pas toujours simple. Mais la réduction de 30% qu'Apple prend sur les achats d'applications est un tarif élevé pour ce qui est en grande partie une ligne dans une base de données et une grande bureaucratie.

Troisièmement, HTML5 est de plus en plus robuste et riche en fonctionnalités. La dernière version vous permet de stocker des données sur le client et de faire la plupart des choses qu'une application native peut faire. En d'autres termes, le sandbox du navigateur a presque toutes les mêmes fonctionnalités que le sandbox de code natif. Et oui, les applications de code natif sont conservées dans leur propre coin scellé du système d'exploitation.

Quatrièmement, les applications HTML5 ne sont pas liées à l'appareil. Alors qu'une grande partie du battage médiatique continue à tourner autour de l'iPhone d'Apple, les applications HTML5 sont relativement faciles à déplacer vers d'autres plates-formes. Ce n'est pas aussi simple que d'appuyer sur un bouton, mais c'est beaucoup plus facile que de traduire votre application d'Objective C vers Java.

Il y a bien sûr des limites. Les applications Web peuvent être la proie de problèmes de connectivité. Ils sont souvent un peu plus lents et de nombreux développeurs d'applications natives aiment souligner les retards en millisecondes qui peuvent être ou non perceptibles. Les développeurs de jeux voudront réfléchir à deux fois avant de s'appuyer sur un code intelligent et super réactif en JavaScript.

La plus grande limitation peut être dans le développement lui-même. Bien que les outils d'Apple soient assez bons pour l'appairage dans les applications natives, il est plus difficile de creuser profondément dans la structure du code exécuté sur votre navigateur mobile. Tout cet intérêt pour le développement mobile et le Web mobile a engendré un certain nombre de bibliothèques et d'outils pour faciliter le processus de création d'applications avec eux. Voici une liste de projets accrocheurs susceptibles de faciliter la création du Web mobile.

Outil de programmation Web mobile: ChocolateChip-UI

Télécharger ChocolateChip-UI

Le petit écran des appareils mobiles met l'accent sur une conception d'interface efficace. Entrez Robert Biggs, un développeur Web du nord de la Californie qui a construit ChocolateChip-UI, un cadre pour créer une interface mobile intéressante en HTML.

Techniquement, le code sous-jacent créé par le développeur est WAML (Web Application Markup Language), un langage de balisage construit sur HTML5. La plupart du travail facile est effectué avec des balises WAML telles que ou . Le JavaScript du framework fonctionne via le WAML et le transforme en HMTL5 pur pour le smartphone.

Cette combinaison est aussi légère qu'une plume. Vous pouvez mélanger vos propres HTML, CSS et JavaScript dans le WAML, et il navigue très bien dans le processus de traduction de ChocolateChip-UI.

Bien que cette approche ne soit pas parfaite, je peux comprendre pourquoi Biggs a choisi cette voie. J'ai été perdu dans les fermetures JavaScript de nombreux outils de développement mobile avant et ce n'est pas joli.

La collection de widgets WAML de ChocolateChip-UI est assez complète, qui ressemblent toutes aux interfaces utilisateur standard de l'iPhone. Il comprend même des extras comme des listes de suppression pour permettre aux utilisateurs d'éliminer des éléments d'une liste en quelques clics du doigt.

Outil de programmation Web mobile: Mobl

Télécharger Mobl

JavaScript a de nombreux aspects difficiles qui continuent de frotter les développeurs Web. L'équipe Mobl a décidé de lisser ces bords tout en créant un cadre pour la création d'applications mobiles qui s'exécutent dans les navigateurs WebKit. Au lieu d'écrire vos instructions en HTML, JavaScript et CSS, vous les écrivez dans Mobl et le compilateur Mobl les transforme en HTML, JavaScript et CSS pour le navigateur mobile.

L'approche a permis à l'équipe Mobl de résoudre certains des problèmes les plus délicats de JavaScript, comme la façon dont les fonctions sont transmises à d'autres fonctions pour une exécution retardée. Garder une trace de toutes les parenthèses imbriquées nécessaires pour ce faire dans JavaScript peut rapidement devenir angoissant, augmentant ainsi le risque d'erreur.

Mobl se débarrasse de cette complexité en employant une syntaxe plus déclarative. Si vous souhaitez mettre en pause 1000 millisecondes, vous écrivez:

sleep(1000); doNext();

Mobl compile cela en JavaScript avec une setTimeoutfonction et une callbackfonction qui s'exécuteront doNext(). En tant que développeur, vous n'avez pas à penser à la callbacksyntaxe ou à la façon de tout encapsuler dans une autre fonction. Tout ce que vous avez à faire est d'écrire une liste de choses que vous voulez voir se produire.

Il existe des dizaines de façons dont l'équipe Mobl vous aide à rédiger ces instructions sans avoir à faire attention à toute la ponctuation en JavaScript. Le résultat final est une belle collection des idiomes standard des applications mobiles. Vous voulez une liste déroulante? Enveloppez simplement votre liste d'éléments avec le mot-clé de groupe.

Les développeurs qui n'aimeront pas cette approche seront ceux déjà à l'aise avec Objective-C ou JavaScript. Après tout, pourquoi apprendre encore une autre langue avec une syntaxe légèrement différente alors que cette syntaxe légèrement différente ne sera transformée qu'en quelque chose qu'ils comprennent déjà? Là encore, les amateurs de langues pourraient trouver un certain nombre de bonnes et nouvelles idées pour que le voyage en vaille la peine.

Outil de programmation Web mobile: jQuery Mobile

Télécharger jQuery Mobile

Lorsque les responsables du framework jQuery ont décidé de s'attaquer aux plates-formes mobiles et de créer une boîte à outils d'interface utilisateur simple pour les smartphones, il était clair que cela attirerait l'attention et l'expérimentation généralisées. Le résultat est un projet bien soutenu par de nombreux grands fabricants de matériel informatique et qui devrait être relativement réussi sur les appareils mobiles.

La partie la plus simple de jQuery Mobile est sa mise en page centrée sur HTML. Les pages sont construites dans des DIV et d'autres composants HTML standard tels que

  • Mots clés. En conséquence, jQuery Mobile est facile à intégrer aux sites Web dynamiques et aux CMS, car son utilisation consiste souvent simplement à ajouter un nouveau thème ou un nouveau skin. Il existe, par exemple, plusieurs thèmes et modules Drupal construits autour de jQuery Mobile.

    L'intégration étroite avec jQuery signifie que de nombreux plug-ins pour le bureau, mais pas tous, fonctionneront également avec les sites Web mobiles. Il existe également quelques plug-ins mobiles conçus pour étendre le cadre mobile. La touche légère du framework et l'écosystème fertile construit autour de jQuery Mobile signifie que nous verrons probablement sa puissance ne faire que croître.

    Outil de programmation Web mobile: The-M-Project

    Télécharger The-M-Project

    Si la collection de méthodes et de styles de jQuery Mobile n'est pas assez sophistiquée, The-M-Project propose une collection de widgets qui sont compilés en objets jQuery Mobile. Il gère de nombreux détails de conception, tels que le placement d'une icône au bon endroit, afin que vous puissiez vous concentrer sur une vue d'ensemble.

    Le code est structuré avec le modèle Model-View-Controller. Une grande partie du travail consiste à créer une grande structure JSON qui définit les différentes pages et les widgets qui se trouvent dans ces pages. La mise en page est gérée par The-M-Project.

    Le comportement de l'application est défini en créant des fonctions attachées à divers hooks d'événement pour chaque page. The-M-Project veille à ce que les événements atteignent leur emplacement.

    Cela ne vaut rien que le processus de construction et de déploiement soit intégré à Node.js. Le code pour construire votre grande création fonctionne également dans Node.js; les tests sont effectués sur le même serveur. Quand cela fonctionne, vous pouvez transférer le mélange de code et de bibliothèque sur n'importe quel serveur Web, ou vous pouvez l'intégrer davantage avec Node.js.

    Outil de programmation Web mobile: Touchqode

    Télécharger Touchqode

    Vous êtes assis dans un café à Paris, au sommet du mont Everest, ou ailleurs sans votre ordinateur portable ou de bureau. Une idée vous frappe. Le griffonnez-vous sur un bout de papier et y revenez-vous plus tard? Pas si vous avez Touchqode en cours d'exécution sur votre téléphone Android. (Une version iPhone sera bientôt disponible.)

    Ce minuscule environnement de développement regroupe un nombre étonnamment grand de fonctionnalités dans un petit écran. Le code est mis en surbrillance, les scripts peuvent s'exécuter localement et vous pouvez synchroniser votre nouveau code via FTP. Si le patron appelle lorsque vous êtes en déplacement, vous devriez avoir peu de mal à réparer quelque chose qui ne nécessite que quelques touches. Je ne peux pas imaginer écrire de longs programmes avec mon téléphone Android, mais étant donné que les auteurs ont composé des romans entiers sur leurs téléphones portables, il est peut-être trop tôt pour supposer que les utilisateurs n'utiliseront Touchqode que pour créer quelques lignes de code occasionnelles.

    Quoi qu'il en soit, Touchqode est bon à la rigueur.

    Outil de programmation Web mobile: LimeJS

    Télécharger LimeJS

    L'une des raisons pour lesquelles les jeux Flash sont si convaincants est à cause de l'écosystème fertile d'écrivains de bibliothèques qui peuvent vendre leur travail aux développeurs Flash. DigitalFruit a créé LimeJS pour offrir un support similaire aux développeurs qui souhaitent utiliser les objets WebGL qui font partie de HTML5.

    Les premiers résultats de LimeJS sont efficaces dans les navigateurs WebKit. Le code est techniquement JavaScript, mais la structure ressemble à un bon C à l'ancienne, avec des appels à la bibliothèque OpenGL. Il devrait être possible de compiler automatiquement certains OpenGL dans cette bibliothèque, bien que cela nécessitera probablement un réglage manuel.

    Les offres de LimeJS sont quelques fonctionnalités intéressantes pour simplifier le développement de jeux. Il y a des scènes remplies de couches et un réalisateur qui déclenchera les événements selon un calendrier flexible. Il existe des animations et des transitions qui déplacent les sprites à travers les pages. Toutes les fonctionnalités seront familières aux personnes qui ont déjà écrit des jeux occasionnels.

    L'environnement de développement comprend plusieurs touches modernes. La construction de base est gérée en Python et le package final peut être combiné avec le compilateur de fermeture de Google afin qu'il se télécharge plus rapidement.

    LimeJS attirera tous ceux qui ont passé du temps à développer des jeux pour les frameworks OpenGL dans d'autres environnements. Bien que la syntaxe finale soit JavaScript, elle ne repose pas sur les idées plus complexes qui rendent JavaScript rebutant pour certains, du moins jusqu'à ce que le compilateur de fermeture fasse son travail.

    Outil de programmation Web mobile: Jdrop

    En savoir plus sur Jdrop

    À première vue, Jdrop semble être un gros tas de JSON qui pourrait être confondu avec une base de données NoSQL ouverte. En pratique, cette ressource Web est adaptée pour aider les développeurs mobiles à rassembler les données de performances entre les petits écrans et le bureau, où elles peuvent être mieux analysées.

    Pour faciliter l'extraction des commentaires sur les performances des appareils mobiles, Jdrop propose Mobile Perf, un bookmarklet qui regroupe un ensemble de signets de performances, notamment Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess et Zoompf. Grâce à Mobile Perf, vous pouvez déboguer votre application sur un téléphone et stocker automatiquement les données résultantes dans le cloud Jdrop pour une analyse ultérieure à partir de votre bureau, offrant un moyen intéressant de déboguer les véritables performances mobiles et d'examiner la source HTML de vos sites mobiles préférés.

    Outil de programmation Web mobile: XUI, Zepto

    Télécharger XUI

    Télécharger Zepto

    La plupart des frameworks décrits ici existent pour faire le gros du travail en transformant une description de l'application, souvent écrite dans leur propre langue, en quelque chose qui semble assez bien sur la page. XUI et Zepto sont très différents. Ils partent de l'idée que HTML et CSS sont déjà assez bons pour afficher la plupart des choses que l'on pourrait vouloir afficher et n'offrent que de l'aide pour créer et modifier le DOM.

    Ces bibliothèques ne disposeront pas vos widgets ni ne créeront même de widgets d'aucune sorte. Vous obtenez ce que propose le HTML, puis vous contrôlez son apparence avec CSS. La bibliothèque est là pour vous aider à manipuler le DOM en offrant des fonctionnalités telles que la possibilité de trouver des éléments, d'attacher des classes et de jongler avec des événements.

    Le gain est de taille. La version actuelle de Zepto pèse environ 2300 octets, soit environ un dixième de la taille de jQuery. XUI est juste un peu plus grand. La comparaison avec jQuery est appropriée car les deux empruntent une grande partie de la syntaxe sans offrir aucune des fonctionnalités qui nécessitent un code plus sophistiqué et plus lourd. XUI, par exemple, extrait le code qui serait nécessaire pour être compatible avec BlackBerry ou IE Mobile. Si vous les voulez, vous pouvez obtenir une bibliothèque plus grosse.