47 lines
28 KiB
HTML
47 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Why SigPro? ❓ | SigPro</title>
|
||
<meta name="description" content="Minimalist Reactive Library">
|
||
<meta name="generator" content="VitePress v1.6.4">
|
||
<link rel="preload stylesheet" href="/sigpro/assets/style.DJRheFKp.css" as="style">
|
||
<link rel="preload stylesheet" href="/sigpro/vp-icons.css" as="style">
|
||
|
||
<script type="module" src="/sigpro/assets/app.DtmzNmNl.js"></script>
|
||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||
<link rel="modulepreload" href="/sigpro/assets/guide_why.md.DXchYMN-.lean.js">
|
||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-a9a9e638><!--[--><!--]--><!--[--><span tabindex="-1" data-v-492508fc></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-492508fc>Skip to content</a><!--]--><!----><header class="VPNav" data-v-a9a9e638 data-v-f1e365da><div class="VPNavBar" data-v-f1e365da data-v-822684d1><div class="wrapper" data-v-822684d1><div class="container" data-v-822684d1><div class="title" data-v-822684d1><div class="VPNavBarTitle has-sidebar" data-v-822684d1 data-v-0f4f798b><a class="title" href="/sigpro/" data-v-0f4f798b><!--[--><!--]--><!--[--><img class="VPImage logo" src="/sigpro/logo.svg" alt data-v-35a7d0b8><!--]--><span data-v-0f4f798b>SigPro</span><!--[--><!--]--></a></div></div><div class="content" data-v-822684d1><div class="content-body" data-v-822684d1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-822684d1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-822684d1 data-v-e6d46098><span id="main-nav-aria-label" class="visually-hidden" data-v-e6d46098> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/sigpro/" tabindex="0" data-v-e6d46098 data-v-956ec74c><!--[--><span data-v-956ec74c>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/sigpro/guide/getting-started.html" tabindex="0" data-v-e6d46098 data-v-956ec74c><!--[--><span data-v-956ec74c>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/sigpro/api/quick.html" tabindex="0" data-v-e6d46098 data-v-956ec74c><!--[--><span data-v-956ec74c>Api</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-822684d1 data-v-af096f4a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-af096f4a data-v-e40a8bb6 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-e40a8bb6></span><span class="vpi-moon moon" data-v-e40a8bb6></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-822684d1 data-v-164c457f data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/natxocc/sigpro" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-d26d30cb><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-822684d1 data-v-925effce data-v-04f5c5e9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-04f5c5e9><span class="vpi-more-horizontal icon" data-v-04f5c5e9></span></button><div class="menu" data-v-04f5c5e9><div class="VPMenu" data-v-04f5c5e9 data-v-7dd3104a><!----><!--[--><!--[--><!----><div class="group" data-v-925effce><div class="item appearance" data-v-925effce><p class="label" data-v-925effce>Appearance</p><div class="appearance-action" data-v-925effce><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-925effce data-v-e40a8bb6 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-e40a8bb6></span><span class="vpi-moon moon" data-v-e40a8bb6></span><!--]--></span></span></button></div></div></div><div class="group" data-v-925effce><div class="item social-links" data-v-925effce><div class="VPSocialLinks social-links-list" data-v-925effce data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/natxocc/sigpro" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-d26d30cb><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-822684d1 data-v-5dea55bf><span class="container" data-v-5dea55bf><span class="top" data-v-5dea55bf></span><span class="middle" data-v-5dea55bf></span><span class="bottom" data-v-5dea55bf></span></span></button></div></div></div></div><div class="divider" data-v-822684d1><div class="divider-line" data-v-822684d1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a9a9e638 data-v-070ab83d><div class="container" data-v-070ab83d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-070ab83d><span class="vpi-align-left menu-icon" data-v-070ab83d></span><span class="menu-text" data-v-070ab83d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-070ab83d data-v-168ddf5d><button data-v-168ddf5d>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-a9a9e638 data-v-18756405><div class="curtain" data-v-18756405></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-18756405><span class="visually-hidden" id="sidebar-aria-label" data-v-18756405> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0 has-active" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>Introduction</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>What is SigPro?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/guide/why.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Why</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/guide/getting-started.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Guide</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>API Reference</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/quick.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Quick Start</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/signals.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Signals</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/effects.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Effects</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/storage.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Storage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/fetch.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Fetch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/pages.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Pages</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/components.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Components</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/api/routing.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Routing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-9e426adc><section class="VPSidebarItem level-0" data-v-9e426adc data-v-a4b0d9bf><div class="item" role="button" tabindex="0" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><h2 class="text" data-v-a4b0d9bf>Vite Router Plugin</h2><!----></div><div class="items" data-v-a4b0d9bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a4b0d9bf data-v-a4b0d9bf><div class="item" data-v-a4b0d9bf><div class="indicator" data-v-a4b0d9bf></div><a class="VPLink link link" href="/sigpro/vite/plugin.html" data-v-a4b0d9bf><!--[--><p class="text" data-v-a4b0d9bf>Vite Plugin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a9a9e638 data-v-91765379><div class="VPDoc has-sidebar has-aside" data-v-91765379 data-v-83890dd9><!--[--><!--]--><div class="container" data-v-83890dd9><div class="aside" data-v-83890dd9><div class="aside-curtain" data-v-83890dd9></div><div class="aside-container" data-v-83890dd9><div class="aside-content" data-v-83890dd9><div class="VPDocAside" data-v-83890dd9 data-v-6d7b3c46><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-6d7b3c46 data-v-b38bf2ff><div class="content" data-v-b38bf2ff><div class="outline-marker" data-v-b38bf2ff></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-b38bf2ff>On this page</div><ul class="VPDocOutlineItem root" data-v-b38bf2ff data-v-3f927ebe><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-6d7b3c46></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-83890dd9><div class="content-container" data-v-83890dd9><!--[--><!--]--><main class="main" data-v-83890dd9><div style="position:relative;" class="vp-doc _sigpro_guide_why" data-v-83890dd9><div><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 their unique mental models, build tools, and update cycles—I kept circling back to the same realization: no matter how sophisticated the framework, it all eventually compiles down to HTML, CSS, and vanilla JavaScript. The web platform has evolved tremendously, yet many libraries continue to reinvent the wheel, creating parallel universes with their own rules, their own syntaxes, and their own steep learning curves.</p><p><strong>SigPro is my answer to a simple question:</strong> Why fight the platform when we can embrace it?</p><h2 id="🌐-the-web-platform-is-finally-ready" tabindex="-1">🌐 The Web Platform Is Finally Ready <a class="header-anchor" href="#🌐-the-web-platform-is-finally-ready" aria-label="Permalink to "🌐 The Web Platform Is Finally Ready""></a></h2><p>Modern browsers now offer powerful primitives that make true reactivity possible without virtual DOM diffing, without compilers, and without lock-in:</p><table tabindex="0"><thead><tr><th>Browser Primitive</th><th>What It Enables</th></tr></thead><tbody><tr><td><strong>Custom Elements</strong></td><td>Create reusable components with native browser APIs</td></tr><tr><td><strong>Shadow DOM</strong></td><td>Encapsulate styles and markup without preprocessors</td></tr><tr><td><strong>CSS Custom Properties</strong></td><td>Dynamic theming without CSS-in-JS</td></tr><tr><td><strong>Microtask Queues</strong></td><td>Efficient update batching without complex scheduling</td></tr></tbody></table><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 familiar but stays remarkably close to vanilla JS:</p><ul><li><strong>No JSX transformations</strong> - Just template literals</li><li><strong>No template compilers</strong> - The browser parses your HTML</li><li><strong>No proprietary syntax to learn</strong> - Just functions and signals</li><li><strong>No build step required</strong> - Works directly in the browser</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;">// Just vanilla JavaScript with signals</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $, html } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</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:#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:#24292E;--shiki-dark:#E1E4E8;">document.body.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <div></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <p>Count: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}</p></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <button @click=${</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">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:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Increment</span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> </button></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> </div></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="📊-comparative" tabindex="-1">📊 Comparative <a class="header-anchor" href="#📊-comparative" aria-label="Permalink to "📊 Comparative""></a></h2><table tabindex="0"><thead><tr><th>Metric</th><th>SigPro</th><th>Solid</th><th>Svelte</th><th>Vue</th><th>React</th></tr></thead><tbody><tr><td><strong>Bundle Size</strong> (gzip)</td><td>🥇 <strong>5.2KB</strong></td><td>🥈 15KB</td><td>🥉 16.6KB</td><td>20.4KB</td><td>43.9KB</td></tr><tr><td><strong>Time to Interactive</strong></td><td>🥇 <strong>0.8s</strong></td><td>🥈 1.3s</td><td>🥉 1.4s</td><td>1.6s</td><td>2.3s</td></tr><tr><td><strong>Initial Render</strong> (ms)</td><td>🥇 <strong>124ms</strong></td><td>🥈 198ms</td><td>🥉 287ms</td><td>298ms</td><td>452ms</td></tr><tr><td><strong>Update Performance</strong> (ms)</td><td>🥇 <strong>4ms</strong></td><td>🥈 5ms</td><td>🥈 5ms</td><td>🥉 7ms</td><td>18ms</td></tr><tr><td><strong>Dependencies</strong></td><td>🥇 <strong>0</strong></td><td>🥇 <strong>0</strong></td><td>🥇 <strong>0</strong></td><td>🥈 2</td><td>🥉 5</td></tr><tr><td><strong>Compilation Required</strong></td><td>🥇 <strong>No</strong></td><td>🥇 <strong>No</strong></td><td>🥈 Yes</td><td>🥇 <strong>No</strong></td><td>🥇 <strong>No</strong></td></tr><tr><td><strong>Browser Native</strong></td><td>🥇 <strong>Yes</strong></td><td>🥈 Partial</td><td>🥉 Partial</td><td>🥉 Partial</td><td>No</td></tr><tr><td><strong>Framework Lock-in</strong></td><td>🥇 <strong>None</strong></td><td>🥈 Medium</td><td>🥉 High</td><td>🥈 Medium</td><td>🥉 High</td></tr><tr><td><strong>Longevity</strong> (standards-based)</td><td>🥇 <strong>10+ years</strong></td><td>🥈 5 years</td><td>🥉 3 years</td><td>🥈 5 years</td><td>🥈 5 years</td></tr></tbody></table><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 principles:</p><h3 id="📡-true-reactivity" tabindex="-1">📡 <strong>True Reactivity</strong> <a class="header-anchor" href="#📡-true-reactivity" aria-label="Permalink to "📡 **True Reactivity**""></a></h3><p>Automatic dependency tracking with no manual subscriptions. When a signal changes, only the exact DOM nodes that depend on it update—surgically, efficiently, instantly.</p><h3 id="⚡-surgical-updates" tabindex="-1">⚡ <strong>Surgical Updates</strong> <a class="header-anchor" href="#⚡-surgical-updates" aria-label="Permalink to "⚡ **Surgical Updates**""></a></h3><p>No virtual DOM diffing. No tree reconciliation. Just direct DOM updates where and when needed. The result is predictable performance that scales with your content, not your component count.</p><h3 id="🧩-web-standards" tabindex="-1">🧩 <strong>Web Standards</strong> <a class="header-anchor" href="#🧩-web-standards" aria-label="Permalink to "🧩 **Web Standards**""></a></h3><p>Built on Custom Elements, not a custom rendering engine. Your components are real web components that work in any framework—or none at all.</p><h3 id="🔬-predictable" tabindex="-1">🔬 <strong>Predictable</strong> <a class="header-anchor" href="#🔬-predictable" aria-label="Permalink to "🔬 **Predictable**""></a></h3><p>No magic, just signals and effects. What you see is what you get. The debugging experience is straightforward because there's no framework layer between your code and the browser.</p><h2 id="🎨-the-development-experience" tabindex="-1">🎨 The Development Experience <a class="header-anchor" href="#🎨-the-development-experience" aria-label="Permalink to "🎨 The Development Experience""></a></h2><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;">// With VS Code + lit-html extension, you get:</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Syntax highlighting</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Color previews</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Auto-formatting</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ IntelliSense</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <div style="color: #ff4444; background: linear-gradient(45deg, blue, green)"></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <h1>Beautiful highlighted template</h1></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> </div></span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span></code></pre></div><h2 id="⏱️-built-for-the-long-term" tabindex="-1">⏱️ Built for the Long Term <a class="header-anchor" href="#⏱️-built-for-the-long-term" aria-label="Permalink to "⏱️ Built for the Long Term""></a></h2><p>What emerged is a library that proves we've reached a turning point: the web is finally mature enough that we don't need to abstract it anymore. We can build reactive, component-based applications using virtually pure JavaScript, leveraging the platform's latest advances instead of working against them.</p><p><strong>The result isn't just smaller bundles or faster rendering—it's code that will still run 10 years from now, in any browser, without maintenance.</strong></p><h2 id="📈-the-verdict" tabindex="-1">📈 The Verdict <a class="header-anchor" href="#📈-the-verdict" aria-label="Permalink to "📈 The Verdict""></a></h2><p>While other frameworks build parallel universes with proprietary syntax and compilation steps, SigPro embraces the web platform. SigPro isn't just another framework—it's a return to fundamentals, showing that the dream of simple, powerful reactivity is now achievable with the tools browsers give us out of the box.</p><blockquote><p><em>"Stop fighting the platform. Start building with it."</em></p></blockquote><h2 id="🚀-ready-to-start" tabindex="-1">🚀 Ready to Start? <a class="header-anchor" href="#🚀-ready-to-start" aria-label="Permalink to "🚀 Ready to Start?""></a></h2><p><a href="/sigpro/guide/getting-started.html">Get Started with SigPro</a> • <a href="https://github.com/natxocc/sigpro" target="_blank" rel="noreferrer">View on GitHub</a> • <a href="https://www.npmjs.com/package/sigpro" target="_blank" rel="noreferrer">npm Package</a></p></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>What is SigPro?</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/guide/getting-started.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Guide</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_components.md\":\"BlFwj17l\",\"api_effects.md\":\"Br_yStBS\",\"api_fetch.md\":\"DQLBJSoq\",\"api_pages.md\":\"BP19nHXw\",\"api_quick.md\":\"BDS3ttnt\",\"api_routing.md\":\"7SNAZXtp\",\"api_signals.md\":\"CrW68-BA\",\"api_storage.md\":\"COEWBXHk\",\"guide_getting-started.md\":\"BeQpK3vd\",\"guide_why.md\":\"DXchYMN-\",\"index.md\":\"uvMJmU4o\",\"vite_plugin.md\":\"gDWEi8f0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"Signals\",\"link\":\"/api/signals\"},{\"text\":\"Effects\",\"link\":\"/api/effects\"},{\"text\":\"Storage\",\"link\":\"/api/storage\"},{\"text\":\"Fetch\",\"link\":\"/api/fetch\"},{\"text\":\"Pages\",\"link\":\"/api/pages\"},{\"text\":\"Components\",\"link\":\"/api/components\"},{\"text\":\"Routing\",\"link\":\"/api/routing\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||
|
||
</body>
|
||
</html> |