Understanding an OPEN source codebase LIVE

Summary

Cette vidéo présente une vue d'ensemble du projet Cal.com, expliquant ses composants clés, comme Prisma (pour la gestion de base de données), tRPC (pour la sécurité des types entre le frontend et le backend), et Storybook (pour la visualisation des composants UI). L'orateur guide également les développeurs à travers le processus d'installation et de démarrage du projet localement, tout en démontrant comment tester les modèles d'email via un point de terminaison API. La vidéo souligne l'importance d'une structure de code modulaire pour faciliter le développement et la gestion du code.

Takeaways

• 😀 Cal.com utilise une architecture modulaire avec des packages pour séparer les préoccupations et faciliter le développement.
• 😀 Prisma est l'ORM utilisé dans Cal.com pour faciliter les interactions avec la base de données sans écrire de SQL manuellement.
• 😀 trpc permet de créer des API totalement typées et facilite la communication entre le front-end et le back-end.
• 😀 Le répertoire UI contient tous les composants d'interface utilisateur (UI) qui sont utilisés principalement par les développeurs front-end.
• 😀 Storybook est utilisé pour visualiser les composants de manière isolée, facilitant leur test sans avoir à exécuter l'application complète.
• 😀 L'API pour rendre les modèles d'e-mails utilise le rendu côté serveur (SSR) pour générer des HTML d'e-mails à envoyer.
• 😀 L'implémentation d'un modèle d'e-mail inclut la création de composants réutilisables avec des props et des tests via une URL dédiée.
• 😀 Le fichier `email.ts` dans le dossier API gère les requêtes HTTP et rend les modèles d'e-mails avec des composants côté serveur.
• 😀 Pour tester localement, il faut cloner le repo, exécuter `yarn install`, puis démarrer Storybook avec `yarn dev` pour visualiser les composants.
• 😀 Cal.com utilise une approche modulaire qui permet aux équipes front-end de créer des composants et aux équipes back-end de les intégrer facilement.
• 😀 La séparation du code en différents packages permet une meilleure organisation, une évolution plus simple et un développement plus rapide.
• 😀 Les développeurs front-end devraient également créer des 'stories' pour les composants qu'ils créent afin de faciliter leur utilisation par les développeurs full-stack.

Q & A

Quelles sont les principales technologies utilisées dans le codebase de Cal.com ?

Les principales technologies utilisées sont Prisma pour l'ORM, tRPC pour la gestion des types entre le frontend et le backend, et Storybook pour visualiser et tester les composants d'interface utilisateur de manière isolée.

À quoi sert le dossier 'UI' dans le codebase de Cal.com ?

Le dossier 'UI' contient les composants utilisés par les développeurs frontend. C'est là que les développeurs créent de nouveaux éléments de l'interface utilisateur, comme des boutons, et les ajoutent à l'application.

Comment tester un modèle d'email dans Cal.com ?

Pour tester un modèle d'email, vous devez utiliser un point d'API, comme '/API/email'. Cela rendra le modèle d'email sous forme de HTML, ce qui vous permettra de voir un aperçu de ce que l'email ressemblera avant de l'envoyer.

Qu'est-ce que Storybook et comment l'utiliser dans le développement de Cal.com ?

Storybook est un outil utilisé pour visualiser et tester les composants UI en isolation. Les développeurs peuvent y tester différents composants d'interface, comme des boutons, dans des modes sombres et clairs, sans avoir besoin de démarrer l'ensemble de l'application.

Comment lancer le code de Cal.com localement ?

Pour lancer le code localement, vous devez cloner le repo, exécuter 'yarn install' pour installer les dépendances, puis naviguer vers le dossier 'apps/storybook' et exécuter 'yarn dev'. Cela démarre Storybook pour visualiser les composants.

Pourquoi est-il nécessaire de lancer 'yarn dx' dans le dossier racine du projet ?

Lancer 'yarn dx' dans le dossier racine est nécessaire pour démarrer toutes les parties du système, y compris la base de données, le backend et le frontend. Cela assure que toutes les fonctionnalités du projet fonctionnent correctement ensemble.

Que se passe-t-il si vous tentez de lancer 'yarn dev' dans le dossier 'apps/web' sans exécuter 'yarn dx' ?

Si vous tentez de lancer 'yarn dev' sans exécuter 'yarn dx', cela ne fonctionnera pas correctement car la base de données et d'autres services nécessaires ne seront pas démarrés, ce qui entraînera des erreurs.

Quel est l'avantage de créer des fichiers '.stories.mdx' pour les composants ?

Les fichiers '.stories.mdx' permettent aux développeurs de définir différentes variations d'un composant. Cela facilite la réutilisation et le test des composants dans Storybook, tout en fournissant une documentation utile pour d'autres développeurs.

Que devez-vous faire si vous souhaitez tester un modèle d'email généré dans Cal.com ?

Si vous souhaitez tester un modèle d'email, vous devez vous rendre sur l'URL '/API/email' après avoir démarré l'application. Cela générera un modèle d'email HTML que vous pourrez visualiser comme s'il était envoyé à un utilisateur.

Comment les packages sont-ils organisés dans le codebase de Cal.com ?

Le codebase de Cal.com est structuré en petits packages modulaires. Chaque package gère une fonctionnalité spécifique, comme la gestion de la base de données ou les composants UI. Cela permet de maintenir le code organisé et de faciliter les contributions de différentes équipes.