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).

Svelte est un framework JavaScript léger et innovant qui déplace une grande partie du travail de compilation du côté du navigateur. Il permet le développement d’applications web performantes en générant un code optimisé lors de la compilation, offrant une charge initiale minime et des performances accrues. Son approche unique de la compilation réduit la dépendance au runtime et améliore l’efficacité, tout en fournissant une syntaxe simple et expressive pour la création d’interfaces utilisateur réactives et dynamiques.

Next.js est un framework JavaScript open-source conçu pour faciliter la création d’applications web réactives et performantes. Basé sur React, il offre un rendu côté serveur, le pré-rendu statique, et le routage automatique, améliorant l’expérience utilisateur en réduisant les temps de chargement. Next.js simplifie le développement en fournissant une structure intuitive et des fonctionnalités telles que le hot-reloading, la gestion des dépendances, et l’intégration aisée avec des technologies comme TypeScript. Il est largement utilisé pour la construction d’applications modernes et évolutives.

Nuxt.js est un framework JavaScript basé sur Vue.js, optimisé pour le développement d’applications web universelles (Universal Web Applications). Il simplifie la création d’interfaces utilisateur réactives en fournissant une structure conventionnelle, un rendu côté serveur, et une configuration automatique. Nuxt.js facilite également le pré-rendu statique, améliorant les performances et l’expérience utilisateur. Grâce à ses fonctionnalités intégrées telles que le routage automatique, le store Vuex, et la gestion des méta-données, Nuxt.js accélère le développement d’applications modernes et évolutives.

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.

PostgreSQL est un système de gestion de base de données relationnelle open-source réputé pour sa robustesse et sa conformité aux normes SQL. Il offre une extensibilité avancée, des fonctionnalités avancées de traitement des données géospatiales, et un engagement envers la sécurité avec un modèle d’authentification flexible.

RabbitMQ est un système de messagerie open-source, robuste et évolutif, basé sur le protocole AMQP. Il facilite la communication asynchrone entre applications, en permettant le transfert efficace de messages entre divers services et composants logiciels. Utilisé pour orchestrer des microservices, RabbitMQ offre une flexibilité élevée, une gestion avancée des files d’attente, et assure une intégration fluide dans les architectures distribuées.

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.

Figma est un éditeur graphique vectoriel en ligne et un outil de prototypage web. Véritable référence dans la conception d’interface utilisateur, l’outil a été racheté par Adobe pour 20 milliards de dollars en 2022. Il met particulièrement l’accent sur la collaboration en temps réel.

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.

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.