website/src/content/learn/index.mdx
import { Separator } from "@/components/learn/mdx"; import { Icon, faFeather } from "@rivet-gg/icons";
<header className="text-center mb-16"> <div className="inline-block border-b-2 border-[#d4b483] pb-0 mb-6"> <span className="font-mono text-[#d4b483] tracking-[0.4em] text-xs uppercase"> RIVET </span> </div> <h1 className="font-display text-5xl md:text-7xl text-[#e7e5e4] leading-tight !mb-4">ACTORS</h1> <p className="font-serif text-xl italic text-[#a8a29e] max-w-md mx-auto !mt-0">A course designed for the refined architect of modern times</p> </header> <section className="not-prose mb-12 max-w-2xl mx-auto"> <div className="my-12"> <h2 className="font-display text-[#d4b483] text-2xl mb-6 tracking-wide uppercase text-center">Philosophy</h2> <div className="text-[#a8a29e] font-serif text-lg leading-relaxed space-y-4"> <p className="my-4">Traditional systems think in functions: stateless, ephemeral, forgetting everything after each call. Actors are different. Each one is a persistent component with its own state and behavior, creating systems that are:</p> <ul className="space-y-2 my-4 list-none pl-6"> <li className="font-serif text-lg md:text-xl text-[#d6d3d1] before:content-['◆'] before:text-[#d4b483] before:mr-3 before:opacity-60"><strong className="text-[#d4b483]">Fast</strong> - State lives in memory, not a remote database</li> <li className="font-serif text-lg md:text-xl text-[#d6d3d1] before:content-['◆'] before:text-[#d4b483] before:mr-3 before:opacity-60"><strong className="text-[#d4b483]">Persistent</strong> - Actors remember between requests</li> <li className="font-serif text-lg md:text-xl text-[#d6d3d1] before:content-['◆'] before:text-[#d4b483] before:mr-3 before:opacity-60"><strong className="text-[#d4b483]">Isolated</strong> - Each actor manages its own state independently</li> </ul> <p className="my-4">This course will guide you through the fundamental patterns and anti-patterns, helping you develop the mental models needed to design effective actor-based systems.</p> </div> </div> </section> <div className="not-prose text-center my-12"> <div className="flex items-center justify-center mb-8 space-x-4"> <div className="h-px bg-[#44403c] flex-1"></div> <h2 className="font-display text-[#d4b483] tracking-widest text-sm uppercase m-0"> Table of Contents </h2> <div className="h-px bg-[#44403c] flex-1"></div> </div> </div> <div className="not-prose space-y-6 my-12"> <div className="space-y-2"> <div className="mb-4"> <h3 className="font-display text-xl text-[#d4b483] m-0">Act I</h3> </div> <p className="font-serif text-[#a8a29e] text-base leading-relaxed !mb-12 italic">
Design patterns and architectural principles for building scalable, distributed actor systems. Learn how to structure actors, manage state, and avoid common pitfalls that lead to bottlenecks and poor performance.
</p>
<a
href="/learn/act-1/scene-1-a-radically-simpler-architecture"
className="block group relative p-6 border border-[#44403c] hover:border-[#d4b483] transition-all duration-500 bg-[#292524]/40 hover:bg-[#292524]/80 rounded-sm no-underline"
>
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#d4b483] text-lg opacity-80 group-hover:opacity-100 transition-opacity">
Scene 1
</span>
<span className="text-[#57534e] group-hover:text-[#d4b483] transition-colors duration-500">
<Icon icon={faFeather} className="w-4 h-4" />
</span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#e7e5e4] mb-1 group-hover:translate-x-1 transition-transform duration-500 m-0">
A Radically Simpler Architecture
</h3>
<p className="font-serif text-[#a8a29e] text-base md:text-lg italic m-0">
Why actors eliminate complexity instead of managing it
</p>
</a>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 2
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Actor Per Entity
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 3
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Coordinator & Data Actor Pattern
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 4
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Sharding
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 5
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Fan-In and Fan-Out
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 6
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Map Reduce
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 7
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
State Loading from External Sources
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 8
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
State Replication from External Sources
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 9
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
Anti-Patterns
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-50 cursor-not-allowed">
<div className="flex justify-between items-baseline mb-2">
<span className="font-serif italic text-[#78716c] text-lg">
Scene 10
</span>
<span className="text-[#57534e]"><Icon icon={faFeather} className="w-4 h-4" /></span>
</div>
<h3 className="font-display text-3xl md:text-4xl text-[#a8a29e] mb-1 m-0">
The Limits of Actors
</h3>
<p className="font-serif text-[#78716c] text-base md:text-lg italic m-0">
Coming Soon
</p>
</div>
</div>
<div className="space-y-2">
<div className="mb-4 mt-8">
<h3 className="font-display text-xl text-[#78716c] m-0 opacity-50">Act II</h3>
</div>
<div className="block relative p-6 border border-[#44403c] rounded-sm bg-[#292524]/20 opacity-30 cursor-not-allowed">
<p className="font-serif text-[#78716c] text-base italic m-0 text-center">
To Be Announced
</p>
</div>
</div>