class: center, middle
-- count: false name: subtitle
.animate[ # au fil de l'eau !]
- Pourquoi migrer ?
- Comment migrer ?
- react2angular à la rescousse
- Démo
- Retour d'expérience
name: why
.grid[
.left[
]
.right[
]]
name: why-react
- Recommendation de la
COP Front(jusqu'à avis contraire) - Stack toujours maintenue et qui continue d'évoluer
- Bonne maitrise de la stack au sein d'AXA et sur le marché
- Librairies à disposition en interne pour faciliter développement et maintenance (
toolkits, ...)
.center[
name: how
- Effectuer une refonte complète de l'application
.pure-table.pure-table-bordered.pure-table-striped.smaller-font[
| Avantages | Inconvénients |
|---|---|
| Implication de l'équipe de développement | Complexe sur des sujets majeurs, avec des roadmap chargées et de fortes deadlines |
| Refonte à l'état de l'art | |
| Pas de configuration spécifique au projet |
- Effectuer une migration par route
Avoir deux applications : une dans la technologie actuelle, et l'autre dans la technologie cible. Chaque route de l'application redirigera ensuite vers la nouvelle ou vers l'ancienne version.
.pure-table.pure-table-bordered.pure-table-striped.smaller-font[
| Avantages | Inconvénients |
|---|---|
| Refonte à l'état de l'art | Double application (coûts supplémentaires) |
| Facilité de configuration | Pages indépendantes |
| Gestion de l'état dans un système externe | |
| Router côté back-end | |
| Migration plus complexe (page entière) |
- Effectuer une migration par composants
Conserver la même application en AngularJS dans laquelle des composants React seront traduits en composants AngularJS au moment de la build.
.pure-table.pure-table-bordered.pure-table-striped.smaller-font[
| Avantages | Inconvénients |
|---|---|
| Migration au fil de l'eau | Découpage en composants obligatoires |
| Totalement invisible pour l'utilisateur | Pas à l'état de l'art |
| Parfaitement intégré dans les cycles de release | Plus long (intégré aux releases) |
Plus d'informations : Guide de migration de la COP Front
.center[
name: react2angular-first-slide
React2angular est un package javascript permettant de convertir un composant React en composant AngularJS. Son équivalent angular2react existe également, et permet cette fois-ci de convertir un composant AngularJS en React.
.center[
]
Prenons un composant AngularJS d'une application.
import angular from 'angular';
import template from './dap-distributor-pending.html';
export const DapDistributorPendingComponent: angular.IComponentOptions = {
template,
};<div class="steps-container">
<div id="error_details" class="container-fluid">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1>Demande d’autorisation préalable en cours d’instruction par les Engagements.</h1>
<h2>Votre demande est traitée dans les 48 heures qui suivent la demande.</h2>
</div>
</div>
</div>
</div>Après migration en React, il ressemblerait à cela :
export const DapDistributorPending = () => (
<div className="steps-container">
<div id="error_details" className="container-fluid">
<div className="panel panel-default">
<div className="panel-body text-center">
<h1>Demande d’autorisation préalable en cours d’instruction par les Engagements.</h1>
<h2>Votre demande est traitée dans les 48 heures qui suivent la demande.</h2>
</div>
</div>
</div>
</div>
);Mais comment faire cohabiter des composants React et AngularJS dans la même application ?
- Installer les librairies nécessaires, notamment react2angular
npm install react2angular react react-dom- Supprimer le composant AngularJS précédemment migré
.center.delete-angular-img[
]
- Exposez le composant React en AngularJS pour pouvoir l'utiliser dans l'application.
import DapDistributorPending from '...';
// déclaration du module AngularJS
.component('dapDistributorPending', react2angular(() => DapDistributorPending))import React from 'react';
import { react2angular } from 'react2angular';
import DapDistributorPending from '...';
// Fichier d'index ou directement dans le composant React
const DapDistributorPendingComponent = react2angular(() => <DapDistributorPending />);
export { DapDistributorPendingComponent };
// déclaration du module AngularJS
.component('dapDistributorPending', DapDistributorPendingComponent)Et c'est terminé !
Votre application AngularJS utilisera votre tout nouveau et tout beau composant React.
.center[
Mais encore ?
Une application est rarement aussi simple qu'une somme de composants avec des templates. Elle peut comprendre des composants avec de multiples props, une gestion d'état dans un store, l'utilisation de services propres à AngularJS, du routing, ...
Par exemple :
- si votre composant demande des props, react2angular vous permet de les passer
const DapPendingEngagementAlertComponent = react2angular((props) =>
<DapPendingEngagementAlert {...props} />);- si vous utilisez redux dans votre application AngularJS, vous pouvez utiliser le package équivalent en React
react-redux. - si vous utilisez ui-router pour le routing, vous pouvez utiliser
@uirouter/react-hybrid
Ressources utiles
- Exemple des prérequis à mettre en place sur le projet Gestion Contrats (tribu IARDPP)
- Exemple des prérequis à mettre en place sur le projet MaMaison (tribu IARDPP)
- Exemple de migration de composants sur le projet MaMaison (tribu IARDPP)
.center[
Migration complète du SA mineur (~10k lignes de code) Gestion contrats en quelques mois via du Mob Programming.
Migration en cours du SA majeur (~26k lignes de code) Ma Maison achevée à ~80%.
Tips pour migrer efficacement :
- Commencez par migrer les composants du plus bas niveau dans le DOM
- Commencez par migrer les pages les plus simples de l'application en premier
- Assurez-vous d'une bonne couverture de tests d'intégration du composant avant la migration
- Profitez de la migration pour passer les composants en Typescript
- N'hésitez pas à utiliser les composants du toolkit quand c'est possible (les moins impactants en terme de design)
- Migrez les services AngularJS à la fin
A votre tour de jouer !
.center[
]