8 lines
10 KiB
JavaScript
8 lines
10 KiB
JavaScript
import{_ as e,o as i,c as a,ae as s}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Why SigPro?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/why.md","filePath":"guide/why.md"}'),l={name:"guide/why.md"};function n(r,t,o,h,d,g){return i(),a("div",null,[...t[0]||(t[0]=[s(`<h1 id="why-sigpro" tabindex="-1">Why SigPro? <a class="header-anchor" href="#why-sigpro" aria-label="Permalink to "Why SigPro?""></a></h1><p>After years of building applications with React, Vue, and Svelte—investing countless hours mastering unique mental models, proprietary syntaxes, and complex build tools—we reached a realization: the web platform has evolved, but frameworks have become layers of abstraction that often move us further away from the browser.</p><p><strong>SigPro</strong> is the answer to a simple question: <strong>Why fight the platform when we can embrace it?</strong></p><h2 id="the-modern-web-is-ready" tabindex="-1">The Modern Web is Ready <a class="header-anchor" href="#the-modern-web-is-ready" aria-label="Permalink to "The Modern Web is Ready""></a></h2><p>SigPro bypasses the overhead of the Virtual DOM and heavy compilers by using modern browser primitives. It treats the DOM as a first-class citizen, not as a side effect of a state change.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Browser Primitive</th><th style="text-align:left;">What It Enables</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Closures & Proxies</strong></td><td style="text-align:left;">Automatic dependency tracking without heavy overhead.</td></tr><tr><td style="text-align:left;"><strong>ES Modules</strong></td><td style="text-align:left;">Native modularity and lazy loading without complex bundlers.</td></tr><tr><td style="text-align:left;"><strong>Direct DOM APIs</strong></td><td style="text-align:left;">Surgical updates that are faster than any reconciliation algorithm.</td></tr><tr><td style="text-align:left;"><strong>Microtask Queues</strong></td><td style="text-align:left;">Batching updates efficiently to ensure 60fps performance.</td></tr></tbody></table><hr><h2 id="the-sigpro-philosophy" tabindex="-1">The SigPro Philosophy <a class="header-anchor" href="#the-sigpro-philosophy" aria-label="Permalink to "The SigPro Philosophy""></a></h2><p>SigPro strips away the complexity, delivering a reactive programming model that feels like a framework but stays remarkably close to Vanilla JS:</p><ul><li><strong>No JSX transformations</strong> – Pure JavaScript functions.</li><li><strong>No Virtual DOM</strong> – Direct, fine-grained DOM manipulation.</li><li><strong>No proprietary syntax</strong> – If you know JS, you know SigPro.</li><li><strong>Zero Build Step Required</strong> – It can run directly in the browser via ESM.</li></ul><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Pure, Atomic, Reactive.</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Count: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $count]),</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Increment"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="performance-comparison" tabindex="-1">Performance Comparison <a class="header-anchor" href="#performance-comparison" aria-label="Permalink to "Performance Comparison""></a></h2><p>SigPro isn't just lighter; it's architecturally faster because it skips the "diffing" phase entirely.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Metric</th><th style="text-align:left;">SigPro</th><th style="text-align:left;">SolidJS</th><th style="text-align:left;">Svelte</th><th style="text-align:left;">Vue</th><th style="text-align:left;">React</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Bundle Size (gzip)</strong></td><td style="text-align:left;">🥇 <strong>< 2KB</strong></td><td style="text-align:left;">🥈 7KB</td><td style="text-align:left;">🥉 16KB</td><td style="text-align:left;">20KB</td><td style="text-align:left;">45KB</td></tr><tr><td style="text-align:left;"><strong>Architecture</strong></td><td style="text-align:left;"><strong>Atomic</strong></td><td style="text-align:left;"><strong>Atomic</strong></td><td style="text-align:left;"><strong>Compiled</strong></td><td style="text-align:left;"><strong>V-DOM</strong></td><td style="text-align:left;"><strong>V-DOM</strong></td></tr><tr><td style="text-align:left;"><strong>Initial Render</strong></td><td style="text-align:left;">🥇 <strong>Fastest</strong></td><td style="text-align:left;">🥈 Fast</td><td style="text-align:left;">🥉 Fast</td><td style="text-align:left;">Average</td><td style="text-align:left;">Slow</td></tr><tr><td style="text-align:left;"><strong>Update Perf</strong></td><td style="text-align:left;">🥇 <strong>Surgical</strong></td><td style="text-align:left;">🥇 Surgical</td><td style="text-align:left;">🥈 Fast</td><td style="text-align:left;">🥉 Average</td><td style="text-align:left;">Slow</td></tr><tr><td style="text-align:left;"><strong>Dependencies</strong></td><td style="text-align:left;">🥇 <strong>0</strong></td><td style="text-align:left;">🥇 0</td><td style="text-align:left;">🥇 0</td><td style="text-align:left;">🥈 2</td><td style="text-align:left;">🥉 5+</td></tr><tr><td style="text-align:left;"><strong>Build Step</strong></td><td style="text-align:left;">🥇 <strong>Optional</strong></td><td style="text-align:left;">🥈 Required</td><td style="text-align:left;">🥈 Required</td><td style="text-align:left;">🥇 Optional</td><td style="text-align:left;">🥈 Required</td></tr></tbody></table><hr><h2 id="🔑-core-principles" tabindex="-1">🔑 Core Principles <a class="header-anchor" href="#🔑-core-principles" aria-label="Permalink to "🔑 Core Principles""></a></h2><p>SigPro is built on four fundamental pillars:</p><h3 id="📡-atomic-reactivity" tabindex="-1">📡 Atomic Reactivity <a class="header-anchor" href="#📡-atomic-reactivity" aria-label="Permalink to "📡 Atomic Reactivity""></a></h3><p>Automatic dependency tracking with no manual subscriptions. When a signal changes, only the <strong>exact</strong> text nodes or attributes that depend on it update—instantly and surgically.</p><h3 id="⚡-surgical-dom-updates" tabindex="-1">⚡ Surgical DOM Updates <a class="header-anchor" href="#⚡-surgical-dom-updates" aria-label="Permalink to "⚡ Surgical DOM Updates""></a></h3><p>No Virtual DOM diffing. No tree reconciliation. We don't guess what changed; we know exactly where the update needs to happen. Performance scales with your data, not the size of your component tree.</p><h3 id="🧩-plugin-first-architecture" tabindex="-1">🧩 Plugin-First Architecture <a class="header-anchor" href="#🧩-plugin-first-architecture" aria-label="Permalink to "🧩 Plugin-First Architecture""></a></h3><p>The core is a tiny, powerful engine. Need Routing? Fetching? Global UI? Just plug it in. This keeps your production bundles "pay-only-for-what-you-use."</p><h3 id="🔬-predictable-transparent" tabindex="-1">🔬 Predictable & Transparent <a class="header-anchor" href="#🔬-predictable-transparent" aria-label="Permalink to "🔬 Predictable & Transparent""></a></h3><p>There is no "magic" hidden in a black-box compiler. What you write is what the browser executes. Debugging is straightforward because there is no framework layer between your code and the DevTools.</p><hr><blockquote><p>"SigPro returns the joy of web development by making the browser the hero again."</p></blockquote>`,28)])])}const y=e(l,[["render",n]]);export{c as __pageData,y as default};
|