Contexte
Stagiaire chez Ippon Technologies depuis plus de 4 mois, j’ai été affecté au projet Tatami dirigé par Julien Dubois.
Tatami est une plateforme de micro-blogging ciblant les entreprises pour une utilisation interne. Ce projet est développé sous licence libre et est disponible sur GitHub.
Il a pour vocation de promouvoir de nouvelles technologies, et utilise :
- HTML5 et Bootstrap, from Twitter
- The Spring Framework
- Apache Cassandra
- Elastic Search
Vous pouvez tester Tatami en ligne sur http://tatami.ippon.fr – Attention, il s’agit pour l’instant d’une version de démo/test, nous ne sommes pas encore en “vraie” production.
Problématique
Tatami est composé de deux interfaces web: une première pour le bureau, et une deuxième ciblant les appareils mobiles. Au fur et à mesure du développement, le poids de la maintenance des deux interfaces se faisait ressentir, ce qui entraîna l’abandon de la maintenance de l’interface mobile. J’avais comme mission de rétablir l’interface mobile.
Ce scénario est récurrent et pose le problème suivant : Quels sont les moyens pour faciliter la maintenance des deux interfaces web ?
Solution : le Responsive Design
Présentation
La première piste de solution fut l’introduction des notions de Responsive Design grâce aux propriétés @media queries fournies par CSS3 qui permettent d’appliquer une feuille de style différente selon la résolution de la page.
Cette évolution nous permet de résoudre d’un coup deux problèmes majeurs :
- la maintenance de deux interfaces,
- le bridage de l’interface mobile en matière de fonctionnalités.
Bootstrap, from Twitter
Le choix d’une interface Responsive était d’autant plus justifié que Tatami utilisait depuis le début Bootstrap, from Twitter. Ce dernier fournit tous les outils permettant de concevoir une interface web répondant aux critères d’adaptabilité.
Mise en place
La nouvelle interface de Tatami gère maintenant toutes les résolutions d’écran et, est accessible sur l’ensemble des terminaux de type mobile, tablette ou ordinateur de bureau.
Une approche MVC du JavaScript
Présentation
Comme souvent, quand un projet commence à prendre de l’ampleur, le syndrôme du plat de spaghettis se fait ressentir. Tatami n’y a pas échappé.
Le but de cette évolution était de repartir sur des bases saines, et de conçevoir une interface modulaire de laquelle découlerait une maintenance facilitée. Pour y arriver, j’ai voulu utiliser un framework MVC JavaScript qui fournit des outils permettant de structurer l’application de manière correcte. Mon choix fut porté sur Backbone.JS.
Backbone.JS
Backbone.JS se pose comme un framework MVC JavaScript non contraignant. Il permet de fournir aux développeurs les outils pour structurer du code facilement, en respectant les bonnes pratiques du développement JavaScript.
Je publierai un autre article la semaine prochaine, présentant en détail le fonctionnement de Backbone.JS.
Backbone.JS se marie particulièrement bien avec Tatami puisqu’il permet d’utiliser une API du type RESTful naturellement.
Pour ceux qui veulent aller plus loin, et qui comprennent un minimum l’anglais, je vous conseille de vous pencher sur cet article très intéressant détaillant l’évolution du code d’une application jQuery à Backbone.
Résultat
Backbone.JS est mis en place sur la nouvelle interface de Tatami. L’interface se voit dynamisée et décomposée en une multitude de modules permettant de faciliter la maintenance du code.
Vous pouvez vous amuser avec Tatami grâce à la console Javascript de votre navigateur.
Il vous suffit d’utiliser notre version de démo sur http://tatami.ippon.fr ou de lancer l’application et d’explorer les éléments de l’application grâce à :
window.app.views // Liste de tous les modules en cours de fonctionnement
Vous pouvez également consulter directement le code source JavaScript de Tatami.
Conclusion
La refonte de l’interface m’a pris 3 semaines, en comptant la phase de recette.
La présence de l’architecture, orientée service, de Tatami m’a permis de m’abstraire du serveur et de ne toucher qu’à la partie client web, et d’utiliser l’API comme elle existait initialement. Ce fût un gain de temps énorme et cela m’a permis de me concentrer sur une seule technologie.
Au cours du développement, aucun problème n’est apparu. J’ai été étonné de voir la facilité de mise en place de cette solution.
Niveau ligne de code, initialement, le code JS comptait 2386 lignes (1255 mobile et 1131 bureau). Aujourd’hui, il en compte 1737, soit plus que chaque interface mais moins que chacune séparement. Backbone.JS n’a pas pour but de réduire le nombre de lignes mais de le structurer de la meilleur façon possible. Le code est plus clair, et la séparation modèle/vue est omniprésente.
Pour finir, je vous laisse essayer le nouveau Tatami et n’hésitez pas à nous faire des retours sur GitHub. Rendez-vous la semaine prochaine pour détailler le fonctionnement de Backbone.JS !
