Back-end et Front-end : les technologies Web au service d’Hyperlex

19 JUIN 2020

Hyperlex est ce que l’on appelle une application web : un logiciel utilisable depuis n’importe quel navigateur et créé intégralement avec les technologies Web.
Voici un article vous présentant et vous transmettant les notions majeures qui donnent vie à l’application Hyperlex. N’ayez crainte, cet article ne requiert aucune compétence particulière et tout vous sera expliqué simplement et pas à pas.


back-end-front-end-technologies-web-hyperlex

L’application Hyperlex

Pourquoi avoir choisi de développer Hyperlex avec des technologies web ?

  • Disponibilité : Hyperlex est propulsée dans le “Cloud”, l’application est stockée et dupliquée sur plusieurs serveurs, ce qui offre une haute disponibilité ainsi qu’une sécurité importante. Cela permet notamment à Hyperlex de pouvoir supporter un nombre conséquent d’utilisateurs en même temps sans que l’expérience ni les performances de chacun n’en soient impactées.
  • Accessibilité : un des grands avantages d’Hyperlex est son utilisation depuis n’importe quel appareil (MacOs, Windows, Linux, Android, iPad, Smartphone, …). Notre solution est “multi-support”.

Hyperlex est utilisable partout dans le monde, sur tout type d’appareil, le tout dans un environnement ultra sécurisé. Ces deux notions que sont la haute disponibilité dans le Cloud et l’accessibilité depuis tout type d’appareil dit “multi-support” en font sa force. C’est pour ces mêmes raisons que nous avons décidé, et ce depuis le premier jour, de développer l’application Hyperlex avec des technologies web.

Quelles sont les technologies web utilisées au sein d’Hyperlex ?

Avant d’énumérer ces différentes technologies, il convient de définir leur implémentation au sein de l’application. On peut dès lors diviser l’ensemble de ces technologies en deux parties :

  • La partie “Front-end” (ndlr : “Front” pour “devant”, ce qui est visible par l’utilisateur) : ce que l’utilisateur voit et utilise tous les jours lorsqu’il se connecte à Hyperlex, l’application en elle-même.
  • La partie “Back-end” (ndlr : “Back” pour “derrière”, ce qui n’est pas visible par l’utilisateur) ce que l’application va utiliser : stockage des données, algorithmes de traitement des documents, intelligence artificielle...

Le Front-end

Qu’est-ce que le Front-end ?

Le Front-end c’est ce que l’utilisateur voit , ce qui touche de près ou de loin à l’interface graphique de l’application. Tout ce que l’utilisateur voit sous ses yeux lorsqu’il ouvre une page web constitue le Front-end : couleurs, boutons, animations, textes, mise en forme et interactions qui servent l’utilisateur.

Pour développer Hyperlex nos développeurs utilisent un langage, le JavaScript, ainsi que diverses technologies web :

  • HTML5 et CSS3 (Stylus) : pour définir, modéliser et afficher le rendu graphique et design de l’application.
  • VueJS : une librairie qui va permettre d’accélérer et de rendre plus modulaires les briques principales de l’applications sous forme de composants.
  • TypeScript : une surcouche de JavaScript qui permet à nos experts de rendre le développement plus qualitatif en réduisant drastiquement la création involontaire de bug par le développeur.
  • GraphQL : pour assurer la communication avec le Back-end.

Le rôle du Front-end au sein d’Hyperlex

Le Front-end dans l’application Hyperlex, c’est l’application en elle-même. On le retrouve lorsque l’utilisateur interagit avec :

  • le bouton sur lequel il clique pour lancer son processus de signature,
  • la barre de recherche dans laquelle il recherche un contrat parmi l’ensemble de sa base contractuelle,
  • le contenu d’un document en validant une information clé comme un montant ou encore une clause.

Tous ces éléments graphiques et/ou interactifs ne font pas seulement parti du Front-end, il sont le Front-end. Le rôle des ingénieurs Front-end d’Hyperlex est de développer, concevoir et implémenter ces composants au sein de la multitude d’écrans que compose Hyperlex.

Le front-end doit aussi afficher pléthore d’informations à l’utilisateur final. Ces informations ne viennent pas de nulle part, elle proviennent toutes du Back-end. L’utilisateur interagit avec le front-end, le front-end remonte et indique la modification des données ou documents, en interagissant avec le Back-end.

Le Back-end

Qu’est-ce que le Back-end ?

Le Back-end est la partie qui stocke, enregistre et transmet l’information. Lorsque vous ouvrez un site web, c’est l’ensemble des données présentes sur cette même page. C’est aussi, par exemple, l’ensemble des algorithmes derrière un formulaire de connexion (vérification de l’email, du mot de passe).

A la manière du Front-end, chez Hyperlex le Back-end utilise le langage JavaScript. Ce choix d’architecture isomorphique permet notamment à l’ensemble des développeurs de travailler au sein d’un écosystème unifié. En effet, les développeurs Front-end peuvent comprendre le code du Back-end et vice versa, ce qui leur permet de partager les mêmes outils de travail ainsi que les bonnes pratiques de développement. En plus de JavaScript, le Back-end implémente d’autres technologies :

  • PostgreSQL : pour la base de données et le stockage de la donnée,
  • ElasticSearch : afin de fournir un service de recherche parmi les informations clés des documents très poussés,
  • GraphQL : pour la communication avec le front-end,
  • TypeScript (pour les mêmes raisons que le Front-end).

Le rôle du Back-end au sein d’Hyperlex

Contrairement au Front-end visible, le Back-end regroupe tout ce que l’utilisateur ne voit pas, ce qu’il se passe du côté du serveur.

Lorsque l’utilisateur :

  • clique sur un bouton pour lancer son processus de signature, le back-end en est informé et va alors créer et envoyer une demande de signature sur le document cible via un prestataire de signature électronique externe (DocuSign, HelloSign). Il va aussi mettre à jour le statut du document courant dans la base de données en le passant à “En Signature”.
  • effectue une recherche dans la barre de recherche avec plusieurs critères (date de signature, type de document, clauses présentes, …), le back-end va alors chercher parmi l’ensemble des informations clés des documents de l’utilisateur (qui sont stockés dans une base de données), filtrer et remonter les résultats de sa recherche au Front-end.
  • valide une information clé(date, durée, montant) ou une clause dans un document, le back-end se charge de sauvegarder cette information dans la base de données et de mettre à jour la fiche de synthèse correspondante.

Le Back-end vient réceptionner et traiter toute les demandes faites par l’utilisateur par le biais du Front-end. C’est le chef d’orchestre de la donnée, qui crée, met à jour et transmet l’information via ses communications avec le Front-end.

Comment Back-end et Front-end s’articulent ensemble, afin de donner vie à l’application Hyperlex ?

front-end-back-end-hyperlex


Vous noterez la présence d’un nouvel élément intervenant pour effectuer la liaison entre le Front-end et le Back-end, c’est l’API.

API: Application Programming Interface (Interface de Programmation) — c’est le canal par lequel transite l’information (données, documents) et communique “Front-end” et “Back-end”.

Afin de comprendre comment Front-end et Back-end travaillent main dans la main grâce à la communication via API pour donner vie à l’application Hyperlex, voici un petit dialogue de mise en situation de ce qui se passe concrètement lorsque le contenu d’un document s’affiche sur votre application Hyperlex :

API-sms

L’ensemble de ces technologies permettent à nos clients d’utiliser Hyperlex pour gérer de bout en bout le cycle de vie de leurs contrats.



Auteur : Thomas Brodusch, Senior Software Developer chez Hyperlex

Découvrez Hyperlex !

Découvrez comment nous pouvons transformer votre travail au quotidien.

Demander une démo
Obtenir la brochure