Petit message à nos amis de la communauté Java

L’ensemble des développeurs présents est fortement axé Web. Cela m’a donné l’occasion de jouer un peu le javaiste de base et de débattre sur notre place dans la communauté des développeurs. Croyez-moi, c’est pas très brillant. Le bonhomme qui fait du Java a l’image un peu arrogant du consultant qui vient avec toute sa pile de solution et qui fait des « applications sérieuses ».

Vous avez envie de faire du Web ? Ne prenez pas Apache et mod_php. Prenez mon Tomcat-Spring-Hibernate-GWT tout complet. Bon en fait vous n’avez que 5 tables ? Oui mais moi je ne fais que de l’ORM, le JDBC c’est sale. Quoi vous avez 3 actions ? Ah mais moi je fais des beans Spring avec du Spring MVC…

Bon je force le trait, mais vous avez compris le message. Lâchez-vous dans la zone commentaire ci-dessous, c’est fait pour.

Présentation de Backbone.js

La première présentation était sur Backbone.js par Tony Sokhon. C’est un framework type MVC léger qui permet de programmer du côté navigateur des actions, un controleur et la gestion de vues plus simplement qu’avec jQuery. Encore jeune, l’idée est d’apporter une architecture orientée requête afin d’éviter de devoir tout gérer via jQuery. Après avoir déclaré les classes de votre modèle, vous pouvez ensuite déclarer des actions et des états à afficher. Il faut avoir déjà un bon niveau en jQuery, mais c’est intéressant.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a « change » event; all the Views that display the model’s data are notified of the event, causing them to re-render. You don’t have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.

Les cas d’applications : des applications clientes riches, des applications pour mobile et des applications en mode déconnecté. Le framework gère aussi le localStorage, ce qui permet de construire des applications déconnectées d’entreprise.

Raphael.js

La deuxième présentation par Stéphane Akkaoui était sur Raphael.JS, une librairie Javascript pour dessiner en SVG ou WML dans le navigateur. Allez voir quelques exemples, c’est intéressant. Cet exemple de Chart devrait vous convaincre je pense.

Stéphane nous a montré quelques exemples très bien faits pour coder en javascript la création de dessins vectoriels. Le moteur est une abstraction qui utilise SVG pour l’ensemble des navigateurs, sauf IE6 qui utilise le format WML de Microsoft. Il permet sans plugin de dessiner du vectoriel dans le navigateur. Lorsque vous n’avez pas de player Flash comme sur iPhone, cette solution permet de dessiner simplement.

Démo de la Kinect avec une interface Javascript

Cette démo était vraiment bluffante. Imaginez la Kinect, le présentateur qui bouge ses mains à la Minority Report, et votre navigateur Chrome qui navigue selon les mouvements de votre main… Ce n’est pas de la science-fiction, vous pouvez le faire avec un budget de 150 EUR.

La Kinect se branche sur port USB. Développé par une boîte en Israël, il existe 2 API open-source en C qui permettent de récupérer les mouvements de l’utilsiateur devant la caméra de la Kinect. Adafruit avait lancé une récompense de 2000$ pour le premier capable de coder des drivers open-source pour ce périphérique. A peine 6 jours plus tard, le site annonce avoir un gagnant avec le projet OpenKinect. Pour les heureux propriétaires de ce device, il existe un portage Java qui utilise JNI sur le site.

La démo était intéressante avec une présentation de l’interface Web de TEDx piloté avec les mains. Sylvain Zimmer, qui travaille chez Joshfire, recherche d’ailleurs de bons développeurs. Si vous avez HTML5, Internet des objets, Node.JS et Javascript dans votre parcours, contactez-les sur leur site. Il y a entre autre Rafi Haladjian au board de l’équipe dirigeante.

Débat sur Javascript côté serveur

Nous avons ensuite lancé le débat sur la place de Javascript aujourd’hui dans l’environnement Web. Du côté du navigateur, il a une place bien établie. L’interaction avec les périphériques matériels (micro, caméra) arrive à vitesse grand V.

Il y a de plus en plus de frameworks simples du côté navigateur qui font oublier la programmation Javascript à Papa. Si vous ne connaissez pas jQuery et que votre produit utilise un navigateur Web, vous avez raté votre vie. Franchement. Et venez pas me dire que c’est un boulot de web-designer, ou que le javascript c’est sale. Venez voir ce qu’il se fait, on est en 2011 les gars. Et dans votre poche, sur votre iPhone ou votre Android, il y a du Javascript qui tourne dans votre navigateur mobile… alors arrêtons de penser « java-iste » et bougons-nous les fesses pour apprendre un peu ces technologies.

Ensuite on parle du côté serveur. Et là, même si Node.js est très sympa et super performant… j’y crois pas trop. Prenez Play! Framework, avec une stack légère comme JBoss Netty et vous aurez 10 fois mieux. Non, node.js ne me fait pas rêver. Mais je peux changer d’avis et je veux bien être convaincu.

Javascript du côté serveur, c’est vieux. En fait en 97 lorsque j’ai commencé à travailler, je bossais avec Netscape Livewire. Le code à executer du côté serveur était à placer entre une balise SERVER. Voici par exemple comment il était possible dans une page HTML d’afficher un HelloWorld:

<HTML>
<HEAD>
<TITLE> Hello World </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<P>Your IP address is <SERVER>write(request.ip)</SERVER>
<SERVER>
write("<P>Last time you were " + client.oldname + ".")
</SERVER>
<P>This time you are <SERVER>write(request.newname)</SERVER>
<SERVER>client.oldname = request.newname // Remember name for next time.
</SERVER>
<FORM METHOD="post" ACTION="hello.html">
<INPUT TYPE="text" NAME="newname" SIZE="20">
<SERVER>
if (client.number == null)  // Initialize number of accesses by this
client
	client.number = 0
else
	client.number = parseInt(client.number) + 1

project.lock() // Initialize or increment total number of accesses.
if(project.number == null)
	project.number = 0
else
	project.number = parseInt(project.number)++
project.unlock()

</SERVER>

<P>You have been here <SERVER>write(client.number)</SERVER> times.
<BR/>This page has been accessed <SERVER>write(project.number)</SERVER> times.

</BODY>

On a un peu trollé, mais le fond du débat était intéressant. Comment JavaScript, avec son approche fonctionnel, peut contribuer du côté serveur à ce que manipule finalement l’utilisateur ? Du côté client, c’est déjà un langage qui tourne dans une virtual machine, qui permet à un navigateur d’exécuter du code. Cela revient au pattern du client lourd, avec cependant une énorme différence d’architecture. Bref à mon avis, vous me lancez sur le sujet et je vous ponds 3 pages avec une marge rouge, 4 carreaux à gauche. On en reparlera.

WebGL, le standard OpenGL pour le Web

Dernier débat de la soirée, avec une présentation de WebGL. C’est une interface qui utilise le composant Canvas d’HTML5 (quoi vous ne connaissez pas Canvas ?) et qui offre un support d’OpenGL ES 2.0.
Comme une bonne démo vaut tous les discours du monde, allez donc voir Google Body avec un navigateur assez récent. Sympa non ?

Conclusion

Soirée bien sympa, avec des rencontres et de belles discussions. Et pour un gars du Web comme moi, c’était intéressant. Je termine par un peu de publicité.

• Le 11/12/13 février aura lieu la HTML5 Game Jam Paris. Rien qu’un week-end pour programmer en HTML5 des jeux.
• Suivez les prochains événements ParisJS sur http://parisjs.org/. En principe c’est le dernier mercredi du mois. La prochaine soirée aura lieu à la Cantine fin février.

J’ai en réserve un bon nombre d’adresse que j’utilise lorsque je dois valider un site, créer rapidement un logo ou trouver une mise en page CSS sympathique. Je n’ai pas tout repris ici mais voici déjà quelques uns de mes liens.

BrowserShots est un site qui vous permet de tester votre site internet avec différents navigateurs. Pour cela le site visite votre page et effectue une capture d’écran, que vous pouvez ensuite télécharger. Le Touilleur Express par exemple ne marche pas très bien avec certaines versions d’Opéra. Pratique et rapide.
http://browsershots.org/

L’adresse de courrier électronique poubelle, vous connaissez ? Disons que vous avez besoin de vous inscrire afin de recevoir un email d’un site marchand un peu douteux, le site SpamBox propose de créer un email valable une heure seulement. Cependant avant de m’en servir, je vérifierai bien si ce site lui-même n’en profite pas pour récupérer votre vraie adresse email pour la revendre… On est jamais trop prudent.

Le logo en flamme, le logo en flamme ! Si vous cherchez quelques tutoriaux afin de créer votre logo en flamme, allez jeter un oeil sur le blog de DesignVitality. J’aime particulièrement les designs Web 2.0.

Le site DaFont offre une très grande collection de polices pour réaliser des applications webs, des sites et des logos. Il y a des polices très originales qui permettent de réaliser la patte d’un site en quelques instants.

Le site qu’il faut avoir dans ses bookmarks car il contient finalement un peu prêt tout ce dont j’ai besoin lorsque je crée un habillage : http://webdevelopersfieldguide.com/. Par exemple une roue colométrique pour l’équilibre des couleurs. Ou un système comme DeGraeve.com qui se base sur une image pour vous proposer une carte de couleurs.

Pour suivre l’actualité autour d’Ajax et des librairies comme Prototype ou Script.aculo.us, je vous avais déjà parlé d’Ajaxian.com. Le site propose souvent des articles assez pointus sur Ajax et Javascript.

En ce moment nous corrigeons des problèmes de Closures en Javascript. Je cherchais sur le net un outil que j’avais testé il y a 2 ans pour identifier des closures… Je tappe quelques mots et je tombe… sur mon blog… Ca fait bizarre de se répondre à soi-même… Si vous voulez briller en société et expliqué à un client ou à un consultant ce qu’est une Closure, je vous redonne cette page très bien faite, avant de vous proposer à mon tour une explication en français dans le texte prochainement. Oui on ne  le dit pas assez, mais un certain nombre de librairies Ajax peuvent causer des problèmes de mémoire du côté du navigateur.

Parmies les améliorations notables, on note une mise à jour de la version de la librairie Prototype qui corrige des fuites mémoires d’Internet Explorer. En effet, AJAX c’est bien beau mais lorsque la partie Javascript est mal programmée, cela conduit rapidement à des problèmes de fuites mémoires. J’en parle en connaissance de cause puisque notre moteur souffre actuellement de ce souci. Pour aider les développeurs à rechercher les fuites mémoires du côté client dans le navigateur, il n’existe pas grand chose. Le seul outil pratique que j’ai trouvé s’appelle Drip. Il permet de suivre l’usage de la mémoire d’Internet Explorer et de voir les problèmes de Javascripts closure.
L’adresse du site est: http://outofhanwell.com/ieleak/index.php?title=Main_Page

Une autre ressource pour suivre l’utilisation mémoire d’IE est expliquée dans cet article du site Ajaxian.com.

Attention donc aux problèmes de mémoire avec Internet Explorer

Avez-vous entendu parler du Web 2.0 ?

Basé sur des technologies comme AJAX, DHTML, XML ou Soap, le concept de « Web 2.0″ regroupe
l’annonce de l’arrivée prochaine d’application légère dans votre navigateur.
Microsoft ainsi commence à croire que Google pourrait être son plus sérieux compétiteur. La présentation de Google faites aux analystes financiers parle
ainsi d’un nouveau concept de Web. Google proposerait un espace de stockage
illimité pour vos fichiers, des applications légères embarquées dans votre
navigateur pour les utiliser, et donc la fin des logiciels installés sur votre
ordinateur personel. Un espace disque infini serait alors offert et accessible
de votre travail, de votre téléphone mobile et de votre télévision à la maison…
Peut-être que d’ici 4 à 5 ans, Google prendra la première place devant Microsoft ?

En attendant celui-ci cependant n’attend pas les bras croisés de se faire distancer. Microsoft annonce ainsi quelques nouveautés basé sur AJAX dont Atlas,
un framework de développement qui devrait permettre aux éditeurs de logiciels
d’offrir une version « Web 2.0″ de leurs logiciels. La version CTP d’Atlas est
sortie au début du mois de mars.
Allez faire un tour (avec Internet Explorer) aussi sur Live.com de Microsoft.Vous y trouverez un moteur
de recherche à la Google (sans publicité apparente) utilisant AJAX. Le logo
« Windows Live Beta » fait cependant un peu croire à la sortie d’un OS en ligne,
alors qu’il n’en n’est rien.

Et les développeurs…
Depuis quelques mois, on voit ici et là de plus en plus de librairies et de
frameworks d’application clairement orienté Web 2.0. Leur objectif est de faciliter
la création de site « AJAX » tout en conservant du côté du serveur un modèle qui
tienne la route. Vous pouvez trouver sur ToutAjax
une liste assez complète d’applications,
de démos et de librairies pour se lancer.

Ce qui m’intéresse en temps qu’architecte J2EE, c’est la facilité de
mise en oeuvre d’une ergonomie et d’une interactivité comme AJAX dans mes
applications Webs, ainsi que la facilité de maintenance ensuite.
Du côté du client, il existe désormais des librairies gratuites puissantes
à intégrer dans une application qui nous permettent de construire nos interfaces
en ayant l’interactivité d’AJAX. Quelques librairies comme Script.aculo.us,
Rialto ou Dojo Toolkit sont puissantes et efficaces mais pas toutes semblable.
Rialto est celle qui m’intéresse en ce moment, notamment à cause du support de Java Server Faces.

Il me semble que JSF + AJAX est un peu le couple à marier en 2006.
Java Server Faces apporte un modèle composant à une application et permet de
définir ses composants tels qu’ils seront représentés dans le navigateur.
Il n’a pas fallut attendre longtemps avant de voir apparaître ici et là des
composants JSF utilisant AJAX comme ce composant pour télécharger uploader un fichier vers une JSP.
Si vous avez lu aussi mon post sur Shale (Struts 2.0 mais pas vraiment) vous savez déjà que Shale aura un composant de Rendering et s’intégrera avec Apache MyFaces pour pouvoir au final offrir des composants JSF utilisant AJAX (entre autre).
Pour terminer, je vous donne un lien vers le fameux PetStore mais réalisé avec donc ces nouveaux composants qui font que dans quelques mois, le web va changer.
Ajax PetStore vu sur l’excellent site Ajaxian.com