Understanding an OPEN source codebase LIVE

Summary

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.

Takeaways

• 😀 Die Codebase von Cal.com verwendet mehrere Pakete wie Prisma (für ORM), tRPC (für typensichere API-Aufrufe) und UI (für Komponenten), um die Entwicklung zu organisieren.
• 😀 Storybook wird verwendet, um UI-Komponenten isoliert anzuzeigen, was es Entwicklern und Designern ermöglicht, Komponenten und ihre Variationen zu visualisieren und zu testen.
• 😀 Entwickler können Storybook verwenden, um den Code für Komponenten zu sehen, ohne in die gesamte Anwendung navigieren zu müssen, was den Entwicklungsprozess vereinfacht.
• 😀 Um die Anwendung lokal auszuführen, müssen Entwickler das Repository klonen, die Abhängigkeiten installieren und dann die Anwendung im richtigen Verzeichnis starten.
• 😀 Das Projekt hat eine modulare Struktur, bei der kleine Pakete unter `packages/` organisiert sind und von höherstufigen Apps in `apps/` verwendet werden.
• 😀 Um die Datenbank und die gesamte Anwendung lokal zu starten, muss `yarn dev` im Root-Verzeichnis ausgeführt werden, nicht nur im `apps/web` Verzeichnis.
• 😀 Wenn ein Fehler im `seed.ts`-File auftritt, das zum Befüllen der Datenbank verwendet wird, können Entwickler Workaround-Lösungen wie `try-catch`-Blöcke verwenden, um fortzufahren.
• 😀 Das Testen von E-Mail-Vorlagen erfolgt über das `/API/email`-Endpunkt, der serverseitig gerendertes HTML zur Verfügung stellt, das in E-Mails angezeigt wird.
• 😀 Entwickler können mit Storybook `.stories.mdx`-Dateien neben ihren Komponenten erstellen, um die Nutzung und Visualisierung der Komponenten zu erleichtern.
• 😀 Beim Arbeiten mit Bugs oder neuen E-Mail-Vorlagen müssen Entwickler sicherstellen, dass sie die richtigen Pakete innerhalb der Codebase anpassen, um Fehler zu beheben oder neue Features hinzuzufügen.
• 😀 Die modulare Struktur der Codebase erleichtert die Wartung und Skalierbarkeit, da Komponenten und Logik in kleine, wiederverwendbare Pakete unterteilt sind, die von verschiedenen Anwendungen genutzt werden.

Q & A

Was ist Prisma und wie wird es im Cal.com Projekt verwendet?

Prisma ist ein ORM (Object Relational Mapping), das Entwicklern ermöglicht, Datenbankabfragen durchzuführen, ohne direkt SQL zu schreiben. Im Cal.com Projekt wird es genutzt, um einfach und effizient mit der Datenbank zu interagieren.

Was ist trpc und warum ist es wichtig für das Projekt?

trpc ist eine Technologie, die eine typensichere API für die Kommunikation zwischen Frontend und Backend bereitstellt. Es hilft dabei, den Entwicklungsprozess zu vereinfachen, da sowohl Frontend- als auch Backend-Entwickler dieselben Typen verwenden können, um eine konsistente API zu gewährleisten.

Welche Rolle spielt das UI-Paket im Cal.com Projekt?

Das UI-Paket enthält alle wiederverwendbaren UI-Komponenten, wie Buttons und andere UI-Elemente. Frontend-Entwickler arbeiten hauptsächlich hier, um neue Komponenten zu entwickeln und bestehende zu pflegen.

Was ist Storybook und wie wird es im Projekt verwendet?

Storybook ist ein Tool, mit dem Entwickler UI-Komponenten isoliert anzeigen und testen können. Im Cal.com Projekt wird es verwendet, um alle Varianten von Komponenten wie Buttons in unterschiedlichen Modi (z.B. Dark Mode) zu visualisieren und die dazugehörige Codebasis anzusehen.

Wie können Entwickler die E-Mail-Templates im Cal.com Projekt testen?

Entwickler können die E-Mail-Templates testen, indem sie die URL /API/email im Projekt aufrufen, wenn die App läuft. Diese URL zeigt eine gerenderte E-Mail-Vorlage an, die als Vorschau dient, bevor die E-Mail tatsächlich versendet wird.

Warum ist der /API/email-Endpunkt für das Testen von E-Mails nützlich?

Der /API/email-Endpunkt ermöglicht es Entwicklern, die E-Mail-Vorlagen direkt zu rendern, um zu sehen, wie die E-Mails aussehen, bevor sie an Benutzer gesendet werden. Dies erleichtert das Testen von HTML und CSS für E-Mails ohne den gesamten Prozess einer echten E-Mail zu durchlaufen.

Was müssen Entwickler tun, um das Cal.com Projekt lokal zum Laufen zu bringen?

Um das Cal.com Projekt lokal auszuführen, müssen Entwickler das Repository klonen, die Abhängigkeiten mit 'yarn install' installieren und dann 'yarn dev' im Verzeichnis 'apps/storybook' und 'apps/web' ausführen, um die verschiedenen Teile des Projekts (Frontend, Backend, Datenbank) zu starten.

Was ist die Bedeutung des 'lib'-Pakets im Cal.com Projekt?

'lib' enthält eine Sammlung von allgemeinen, wiederverwendbaren Funktionen und Modulen, die in anderen Paketen des Projekts verwendet werden. Es sorgt dafür, dass häufig benötigte Funktionen zentral verfügbar sind.

Was ist der Zweck der '.stories.tsx' und '.stories.mdx' Dateien im Projekt?

Die '.stories.tsx' und '.stories.mdx' Dateien werden verwendet, um Geschichten für UI-Komponenten zu definieren. Diese Geschichten enthalten Code, der zeigt, wie eine Komponente in verschiedenen Zuständen oder Varianten dargestellt wird, und ermöglichen es Entwicklern, diese Komponenten einfach zu testen und zu visualisieren.

Wie funktioniert der Backend-Handler für das Rendering von E-Mails?

Der Backend-Handler für das Rendering von E-Mails nimmt eine Anfrage entgegen, setzt die richtigen Header und Statuscodes, und verwendet dann eine renderEmail-Funktion, um die HTML-Inhalte für die E-Mail auf der Serverseite zu generieren. Die gerenderte HTML wird dann als Antwort zurückgegeben und kann in E-Mails verwendet werden.