Développement front-end API-Driven

Une qualité d'interaction sans coutures

L'expérience utilisateur passe aussi par une qualité d'interaction technique sans coutures.

Comment améliorer la qualité d'intégration front-end ?

Les technologies front-end, allant d'une combinaison HTML + Javascript + les CSS avancées à l'utilisation d'environnements applicatifs complets ouvrent de vastes possibilités d'améliorer l'expérience utilisateur.

Bootstrap, initié par les équipes de Twitter a été un pionnier des librairies de développement Front-end, au départ en normalisant les CSS.

Aujourd'hui, Angular, porté par Google, et React, par Facebook se disputent le leadership en matière de frameworks complets centrés sur l'expérience utilisateur.

Qu'est-ce qui change avec les frameworks ?

Le changement majeur, c'est une meilleure séparation des domaines d'intervention, qui permet à plusieurs équipes d'avancer avec plus d'autonomie

Les équipes responsable du développement back-end et de l’API peuvent travailler
simultanément avec les équipes responsables du front-end. L'équipe front peut simuler l’existence de l’API en attendant que celle-ci soit réellement disponible, via des mocks (faux jeux de données)

Ce mode de fonctionnement permet de bien définir ce qui est traité côté client et côté serveur et de bien définir les format des données qui circulent entre les deux.

Une plus grande flexibilité des technologies front-end et back-end

Le développement back-end peut être conçu avec n’importe quelle technologie api-friendly, notamment des CMS comme Wordpress ou Drupal, ou de nombreuses alternatives comme Symfony, Laravel, API platform.

Cela peut aussi être une bonne façon de se connecter à des développements plus lourds, sur Java ou Python par exemple.

Le développement front-end peut également être conçu avec n’importe quelle technologie front api-friendly. Du côté front, on retrouve notamment ReactJS et Angular, entourés de NextJS, GatsbyJS, VueJS, Nuxt, Svelte, SvelteKit, VanillaJs, NodeJS...

Cela permet a une application de conjuguer le meilleur des deux mondes : performances rapides et richesse fonctionnelle.

Une seule API peut aussi être connectée a plusieurs projets, ou plusieurs produits d'un même projet : application mobile, objet connecté, site web, etc.)

  • Répondre aux interactions client sans délai grâce à un traitement côté client
  • Diminuer le poids des images
  • Limiter les transferts de données et les requêtes selon les besoins de l'application, diminuer la consommation de ressources et d'énergie
  • Proposer des modes d'interactions avancés
  • Mieux séparer les développements entre front-end et back-end et les responsabilités
  • Répartir le développement entre 2 équipes en limitant les chevauchements
  • Les équipes front-end peuvent mocker des routes qui n'existent pas encore
  • Faciliter la maintenance et la durabilité des applications

La montée des CMS Headless

L'utilisation d'une nouvelle génération de CMS "Headless", sur lesquels on peut s'appuyer pour développer le back-office uniquement, ouvre des possibilités.

Le back office n’est plus limité par le front office, et inversement, tout en conservant la facilité d’administration d’un CMS classique. La communication se passe par l'intermédiaire d'une API GraphQL ou REST générée par le CMS

Le morphisme

Le morphisme permet de définir le format d’exploitation de l’API côté front, sans altérer sa « véritable » forme. Cela permet donc, via un fichier de configuration par API, d’utiliser plusieurs API, exactement de la même manière au sein d'un même développement front-end, comme si leurs architectures respectives étaient harmonisées.

Avec quoi j'en ressors ?

Une bonne répartition back-end front-end via une API permet de répartir le travail de développement entre des équipes spécialisées.

Vos développeurs se concentrent sur les fonctionnalités métiers et les développeurs front-end Inouit sont garant de l'expérience.