14 ms·
VanJS (Vanilla JavaScript): smallest reactive UI framework
- WesSouza 3y agoCute.
- pablodanielmarc 3y ago[flagged]
- wingi 3y agoPlease check out https://github.com/jorgebucaran/hyperapp https://github.com/jorgebucaran/hyperapp
- rauli_ 3y agoNow that everyone is advertising their own similar frameworks, I guess I'll have to do that too: https://github.com/RauliL/pakertaja https://github.com/RauliL/pakertaja
- cynicalsecurity 3y ago[flagged]
- montroser 3y agoVery cool! See also El, which is similarly sized, with an arguably more natural reactive interface: https://github.com/frameable/el https://github.com/frameable/el
- spyke112 3y ago> VanJS has the vision to be the scripting language for UI, just like bash is the scripting language for terminal. I find this quite strange. Wouldn’t javascript be to the browser what Bash is for the terminal? This is after all just another library.
- madmoose 3y agoBash? So VanJS will make the simple things easy and anything else nigh-on impossible?
- SquareWheel 3y agoI really don't want to be that guy, but... Vanilla JavaScript already exists as a popular term for JavaScript without any framework. No jQuery, no React - just JavaScript. Calling a library VanJS (as short for "Vanilla JavaScript") is just going to cause confusion. The repo's own description uses the phrase vanilla JavaScript in this way, and even mixes both meanings within a single sentence. If the author likes the theme, I'm sure they can still use it indirectly. eg. "icecream.js: add a scoop of vanilla to your project". Or "Go nuts and sprinkle in some Reactive syntax". It's still very punnable, I assure you.
- rawoke083600 3y agoYea kinda felt the same, when reading the name and desc. Whats the value of names or terms if we keep reassigning a different meaning to it ? Especially in the tech industry. Also it's almost immoral calling "a new" project "lightweight" and "small". Of course it is lightweight and small, it's a new project ! Wait for bug submissions, feature requests, feature parity, time, edge cases etc. Anywhoo congrats on shipping something.
- ptx 3y ago> Also it's almost immoral calling "a new" project "lightweight" and "small". Of course it is lightweight and small, it's a new project ! Unless it's Swing, where a "lightweight" component is one that uses enormous piles of slow Java code to duplicate native platform functionality.
- Sohcahtoa82 3y agoNever understood why Java duplicated (poorly) native platform functionality rather than merely acting as a wrapper around the native platform.
- aspyct 3y agoYes, please be that guy. Or I'll do it. Vanilla Javascript refers indeed to "javascript without a framework". So creating a framework and calling it "vanilla javascript" is... wrong?
- BiggerBio2 3y ago[dead]
- winrid 3y agoI thought this was gonna be terrible but it actually looks pretty nice. It reminds me of Nim's Karax.
- shanghaikid 3y agonice project, very cool, but I don't see the meaning to do this. nowadays, most small project can use vanilla javascript, if they don't need a framework, they really don't need it. if we are building a large project, why not use react/vue/svelte ? better docs, better features, better community.
- JodieBenitez 3y ago> if they don't need a framework, they really don't need it. I don't think it's an "all or nothing" situation. I do UIs without big frameworks, but that doesn't mean I don't use any library for some needs. I personally appreciate anything that needs no transpiling.
- robertoandred 3y agoNot sure how this is any more natural than JSX/HTML. It looks much messier and harder to follow. Also I’d like to see how they handle mount/unmount logic like event listeners.
- _old_dude_ 3y agoNo shadow dom, so no mount/unmount logic ! A whole new DOM sub-tree is re-created each time a value change. There is an example in the tutorial about how state are handled [1]. [1] https://vanjs.org/tutorial#state-binding https://vanjs.org/tutorial#state-binding
- robertoandred 3y agoSo how do you clean up global event listeners, clear intervals and timeouts, etc when a component unmounts?
- paulddraper 3y agos/shadow/virtual/
- onion2k 3y agoThe "Hello World" example is a really good example of why React, Vue, etc are better than something more minimal like this library if you're optimizing for speed. The page will show nothing until the script runs, which requires downloading the VanJS lib and the script itself. You could inline them into the page, but that gets seriously messy at scale. A modern React app that's using some serverside rendering for the initial page load will send the user a page of HTML that can be streamed (rendered as it downloads) so it'll display pretty much instantly (if you're concerned about styles you could inline for the important stuff and defer for rest). The React "Hello World" will be a lot bigger but it'll display a lot faster on a slow connection, and it'll work if the user has JS disabled. Obviously it's early days for VanJS and the authors could add all sorts of fancy SSR and clever scheduling, but if they do they'll lose the tiny size and end up making something that starts looking very like React (or more likely, Preact). It's all a trade off. Sacrificing speed and complexity for size and DX is fine. You just need to be aware that's what you're doing, and neither is 'better' for all aspects of web app dev.
- threatofrain 3y agoI'd argue that SSR is somewhat orthogonal to React or VanJS. I don't see preliminary reasons to suspect that VanJS will be unable to plug into meta frameworks and eventually get SSR.
- onion2k 3y agoThere's a bit of work to do to make a JS framework work server side. You need a mechanism to render in Node, which assumes you don't use any browser APIs that aren't available in whatever DOM library you use. Then you need a way to stream the HTML to the client, but that's easy with Express. Then when the page has loaded on the client you need a way to know what the server rendered and attach listeners to the reactive bits (and optionally to rerender in the background on the client to check things are working properly). That's assuming you don't bother with things like lazy loading and dynamic imports, which will make devs a bit cross because those are really nice things to have. It's not a huge amount of effort and it's definitely achievable by a single dev leaning on some existing libraries, but it would mean giving up on some of the lightweight aspects of Van, and, like I said, you'll end up half way to building your own React library...
- jehna1 3y agoGlad to see jsx-less approaches to declaring dom! Very similar to: https://github.com/jehna/longwood https://github.com/jehna/longwood
- vmfunction 3y agoThe syntax is more like mithril.js, think would just stick with that or go with solidjs.
- benatkin 3y agoThat's cool but my favorite vanilla js framework by far is vapor.js. https://github.com/madrobby/vapor.js https://github.com/madrobby/vapor.js
- Technotroll 3y agoI really love the documentation for this project! Super-intuitive!
- tobr 3y agoI appreciate that they offer a vapor.packed.js version, for those of us who care about keeping bundle size down.
- xigoi 3y agoLooks nice, but does it support Internet Explorer?
- thunderbong 3y agoFantastic! It even has 200 forks!
- FireInsight 3y agoThe website for this is top-notch. It always turns me off when frameworks have bad websites, thankfully this amazing project doesn't. http://vaporjs.com/ http://vaporjs.com/
- pyrolistical 3y agoWhat does “unopinionated Reactive UI framework” even mean?
- progx 3y agoUse it as you want, it will not force you to build your UI in a specific way.
- hu3 3y agoBut it does force: const Hello = () => div( p("Hello"), ul( li("World"), li(a({href: "https://vanjs.org/"}, "VanJS")), ), )
- pyrolistical 3y agoNeither does react?
- 10xDev 3y agoWeb development is going to come full circle once everyone comes to terms with the fact that web development has been overcomplicated and you don't need 1000 packages and abstractions on top of abstractions just to interact with some DOM elements.
- onion2k 3y agoyou don't need 1000 packages and abstractions on top of abstractions just to interact with some DOM elements I don't think many developers believe that you do. Most of the complexity around 'modern web dev' isn't about achieving the basics of moving DOM nodes around. If that's what you're doing then it's hard to argue that a framework adds much benefit. Frameworks bring two benefits: Firstly, they push you down a specific path around the shape of the code. When you're on a team of 20 working on part of an app that shares data across n other components then you need something to keep the code from turning into a swamp. Frameworks bring that experience. You don't need it on a small app or if you're a lone dev, but even then it kind of helps if you're not especially disciplined. If you want an example, have a look at some of the demos from the react-three-fiber team. It's so much nicer to work with a declarative API than imperative vanilla Three.js code. Secondly, frameworks used well enable you to eek out additional perf. Building an app that renders a complex page in under 16ms isn't that easy if there's a lot going on, and leaning on a scheduler like the one in React makes it simpler. It's still far too easy to get it wrong and kill all your perf even in a framework though.
- smarkov 3y ago> Building an app that renders a complex page in under 16ms isn't that easy if there's a lot going on We struggle to render a few boxes and some text under 16ms while games with vastly more complex sound, network, physics, UI and whatever else systems render frames in < 8ms at 4k.
- onion2k 3y agoWe struggle to render a few boxes and some text under 16ms Only if a dev has screwed up. Most simple sites are fine. You have to push the DOM quite hard for the browser to be the bottleneck. I've worked on apps that have DOM trees with 60,000+ nodes that remain under 16ms (because very few were actually changing at any given time..) games with vastly more complex sound, network, physics, UI and whatever else systems render frames in < 8ms at 4k The Servo project is bringing a lot of what makes game UIs fast to browsers. It's a massive shame that it's not a Mozilla/Firefox backed idea any more but it's still going. Hopefully it'll get a bit more mainstream one day.
- hrnn 3y agoMight be of interest as well https://github.com/zserge/o https://github.com/zserge/o Would seem that it's not difficult to come by a framework tiny and functional. The question is, how long are they valuable to maintain and how tiny they keep if you cater for all the corner cases and fix bugs
- ano88888 3y agoUntil i run into a big bottleneck in react and cannot find a way to overcome it, i am not gonna switch from react to yet another new framework. Time is better allocated for more important things.
- mbork_pl 3y agoThat's not the point. Imagine wanting to do a quick prototype, for example. A miniframework like this could be a great fit. Or when you code something (probably not too big) from scratch.
- glutamate 3y agoSince the other comments are complaining about something or other, I just want to say that this looks great! I can imagine using this for something that needs more than jQuery and less than react. I use the same Html-in-JS syntax for my own project and it works really well. The good folks at solenya have written a converter: https://www.solenya.org/convert https://www.solenya.org/convert
- tasubotadas 3y agoWhy is everybody so obsessed with size? 100kB means nothing these days.
- 130e13a 3y agoi'm also a bit confused why e.g. they have an explicit rule that they only use `let` instead of `const` when declaring variables, "for reducing the bundle size", which seems like a bad trade-off in order to save maybe a couple dozen bytes at most?
- ra1231963 3y agoI’m a bit confused why they made it in the first place given the dozens of similar ultra minimal spartan frameworks to choose from that nobody uses (every other comment here is plugging one).
- jhp123 3y agoThis library actually has some pretty unique ideas, like the use of Proxy objects which is not commonplace in javascript frameworks. Even if it didn't, sometimes it's just nice to build your own take on something.
- ra1231963 3y agoProxy objects are absolutely common in js state management frameworks. And yes it’s nice to build something on your own, but this project is clearly aiming to convince other people to use it in their projects.
- pfg_ 3y agoDon't minifiers convert these anyway? const a = 1; let b = 2; console.log(a, b); bun build --minify a.js // bundles this to: var o=1,l=2;console.log(o,l); It's not even using const or let, it's flattened these multiple statements into one 'var' statement
- graup 3y agoHard to see a real-world use for this but reading the code and docs is pretty interesting. The code taught me some cool tricks. Good job! Some of the binding API is a bit weird, like that object with `deps` (State-derived properties). Maybe providing a function for this would be more ergonomic.
- jefozabuss 3y agoWe probably saw since React came up at least 20-30 of these "smallest reactive UI frameworks" with similar API but none of them named itself "Vanilla" for a reason. I share the opinions of others in this thread that the current name is an unlucky one.
- hhthrowaway1230 3y agoI like it! Its minimal, super straight forward and easy to understand, dont need a transpiler. I'll use it with my next upcoming project and see how it fares.
- mattigames 3y agoIf I was making this kind of mini framework instead of this a({href: "https://vanjs.org/"}, "VanJS") I would have gone with this shorter way a("VanJS").href("https://vanjs.org/") And make it chainable and allow class names as second argument as in a("About us", ".big.red").href("/about.html").target("_blank")
- chrsjxn 3y agoTag functions being implemented with a Proxy (https://vanjs.org/tutorial#api-tags https://vanjs.org/tutorial#api-tags) could make that a little cumbersome, and would break the abstraction that `div(...)` just returns an HTMLDivElement you can do whatever you want with.
- mattigames 3y agoYeah, plus I realized after posting that for nesting children it would mean having the properties at the end, not very dev-friendly, maybe the way this lib does it is the best way (without JSX or anything like that)
- nailer 3y agoChaining is very... 2010? Mainly because it's used().to().make().awful().APIs().like().this(). It got popular then seems to have died out. href() isn't a function name. One doesn't 'href()' anything.
- mattigames 3y agoYou know what promises are right?
- nailer 3y agoYes I do. Do you use JS or TS currently? We've had async/await since ES2017, it's supported everywhere you want, and there's no reason to see .then() chains anymore outside jokes regarding early 2000's film classic "Dude, Where's My Car?". Pasting some code and cutting out the boring bits: const transaction = await makeTransaction(...); const signature = await sendAndConfirmTransaction(...); const tokenAccountsByOwner = await getTokenAccountsByOwner(...); Even back when .then() chaining was used: chaining only existed because that was the only way we had to handle promises, rather than because it was a desirable syntax.
- dsego 3y agoFor comparison, similar tiny JS view libraries - https://redom.js.org https://redom.js.org 2kB - https://nanojsx.io https://nanojsx.io 1kB
- eole666 3y agonanojsx looks great! I don't really get why mini-van don't use JSX.. Maybe some people just don't want any html tags in their project ? Or maybe their template engine allows a lighter approach.
- brabel 3y agoI suppose the idea is to not have to do transpilation.
- toastercat 3y agoYou can avoid a build step by not using JSX.
- jhp123 3y agoMy library https://github.com/jhp/imperative https://github.com/jhp/imperative is also under 2kB
- jsniffen 3y agoAnother one, https://github.com/jsniffen/tinyjs https://github.com/jsniffen/tinyjs
- yoyoyu 3y agoYou can try this plugin to quickly land UI animations。https://pag.art/ https://pag.art/
- chrsjxn 3y agoThis narrative (https://vanjs.org/about#story https://vanjs.org/about#story) about modern JS tooling being opaque, exclusive, and hard to learn is frustrating. If all you need is HTML rendering and basic state, any modern web framework will do that extremely simply. The barrier to entry is really not that high!* *Except maybe at Google. I hear their internal tooling is a huge pain to work with.
- areknawo 3y ago[dead]
- nologic01 3y agoMakes me think that jquery may have missed a boat to integrate reactive elements (as there was clearly a need for them for a long time before angular, react etc took of) and retain relevance. Maybe for projects that don't aim to replicate desktop app functionality there is a "small-is-beautiful" yet all-inclusive js library that is missing.
- cynicalsecurity 3y ago[flagged]
- 0thgen 3y agoseems like a cool, intuitive library. surprised how much discussion time on here was spent on "the name" relative to the framework itself
- pjmq 3y agoTo my eye, this makes vanilla JS more like React rather than making vanilla JS reactive. I'm basically looking for an even lighter Svelte if I can get it. Maybe this just isn't for me!
- pfg_ 3y agoIf you just want to make vanilla js reactive, you can use solid js but without jsx (or something similar). This library could likely do the same. import { createRoot, createSignal, createRenderEffect } from "solid-js"; function SomeComponent() { const [count, setCount] = createSignal(0); const result = document.createElement("button"); createRenderEffect(() => result.textContent = "++ (" + count() + ")"); result.onclick = () => setCount(count() + 1); return result; } createRoot(cleanup => { const appv = document.getElementById("app"); appv.appendChild(SomeComponent()); });
- ricardobeat 3y agoThrowback to ten years ago and libraries like Mercury: https://www.npmjs.com/package/mercury https://www.npmjs.com/package/mercury This is what we were doing before React and Babel came along. No dependencies, no transpiling, light weight, no IDE setup, were all a given and not special features.
- cutler 3y agoIt can do "Hello world". How cool is that?!
- toastercat 3y agoI think the API is quite nice. I've always been a fan of the Elm-like `div`, `p`, `span`, etc. individual html element functions for templating. The approach to local state is also similar to Preact Signals, which is cool.
- paddw 3y agoYou are not really getting anything in the size difference between this and something like preact, you are going to end up bottlenecked on something else like waiting for CSS to load. This is fine if you just want to write the code in a minimalist style, but I really doubt cutting things back to this extreme has tangible performance benefits for like 99% of applications.
- pcthrowaway 3y agoI like this, but https://github.com/vanjs-org/van#ultra-lightweight https://github.com/vanjs-org/van#ultra-lightweight should really list svelte, which is only 1.6-1.8kB compiled last I checked (though it's possible it makes some of the compiled markup that gets shipped larger than the source due to component style scoping)
- pier25 3y agoSome day browsers will implement native data binding with reactivity and the current dark ages of front end development will end.
- mathgladiator 3y agoThis is my dream! I started RxHTML with the premise that something was missing from HTML, so I just added it: https://news.ycombinator.com/item?id=36067280 https://news.ycombinator.com/item?id=36067280 It's working surprisingly well for a client that I'm working for.
- esprehn 3y agoThis is really just a DSL to make dom: https://github.com/vanjs-org/van/blob/3f98060971a8ff141179ef0fcd9f1b13b536a6f2/src/van.js#L51 https://github.com/vanjs-org/van/blob/3f98060971a8ff141179ef... And a very simple system that replaces the dom from scratch each time any data changes: https://github.com/vanjs-org/van/blob/3f98060971a8ff141179ef0fcd9f1b13b536a6f2/src/van.js#L71 https://github.com/vanjs-org/van/blob/3f98060971a8ff141179ef... That's bad for performance (recomputing the style/layout and repainting even for minor changes), bad for accessibility, breaks focus, etc. It's unlikely the smaller bundle size compared to preact and friends wins anything once you've abandoned all reuse of the rendering engine computations.
- ssdspoimdsjvv 3y agoWhile that's true, I wonder how many websites really benefit from smart diffing algorithms instead of just directly updating the dom.
- mathgladiator 3y agoIn my world, I just directly update the DOM which I described recently in https://news.ycombinator.com/item?id=36067280 https://news.ycombinator.com/item?id=36067280
- 5Qn8mNbc2FNCiVV 3y agoThe diffing algorithm for preact is super simple, I think it's along the lines of a dozen lines of code. I'd wager the code to directly updating the DOM will be larger than preact + usage code
- rictic 3y agoUsing tagged template literals with Lit or Preact + htm is more readable than Van.js, is much faster on update, and is also completely vanilla JS (no JSX and so no build step needed)
- spankalee 3y agoHTML-builder APIs like this are a pretty bad idea, IMO. They assume that HTML is a closed system with no new tags, and don't account for custom elements or new tags. It doesn't even have support for existing tags like <track>, <b>, or <i> (<i> is used by some systems now for icons). It doesn't appear to have a way to emit comments. We have the ability to embed real HTML strings, with expressions, directly into JS, which means that the rendering library doesn't have to have any knowledge or opinion of what the tags are. This is what Lit does with lit-html templates. The example in the Van readme would be: const Hello = () => html` <div> <p>Hello</p> <ul> <li>World</li> <li><a href="https://vanjs.org/">VanJS</a></li> </ul> </div> `; Such template strings can contain any HTML - any tag, comment, attribute, entities, SVG, etc.
- tomtheelder 3y agoYou can just add a generic version tag function that takes a tag name as its first param to solve that issue. Lets you create your own generator functions with ease for tags that aren’t included by default. Don’t see any reason you can’t add a comment() function either. If you use a template string like that then you lose a lot in terms of type checking/IDE tooling/etc unless you add a ton of complexity, which is antithetical to this library’s goals. I definitely think they went with the right option.
- bpierre 3y agoInterestingly the `tags` object seems to support any tag name: https://github.com/vanjs-org/mini-van/blob/57b686ced075754eebf6074db39b0150fc7c8a3f/src/van-plate.js#L42-L50 https://github.com/vanjs-org/mini-van/blob/57b686ced075754ee... And it still allows to provide specific types for the known HTML elements: https://github.com/vanjs-org/mini-van/blob/57b686ced075754eebf6074db39b0150fc7c8a3f/src/mini-van.d.ts#L25-L129 https://github.com/vanjs-org/mini-van/blob/57b686ced075754ee... Cool stuff
- masswerk 3y ago> <i> is used by some systems now for icons This is somewhat alarming. <i> is still a valid tag and used, e.g., for marking up titles of artistic works, etc. (which is not a use case for <em>, nor for <cite>.) Similar goes for <b>, which is (semantically) different from <strong>.
- agumonkey 3y agoha, the good old html construction functions, i don't know but it relaxes me to see that after a year of jsx
- RGBCube 3y agoI was expecting this to be a prank project saying that you should use vanilla JS, my disappointment is immeasurable.
- nektro 3y agodo not call this vanilla js, that's what using no js is called
- AbraKdabra 3y ago> Programming with VanJS feels a lot like React. closes tab
- RadixDLT 3y agocould this replace jQuery?
- darepublic 3y agoJsx is one of the best things about react
- Alien2 3y ago[flagged]