Counting IT version Alpha

Voila c'est fait... un peu de développement pour un peu de résultat. Un petit site qui n'a pas encore une grande utilité mais qui sait... avec quelques fonctionnalités de plus y a moyen ou pas que cela intéresse un peu de monde. Enfin l'objectif c'est de tester des nouvelles technologies :

Pour le frontal :

• React Material
• Design Lite
• Google Web Starter Kit

J'ai parlé de tout cela dans un précédent billet.

Pour la partie serveur :

• Google Application Engine (GAE) avec le développement d'un Endpoint.
• OAuth de google, oui il faudra un compte google pour accéder à l'application
• Le Datastore de Google avec Objectify

Et tout l'écosystème qui en dérive, stockage des données, authentification OAuth2, API management... et la console de google developer.

La bonne nouvelle c'est que cela marche assez facilement après quelques mises au point avec les outils et l'environnement de développement qui mock l'utilisateur, il faut donc prévoir un horrible code pour gérer cela :

     if (user.getEmail().equalsIgnoreCase( "example@example.com" ))

Oui en mode développement on a pas accès au vrai profile de l'utilisateur.

Sinon je n'ai presque rien à dire... le client javascript du GAE Endpoint est généré à la volé par les API google donc pas de soucis particulier pour générer des requêtes, tout est masqué en fait : 

     gapi.client.countingit.countersAPI.count({'counterId':12345,'countTime':date }).execute(

      function(resp) {

          if (!resp.code) {

              this.setState({data:resp.result});

          }

          else{

              console.error(resp, status, err.toString());

          }

        });

Et c'est assez simple à intégrer avec le fonctionnement de React. Le petit détail est de s'assurer que les API google client sont bien chargées et cela prend du temps avant de tenter des requêtes au serveur.

Bref beaucoup plus de souci entre MDL et React côté interface que côté serveur et appels de services REST.

Voila la bête : https://onlinetallycounter.capverszero.fr

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.