URL: https://linuxfr.org/users/xinfe/journaux/ecrire-une-application-web-de-nos-jours Title: Écrire une application web de nos jours Authors: GSurrel Date: 2013年02月17日T18:49:21+01:00 License: CC By-SA Tags: mvc, programmation_javascript, angularjs, firefox, javascript et cadriciel Score: 29 Bonjour Nal. Comme c'est la première fois que l'on se parle, je vais te raconter une petite histoire d'application web en cinq actes. Je vais essayer de te divertir et de te faire découvrir des choses. Tu aimes le théâtre, j'espère ? # Acte 1 : Exposition Comme beaucoup, j'aime le web, et comme d'autres, je n'aime pas les applications natives. Ayant des données à présenter sur mobiles, je me tourne vers la création d'une application web en commençant par chercher des frameworks Javascript sympas et prévus pour ça, tout en gardant à l'esprit que :> On ne construit pas une application web comme on construit une page web. N'ayant comme expérience que des pages faites avec amour et patience en HTML et CSS et un soupçon de jQuery sur un serveur mutualisé chez Free, je me dis que je suis mal parti (avant d'avoir même pu commencer quoi que ce soit). Surtout que je me rappelle [d'un article de Sencha](http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/) suite à l'abandon par Facebook du HTML5 au profit d'une app native disant en gros que "Non, le HTML5, ça marche et on le prouve. C'est juste qu'il ne faut pas s'y prendre comme un manche". Force est de constater que d'après la vidéo, le Fastbook de Sencha tourne plutôt pas mal. D'un autre côté, il y a Firefox OS qui ne jure que par le HTML5 et ceux qui ont pu jouer avec sont plutôt unanimes pour dire que ca tourne bien. Je me décide donc de tirer parti des connaissances existantes de quelques technologies web et de ne pas hésiter à apprendre de nouvelles choses pour faire la meilleure *webapp* du monde. # Acte 2 : On commence par la fin Après avoir cherché [quelques pistes sur Wikipedia](http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks), je me dit que je vais commencer par regarder ce que je connais et si jQuery ne propose rien pour m'aider dans ma tâche. Et voilà que je découvre [jQuery Mobile](http://jquerymobile.com/) qui m'en met plein les yeux. Des exemples sexy, une documentation sympa, je me dis "Vendu !" et je commence à jouer avec en faisant un petit prototype avec des données bidon codées en dur. C'est super, j'ai rapidement un prototype qui présente bien, avec des animations qui feraient rêver un commercial et des raccourcis de navigation à base de *swipe gestures* qui raviront le power-user. Sauf qu'il y a un problème, subtilement introduit deux paragraphes plus haut. En effet, quand je dis *codées en dur*, je veux dire *gravées dans le HTML*. Et jQuery Mobile, c'est une moulinette qui analyse le [DOM](http://fr.wikipedia.org/wiki/Document_Object_Model "Définition Wikipédia") et le transforme pour donner un résultat qui présente bien à l'écran. Ensuite, ajouter un élément dans une liste, ce n'est pas simple comme un `$("#list").addItem("Carottes")`. La mariée était trop belle, ça cachait quelque chose. Comme quoi, quand on dit que faire un truc beau, ça se fait en dernier, c'est pas totalement faux. # Acte 3 : Partir sur une base saine Un jour de ma veille technologique, je découvre [JSDB.io](http://www.jsdb.io) qui est une assez fantastique base de données recensant des librairies Javascript. La page d'accueil affiche les librairies les plus populaires toutes catégories confondues. Je sais que l'indice de popularité n'a rien de fiable, mais ça donne un ordre de grandeur. Je clique donc sur la première, à savoir, [Bacbone.js](http://backbonejs.org/#introduction) et je lis l'introduction. Relisons là ensemble.> When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. Effectivement, ce que je n'ai pas fait pour mon proto jQuery Mobile...> It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks... Ah oui, en effet, je me rappelle avoir déjà empilé des tas de $("#truc> .machin")...> all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. Saperlipopette ! Ça semble bien cool. Continuons à lire :> For rich client-side applications, a more structured approach is often helpful. OK, Vendu ! Après ce vent d’enthousiasme, je lis plus en détail, et il semblerait que le concept de MVC soit capital. N'en ayant pas entendu parler dans mon école d'élec où je n'ai appris en informatique que de l'assembleur et du C pur et dur, avec un soupçon de POO, je demande à [mon vrai ami](https://fr.wikipedia.org/wiki/Mod%C3%A8le-Vue-Contr%C3%B4leur) qui me répond sans détour que d'autres personnes avant moi ont eu les même problèmes, que certains d'entre eux ont cherché des solutions et qu'un concept est né. Et que c'est exactement ce qu'il me faut. # Acte 4 : l'heure du choix Maintenant que je sais quoi chercher, il s'avère qu'il y a plein de candidats. Et comme c'est aussi un problème que de choisir, d'autres personnes rédigent d'[intéressants articles](http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/), lesquels se terminent en substance par :> * Si tu cherches un truc léger, flexible, utilisable pour faire une grosse *webapp* et éprouvé, prends [Backbone.js](http://backbonejs.org/)> * Si tu cherche un truc qui veut concurrencer une application *desktop* et qui propose des automatismes sympas, prends [Ember.js](http://emberjs.com/)> * Si tu cherches un truc plus léger, axé performance, qui s'intègre bien avec des jQuery ou Dojo, prends [CanJS](http://canjs.us/)> * Si tu cherches un truc déclaratif qui utilises les vues pour définir le comportement à coup de balises HTML personnalisées, prends [AngularJS](http://angularjs.org/)> * Si tu cherches un truc plus *roots* qui serve de fondation pour ton app, prends [Dojo](http://dojotoolkit.org/)> * Si tu cherches un truc qui permette de faire une UI-de-la-mort, prends [YUI](http://yuilibrary.com/)> * Si tu cherches un truc petit, bien documenté qui marche avec CoffeeScript, prends [Spine](http://spinejs.com/)> * Si tu cherches un truc qui créé une dépendance forte entre le modèle et l'interface en mettant tout à jour magiquement, tout en permettant l'utilisation de n'importe quel autre cadriciel, prends [KnockoutJS](http://knockoutjs.com/)> * Si je veux faire une petite *webapp* de rien du tout à l'ancienne, prends [jQuery](http://jquery.com/). Bien, bien, bien. C'est cool, je veux un peu de tout, il me semble. Et comme j'aime bien rendre les choses plus compliquées qu'elles ne le sont déjà, j'ai fait une autre recherche et j'ai trouvé ces autres librairies qui semblent vendre plus ou moins le même rêve : * [Enyo](http://enyojs.com/) * [The M project](http://www.the-m-project.org), juste car j'aime ce que j'ai fait dans jQuery Mobile * Sencha's [ExtJS](http://www.sencha.com/products/extjs/) */me pense sérieusement à faire une pétition pour avoir un .js en TLD* # Acte 5 : Où l'on retarde le choix Face à tous ces choix, je ne suis plus que doute et incertitude. Bien sur, c'est en testant que l'on peut se faire un avis, mais je ne peux pas vraiment tester toutes ces possibilités. Certains font [un bon boulot en proposant une simple application de ToDo en utilisant tout un tas de différents frameworks](http://todomvc.com/), mais le doute subsiste. C'est vers toi, public, que je me tourne afin d'essayer d'avoir une réponse. Après cette longue pièce, tu as eu le temps d'avoir des idées, et il est temps d'en parler. Quel est ta librairie de prédilection pour faire une application web qui propose des éléments graphiques sympas (widgets et animations), sur un concept de MVC, qui propose des événements de "doigt glissé" et éventuellement qui aime bien jouer avec [LeafletJS](http://leafletjs.com/) , et si possible pourquoi ? (Et on n'est pas vendredi, hein) *Applaudissements et huées, le rideau se ferme* Promis, je fais plus concis la prochaine fois, très probablement sans l'environnement théâtre.

AltStyle によって変換されたページ (->オリジナル) /