Symfony est un framework PHP, français, et aussi un ensemble de composants qu’il est possible d’utiliser séparément. Chose assez particulière dans le monde de l’open source, il est encadré par une société commerciale procurant ainsi un suivi professionnel de son développement.

React est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d’application web monopage, via la création de composants dépendant d’un état et générant une page (ou portion) HTML à chaque changement d’état.

React Native permet d’utiliser React pour développer des applications mobiles IOS et Android et d’utiliser les fonctionnalités natives de ces plateformes.

VueJS permet de créer des interfaces web interactives en proposant un système de data-binding réactif capable de détecter automatiquement les changements d’états du composant. Évolutif, il est capable de faire tourner des applications web monopages quand il est couplé avec des outils modernes et des bibliothèques complémentaires.

Elasticsearch est un serveur d’indexation et de recherche de données libre sous licence Apache. Il fournit un moteur de recherche distribué et multi-entité à travers une interface REST. Elasticsearch est le serveur de recherche d’entreprise le plus populaire. Il est associé à deux autres produits libres, Kibana et Logstash, qui sont respectivement un visualiseur de données et un ETL (initialement destiné aux logs).

Docker est un outil qui peut empaqueter une application et ses dépendances dans un conteneur isolé, qui pourra être exécuté sur n’importe quel serveur. Cela nous permet de travailler dans un environnement similaire à l’environnement de production.

Git est le gestionnaire de versions décentralisé le plus populaire. C’est un logiciel libre créé par Linus Torvalds, auteur du noyau Linux. Git répond à des objectifs de performances, sécurité et flexibilité de travail que nous exploitons avec GitHub et GitLab.

MariaDB est un système de gestion de base de données édité sous licence GPL. Il s’agit d’un fork communautaire de MySQL : la gouvernance du projet est assurée par la fondation MariaDB, et sa maintenance par la société Monty Program AB, créateur du projet. Cette gouvernance confère au logiciel l’assurance de rester libre.

Webpack est un outil qui est aujourd’hui incontournable dès lors que l’on travaille sur des projets JavaScript complexes. Il va nous permettre de morceler notre code sous forme de modules qui seront ensuite fusionnés en un seul fichier par Webpack. Il dispose, en plus, d’un système de “loaders” qui vont permettre d’inclure de nouveaux types de fichiers ou d’appliquer des transformations spécifiques. Webpack est aussi complexe que complet.

Node.js est un environnement d’exécution single-thread, open source et multiplateforme permettant de créer des applications rapides et évolutives côté serveur et en réseau. Il fonctionne avec le moteur d’exécution JavaScript V8 et utilise une architecture d’E/S non bloquante et pilotée par les événements, ce qui le rend efficace et adapté aux applications en temps réel.

La suite de logiciels Adobe est utilisée pour la conception graphique et la PAO. Qui comprend Photoshop pour les images et la photographie, Illustrator pour les fichiers vectoriels et illustrations et une partie de la PAO, InDesign pour la PAO et la mise en page de brochures, livrets et dépliants. Sans oublier Acrobat Pro pour consulter et modifier des fichiers PDF et AfterEffect pour l’édition et le montage vidéo.

Blender est un logiciel libre de modélisation, d’animation et de rendu 3D créé en 1998. Développé aujourd’hui par la Blender Fondation, le logiciel est reconnu par de grandes entreprises comme Epic Games, Ubisoft et NVIDIA.

Outil en ligne de visualisation de prototype. InVision permet d’itérer les design d’une interface et d’en tester les concepts avant production. Il permet une interaction designer/client dans un environnement commun.

Logiciel de conception d’interface d’InVision, basé sur le modèle de Sketch, avec une grande sensibilité au prototypage et aux animations de transition entre écran. Idéal pour concevoir des prototypes de sites ou applications. InVision Studio s’intègre parfaitement au site InVision avec des outils supplémentaires permettant de récupérer les assets graphiques ou les codes nécessaires à l’intégration dans plusieurs langages.

Studio est une alternative à Sketch, Figma et Adobe XD.

L’approche API first a de nombreux avantages :

Séparation et découplage total de la logique métier (côté serveur) et de l'UI (côté client).

Toutes les fonctionnalités du site sont également disponibles – dès le départ – via une API web (et donc utilisables par les partenaires et clients). Grâce à l'API REST, tout type de client (app mobile native, client lourd Windows, objets connectés spécifiques...) est envisageable et la logique métier n'aura pas à être recodée.

La réalisation de SPA et d'applications mobiles est extrêmement simplifiée. Le code métier n'a pas à être dupliqué ou ré implémenté.

L'intégration avec des outils tiers internes (progiciels de gestion, CRM...) et la mise en place par la suite – si nécessaire – d'une architecture basée sur les microservices deviendra beaucoup plus aisée.

L’architecture hexagonale est une architecture logicielle permettant de découpler le code métier de l’application, son pilotage (page web, script, ...) et son infrastructure (base de données, services, ...).

Cela permet d’isoler le cœur de l’application, de le développer et le tester de manière indépendante. Un autre avantage est aussi de pouvoir changer d’infrastructure si nécessaire sans impacter le fonctionnement de l’application. Concrètement, ça se traduit entre autres par un système de couches intermédiaires entre le code du cœur de l’application et les autres couches logicielles. Cela regroupe au même endroit les modèles et la logique métier et offre une modularité puissante pour l’implémentation, du fait qu’il n’y a pas d’adhérence entre le code métier et les choix techniques retenus.

Hotwire Turbo

Dans le développement d’applications web, le langage Javascript a pris une place prépondérante dans le développement côté Front (navigateur internet) car il rend les pages plus attractives et interactives en complément des traditionnels langages HTML et CSS.

Cette dépendance vis-à-vis de javascript s’est accentuée avec l’essor des terminaux mobiles et du développement d’applications SPA ou PWA.

En effet, un large éventail de librairies et Frameworks Javascript sont aujourd’hui à disposition pour faciliter et standardiser le développement sans avoir à tout réinventer. Néanmoins, la multiplicité et l’évolution constante des solutions proposées dans l’univers Javascript nécessitent un certain temps quant à leur appropriation et mise en place. Cela peut avoir un impact non négligeable sur la production, d’autant plus si les développeurs ont également en charge la mise en place d’une architecture applicative induisant un back-end (application côté serveur).

Le framework Symfony s’appuie sur le langage serveur PHP. Toutefois, il permet comme bon nombre de frameworks back-end de servir des pages HTML interprétables par un navigateur internet.

Au grés de ses évolutions, ses concepteurs ont su faire évoluer leur framework avec son temps en intégrant des outils facilitant la mise en place de solutions à destination du développement côté Front. On peut notamment évoquer l'apparition du bundle webpack encore qui facilite l’implémentation de Webpack, librairie qui s’est imposée comme solution d’”empaquetage” de fichiers javascripts.

Dans cette même optique, le Framework Symfony a pris l'initiative d’implémenter un ensemble de bundles (Symfony UX) visant à simplifier l'utilisation de librairies Javascript,  par l’intermédiaire de code PHP et balises HTML, sans écrire de code Javascript…

Plus récemment, Symfony UX a ajouté à sa panoplie le bundle UX Turbo, s’appuyant sur la librairie Javascript Hotwire Turbo.

Cette dernière a pour ambition de donner à son application un comportement similaire à celui d’une SPA en écrivant un minimum de javascript.

Concrètement, Hotwire Turbo se base sur le paradigme des requêtes AJAX pour modifier tout ou partie d’une page WEB :

1. Une fois implémentée côté Front, la librairie UX Turbo modifie le comportement des liens <a href> et des formulaires.
2. Au clic ou sur la soumission de ces derniers, la librairie empêche la navigation native vers le lien cible au profit d’une requête “fetch” vers ce lien.
3. Le résultat de la requête “fetch” retournée par le serveur, qui n’incombe pas à cette librairie, contient le code HTML pour rafraîchir tout ou partie de la page.

Pour mettre à jour le contenu d’une page, la librairie propose 2 stratégies :

• un découpage de la page via des balises spécifiques avec un identifiant <turbo-frame id=”...”>, le contenu de ses balises pourra être mis à jour en réponse de la requête “fetch” induite par Hotwire Turbo.
• mise à jour via des messages (Turbo Streams). Approche plus élaborée que la précédente car elle permet de faire des mises à jour d'éléments de la page de manière asynchrone au travers d’un canal de communication (websockets ou d’un protocole tel que mercure) entre le serveur et le navigateur.

Le périmètre d’intervention de la librairie Hotwire Turbo étant de faciliter la mise à jour du Front-end sans rechargement de la page, il est donc nécessaire d’avoir un back-end approprié pour diffuser le contenu escompté côté front.

Le bundle UX Turbo de Symfony prend tout son sens en facilitant l’intégration de la librairie Hotwire Turbo tout en ajoutant des fonctionnalités pour simplifier le développement des réponses aux requêtes induites par Hotwire Turbo.

Il vient également avec une gestion du protocole Mercure pour la diffusion de messages asynchrones et une intégration avec Doctrine est supportée pour mettre à jour du contenu côté front en fonction des opérations CRUD effectuées sur une entité.

Pour résumer, à retenir :

• Nous avons pu aisément couplé la libraire Turbo avec nos applications Symfony grâce au bundle UX Turbo
• Cette librairie apporte une touche de modernité à nos applications via un comportement SPA. Lorsque l’on clique sur un lien ou soumet un formulaire, les mises à jour de contenu du site se font sans rechargement de page.

• Bien qu’il faille un temps d’adaptation et de réflexion quant au découpage des templates côté front et réponses à apporter côté back, la courbe d'apprentissage  est relativement rapide car c’est toujours le même schéma qui se répète in fine.