Je suis retombé en amour avec Javascript.
Marrant ce langage, je crois que du fin fond de ma mémoire de vieux développeur web, c’est l’un des premiers langages avec lequel j’ai travaillé. Oh je vois que vous ne me croyez pas, alors je vais vous faire une petite page d’histoire. En 1997, je débute à Coplanet, dans l’une des premières agences webs à Paris. Développeur, j’ai travaillé à l’époque avec les produits entreprises édités par Netscape. Nous avons codé les premiers sites dynamiques avec la technologie de l’époque, en javascript côté serveur. Netscape Livewire était un moteur d’exécution embarqué dans Netscape Enterprise, le serveur web de l’époque. Vous écriviez vos pages en mélangeant Javascript et HTML, les pages étaient ensuite compilées en ligne de commande afin de générer un binaire, puis celui-ci tournait comme un CGI sur le serveur. La dernière fois que j’en ai fait, c’était fin 1999 pour la SocGen, pour le passage à l’an 2000. Quel bonheur les dates en Javascript, et les nombres… ah que c’est génial… Bon tout cela pour vous dire que le javascript côté serveur c’est vieux. Avant Node.JS, d’autres en font. Voilà, fin de la page historique, revenons à des trucs plus intéressants.
Ces dernières années, j’avais un peu laissé tomber mon vieux copain le Javascript. Disons qu’en vieillissant, à part un peu de jQuery de temps en temps, je n’avais pas franchement un intérêt et une grande envie de m’en servir. J’ai aussi gouté aux frameworks magiques qui veulent tout faire comme Ext.JS entre autre. Mais bon, lorsque tu voulais faire une application sérieuse, rien ne pouvait remplacer quelques heures à écrire du Javascript.
Mais ça, c’était avant.
Depuis le début de cette année, retour au Web, à fond les ballons. Et là, c’est la claque.
Mince les gars, dites-donc, on tourne le dos 5 minutes et lorsque l’on revient, vous avez sorti des tueries de frameworks en Javascript.
AngularJS
Depuis une dizaine de jours je travaille toute la journée avec AngularJS. J’avoue qu’une présentation à Devoxx ainsi que l’atelier de 3 heures m’ont donné vraiment envie de m’y mettre. Pour Zaptravel nous avons fait pour l’instant du Backbone.js (c’est en prod sur Zaptravel, si vous cliquez sur la partie « Review and Buy » d’un deal, tout ensuite est en Backbone). La complexité de mise à jour du modèle lorsque vous avez des services asynchrones n’a pas simplifié le développement. Mais bon, avec deux bons développeurs Webs dans l’équipe (Clément et Maxime), cela a donné un résultat plutôt sympa. Cependant, à fonctionnalités équivalentes, Angular.js est plus simple et plus intuitif.
AngularJS est un framework développé à l’origine par deux développeurs, qui ont ensuite été embauché par Google. Il permet de construire des applications Webs en Javascript, en se basant sur du simple HTML. Après quelques jours d’utilisation, le code d’AngularJS se glisse presque de manière invisible dans du code HTML existant. En bref, j’ai parfois l’impression que ce qu’il fait a toujours été supporté par mon navigateur…
Exemple HelloWorld avec AngularJS (que vous pouvez tester ici):
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Pour apprendre correctement AngularJS et ne pas perdre de temps, voici ce que j’ai fait :
– faire le tutorial de l’application téléphonique
– suivez le workshop FoodMe réalisé à Devoxx 2012 cela vous donner d’excellentes bases
– la lecture de l’API m’a donné pas mal d’astuces
Tout n’est pas parfait. La documentation manque encore parfois d’explications. J’ai trouvé pas mal d’aide sur StackOverflow. Enfin au final j’ai codé un service de recherche de billets d’avions/hotel avec des services REST en quelques jours, et le résultat est plutôt sympa.
Underscore.js
Depuis que je développe en Scala, j’ai pris le pli de la programmation fonctionnelle. Underscore.js est une librairie qui permet d’apporter un peu de fonctionnel à votre code Javascript. Prenez la fonction map par exemple :
map_.map(list, iterator, [context]) Alias: collect
Produces a new array of values by mapping each value in list through a transformation function (iterator). If the native map method exists, it will be used instead. If list is a JavaScript object, iterator‘s arguments will be (value, key, list).
_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]
groupBy_.groupBy(list, iterator)
Splits a collection into sets, grouped by the result of running each value throughiterator. If iterator is a string instead of a function, groups by the property named byiterator on each of the values.
_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}
_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}
A ajouter dans sa boîte de développeur, car c’est simple et très puissant.
Lo-Dash est une autre librairie similaire dont la tag-line est de « fixer certains bugs d’Underscore qui ne sont pas corrigés » et qui délivre de meilleures performances. Vous connaissez ?
Flot
Besoin de faire quelques graphiques sympathiques ? Pour notre partie administration j’avais envie d’afficher minute par minute le nombre de deals que nous proposons. J’ai donc codé avec Akka et Play2 un peu de code simple pour stocker sur Redis nos stats, et j’ai ensuite écrit un service qui remote les 100 derniers résultats.
Pour la partie graphique je me suis appuyé sur Flot, qui n’est pas la librairie la plus puissante pour les charts, mais qui a l’avantage d’être légère.
Yeoman
Enfin pour terminer, quelques mots sur Yeoman. Il s’agit d’un ensemble d’outils et de scripts qui vous permettent de démarrer l’écriture d’une application web, et qui vous donne tout un socle pour faire tourner votre code, le tester et même le packager. Un petit peu comme la partie tooling de Grails qui permet d’ajouter un controller ou une entité, Yeoman vous aide à bien structurer votre code. Si vous l’utilisez avec AngularJS, il pourra par exemple vous faire gagner du temps lors de la création de vos controllers.
La partie « packaging » permet de préparer votre projet pour le mettre en production. Jugez plutôt :
– Linting all JavaScript files against JSHint
– Recompiling all CoffeeScript and SASS files for production
– Using r.js to compile and optimize any AMD modules
– Concatenation and minification of scripts and stylesheets
– Compressing your images using OptiPNG for PNG files and JPEGtran-turbo for JPEGs
– Running any unit tests written against a headless WebKit browser (via PhantomJS)
– Creating an Application Cache manifest via Confess.js
– Using revision filenames or oldernames
Yeoman sait aussi compiler vos fichiers CoffeScript, il embarque Node.JS pour vous permettre de tester, bref un ensemble d’outils bien pratique.
Mais bon, je ne m’en sers pas.
Play2 compile déjà tout ce qui est Less/CoffeeScript et va même me pointer les erreurs à la compilation. Il sait aussi minimiser et compresser les ressources type CSS/JS. Par contre il n’est pas capable de s’intégrer avec les librairies JS, ou en mesure de les mettre à jour comme le fait Yeoman.
Si vous voulez en savoir plus sur Yeoman : http://yeoman.io/
Conclusion
Pour terminer, un petit mot sur le ParisJUG. En janvier prochain nous ferons une soirée spéciale Javascript avec du Backbone et une présentation d’AngularJS justement. 2 heures pour vous montrer ce qui se fait dans le monde JS.
Enfin chaque mois vous pouvez venir au ParisJS, qui regroupe une bonne centaine de personnes à chaque fois. Si vous êtes fan de Node.JS, que vous hésitez entre Ember.JS et AngularJS alors vous pourrez trouver des passionnés pour en discuter.
Sur ce, j’y retourne.
0 no like
Bonjour,
Je suis un développeur, mais je pourrais dire que je fais surtout le côté back-end. J’ai rarement travaillé les interfaces. Je serais capable de faire un peu de html et javascript mais ce qui me décourage est le design.
Comment faites-vous pour avoir des beaux designs comme dans Zaptravel ou comme le site de PlayFramework ? Vous avez un designer avec vous ? Vous achetez des templates sur le web ? Vous les faites vous même ?
Il y a quelques projets personnels que je voudrais faire, mais chaque fois j’arrête car je suis rendu au point du design et je ne sais vraiment pas comment m’y prendre.
@Jack : oui pour Zaptravel nous avons un excellent designer, Olivier Desmoulin, le fondateur de Super-Marmite (http://www.super-marmite.com/). Toutes les idées et l’interface, c’est lui. Il réalise des maquettes via Photoshop, nous intégrons ensuite son travail et ses idées.
Pour PlayFramework, l’ancien site a été designé par Maxime Dantec. Il est passé chez Zaptravel et il travaille maintenant chez Typesafe.
@Jack : Sinon tu peux utiliser Bootstrap http://twitter.github.com/bootstrap/ qui remplie bien la job 🙂
Bonjour,
article intéressant d’autant que ça commence à être dur de suivre tous les framework JS qui sortent en ce moment.
Par contre une phrase m’a fait tiquer:
« Underscore.js est une librairie qui permet d’apporter un peu de fonctionnel à votre code Javascript. »
Je ne suis pas expert en langage mais il me semble que Javascript est DEJA un langage fonctionnel (de 1er ordre) contrairement à Java. Donc Underscore.js ne serait qu’une lib de fonction avec une sémantique « à la mode ».
mes 2 cts
Un autre comparatif de framework javascript à lire ici: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
Perso j’aime bien knockout http://knockoutjs.com
La « killer feature » à avoir avec ce genre de framework est l' »UI Bindings » !
Article intéressant, j’aime également beaucoup AngularJS. J’ai été épaté par la présentation lors de la Devoxx, et je l’utilise pour apprendre sur des petits projets perso (je n’ai pas la chance de pouvoir utiliser ce genre de technos au travail).
@Thibaud: Ca dépends de ce qu’on considère comme langage fonctionnel, si on prends en compte uniquement les fonctions de premier ordre, et les lambdas alors oui c’est un langage fonctionnel. Mais pour moi les langages fonctionnel dont j’ai l’habitude ont de nombreuses fonctionalités (mes excuses) en plus comme le pattern matching, les types algébriques, la currification/application partielle, les structures immutables. Dans ce cas là, je ne crois pas que Javascript soit un langage fonctionnel.
Concernant Underscore.js ça apporte simplement la touche fonctionnelle au niveau syntaxique et des méthodes utilitaires comme map/reduce et d’autres très pratique comme pluck, Array.zip et des tas d’autres. Je n’ai pas eu l’occasion de tester Lo-Dash que je ne connaissais pas du tout.
Quand à Angular certaines parties ne sont pas hyper faciles à comprendre la première fois pour ceux qui ne font pas du Javascript full time, mais j’ai eu pas mal de problèmes avec Backbone pour ce qui est du rendering de view/subview (probablement dus à ma non-connaissance) qui m’ont pas mal bloquée. Et AngularJS me parrait être une très belle alternative.
@jb Merci pour le lien. Mais ca ne me donne pas plus de design non ? Ca ne ressemble pas à Angular.js ?
@Nicolas: Donc lorsque tu as des contrats, tu n’es jamais le seul à développer l’application, il y a toujours des designers avec toi ?
@Jack pour Zaptravel, je serai salarié prochainement, ce n’est qu’une transition pour l’instant.
« En 1997… Nous avons codé les premiers sites dynamiques avec la technologie de l’époque, en javascript côté serveur… Avant Node.JS »
L’informatique a souvent un petit coté « Retour vers le futur » 😉
Sinon, as-tu une expérience Flex/ActionScript/MXML ? Si oui, je suis curieux de ton avis Flex vs AngularJS.
Merci
@Dominique : une toute petite expérience lorsque j’étais chez Thomson-Reuters, avec une formation chez Valtech. J’en avais gardé un bon souvenir. AngularJS n’est pas orienté composant comme Flex, mais d’autres librairies s’annoncent et semblent vouloir compléter ce gap. Côté outillage, FlexBuilder était bien pour donner de bonnes bases. Enfin le seul bémol c’est que Flex n’est plus tellement poussé par Adobe. Pour en savoir plus c’est par ici.