A 0.9kB No-JSX Framework Based mostly on Vanilla JavaScript

2023-12-20 07:34:20

Allow everybody to construct helpful UI apps with a number of strains of code, anyplace, any time, on any system.

VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based mostly on pure vanilla JavaScript and DOM. Programming with VanJS looks like constructing React apps in a scripting language, with out JSX. Test-out the Whats up World code under:

// Reusable elements may be simply pure vanilla JavaScript capabilities.
// Right here we capitalize the primary letter to comply with React conventions.
const Whats up = () => div(
  p("👋Whats up"),
  ul(
    li("🗺️World"),
    li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
  ),
)

van.add(doc.physique, Whats up())
// Alternatively, you possibly can write:
// doc.physique.appendChild(Whats up())

Try on jsfiddle

You possibly can convert any HTML or MD snippet into VanJS code with our on-line converter.

VanJS helps you handle states and UI bindings as properly, with a extra pure API:

const Counter = () => {
  const counter = van.state(0)
  return span(
    "❤️ ", counter, " ",
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

van.add(doc.physique, Counter())

Demo:

Try on jsfiddle

Reactive Programming without React/JSX

Declarative DOM tree composition, reusable elements, reactive state binding – VanJS presents each good side that React does, however with out the necessity of React, JSX, transpiling, digital DOM, or any hidden logic. Every thing is constructed with easy JavaScript capabilities and DOM.

Grab ‘n Go

No set up, no configuration, no dependencies, no transpiling, no IDE setups. Including a line to your script or HTML file is all you might want to begin coding. And any code with VanJS may be pasted and executed straight in your browser’s developer console. VanJS means that you can concentrate on the enterprise logic of your utility, slightly than getting slowed down in frameworks and instruments.

Ultra-Lightweight

VanJS is the smallest reactive UI framework on this planet, with simply 0.9kB within the gzipped minified bundle. It is 50~100 instances smaller than hottest alternate options. Guess what you may get from this 0.9kB framework? All important options of reactive UI programming – DOM templating, state, state binding, state derivation, impact, SPA, client-side routing and even hydration!

.min.js.gz .min.js

Perfection is achieved, not when there’s nothing extra so as to add, however when there’s nothing left to remove.

— Antoine de Saint-Exupéry, Airman’s Odyssey

Easy to Learn

Simplicity at its core. 5 main capabilities (van.tags, van.add, van.state, van.derive, van.hydrate) + 4 auxiliary capabilities (van.tagsNS, van._, van.val, van.oldVal). All the tutorial plus the API reference is just one single web page, and may be realized inside 1 hour for many builders.

Performance

VanJS is among the many quickest net frameworks, in response to the results by krausest/js-framework-benchmark. For SSR, Mini-Van is 1.75X to 2.25X more efficient in comparison with React.

TypeScript Support

VanJS offers first-class assist for TypeScript. With the .d.ts file in place, you’ll make the most of type-checking, IntelliSense, large-scale refactoring offered by your most well-liked improvement atmosphere. Check with the Download Table to search out the best .d.ts file to work with.

github.com/vanjs-org/van

See additionally: A Guide to Reading VanJS Codebase.

VS Code Extension

VanJS may be prolonged by way of add-ons. Add-ons add extra options to VanJS and/or present an alternate styled API. Under is a curated record of add-ons constructed by VanJS group:

🙏 VanJS goals to construct a greater world by decreasing the entry barrier for UI programming, with no intention or plan on commercialization in anyway. If you happen to discover VanJS attention-grabbing, or may very well be helpful for you some day, please think about starring the challenge on GitHub. It takes just some seconds however your assist means the world to us and helps unfold VanJS to a wider viewers.

Star Watch Discuss Issue Follow @vanjs-org

Within the title of Vanilla of the Home JavaScript, the First of its name, Smallest Reactive UI Framework, 0.9kB JSX-free Seize ‘n Go Library, Scripting Language for GUI, GPT-Empowered Toolkit, by the phrase of Tao of the Home Xin, Founder and Maintainer of VanJS, I do hereby grant you the permission of VanJS underneath MIT License.