<p align="center"> <a href="https://voby.dev"> <img src="./resources/banner/svg/banner-light-rounded.svg" alt="Voby's Banner" width="640px" height="320px"> </a> </p> <p align="center"> <a href="https://discord.gg/E6pK7VpnjC"> <img src="./resources/discord/button.png" alt="Join The Discord Chat" width="175px" height="56.5px"> </a> <a href="https://codesandbox.io/s/voby-playground-7w2pxg"> <img src="./resources/playground/button.png" alt="Open The Playground" width="175px" height="56.5px"> </a> <a href="https://opencollective.com/voby"> <img src="./resources/collective/button.png" alt="Donate With Open Collective" width="175px" height="56.5px"> </a> </p>

Voby

A high-performance framework with fine-grained observable/signal-based reactivity for building rich applications.

Features

This works similarly to Solid, but without a custom Babel transform and with a different API.

• No VDOM: there's no VDOM overhead, the framework deals with raw DOM nodes directly.
• No stale closures: functions are always executed afresh, no need to worry about previous potential executions of the current function, ever.
• No rules of hooks: hooks are just regular functions, which you can nest indefinitely, call conditionally, use outside components, whatever you want.
• No dependencies arrays: the framework is able to detect what depends on what else automatically, no need to specify dependencies manually.
• No props diffing: updates are fine grained, there's no props diffing, whenever an attribute/property/class/handler/etc. should be updated it's updated directly and immediately.
• No key prop: you can just map over arrays, or use the For component with an array of unique values, no need to specify keys explicitly.
• No Babel: there's no need to use Babel with this framework, it works with plain old JS (plus JSX if you are into that). As a consequence we have 0 transform function bugs, because we don't have a transform function.
• No magic: what you see is what you get, your code is not transformed to actually do something different than what you write, there are no surprises.
• No server support: for the time being this framework is focused on local-first rich applications, most server-related features are not implemented: no hydration, no server components, no streaming etc.
• Observable-based: observables, also known as "signals", are at the core of our reactivity system. The way it works is very different from a React-like system, it may be more challenging to learn, but it's well worth the effort.
• Work in progress: this is probably beta software, I'm working on it because I need something with great performance for Notable, I'm allergic to third-party dependencies, I'd like something with an API that resonates with me, and I wanted to deeply understand how the more solid Solid, which you should also check out, works.

Demos

You can find some demos and benchmarks below, more demos are contained inside the repository.

• Playground (CodeSandbox): https://codesandbox.io/s/voby-playground-7w2pxg
• Playground (StackBlitz): https://stackblitz.com/edit/vitejs-vite-azlrzl?file=src%2Fcounter.tsx
• Benchmark: https://krausest.github.io/js-framework-benchmark/current.html
• Counter: https://codesandbox.io/s/voby-demo-counter-23fv5
• Clock: https://codesandbox.io/s/voby-demo-clock-w1e7yb
• Emoji Counter: https://codesandbox.io/s/voby-demo-emoji-counter-j91iz2
• HyperScript: https://codesandbox.io/s/voby-demo-hyperscript-h4rf38
• HTML Template Literal: https://codesandbox.io/s/voby-demo-html-lvfeyo
• Single-file HTML: https://codesandbox.io/s/voby-demo-html-dueygt?file=/public/index.html
• Spiral: https://codesandbox.io/s/voby-demo-spiral-ux33p6
• Store Counter: https://codesandbox.io/s/voby-demo-store-counter-kvoqrw
• Triangle: https://codesandbox.io/s/voby-demo-triangle-l837v0
• Boxes: https://codesandbox.io/s/voby-demo-boxes-wx6rqb

APIs

| Methods | Components | Hooks _core | Hooks _web | Types | Extras | | ------------------------------------- | --------------------------------- | ------------------------------------ | ------------------------------------------- | --------------------------------------------------- | ------------------------------- | | $ | Dynamic | useBoolean | useAbortController | Context | Contributing | | $$ | ErrorBoundary | useCleanup | useAbortSignal | Directive | Globals | | batch | For | useContext | useAnimationFrame | DirectiveOptions | JSX | | createContext | Fragment | useDisposed | useAnimationLoop | EffectOptions | Tree Shaking | | createDirective | If | useEffect | useEventListener | FunctionMaybe | TypeScript | | createElement | KeepAlive | useMemo | useFetch | MemoOptions | | | h | Portal | usePromise | useIdleCallback | Observable | | | hmr | Suspense | useReadonly | useIdleLoop | ObservableLike | | | html | Switch | useResolved | useInterval | ObservableReadonly | | | isBatching | Ternary | useResource | useMicrotask | ObservableReadonlyLike | | | isObservable | | useRoot | useTimeout | ObservableMaybe | | | isServer | | useSelector | | ObservableOptions | | | isStore | | useSuspended | | Resource | | | lazy | | useUntracked | | StoreOptions | | | render | | | | | | | renderToString | | | | | | | resolve | | | | | | | store | | | | | | | template | | | | | | | tick | | | | | | | untrack | | | | | |

Usage

This framework is simply a view layer built on top of the Observable library [oby](https://github.com/fabiospampinato/oby