VanJS (Vanilla JavaScript): smallest reactive UI framework
CYBE 🌍 3 min read
VanJS (abbr. Vanilla JavaScript) is an extremely-light-weight, zero-dependency and unopinionated Reactive UI framework in accordance with pure vanilla JavaScript and DOM. Programming with VanJS feels loads devour React. Take a look at-out the Hey World code below:
// Reusable ingredients can even be apt pure vanilla JavaScript functions. // Here we capitalize the first letter to put together React conventions. const Hey = () => div( p("👋Hey"), ul( li("🗺️World"), li(a({href: "https://vanjs.org/"}, "🍦VanJS")), ), ) van.add(file.physique, Hey()) // Alternatively, you may perchance well well write: // file.physique.appendChild(Hey())
You may perchance well well presumably convert any HTML snippet into VanJS code with our on-line converter.
VanJS helps you space up teach and UI binding as effectively, with a more pure API:
button({onclick: ()=> –counter.val}, “👎”),
)
}
van.add(file.physique, Counter())” dir=”auto”>
const Counter = () => { const counter = van.teach(0) return div( "❤️ ", counter, " ", button({onclick: () => ++counter.val}, "👍"), button({onclick: () => --counter.val}, "👎"), ) } van.add(file.physique, Counter())
Why VanJS?
VanJS has the imaginative and prescient to be the scripting language for UI, apt devour bash is the scripting language for terminal. VanJS empowers frontend engineers, backend engineers, system engineers, data scientists, and any person else to construct comprehensive user interfaces. You may perchance well well presumably code with VanJS wherever, any time, and on any application – even to your smartphone!
Reactive Programming with out React/JSX
Declarative DOM tree composition, reusable ingredients, reactive teach binding – VanJS supplies every apt side that React does, however with out the necessity of React, JSX, transpiling, digital DOM, or any hidden common sense. The total lot is constructed with easy JavaScript functions and DOM.
Need ‘n Fling
No set up, no configuration, no third-get together dependencies, no transpiling, no IDE setups. Adding a line to your script or HTML file is all it be predominant to originate up coding. VanJS allows you to specialize in the industry common sense of your application, quite than getting slowed down in frameworks and instruments.
Extremely-Lightweight
VanJS is a really skinny layer on high of Vanilla JavaScript and DOM, barely ample to make the DOM manipulation and teach binding as ergonomic as (if now now no more than) React, and it delegates most of labor to accepted browser APIs implemented in native code. In consequence, the bundled dimension of VanJS is apt 1.2kB, which is more than 100 events smaller than most fashionable UI frameworks:
Perfection is executed, now now not when there is nothing more to add, however when there is nothing left to select away.
— Antoine de Saint-Exupéry, Airman’s Odyssey
TypeScript Beef up
VanJS affords top quality fortify for TypeScript. Merely win the corresponding .d.ts file along along with your .js file, and you may perchance well pick attend of form-checking, IntelliSense, top-notch-scale refactoring provided by your most neatly-liked construction ambiance. Consult with the Download Table to salvage the particular .d.ts file to work with.
Easy to Learn
VanJS puts heavy emphasis on the simplicity of the framework. There are salubrious 4 exported functions in the API and feels loads devour React. Thanks to that, the walkthrough tutorial is the identical as the chubby API referrence, and can even be learned within 1 hour for most builders.
Are looking to Learn More?
- Download and Catch Started
- Learn from the Tutorial
- Learn by Examples
- Convert HTML snippet to VanJS code with our on-line HTML to VanJS Converter
- Need server-side rendering? Take a look at out Mini-Van
- For questions, suggestions or basic discussions, drag to our Discussions page