Symfony / Angular : le couple incontournable !

Symfony / Angular : le couple incontournable !

Angular et Symfony : 2 frameworks indépendants mais complémentaires

Spécialisée en Symfony depuis 2010 et en Angular depuis 2015, Fondative a opté pour le choix de ces 2 références open source grâce à leur complémentarité, leur robustesse technique, leurs communautés et leur popularité qui ne cessent de croître au fil du temps.
Symfony permet de son côté aux développeurs de réaliser des applications complexes rapidement, mais de façon structurée et avec un code «server-side» clair et maintenable.
Angular lui, fait partie du mouvement d’innovation côté front end. Il a l’avantage d’offrir des SPA (Single Page Application) extrêmement rapides produites sur la base d’un code structuré prêt à l’utilisation et déjà testé, au lieu de partir «from scratch».
Totalement indépendants mais parfaitement complémentaires, le couplage de ces 2 frameworks s’avère nécessaire dans la plupart des applications web modernes.
Pour quels intérêts coupler Symfony et Angluar ? Et quelles sont les approches envisageables pour réussir ce couplage?

Les avantages

Le couplage entre Symfony et Angular pour réaliser une application web consiste réellement à scinder cette dernière en 2 parties : la partie back end (Symfony) et la partie front end (Angular). Cette organisation apporte les principaux avantages suivants :

  • Accélérer considérablement la vitesse de développement : Chaque partie de l’application a une équipe dédiée, ce qui permet – à minima – de doubler la vitesse de développement.
  • Améliorer drastiquement la qualité du code source de l’application : Le temps consacré auparavant à la maintenance applicative sera dorénavant dédié à la production d’un code de qualité intégrant le maximum de bonnes pratiques : On obtient une application avec dette technique minimale et flexible aux innovations.
  • Développer rapidement la version mobile de l’application : Sans avoir à apporter la moindre modification au code source du back end, le code source du front end est intégralement réutilisable pour réaliser la version mobile hybride de l’application. En outre, la partie back end continuera à servir l’application mobile et l’application front end. Ceci peut être assuré grâce à l’implémentation d’une API Rest qu’on verra plus loin sur cet article.
  • Doper les performances applicatives ainsi que le temps de réponse des GUI : Les requêtes serveurs de chargement de composants statiques sont réduites au minimum et celles de chargement de données «fraiches» sont forcément réalisées en mode asynchrone n’exigeant aucun blocage d’usage du côté client. En outre, le code source de l’application front end étant entièrement statique et peut être par conséquent hébergé sur des CDN (Content Delivery Network) ce qui a pour intérêt de booster la vitesse de chargement.
  • Améliorer l’expérience utilisateur : Grâce aux thèmes material design et bien d’autres, l’application front end s’offrira une expérience utilisateur sans égale avec le moindre effort des designers.

2 principales approches de couplage

Pour réaliser le couplage entre Symfony et Angular, nous avons mené l’étude sur 2 approches :

  • Une approche hybride entre back end et front end : Symfony a la main pour bootstrapper Angular à partir du moteur Twig.
  • Une séparation totale entre back end et front end : Toutes les logiques métiers sont réalisées via des appels à l’API REST.

Chacune des 2 approches a ses avantages et ses inconvénients, le choix final dépend également des objectifs à atteindre. Le tableau ci-dessous présente un comparatif détaillé des 2 approches permettant de faciliter le choix de la méthode la plus adéquate en fonction des besoins :

Caractéristique Hybride Séparation
Architecture Architecture couplée Bien structurée
Lisibilité du code source Code source difficilement lisible Code source lisible
Exploitation de l’existant Il est possible de réutiliser l’application existante et de générer les formulaires par Symfony dans une vue Twig Il faut ré-implémenter la logique de quelques modules existants et réécrire les formulaires en HTML
Bénéficier des avantages des composants Symfony2 – Centraliser la déclaration des routes.
– Centraliser les textes de traduction.
– Déclaration des routes non centralisée.
– Textes de traduction non centralisés.
Ouverture et mobilité – API moins exploitable pour des applications client et des applications mobiles.
– Front end non transformable en une application mobile.
– API Restful exploitable par des applications client et des applications mobile.
– Frontend facilement transformable en une application mobile.
Maintenance – Difficulté de localiser la source d’un bug.
– La correction d’un bug peut demander double expertise Angular et Symfony.
– Source du bug localisée plus rapidement.
– La correction d’un bug demande un seul type d’expertise : ou bien Angular ou bien Symfony.

 

Fondative, favorisant la voie normative stricte, recommande fortement l’approche reposant sur la séparation totale. En effet, c’est cette dernière qui permet, malgré son coût relativement élevé, de tirer profit au maximum des avantages du couplage.

Attention! Ce couplage n’est pas toujours justifié

Pour des raisons d’efficacité et de rentabilité, il convient de valider certains pré-requis avant de se lancer dans un chantier de migration de TWIG vers Angular. Il faudra vérifier au moins ces 3 facteurs :

  • TWIG ayant atteint ses limites induisant un code source trop complexe de la partie Vues : La richesse fonctionnelle de l’application ainsi que la présence de beaucoup de templates twigs interdépendants (extends, include, render, …) constituent souvent deux indicateurs pertinents à ce niveau.
  • Evolutivité : Plusieurs évolutions fonctionnelles de taille importante sont déjà prévues au niveau de l’application.
  • Ressources humaines qualifiées : avoir au sein de son équipe des développeurs possédant les compétences nécessaires à la réussite d’un tel projet.

Laisser un commentaire