đ
Hornet.js Le framework Hornet.js
est un framework open-source conçu pour développer des applications web basé sur le language typescript
.
Il permet de répondre aux besoins posés par les référentiels généraux de l'état Français pour les administrations :
- RGS : Référentiel Général de Sécurité
- RGI : Référentiel Général d'Interopérabilité
- RGAA : Référentiel Général d'Accessibilité pour les Administrations
Il se distingue par la mise en place de deux filiĂšres :
- hornet.js
- hornet.js-lite
Hornet.js
est utilisé pour les applications demandant une forte sollicitation
hornet.js-lite
s'oriente vers les plus petites applications : faible volumétrie, peu d'utilisateur, ..
Cette derniÚre offre en terme d'architecture technique un cadre de développement complet sous javascript.
Tandis que hornet.js
possĂšde une partie service REST en JAVA.
D'un point de vue technique, il est lui-mĂȘme composĂ© de briques open-source orientĂ©es javascript :
-
Node.js
: plateforme logiciel d'exécution du code JavaScript cÎté serveur -
Express
: bibliothĂšque de base pour l'Ă©criture d'application web sur Node.js -
Director
: composant de gestion du routage des urls sur le serveur -
React
: bibliothÚque de création d'IHM html selon une logique orientée composants -
Ajv
: bibliothĂšque JavaScript de validation de formulaires -
Superagent
: composant JavaScript pour l'exécution d'appels http -
Webpack
: outil de création de paquetages (JavaScript, CSS, ...) pour les navigateurs web
Prérequis
- NodeJS 8.X
- hornet-js-builder 1.X installé en global:
npm install -g hornet-js-builder
Initialisation
Récupérer les sources sur projet.
Compiler les sources typescript de hornet.js
hb compile
Utilisation dans un projet
Ajouter au package.json
"appDependencies": {
"hornet-js-components": "5.3.X",
"hornet-js-core": "5.3.X",
"hornet-js-ts-typings": "5.3.X",
"hornet-js-utils": "5.3.X"
}
Puis lancer la commande :
hb install
Hornet.js
Architecture
Fonctionnement
Principe de fonctionnement du framework en mode isomorphique.
- Rendu Serveur :
- Lâutilisateur accĂšde Ă la premiĂšre page par un appel serveur, le serveur gĂ©nĂšre une vue de l'application (sans les data).
- L'utilisateur peut commencer Ă utiliser l'application
- Single Page Application (SPA) :
- Lorsque tous les élements JavaScript sont bien reçus, le client bascule automatiquement en mode SPA.
- Dans le mode SPA, tout se passe principalement dans le navigateur client (action/mise Ă jour de l'Ă©tat de l'Ă©cran). Il nây a alors plus de chargement complet de page (exceptĂ© via l'utilisation du
F5
du clavier). Seules les interactions avec le serveur nécessitent des échanges via des flux de typeAJAX
. - Ce mode permet une grande interactivité et réactivité des applications web vis à vis de l'utilisateur final.
Les paragraphes suivants présentent de façon plus détaillée les caractéristiques essentielles de la solution.
Fonctionnement détaillé
Dans le mode SPA, seuls les Ă©lĂ©ments impactĂ©s par un changement de fonction sont modifiĂ©s Ă lâaide de traitements JavaScript, les autres parties, comme lâentĂȘte ou le menu, restent inchangĂ©es).
Dans ce mode, les traitements sont majoritairement exĂ©cutĂ©s dans le navigateur client en JavaScript. Les appels aux serveurs servent Ă interagir avec les donnĂ©es stockĂ©es sur le serveur distant (crĂ©ation, consultation, modification, suppression). Ces Ă©changes sont rĂ©alisĂ©s Ă lâaide dâappels Ajax.
Cinématique de rendu serveur / SPA :
- Lâutilisateur demande la premiĂšre page de l'application.
- Lâapplication retourne un document HTML complet (entĂȘte, menu, corps, bas de page). Le mode SPA sâinitialise dans le navigateur par l'exĂ©cution automatique de JavaScript (initialisation du court-circuit des clics...).
- En mode SPA, les liens vers les autres écrans (navigation) sont court-circuités et remplacés par des navigations internes avec du code JavaScript. L'accÚs aux données se fait par la déclaration de routes dites Data
- Lâutilisateur demande Ă accĂ©der Ă la page suivante en cliquant sur le lien hypertexte correspondant. Le clic ayant Ă©tĂ© dĂ©tournĂ© par le mode SPA, le code JavaScript Ă©met un changement de route interne.
- Lâutilisateur demande Ă accĂ©der Ă des donnĂ©es, c'est une route Data qui est sollicitĂ©e. Ce qui soumet un appel AJAX pour rĂ©cupĂ©rer un flux JSON. On met Ă jour le DataSource ou l'Ă©tat du composant page, ce qui provoque le rafraĂźchissement de certains composants de la page grĂące Ă l'utilisation de
Vues
.
Chaque fragment HTML, correspondant aux Ă©lĂ©ments de page, est conçu sous forme de composant pour ĂȘtre indĂ©pendant de son conteneur.
Architecture technique
Le module applicatif de présentation a pour fonction de fournir l'IHM de l'application.
Ce module est développé en technologie JavaScript/TypeScript et s'exécute grùce à Node.js.
Les principaux composants techniques intervenant dans le module applicatif de présentation sont :
-
Node.js
: plateforme logicielle d'exécution du code JavaScript cÎté serveur -
Express
: bibliothĂšque de base pour l'Ă©criture d'applications web sur Node.js -
Director
: composant de gestion du routage des urls sur le serveur -
React
: bibliothÚque de création d'IHM html selon une logique orientée composants -
Superagent
: composant JavaScript pour l'exécution d'appels http -
Webpack
: outil de création de paquetages (JavaScript, CSS, ...) pour les navigateurs web -
Gulp
: outil pour la création de tùches de développement
Navigateur web
Dans Node.js les interactions proviennent de requĂȘtes http. Celles-ci sont prises en charge par le framework Express
avant d'intégrer le déroulement du pattern Hornet.
Architecture Hornet
Ci-dessous les composants qui permettent de remplir les différentes responsabilités définies dans le pattern.
Actions
Les actions sont exĂ©cutĂ©es cĂŽtĂ© serveur et portent les traitements de lâapplication. Les services externes sont appelĂ©s depuis les actions afin dâeffectuer les traitements demandĂ©s par lâutilisateur.
Chaque action doit ĂȘtre une fonction retournant une Promise
effectuant lâaction Ă proprement parler (au sens mĂ©tier). Ce fonctionnement est nĂ©cessaire afin de permettre au routeur
:
- de savoir quand effectuer le rendu de la page cÎté serveur.
- de pouvoir désactiver les actions lors du premier affichage de la page cÎté client pour éviter un double appel des API externes (serveur puis client).
Routeur
Ce composant est le point central de la navigation. Il permet de gĂ©rer de maniĂšre identique la navigation au sein de lâapplication que ce soit cĂŽtĂ© client (avec ou sans JavaScript) ou cĂŽtĂ© serveur.
Ce composant est configurĂ© Ă partir dâun ensemble de « routes » qui viennent faire le lien entre une URL et les actions du pattern (dans son implĂ©mentation isomorphe).
Le routeur d'Hornet s'appuie sur le composant Director.
Les particularités :
- Transmission des données
POST
par une mĂ©thode spĂ©cifique afin de ne pas modifier lâurl du navigateur - Utilisation du mode « historique » html5 (mode
pushState
Ă la place de la notation!#
) afin dâuniformiser les urls entre la partie client et serveur.
Vues
Les vues sont les composants servant à produire le code html affiché à l'utilisateur.
Les composants de cette brique utilisent le moteur de rendu [React](https://reactjs.org/ ou https://github.com/facebook/react/) :
Licence
hornet-js
est sous licence cecill 2.1.
Site web : http://www.cecill.info