Présentation

Focus est un framework React modulaire conçu pour accélérer le développement d'application clientes en mettant à disposition un ensemble de fonctionnalités évoluées conçues pour fonctionner ensemble. Il essaie de fournir une alternative intégrée crédible aux projets React classiques qui accumulent un très grand nombre de librairies tierces et essaient tant bien que mal de les faire cohabiter.

Par conception, et à l'inverse de la quasi-totalité des frameworks React récents, Focus ne se préoccupe pas de votre serveur et n'essaie pas de s'y imposer ou de vous forcer à maintenir un serveur Node quelque part. C'est un framework "100% front" qui se package avec n'importe quel bundler comme une application statique (des fichiers HTML, CSS, JS, des images...) et peut se servir par n'importe quel serveur ou système de stockage (S3, Blob Storage...). Focus pourra néanmoins vous demander d'implémenter quelques APIs spécifiques côté serveur pour utiliser certaines de ces fonctionnalités.

Néanmoins, pour maximiser votre productivité avec Focus, il est conseillé d'utiliser un outil de génération de code comme TopModel.

Focus utilise extensivement TypeScript et MobX pour réaliser la plupart de ses fonctionnalités. Il est recommandé d'être familier avec ces deux technologies (et React bien sûr) avant de pouvoir commencer avec.

`focus4`

Ce framework est la 4ème itération du framework Focus, et la seule version maintenue depuis 2017. Il est publié sur npm sous le nom focus4 pour le méta-package et dans le scope @focus4/xxx pour les différents modules.

Le framework lui-même est aujourd'hui dans sa version majeure 11 (focus4 v11.x).

Que fait Focus ?

Focus essaie de simplifier le développement d'une application front en proposant des modules qui adressent les principaux besoins d'une telle application :

Gestion des requêtes et des messages
Mise en page
Navigation
Affichage et gestion de listes (avec recherche avancée)
Composants de saisie basiques
Gestion des données métiers et formulaires
Gestion du CSS

L'usage de toutes ces fonctionnalités est toujours optionnel. Vous ferez toujours des composants React et vous aurez toujours MobX sous la main, donc si Focus ne peut pas vous aider à faire ce que vous voulez, vous pouvez toujours revenir vers des choses plus classiques.

Les différents modules

Focus est divisé en 7 (+2) modules NPM, que l'on peut regrouper dans les catégories suivantes :

Modules de base

Ces modules contiennent les éléments de base d'une application Focus, et servent de fondations aux modules plus avancés.

@focus4/core : fonctionnalités de base, utilisées dans les autres modules.
@focus4/styling : système de CSS utilisé par les composants de Focus.
@focus4/toolbox : composants de base implémentant Material Design 3, utilisé par les autres composants plus avancés.

Modules de formulaires

Ces deux modules permettent de construire des formulaires, et représentent donc le coeur d'une application Focus. C'est avec ces deux modules-là que vous passerez le plus de temps.

@focus4/stores : gestion des stores de formulaires, collections et de référence.
@focus4/forms : composants de formulaires.

Modules de présentation

Ces deux modules proposent des composants graphiques de haut niveau qui permettent de structurer la mise en page d'une application Focus, ainsi que l'affichage des listes et de la recherche avancée.

@focus4/layout: composants de mise en page.
@focus4/collections : composants de listes et de recherche avancée.

Autres modules

@focus4/legacy : repackage des fonctionnalités d'anciennes versions Focus qui n'ont pas d'équivalent direct dans la version actuelle.
focus4 : méta-package contenant tous les autres (sauf legacy).

`@focus4/tooling`

Le module @focus4/tooling est lui aussi un méta-package qui contient l'ensemble des outils nécessaires pour packager une application Focus. En particulier, il inclut Vite et ESLint et des configs par défaut à étendre pour ces outils.

De plus, il contient l'outil de génération de types CSS.