- Nettoyage de la synchro totale d'état local de l'
<AddSettingDialog/>grâce à un usage idiomatique dekey= - Refactoring de
<RequireAuth/>pour pouvoir être utilisée comme "conteneur" au moyen d'une route de layout afin d'éviter sa répétition sur chaque route authentifiée - Désactivation de l'auto-run de l'extension Jest dans VSCode
- Légère amélioration de l'UX de la snackbar pour les notifications
- Mise à jour de toutes les dépendances
- Refacto des Action Creators et Reducers d'ajout d'objectif et d'historisation quotidienne pour que les réducteurs soient 100% purs afin d'en faciliter le débogage, le replay, etc.
- Retrait de l'extension obsolète "Debugger for Chrome" (fonction native désormais)
- Ajout de l'extension "Jest" (la DX est sympa désormais)
- MIGRATION TYPESCRIPT + RTK INTÉGRALE. Une version JS est également maintenue (sans RTK, mais une branche RTK existe au-delà de la version classique).
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes.
- PropTypes pour RehydrationWaiter
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes. En particulier :
- Passage à React 18
- Et donc passage à RTL 12/13 et React-Redux 7
- Refactoring de la configuration de store pour s'aligner sur les meilleures pratiques des docs officielles
- Mise à jour de la référence d'extension VSCode pour Styled Components
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes. En particulier :
- Passage à Create React App 5 (donc Webpack 5 sous le capot)
- Passage à MUI 5
- Passage à React-Router 6
- On attend désormais la réhydration avant de tester le besoin d'historisation au démarrage.
- On dissocie la demande de fermeture des dialogues de paramètres et la fin de leur fermeture, afin d'éviter un état transient foireux pendant l'animation de fermeture, où l'objectif manipulé redevient vierge, ce qui est disgracieux et déroutant.
- Mise à jour de la liste des extensions VS Code recommandées
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- L'appli attend la réhydratation par Redux-Persist pour s'afficher, afin de ne pas avoir un rendu contradictoire au démarrage.
- La permission de notifier est désormais demandée au sein d'une interaction utilisateur, avec une snackbar conditionnelle adaptée. C'est l'occasion d'équiper le store Redux d'un middleware permettant de décrire des actions asynchrones génériques à base de promesses.
- Utilisation des raccourcis applicatifs, qui fonctionnent pour le moment avec Chromium (Chrome, Edge, Brave, etc.) sur Windows 10 et Android.
- Bonne exploitation des CSS Modules (code applicatif et stories)
- Meilleur paramétrage de la couverture de tests
- Refus de persistance de l'état Redux des stories
- Passage du délai d'historisation de dev de 10s à 5s après chargement
- Meilleure exploitation des icônes dans les boutons (avec la prop
startIcon) - Le serveur d'API s'exécute sur un port tiers (CRA ne permet pas le proxying) et permet donc maintenant le CORS
- Le serveur d'API nécessitant du CORS, s'il n'écoute pas l'erreur remontée ne sera pas réseau mais un refus CORS de
fetch, qui n'entraînera pas de retry par redux-offline. Du coup un point d'accès API permet de basculer le "mode erreur" (503) du serveur pour les démonstrations. - Les dialogues de gestion des objectifs sont désormais plein écran sur les petits appareils
- Simplification de l'utilisation de redux-offline en retirant le recours personnalisé à localForage
- Simplification de
<PrivateRoute/>en retirant le stockage de l'URL visée, qu'on n'exploitait pas - Détection plus propre et cohérente de la possibilité de fermer manuellement les notifications
- Fonctions simples pour les sélecteurs Redux
- Recours plus systématique au chaînage optionnel pour les appels de props callbacks optionnelles (
onXxx?.(…)) - Modernisation de la demande de permission des notifications avec async/await
<PrivateRoute/>utilise du JSX plutôt queReact.createElement, ce qui est plus compatible avec la nouvelle transformée et l'avenir du transpilage concerné.
- Mise à jour de la liste des extensions VS Code recommandées
- Mise à jour des cibles de débogage VS Code ; ajout des cibles pour les tests
- Avertissements à l'installation si Node < 14 ou npm < 6
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- Recours au chaînage optionnel quand c’est pertinent
- Bascule sur une base Create React App 4 \o/
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- React 17
- Storybook 6 (grosse réécriture associée)
- React Fast Refresh en remplacement de React Hot Loader
- Refactoring des tests à base de React Testing Library afin de respecter les meilleures pratiques listées récemment par Kent C. Dodds, l’auteur de la bibliothèque.
- Correction des oublis de refactoring dans les stories de l’historique
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- Retrait des classes ES0215 au profit des hooks :
useState()etuseEffect()côté React puruseSelector()etuseDispatch()côté React-ReduxuseHistory()etuseLocation()côté React-Router
- Refonte de la stack de tests :
- On n’utilise plus Chai (
expect()natif de Jest). - Sinon est réduit à son
useFakeTimers()pour prendre la main surDatefacilement (pour testerlib/helpers). - On vire Enzyme, trop orienté tests unitaires et trop orienté détails d’implémentation (donc tests friables et loins de la vérité utilisateur) au profit de React Testing Library, qui permet d’écrire des tests plus pérennes et plus proches de l’utilisation finale. Il s’agit d’ailleurs de la recommandation officielle par l’équipe React.
- On n’utilise plus Chai (
<GoalSetting>passe désormais legoalen vigueur à ses propsonDeleteClicketonEditClick, ce qui simplifie leur utilisation dansSettingsScreen.- Mise à jour de toutes les URL utilisées dans les commentaires du code.
- Commentaires plus détaillés dans le code annoté.
- Simplification de la configuration Jest
- Simplification de la configuration Babel (plus besoin des décorateurs, etc.)
- Ajout du plugin ESLint pour vérifier le respect des règles des Hooks
- Mise à niveau du Hot Module Replacement et de React Hot Loader pour être au taquet sur les hooks, etc. (React Fast Refresh n’étant pas encore stable).
- Retrait de dépendances superflues (ex. React-Document-Title, qui se fait très bien avec un
useEffect()maintenant). - Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- Retrait d'appels superflus à
sinon.useFakeTimers()pour certains snapshots - Fix des imports dans Storybook pour que le HMR fonctionne
- Mise à jour de toutes les dépendances et ajustements pour les breaking changes
- Retrait des
onChangebidouillés sur des expandos dansLoginScreenpour utiliser des refs sur les champs du formulaire, ce qui est l’approche recommandée pour la récupération de valeurs de champs non contrôlés. - Le recours au dernier React Hot Loader simplifie la syntaxe d’inscription et réagit mieux à certains types d’erreurs.
- Retrait de la redbox pour tirer parti du nettement plus agréable React Error Overlay, extrait de Create React App.
<HistoryScreen />n’avait plus besoin d’être une classe, une fonction suffit désormais (leconnect()de React-Redux marche aussi sur les SFC maintenant).
- Mise à jour de toutes les dépendances, et donc conversion de certains détails de composants et props Material-UI.
- Retrait de dépendances superflues, type
colors(on utilisechalk). - Le développement de nos composants 100% basé sur un Storybook personnalisé. Ça deviendra bientôt l’historique de référence, quand nous aurons fini d’affiner la DX.
- Retrait de l’extension VSCode TypeScript Hero au profit de import-sorts avec notre style personnalisé
import-sort-style-delicious, correctement configuré pour un tri optimal automatique des imports ES2015 à la sauvegarde.
- Tâche
start:pollqui démarre le serveur en mode polling pour les postes ayant des soucis de détection de changement par le Webpack Dev Server.
store.jsa un état par défaut utilisant bien des BSON IDs- Déplacement de l'import de
oneOfdansprop-typesau bon tag
- Passage à Terser pour la minification JS, le plugin UglifyJS n’étant plus maintenu pour ES2015+
- Activation des JSX Single Quotes maintenant qu’on a Prettier 1.15
- Corps de requête JSON automatique maintenant que Redux-Offline le permet
- Synchronisation des numéros d'exercice dans les énoncés
- Retrait des déstructurations anticipées qui posaient des problèmes de linting
- Centralisation de certaines mises à jour tardives à
prop-types.js - FAQ sur les causes et solutions des « soucis » classiques en cours de formation
- Mises à jour de toutes les dépendances
- Passage à la CLI à jour (basée npm) de Netlify
- Retrait des réglages VSCode TypeScript Hero obsolètes
- On configure plus finement les notifications web (
lang,requireInteraction,vibrate…)
- Plus d’IDs numériques pour les objectifs, qui servaient de prétexte à un
reduce(): on passe sur des BSON IDs. - Retrait des notifs périodiques
- L’exo d’historisation ne se préoccupe plus du
reduce()interne, mais de la combinaison des réducteurs racines
Juste après la session…
- Retrait du codage couleur des jauges, qui crée trop de « bruit spécifique Material-UI » dans nos démos et tests
- Meilleure découpe de l'étape 3 (en étapes 3 à 5 désormais) pour faciliter le suivi des apprenant-e-s
- Fix du gel de saisie dans
<AddSettingDialog>en raison d’une implémentation non finie degetDerivedStateFromProps() - Fix du micro-souci de DOM réel sur les jauges dans des
<ListItemText>, qui entraînait une hiérarchiep > divillicite.
- Mise à jour des dépendances (prod et dev) aux dernières versions.
- Passage à React 16.4 (notamment
getDerivedStateFromProps(…)) - Fourniture du fichier
_redirectspour Netlify HomeScreendevient un composant pur fonctionnel (SFC) : il n’avait en fait jamais eu besoin d’être une classe (pas de méthodes métier, pas d’état local, pas de données survivant d’unrenderà l’autre…)
- Mise à jour des dépendances (prod et dev) aux dernières versions.
- Bascule de la CLI obsolète de Netlify (via npm) à la nouvelle (en Go, via Brew, etc.)
- Ajout du plugin Typeahead de Jest (23+), qui restaure cette fonctionnalité retirée plusieurs majeures plus tôt.
- Passage du (désormais obsolète)
ExtractTextWebpackPluginau (successeur)MiniCssExtractPlugin
- Recours aux fragments (React 16+) pour éviter des
<div>superflus - Fix du corrigé de l’exo de « purification » de
<Gauge/>etgetCompletionRatio() - Centralisation des prop types dans
src/shared/prop-types(plus de recours au moduleprop-typesexterne ailleurs dans l’application)
- Passage à Webpack 4, avec un catalogue de parts entièrement revu et amélioré (inspiré par celui de notre formation Webpack)
- Passage à React Hot Loader (RHL) 4
- Bascule d’un serveur de dev personnalisé vers webpack-dev-server en proxy par-dessus notre serveur API de démo.
- Ajout du plugin a11y (accessibilité) d’ESLint (et retrait des props
autoFocus), et intégration au build Webpack (donc erreurs de linting affichées en overlay)
- Redécoupage des exercices (davantage, et pas les mêmes)
- Ajout des « devoirs du soir »
- Redécoupage de
src/sur un mode fonctionnel (auth/,history/,main/,settings/,shared/) plutôt que technique (components/,containers/), qui tient mieux la rampe quand le volume de code/fichiers augmente.
- Ajout de TypeScript Hero pour le formatage et le regroupement automatique des imports
- Ajout des configurations de lancement VSCode pour les débogages front et des tests
- Affinage configuration Prettier et VSCode
- Ajout de
FriendlyErrorsà la configuration Webpack - Bascule de Surge à Netlify
- Mise à jour des dépendances (prod et dev) aux dernières versions.
- On recommande désormais Visual Studio Code, avec configuration et extensions recommandées intégrées
- La configuration ESLint a migré de « Standard + Import » à « ESLint Recommendé + React + Prettier », plus exigente. Du coup,
propTypessystématiques,keysystématiques, etc. - Recours à Prettier pour l'auto-formatage nickel à la sauvegarde
- Mise à jour pour React 16 et Enzyme 3
- Les éléments Redux (reducers, action creators, constantes de type…) sont désormais structurés en fichiers sur le principe de l’architecture Ducks.
- Refactorisation de la configuration Webpack pour utiliser les meilleures pratiques de l’état de l’art (
webpack.parts.jsde configurations modulaires réutilisables,webpack.config.jsunique sensible à l’environnement, etc.)
- Exclusion du patcher Babel de React Hot Loader lors des builds de production
- Le
offline-pluginde Webpack n’est activé que pour les builds de production - Mise à jour des dépendances (prod et dev) aux dernières versions.
- Configuration centrale Jest (
package.jsonetjest/setup.js) - Harmonisation du snapshot testing avec les assertions Chai en recourant à
chai-jest-snapshot1.3+ etjest-serializer-enzyme - Passage à Webpack 3 et activation de son scope hoisting pour le build
- Délégation du nettoyage de dossier cible à
clean-webpack-plugin
- Mise à jour des dépendances (prod et dev) aux dernières versions
- Passage à React-Hot-Loader 3 (en beta) au lieu de l'ancien React-HMRE
- Abandon de PouchDB au profit de
redux-offline(certes encore « expérimental » mais tellement sympa…) aveclocalForagepour IndexedDB.
- Retour à npm avec sa version 5, abandon de Yarn
- Passage à React 15.6
- Mise à jour des dépendances (prod et dev) aux dernières versions
- Passage à React-Router 4, avec un composant custom
PrivateRoutepour du rendering exigeant l’authentification au sein du store Redux.
- Passage à Yarn
- Passage à React 15.5 (donc
PropTypesà part, etc.) - Mise à jour des dépendances (prod et dev) aux dernières versions
Composants
- Recours à des propTypes plus avancés, soit issus de airbnb-prop-types, soit implémentés en interne.
- Fonctionnalité « rester ouvert » pour les ajouts en série d’objectifs.
- Simplification de la syntaxe
mapDispatchToPropsdansSettingsScreen.
** Redux, réducteurs et action creators **
- L’exo d’implémentation du reducer d’historisation recourt désormais à une spec Jest complète, fournie d’entrée de jeu, pour détecter que l’apprenant·e a réussi.
- Encapsulation des appels API par un petit helper pour se concentrer sur l’asynchrone lors de l’étape 10, et simplification de la structure de code basée
async/awaitdans l’action creatorlogIn.
Tests / Specs
- Colocalisation des tests et du code testé (plutôt qu’un dossier
test/avec tout dedans). - Démo des snapshots Jest pour couvrir les détails secondaires des composants (et utilisation pour les composants non testés jusque-là)
- Exemples de tests des validateurs propTypes personnalisés avec les tests de
HistoryDayGoal. - Recours à Dirty Chai pour éviter les fautes de frappes silencieuses et les avertissements StandardJS sur certaines assertions (ex.
calledOnce()). - Passage à Sinon 2.x et ses sandboxes pour les stubs.
- Recours systématique au schéma
initialStatevs.expectedStatedans les tests des reducers. - Tests pour tous les reducers
- Extension de StandardJS pour ajouter des règles relatives aux imports/exports, en reprenant ESLint en direct avec les configs StandardJS comme base de travail.
- Mise à jour des dépendances (prod et dev) aux dernières versions, hors React-Router 4.
- Remplacement des "tricks" de déstructurations pour contourner les contraintes de déclarations multiples de StandardJS : on fait une constante par ligne, proprement, simplement.
- Utilisation de la constante globale à jour, plus spécifique, pour la connexion aux Redux Dev Tools (
__REDUX_DEVTOOLS_EXTENSION__plutôt quedevToolsExtension) - Code splitting automatique du code vendor par Webpack 2, pour tout code issu de
node_modules/.
- Passage à Webpack 2 (2.2.1)
- Layout de
TrackerScreenà base de flexbox (enfin jetée, la<table>honteuse !) - Tweaks des étapes des reducers pour taper moins de boilerplate et généraliser le pattern «
initialState/expectedState». - Ajout d’une case à cocher « Rester ouvert » pour le dialogue d’ajout d’objectif.
- Jest snapshot testing
- Webpack
- passage à deux configurations manuelles (dev et prod) au lieu d’une config « automagique » générée par hjs-webpack. Permet une meilleure compréhension, et évolue plus facilement.
- Parallélisation avec HappyPack
- Mise en cache des transpilations Babel
- Serveur de dev personnalisé
- Webpack intégré (dev middleware, hot middleware et dashboard)
- API de login avec un délai garanti de 500ms minimum (histoire de voir l’UI attendre un court instant)
- Deep linking (envoi du
index.htmlpour toute requête sur URL inconnue)
- Nouvelles étapes intégrées
- Login asynchrone (après l’avoir fait en synchrone), donc actions Redux asynchrones
- Manifeste applicatif (axe PWA) et série d’icônes adaptés
- Mise à jour des dépendances externes vers leurs dernières versions
- Retrait du hook de pre-commit automatique
favicon.icodérivé du nouvel icône (celui utilisé pour la PWA)- Plus de fonction
loggedIndansstore: on passe directement par l’examen decurrentUser.loginState. Ça réduit les dépendances àstore, ce qui facilitera à terme le server-side rendering. - Code annoté directement dans la branche
master, juste après la dernière étape (finish). Le dossierdocde la branche est tenu à jour, les apprenant·e·s n’ont donc pas besoin de le regénérer après récupération.
- Babel : Passage au preset
envpour alléger le volume de transpilation en fonction de notre cible navigateurs. - Babel : Plus besoin du stage 2, le stage 3 nous suffit.
- Standard : au lieu de décrire des globaux sortis de nulle part, on définit nos 3 environnements d'exécution : le navigateur, Node et Jest (meilleures pratiques)
AddSettingDialog: plus debindau sein durender(anti-pattern de performance) : on revient sur des fonctions fléchées et des appels explicites. Moins « magique » à la lecture, donc double avantage.- Réducteurs : Simplification / rationalisation de la composition des slice reducers et de nos réducteurs globaux à l’aide de
reduce-reducers.
- Mise à jour des dépendances externes vers leurs dernières versions
- Retrait de
test/mocha.optsqui avait été oublié là lors du passage à Jest
- Tests : passage de Mocha + NYC à Jest, tout en gardant Enzyme et Chai en interne. Cela permet notamment :
- Une UI plus agréable
- Une exécution plus rapide des tests, car parallélisée
- Un lancement plus ciblé des tests, notamment en mode watch
- Un meilleur affichage des parties non couvertes dans les rapports de coverage
propTypesplus étoffées- Constructeurs des composants ES6 avec un passage explicite de tous les arguments (meilleures pratiques)
- Standardisation du recours à
DEFAULT_STATE(aprèsAddSettingDialog,SettingsScreen) clock: Unification des intervalles (setInterval…) utilisés- Tests : Utilisation du plugin Sinon pour Chai
- Webpack : changement du type de sourcemap générée, pour retrouver une capacité de débogage / point d’arrêt opérationnelle dans Chrome.
- Mise à jour massive des dépendances externes vers leurs dernières versions
Renommage massif des fichiers de composants pour utiliser la même casse que la classe exportée (meilleures pratiques), ainsi que des fichiers de réducteurs pour utiliser celle de la fonction exportée
- Tâche
npm run start:dqui enrobestartavec Webpack Dashboard, plus informatif - Centralisation de l’interface Redux/PouchDB dans le seul fichier
store
- Retrait des props
linkButtonqui restaient par oubli - Retrait du réglage
httpspour le serveur de dev Webpack (jamais utilisé/nécessaire)
- Plus de dépendance à Lo-Dash : on préfère des ré-implémentations « functional JS » des 2 endroits qui s’en servaient, à base de
filteretfind clock: Simplification des comparaisons horaires- Namespacing des constantes de types d’actions Redux, en conformité avec les meilleures pratiques
- Material UI 0.15 ne reconnaît / nécessite plus la prop
linkButton: on la vire
goals(réducteur) : implémentation plus « functional JS » (baséereduce)
- Mise à jour des dépendances externes vers leurs dernières versions.
- Tâche
npm run builddésormais garantie enNODE_ENV=production - Fusion des tests des action creators avec leurs réducteurs respectifs, dans l’esprit des meilleures pratiques recommandées par l’auteur de Redux.
favicon.ico(icône Redux 😉)
- Mise à jour massive des dépendances externes vers leurs dernières versions. Cela a notamment entraîné :
- Une ré-écriture complète des imports Material UI, qui avait changé de façon incompatible toute son arbo de fichiers composants 😫
- Certaines règles de StandardJS étaient apparues aussi, d’où divers reformatages (notamment la terminaison des balises JSX auto-fermantes)
- L’ajustement de la fourniture des gestions d’historique pour le routage (React-Router 3 propose des singletons pour chaque type de gestion)
- Refactoring des réducteurs d’historisation et de la clé
todaypour les rendre plus similaires (en termes de structure fichiers) aux slice reducers
- Changement de licence vers du No-License
AddSettingDialog: ajout deid: undefineddansDEFAULT_STATEpour éviter qu’un ajout suite à une mise à jour abandonnée ne finalise—à tort, évidemment—cette mise à jour.
- Tâche
npm run docutilisant Groc - Tâche
npm run test:covpour la couverture de tests avec NYC / Istanbul - Tâche
npm run deploypour le déploiement sur Surge.sh - Codage couleur de
Gauge - Extraction des logiques
getCompletionRadioetgetDayCountsafin de les réutiliser dans les rappels périodiques clock: rappels périodiques- Tests exhaustifs des action creators
- Tests exhaustifs (fournis) des helpers
- Plus de déstructurations pertinentes des arguments de méthodes
- Plus de recours pertinents aux valeurs par défaut sur les arguments de méthodes
- Pas d’import « en masse » de modules lourds : on préfère des imports ciblés pour faciliter à terme le tree shaking (ex. codes couleurs de Material UI)
- Retrait du champ superflu
userNamedans l’étatcurrentUser
- Retrait des ressources de configuration Sublime Text 3
AddSettingDialog: Restauration d’un état par défaut acceptable
- Tags de début d’étape évitant aux apprenant la saisie du boilerplate et des imports de modules tiers (notamment depuis Material UI)
clock: Passage du déclenchement dev de l’historisation de 10’ à 20”clock: Restructuration du code de gestions des permissions de notifications webSettingsScreen: Restructuration de l’état localgoals(reducteur et spec) : implémentation plus « functional JS »GoalTrackerWidget(spec) : passage d’une valeur de progrès à plusieurs valeurs-clés pour les testspropTypesplus étoffés- Configuration TernJS du projet
- Ajout de ressources de configuration Sublime Text 3
Premier jet de la « version 2016 ».