janvier 28, 2011 5

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

By in évenement, Javascript, la vraie vie

ParisJs Meetup 3

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

backbone.js

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.

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

raphael.js logoLa 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

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 …

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, Cédric Pinson, spécialiste OpenGL, 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.

Si vous aussi souhaitez participer, vous pouvez consulter le site officiel parisjs.org, vous abonner au twitter @parisjs. Rendez-vous le 23 février, 2011 pour le meetup ParisJS 4 à La Cantine !

Tags: , ,

5 Responses to “Paris.JS meetup, 3ème édition, du javascript, des idées, des gens”

  1. jpvincent dit :

    à noter que backbone.js ne fait que 4ko, mais qu’il dépend de jQuery + Underscore.js. Cela dit le concept de mapping formel entre DOM, events et callback peut être utile lorsqu’une application commence à grossir et aide à s’organiser.

    l’intervention sur WebGL par ce pro du jeux vidéo était intéressante car il nous a formellement confirmé que l’industrie du jeux vidéo envisageait sérieusement le Web comme moyen de distribution, et pas seulement pour du casual gaming en 2D

    merci pour ce résumé de cette excellent soirée !

  2. Thomas dit :

    Quelque chose que je n’ai pas relevé lors de la soirée mais que j’aurais peut-être dû : la seule dépendance de Backbone.js est Underscore.js

    jQuery n’en est pas une et peut être substitué :)

  3. pixelboy dit :

    merci pour ces précisions / corrections.
    @jpvincent : quelles conclusion tires-tu du débat que tu as lancé ? Je supposes que tu auras remarqué que je n’ai pas formellement décrit le déroulement et la teneur du débat, n’étant pas sur d’avoir capté toutes les opinions et points de vue à leur juste valeur…

    @thomas merci pour la précision, je vais clarifier ce point dans l’article directement ;)

  4. gtraxx dit :

    Je suis très intéresser par un exemple avec jQuery et backbone afin de bien comprendre le principe et la syntaxe.
    Les méthodes sont elles bien expliqué ?
    Car je ne comprend pas trop comment l’utilisé avec jQuery

  5. pixelboy dit :

    Bonsoir,
    la meilleure manière de comprendre le fonctionnement de backbone.js avec jQuery est de checker les source de cette page : http://documentcloud.github.com/backbone/examples/todos/index.html
    Le script qui vous intéresse est le fichier todos.js

Leave a Reply