Java et le Web au Paris JUG

Hier soir la soirée était placée sous le thème « Java et le Web ». Malgré les grèves, il y avait les 210 passionnés et une belle ambiance. Le buffet était offert par Zenexity. En quelques mots, Zenexity, c’est une équipe dynamique de passionnés du Web rassemblée, autour d’Habib Guergachi et de Guillaume Bort, responsable du projet « Play! Framework » .

Ruby on Rails

En première partie, Christian Blavier d’Octo nous a présenté le framework Ruby on Rails. Il a publié un billet sur le blog d’Octo intéressant : « Confession d’un Javaiste repenti« . Il commence très fort avec l’image d’un hamburger, où chaque tranche du hamburger est estampillée du nom d’une technologie Java. Spring, JSF, Richfaces, HTML, et souvent, un petit pattern maison, pour justifier notre boulot d’architecte. Un ange passe dans la salle, mais personne ne se lève et ne crie au scandale. Le slide suivant représente le même hamburger passablement moisi, avec la réalité de certains projets, qui pour faire du Web, n’arrivent pas à mettre en oeuvre ce socle correctement.
Lors d’une mission, il découvre Ruby On Rails. Ce framework Web qui fête ses 6 ans est basé sur le langage Ruby. Dans le statut même de RoR (Ruby on Rails) les fondateurs mettent en avant la joie de programmer comme l’un des facteurs clés du framework. La productivité et le support du Web aussi. Personnellement je retrouve les mêmes valeurs dans Play!

Christian présente l’architecture du framework, purement MVC. Du côté du modèle relationnel, le moteur ActiveRecord (j’aurai plutôt pensé au pattern de M.Fowler Active Record) offre à RoR un socle à la fois simple mais suffisamment puissant pour réaliser des sites Webs et des applications d’entreprise. N’en déplaise à certain.

Concernant Ruby, Christian nous montre quelques exemples qui me font penser à Groovy. Langage dynamique et faiblement typé, Ruby offre par exemple ce type de syntaxe pour la manipulation des dates :

	now = DateTime.now

	tomorrow = now + 1.day

	one_week_ago = 7.days.ago

Le support des closures fait bien entendu partie de Ruby :

Closure,
["one","two"].map{ |word| word.upcase }

RoR est un framework fait pour le Web. Votre classe de base étend une classe ApplicationController. Pour ceux qui ont suivi ensuite la présentation de Play! nous retrouvons la même approche. C’est l’approche « Skinny controller / fat model » ou l’approche Domain Driven Design.

Dans cet exemple, la méthode index charge l’ensemble des Books puis la place dans une variable @books, qui est retournée à la vue.

class BooksController < ApplicationController
 def index 
  @books = Book.all
  end

Pour exemple, l'approche Play! Framework donnerait quelque chose comme cela:

public class Application extends Controller {
    public static void index() {
        List books=Book.findAll();
        render(books);
    }
}

Ruby on Rails utilise un moteur de templating pour ce qui est de la partie vue. Il dispose de plusieurs moteurs, comme par exemple Haml

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

Le moteur Haml vient en remplacement je crois du moteur de base de Rails, appelé ERB:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>>

haml utilise l’indentation comme Python pour séparer les blocs. Christian cite aussi le projet SASS qui a été porté sous la forme d’un module pour Play! Framework aussi. Si vos CSS sont un vrai millefeuille, regardez SASS. Ce moteur permet de définir des variables que vous utilisez souvent dans vos feuilles CSS.

Concernant l’architecture, RoR est au plus proche de l’architecture REST, avec des URLs signifiantes. Un fichier de route permet enfin de construire des URLs bookmarkables et propres… comme un autre framework dont on parlera plus tard 😉

Concernant la partie ActiveRecord, rails comme grails dispose d’un ensemble de scripts très puissants pour générer rapidement des entités. Par exemple pour construire une entité Book avec quelques attributs :

 rails generate model book title:string description:string 

Pour terminer, il est important de noter que Rails est l’un des frameworks Webs les plus utilisés sur les projets Webs et les projets de startups. Avec des livres de références et les années d’expériences sur ce framework, c’est un moteur qui est souvent le point de départ de nombreuses aventures Webs. Lors du dernier Startup Weekend à Paris, les 3 premiers projets étaient basés sur Ruby on Rails. L’un des projets a utilisé Play! Framework, et il me semble que cela sera amené à se développer dans les mois qui viennent.

Bon, sinon le jour où vous passez au Paris JUG : ne faîtes pas de slides avec un fond noir, prenez le template du Paris JUG.

HTML 5

Alain Duval, directeur technique d’Objectif Informatique et Cédric Beurtheret, expert Java EE, présentent HTML 5. J’ai bien aimé cette présentation car elle nous fait prendre conscience des changements à venir dans la façon d’appréhender la réalisation d’une application Web. J’ai vraiment l’impression que le métier d’architecte web est une nouvelle compétence qui va exploser dans les années qui viennent.

HTML4 c’est 1998. Jusqu’en 2004 il ne se passait pas grand chose. HTML 5 est un effort tourné vers les nouvelles architectures avec un gros effort de standardisation. A priori la version finale est prévue pour dans 2 ans. Les problèmes de rétro-comptabilité et de support entre les navigateurs sont derrières nous. Les acteurs du marché travaillent ensemble pour proposer des standards. Cela dit, concernant par exemple l’initiative d’Apple sur le codec vidéo… je ne suis pas certain que cette belle lune de miel ne dure longtemps.

Des balises HTML seront progressivement retirées comme applet, frame ou font par exemple. J’ai retrouvé le lien cité par Alain pendant la présentation : HTML5_Visual-cheet-sheet.pdf. Le Doctype d’une page HTML 5 est ultra simple :

<!DOCTYPE html> 

A titre d’exemple, le site de Zengularity est écrit en HTML 5 si vous voulez tester. C’est une plateforme de vidéos courtes sur le Web, le HTML 5, le framework Play!, réalisée par les équipes de Zenexity.

HTML 5 apporte des balises pour structurer la page. Il sera facile de définir par exemple une section header ou footer, sans devoir appliquer systématiquement un habillage avec des DIV comme aujourd’hui.

Concernant les Formulaires, nous notons l’apparition de nouveaux tags :

 <search>
 <tel>
 <url>
 <email>

Sur le site du W3C, vous pouvez trouver des articles complets et intéressants si vous souhaitez découvrir comment nous ferons des formulaires webs demain.

Prenez par exemple ce code source :

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button><p>
</form>

Si vous avez un navigateur assez récent, voici ce que cela donne :

De nouveaux attributs comme PlaceHolder, AutoComplete ou Autofocus font aussi partie des balises HTML 5. Nous aurons donc de moins en moins besoin de javascript. Le support natif sera la garantie que le poids des pages va fortement baisser je pense.
Alain pense que la validation des formulaires sera effectuée plus facilement du côté du navigateur.

Le côté multimedia et les différentes démonstrations sur la balise Canvas sont très prometteurs. Le support du multimédia, de la vidéo, de la 2D et de la 3D, le support natif de SVG, tout ceci devrait remplacer le player Flash dans les années qui viennent. Encore faut-il que les industriels s’accordent sur les Codecs. Et là, c’est le foutoir. Donc Flash a encore de longues années devant lui je pense.

Pour terminer, Cédric nous montre une application HTML 5 avec géolocalisation, drag and drop, support du mode offline. HTML 5 introduit la notion de Web workers. Cette application de gestion de la relation client à usage des commerciaux tourne sur TabletPC. Lorsque le commercial n’est pas connecté à Internet, une partie de sa base client est téléchargée sur le navigateur afin qu’il puisse travailler en mode déconnecté. La synchronisation a été implémentée avec un Web Worker. C’est une APi qui permet de lancer des scripts Javscripts en tache de fond. Cédrid explique qu’il était parti sur Google Gears, mais que Google arrête le support de cette technologie pour plutôt privilégier le socle HTML 5.

Concernant la possibilité de stocker des données sur le poste client, HTML 5 propose 3 niveaux différents selon vos besoins :
-> SessionStorage volatile, durée de la session
-> LocalStorage persistant mais limité en taille
-> WebDatabase basé sur SQLLite ou IndexB

Cédric attire notre attention quant à la sécurité des données sur le navigateur client. A priori la base n’est pas sécurisée, il faut donc prévoir une solution de cryptage.

En conclusion, en 30 minutes ce fut une belle présentation sur HTML 5, avec des pointeurs sur ce qui sera forcément notre futur demain. En tant que développeur, je le dis et je le répète, il n’est plus possible de ne pas connaître le HTML, CSS et Javascript en 2010. La récréation est terminée, la vision du « web-designer » qui fait ma page est très franco-française. Nos amis américains se marrent bien lorsque je raconte cette histoire.

Bref si tu n’as pas codé une page HTML à 30 ans, tu as raté ta vie de développeur.

Zenexity et le projet Zengularity

Le buffet était offert par Zenexity. J’aimerai parler un peu du projet Zengularity. Allez voir sur le site les différentes vidéos. Le concept ? Vous présenter en quelques minutes un sujet technique. Les premières vidéos parlent de Scala, de Web Workers, d’architecture, de programmation fonctionnelle. Sympa comme initiative. A tester.

Présentation Play! Framework avec Guillaume Bort

La deuxième partie de la soirée était consacrée à une présentation de Play! Framework puis à une démonstration par Guillaume. Je mettrai les slides en ligne la semaine prochaine, je vais faire cette même présentation lundi 18 octobre à la conférence Soft-Shake à Genève. Si vous voulez voir ce qu’il est possible de faire en une heure, rendez-vous lundi matin à 11h30.

Les retours sur Twitter ce matin étaient positifs, j’espère qu’avec Guillaume nous vous avons passé notre passion pour ce framework. Je le dis et j’insiste : si vous voulez vous faire plaisir avec du Java, que vos problèmes soient pour du Web ou une application lourde, testez Play! Framework.

Articles similaires:

Soirée Paris JUG : Java EE 6 par Adam BIEN Paris Java User Group (pjug) Evénements Java sur Paris pour novembre Soirée Paris JUG sur Java Avancé