Stately

Stately est une plateforme complète conçue pour aider les équipes de développement à construire, comprendre et déployer une logique applicative complexe avec clarté et intelligence. Au cœur de Stately se trouve la puissance des machines à états et des statecharts, une méthode éprouvée pour modéliser le comportement des systèmes. Elle offre un environnement visuel et collaboratif où les idées peuvent être transformées en diagrammes robustes et en code exécutable en quelques minutes, servant de source unique de vérité pour les flux utilisateurs front-end et les workflows back-end.

La plateforme est construite sur la populaire bibliothèque open-source XState, créée par le fondateur de Stately. Cette base garantit que les diagrammes visuels ne sont pas de simples dessins statiques, mais sont entièrement exécutables, testables et peuvent être directement intégrés dans n'importe quelle application JavaScript ou TypeScript. Stately vise à briser les silos entre les designers, les chefs de produit et les développeurs en fournissant un langage visuel commun que tout le monde peut comprendre et auquel tout le monde peut contribuer.

Comment utiliser Stately

L'utilisation de Stately implique un flux de travail transparent qui intègre la conception, le développement et le déploiement :

1. Concevoir & Visualiser : Commencez par utiliser l'éditeur visuel intuitif par glisser-déposer pour cartographier la logique de votre application. Vous créez des états (les différents modes de votre application) et définissez des transitions (les événements qui provoquent un changement d'un état à un autre).
2. Tirer parti de l'assistance de l'IA : Améliorez votre flux de travail avec l'IA. Vous pouvez générer des flux logiques entiers à partir d'une simple instruction, demander à l'IA de suggérer des cas limites que vous auriez pu manquer, ou même lui faire écrire le code correspondant pour des comportements spécifiques.
3. Prototyper & Simuler : Testez votre logique sans écrire une seule ligne de code. Le simulateur intégré vous permet d'interagir avec votre machine à états, en vous assurant qu'elle se comporte comme prévu. Vous pouvez même générer instantanément une application prototype React à partir de votre diagramme pour obtenir des retours précoces.
4. Intégrer avec les outils de conception : Connectez votre logique à vos conceptions d'interface utilisateur en intégrant des cadres Figma directement dans les états. Cela permet de synchroniser vos maquettes et votre logique et de fournir un contexte à toute l'équipe.
5. Générer & Synchroniser le code : Une fois la logique finalisée, exportez-la sous forme de code JavaScript ou TypeScript propre en utilisant XState. Avec l'extension VS Code, Stately offre des mises à jour bidirectionnelles, ce qui signifie que les changements dans votre code sont reflétés dans le diagramme, et vice-versa.
6. Tester de manière robuste : Générez automatiquement des chemins de test et du code pour garantir que votre application dispose d'une couverture de test robuste, en la maintenant à jour à mesure que la logique évolue.
7. Déployer avec Stately Sky : Pour une solution complète, déployez votre logique en tant que backend en temps réel en un seul clic avec Stately Sky. Cette plateforme de logique en tant que service gère la gestion de l'état dans le cloud, parfaite pour les applications multijoueurs, les workflows de longue durée, et plus encore.

Fonctionnalités principales de Stately

• Éditeur visuel de machines à états et de statecharts : Une interface intuitive par glisser-déposer pour modéliser une logique complexe.
• Génération de logique assistée par l'IA : Utilisez l'IA pour créer des flux, découvrir des cas limites et générer du code à partir d'instructions en langage naturel.
• Synchronisation bidirectionnelle du code et des diagrammes : Gardez vos modèles visuels et votre base de code parfaitement synchronisés avec l'extension VS Code.
• Diagrammes exécutables : Tous les diagrammes sont alimentés par la robuste bibliothèque XState, ce qui les rend directement utilisables en production.
• Génération d'applications React en un clic : Créez instantanément une application React fonctionnelle à partir de vos diagrammes logiques pour démarrer rapidement le développement.
• Génération de tests automatisée : Créez automatiquement des tests complets pour garantir que la logique est robuste et sans bogue.
• Déploiement sur Stately Sky : Déployez votre logique en tant que backend de logique en tant que service, évolutif et en temps réel.
• Intégration Figma : Intégrez des conceptions Figma dans les états pour connecter visuellement la logique aux maquettes d'interface utilisateur.
• Collaboration d'équipe et historique des versions : Travaillez ensemble en temps réel, laissez des commentaires et suivez les modifications avec l'historique des versions.
• Documentation vivante : Les diagrammes servent de documentation toujours à jour, éliminant les frais généraux et gardant l'équipe alignée.

Cas d'utilisation pour Stately

Stately est polyvalent et peut être appliqué à un large éventail de scénarios :

• Interface utilisateur front-end complexe : Gérer l'état pour des interfaces utilisateur complexes comme les assistants multi-étapes, les formulaires de paiement et les tableaux de bord interactifs.
• Workflows back-end : Orchestrer des processus asynchrones de longue durée tels que l'intégration des utilisateurs, les pipelines de traitement de données ou les systèmes de gestion des stocks.
• Applications multijoueurs et en temps réel : Créer des outils collaboratifs comme des tableaux blancs, des éditeurs de documents ou des jeux où l'état partagé est essentiel.
• Prototypage rapide : Construire et itérer rapidement sur des prototypes interactifs pour valider des idées avec les parties prenantes avant de s'engager dans le code.
• Conception de système et documentation : Utiliser les diagrammes comme source de vérité définitive pour expliquer la logique métier aux membres de l'équipe, qu'ils soient techniques ou non.

Avantages de Stately

Stately offre des avantages significatifs par rapport aux approches de développement traditionnelles :

• Clarté et communication : La nature visuelle des statecharts rend la logique complexe facile à comprendre et à discuter pour tout le monde dans l'équipe.
• Complexité réduite : Il fournit une manière structurée et prévisible de gérer l'état, prévenant les bogues et rendant le code plus facile à maintenir.
• Productivité accrue : L'assistance de l'IA, la génération de code et les intégrations puissantes accélèrent considérablement le cycle de vie du développement.
• Qualité du code améliorée : La logique déterministe et la génération de tests automatisée conduisent à des applications plus robustes, fiables et sans bogue.
• Pas de verrouillage propriétaire : Construit sur la bibliothèque open-source XState, vous pouvez toujours exporter votre code et votre logique sans être lié à la plateforme.
• Source unique de vérité : Garantit que la conception, le code et la documentation sont toujours alignés, évitant les malentendus et le travail à refaire.

Tarification et plans

Stately propose une gamme de plans pour répondre à différents besoins :

• Community (Gratuit) : Idéal pour les particuliers et les projets open-source. Comprend des projets publics illimités, la simulation de machines à états et 3 générations d'IA par mois.
• Professional (39 $/mois ou 33 $/mois annuellement) : Pour les professionnels individuels. Comprend tout ce qui est dans Community, plus les projets privés, 1 000 générations d'IA/mois, le déploiement sur Stately Sky, la synchronisation GitHub et un support prioritaire.
• Team (199 $/mois ou 167 $/mois annuellement) : Conçu pour la collaboration. Comprend toutes les fonctionnalités Pro pour jusqu'à 10 membres de l'équipe, des projets partagés et des contrôles d'administration.
• Enterprise (Tarification personnalisée) : Pour les grandes organisations ayant des besoins spécifiques. Comprend toutes les fonctionnalités de Team plus le SSO, les journaux d'audit, l'hébergement flexible, un support dédié et des intégrations personnalisées.