Live data from Hacker News

VanJS (Vanilla JavaScript): smallest reactive UI framework

github.com

161–170 of 214 posts

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#161

Not 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.

No 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

s/shadow/virtual/

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#163
post #14

The "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…

The cliëent lib could be 2kb and the speed difference between first render vs server side render is less than 10ms. In fact the client side render version could be faster if the compiled output is larger than 2kb. Which then normally must be pushed from the server

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#164
HTML-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 , , or ( 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`
      
        

Hello

World VanJS `;
Such template strings can contain any HTML - any tag, comment, attribute, entities, SVG, etc.

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#165
post #69
post #64

Earlier quoted context omitted.

Suggestion: call it Bourbon JS. Wikipedia: > The majority of the world's vanilla is the V. planifolia species, more commonly known as Bourbon vanilla.

Wait people write JavaScript without drinking bourbon?

The relationship between Bourbon (spirit), primarily distilled and aged in Kentucky, and Bourbon (vanilla plant), primarily grown in Madagascar is one of fascinating cross-convergence of "things rich French speakers loved", plus the coincident accident of Bourbon, Kentucky being a shipping port (and Oak as an aging vessel high in imparting vanillins). Both are a reminder that vanilla as a flavor was long a spice for (and named after) kings and to be enjoyed mostly by the rich. It is still hilarious to see things like "vanilla JS" meant to imply "boring" or "cheap" when historically that's very inaccurate.

Also, yes, bourbon (spirit) is a good accompaniment to late nights in JavaScript.

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#166
post #97
post #8

Earlier quoted context omitted.

Yes, 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?

Vanilla.js is the most popular framework in the world!!!! http://vanilla-js.com Also has the smallest footprint: 0 bytes uncompressed, 25 bytes gzipped!

This is hilarious. I lost it at the empty line for loading it in production.

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#167
post #14

The "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…

The page will show nothing until the script runs If you know what you are doing you can achieve full state restoration of a large SPA before CSS paints to the screen. In my personal app I am able to complete state restoration within the first 80ms of page load on old hardware. Vue and React are not capable of providing this.

Just encapsulating css and js inside the html works perfectly fine. In a SPA you nowadays use history api for navigation and make dynamic dom changes on the fly. You only have to make sure than you serve the minimum amount of js and css on an initial page load. Then when the page is loaded you load the rest. Slight inefficient cache model when lots of initial page loads from different urls, but usually that's never happening (people are entering a site at one specific url) I have a SPA, full size is about 3mb of js files. Separate html files containing only that page are max 20kb. Super fast rendering. Nothing server side.

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#168

HTML-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 , , or ( 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 th…

You 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.

Re: VanJS (Vanilla JavaScript): smallest reactive UI framework

#169
post #85
post #8

Earlier quoted context omitted.

Yes, 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?

Suggestion 2: call it IceCreamJS or just IceJS/CreamJS

jsAlaMode?
Post reply on HN