Développer un Frontal Web : Google Web Starter Kit & Material Design Lite & React

Parlons un peu de développement Web histoire de se changer les idées car dernièrement dans mes derniers projets professionnels je n'ai pas trop tâté du Web. Je suis côté cœur de SI : services métier, médiation, stockage des données... Mais de temps en temps il faut bien se replonger dans le développement Web car c'est un monde qui bouge beaucoup... et un peu trop vite, c'est quasiment impossible d'être à jour, le temps de réaliser un projet et déjà de nouvelles normes, de nouveaux frameworks... Personnellement j'ai raté pas mal d'étapes et c'est temps mieux, je me suis arrêté à Ext-JS (maintenant Sancha, quand c'était gratuit...) et à JQuery, JQueryUI. Bon tout ça existe toujours mais ils ont moins le vent en poupe. Et du coup j'ai sauté la période Bootstrap / AngularJS (qui va surement se relancer avec la version 2) et qui restent à la pointe et s'améliorent.

Donc je m'attaque au développement Web avec Material Design Lite (porté par les standard de Google) mixé avec React (le framework de Facebook), oui les deux mastodontes d'internet, pourquoi s'en priver c'est gratuit. Et je ne me lance pas dans un développement complexe qui pourrait nécessiter un Backbone.js mais à terme pourquoi pas c'est l’intérêt de React : ça ne ferme pas les portes. Et puis pour cadre tout ça le Google Web Starter Kit.

Material Design Lite

Commençons pas présenter MDL qui implémente le Material Design de Google, c'est très léger : du CSS et un javascript. Cela donne un cadre pour réaliser une interface web, c'est très pratique pour les ingénieurs comme moi qui sont très loin d'être des web designer, ici, on a qu'a choisir la couleur (oui c'est assez restrictif mais ça évite de faire un site qui pique les yeux), un template (ou pas) et les composants. Après ce framework n'est pas très complet aujourd'hui et il manque pas mal de composants, j'attend la version suivante !

React JS

React JS c'est un framework de génération de DOM HTML utilisant le syntaxe JSX qui permet d'écrire cela simplement. React promet simplicité et performance.

Bon c'est pas si simple car on perd les bases du déroulement de la page html et de son chargement. Bref il faut utiliser des astuces pour réaliser lancer les petits scripts nécessaires à MDL pour décorer les composants.

Google Web Starter Kit

Peut de développement dans ce kit, juste le packaging d'outils basés sur node.js pour avoir un platforme de développement web qui est vraiment efficace. On peut modifier le gulpfile.js pour prendre en charge le JSX avec Babel et le tour est joué.

Conclusion

Ces outils marchent PRESQUE ensemble out-of-the-box. C'est React (normal c'est l’intrus) qui fou la grouille.

Voila la solution pour MDL avec React :

var Header = React.createClass({

  componentDidUpdate: function() {

      // Décore tous les composant avec 'mdl-js-* class

      componentHandler.upgradeDom();

  },

Sans oublier l’utilisation d'un require(../material.min.js) pour être sur d'avoir la méthode accessible que browserify gérera...

Et pour le Web Starter Kit une petite modification du gulpfile.js pour prendre en compte JSX (mais je pense que dans la prochaine version ce sera inclus) : 

gulp.task('scripts', function () {

  return gulp.src('app/scripts/monApp.jsx')

  .pipe(babel())

  .pipe(browserify())

  .pipe(gulp.dest('app/scripts/'));

});

[...] 

// Build production files, the default task

gulp.task('default', ['clean'], function (cb) {

  runSequence('styles', ['scripts', 'jshint', 'html', 'images', 'fonts', 'copy'], cb);

});

Mise à jour 02/11/2015 :

Bon quelques soucis j'ai l'impression que le componentHandler.upgradeDom(); fait sauter les événements enregistrés par React... du coup j'ai ajouté react-native-listener. Je ne sais pas si c'est LA solution mais ça marche...

Mise à jour 05/11/2015 :

Pour le même problème que précédemment une solution est d'enregistrer l’événement à la suite :

componentHandler.upgradeDom();  

document.getElementById('myButton').addEventListener("click", this.props.handleClick);

Mise à jour 01/01/2016 :

Suite à la mise à jour de material design lite à la version v1.0.6 je n'ai pas plus besoin de react-native-listener pour la plupart des événements. Cela s'améliore de jour en jour.