Paris.JS meetup, 3ème édition, du javascript, des idées, des gens

Le 26 janvier dernier s’est tenu la troisième édition de Paris.JS.

Et pour cette première édition de 2011, le programme des talks était très intéressant:

-une présentation de Raphaël ['ræfeɪəl] par Stéphane Akkaoui

-une présentation de backbone.js par Tony Sokhon

-et enfin la démonstration du fonctionnement de la camera Kinect avec javascript (entre autres) par Sylvain Zimmer

Adoptant un format bar camp, les organisateurs nous ont par ailleurs proposé :

• d’intervenir, sur le sujet de notre choix,
• de participer au tournage d’une vidéo ( ? )
• de participer à un concours de speed coding de robots de combats (j’y reviendrai plus tard)

Backbone.js, présenté par Tony Sokhon

Si vous avez déja travaillé sur des applications plusieurs développeurs, vous savez que votre code peut vite ressembler a un plat de spaghettis. Cela est d’autant plus gênant quand, en plus, votre DOM est pieds et poings liés avec votre code, et vice-versa. Finalement, l’aspect modulaire de votre DOM et de vos scripts, se trouve complètement effacé par les callbacks et autres sélecteurs.

C’est pour pallier à ce genre de problèmes que backbone.js à été créé : appliquer le modèle de conception MVC à vos applications javascript… ?? … ?? Ca m’a paru au départ franchement abstrait comme conept, comment, au sein d’une même facette de l’application (la vue en l’occurence, votre navigateur) appliquer le modèle MVC en javascript ?

 var Mailbox = Backbone.Model.extend({

initialize: function() {
this.messages = new Messages;
this.messages.url = '/mailbox/' + this.id + '/messages';
this.messages.bind("refresh", this.updateCounts);
},

...

});

var Inbox = new Mailbox;

// And then, when the Inbox is opened:

Inbox.messages.fetch();

En 4ko compressé et gzippé, backbone semble fournir une alternative intéressante et compacte lorsqu’il s’agit d’appliquer les concepts clefs de modèle, d’évènements, de vue aux solutions plus « lourdes » telles que sproutcore ou cappucinno, qui par contre embarquent toute une logique application avec des widgets, et sont finalement de vrais frameworks. Backbone.js se « contente » d’apporter les bases de la logique MVC à vos applications, sans se soucier du reste.

Backbone.js

La question que tout le monde se pose, y compris, ce soir là, dans la salle : « Et en production, ca donne quoi ? ». Notre speaker, Tony, n’a pas de réponse. Moi non plus.

Si vous souhaitez en savoir plus sur backbone.js, rendez vous sur le site officiel du framework.

Et vous ? Avez-vous sauté le pas pour appliquer backbone à vos application web ? Avec succès ?

Raphaël, présentation de Stéphane Akkaoui

La seconde présentation de la soirée présentait raphael.js.

Cette librairie javascript n’a qu’un seul objectif : vous faciliter la vie en matière de dessins vectoriels sur le net.

Vous le savez peut être, le standard pour le dessin vectoriel online, c’est la recommandation SVG (actuellement 1.1).

Pourtant, certains petits malins se sont toujours amusés des spécification et recommandations; leur navigateur, un certain Internet Explorer, à choisit sa propre norme (encore que ce terme soit, du coup inapproprié…), VML.

N’importe quel développeur front-end, intégrateur, comprendra alors le besoin d’une librairie uniformisant la création, le rendu, et pourquoi pas l’animation de graphismes vectoriels.

Raphael remplit parfaitement cette tâche à merveille.

Le site officiel propose de nombreux exemples illustrant la simplicité de mise en oeuvre de la librairie :

// Each of the following examples create a canvas that is 320px wide by 200px high
// Canvas is created at the viewport’s 10,50 coordinate
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);

Si vous n’êtes toujours pas convaincu, consultez la présentation sur cette géniale librairie qu’est raphael.js dont Stéphane nous à gratifiés

Kinect + javascipt, tech talk par Sylvain Zimmer

Par pur esprit de geekitude, pour le fun, pour le côté technique, pour le défi, l’exploitation, l’expérimentation, Sylvain à décidé de nous montrer comment exploiter la camera infrarouge Kinect via DepthJS.

Kinect + Javascript tech talk at #ParisJS Jan 2011 View more presentations from Sylvain Zimmer.

DepthJS est une extension navigateur créée au sein du MIT. Si en soi, sa mise en place et son exploitation ne réserve ce bout de code qu’aux geeks, techos, et autres curieux, ce genre d’utilisation laisse présager de nouveaux modes d’utilisation de nos navigateurs, de nouveaux usages de nos terminaux, de nouvelles réflexions et amélioration en matière d’expérience utilisateur, ergonomie …

http://www.vimeo.com/17180651

Jswar, les robots de combats « javascriptés »

Les organisateurs de la soirée avaient prévu, en plus du traditionnel programme de présentations, une compétition en fil rouge: la libre programmation de robots de combats en javascript.

Le principe est simple: une application tourne en tache de fond. C’est l’arène de combat.

Libre ensuite à chacun de programmer, via une interface de programmation bespin, un robot de combat. Les participants ont tous accès à au même objet robot, et à ses différentes méthodes et propriétés, mais chacun est libre ensuite de les utiliser et étendre comme bon lui semble.

Une fois codé, le tout est poussé dans l’arène sous forme de webworker se battre contre ses petits camarades.

Si ce genre de compétition vous intéresse, ou que vous souhaitez jeter un oeil au code source, l‘application complète est en ligne. Si vous souhaitez accéder directement aux méthodes publiques des robots, c’est la classe robot.js qui vous intéresse.

JSwar a été développé par Guillaume Bort.

Il a été adapté par Zenexity pour le Paris-JS du 26/01/11.

Forkez ce projet sur Github !!

Un débat, et une introduction à webGl plus tard …

En guise de conclusion aux présentations ‘officielles’, les organisateurs ont offert une ‘scène ouverte’. Jpvincent ( ou Jean-Pierre VINCENT) en profite pour lancer le débat : « Javascript, langage universel ?« .

Enfin, un dernier intervenant dont je n’ai malheureusement pas saisi le nom, souhaitait parler du rapprochement de plus en plus flagrant entre le web et le jeux-vidéo de qualité, via WebGL.

Au final, je me suis promis d’assister aux soirées suivantes. Elles offrent une excellente manière de discuter, de découvrir, redécouvrir, rester en contact avec la scène javascript sur Paris.