VanillaJSX.com
The article highlights using vanilla JSX for creating reusable DOM elements, featuring examples like a click counter and todo list, and discusses the "imlib" library for efficient application development.
Read original article
The article discusses the concept of using vanilla JSX to create reusable and interactive DOM elements without relying on a virtual DOM. It presents examples of how to implement simple components like a button that tracks click counts and a todo list that allows users to add and remove items. The button component updates its text content based on the number of clicks, while the todo list manages its state through a class that handles adding and removing list items. Additionally, the article explores how to handle large datasets by filtering input and displaying matched results dynamically. The author mentions the creation of a library called "imlib," which was developed to improve the process of building applications and is used in various projects, including a mini-game maker and the author's own website. The overall theme emphasizes the potential of vanilla JSX for building interactive applications efficiently.
- Vanilla JSX can create reusable and interactive DOM elements.
- Components can maintain their own state without a virtual DOM.
- The article provides examples of a click counter and a todo list.
- It discusses handling large datasets through dynamic filtering.
- The author developed "imlib" to enhance application development.
Related
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
Show HN: Launch React components in your app with no-code
A new feature called Collections enables non-technical users to deploy React components in web applications without engineering support, including air traffic controls for display management and a centralized rendering registry.
- Many commenters express concerns about the performance and complexity of using JSX, particularly regarding the need for a compilation step and the overhead of DOM manipulation.
- Several users advocate for alternatives to JSX, such as libraries like Lit, Vanilla.js, and Web Components, emphasizing their simplicity and efficiency.
- There is a discussion about the historical context of JSX and its inspirations, with references to older technologies like E4X and XHP.
- Some commenters highlight the benefits of using a virtual DOM, while others question its necessity and effectiveness in real-world applications.
- Several users share their own projects and libraries that aim to simplify or improve upon the JSX approach, indicating a vibrant ecosystem of experimentation.
39 commentsYou want to return a description of the DOM, rather than the real DOM, because you want to be able to reevaluate your templates repeatedly with new state, and efficiently update the DOM where that template is rendered to.
All the examples here use imperative DOM APIs to do updates, like with this:
function TodoInput(attrs: { add: (v: string) => void }) {
const input = <input /> as HTMLInputElement;
input.placeholder = 'Add todo item...';
input.onkeydown = (e) => {
if (e.key === 'Enter') {
attrs.add(input.value);
input.value = '';
}
};
return input;
}
class TodoList {
ul = <ul class='todolist' /> as HTMLUListElement;
add(v: string) {
const item = <li>{v}</li> as HTMLLIElement;
item.onclick = () => item.remove();
this.ul.append(item);
}
}
(The problem with VDOMs is that diffing is slow, a problem solved by using templates that separate static from dynamic parts, like Lit - a library I work on).
[edit] Oh also, this solution works really well for SEO. That's another problem I didn't find solved well in other JSX frameworks.
[1] https://engineering.fb.com/2010/02/09/developer-tools/xhp-a-...
https://github.com/tomtheisen/mutraction
It lets you do stuff like this.
const model = track({ clicks: 0});
const app = (
<button onclick={() => ++model.clicks }>
{ model.clicks } clicks
</button>
);
document.body.append(app);Another interesting thing is that other JSX libraries like Solid.JS also return DOM nodes, and I love that this idea is gaining traction
The closer we get to the platform we're using, the better. Being removed by layers of abstractions CAN be useful, but in practice, I haven't found a use for abstracting away the platform. (yet.)
Maybe huge projects like Facebook benefit from this tho (which I haven't worked on)
Here’s an app written using Vanilla TSX: https://github.com/wisercoder/eureka/tree/master/webapp/Clie...
Uncaught (in promise) TypeError: Map.groupBy(...).entries().map is not a function h("div", {}, [
h("p", {}, "this is easy"),
...list.map((l) => h("li", {}, l),
])
No better article than this: https://blog.vjeux.com/2013/javascript/react-performance.htm...
Was super productive and easy to create a Cloudflare Worker Web App that’s free to host thanks to Cloudflare’s generous 100k daily worker request limit.
Generally don’t believe in serverless for larger Apps, but for small websites that you just want to create, deploy and ignore - it’s great!
el = <button>Click me</button> as HTMLButtonElement;
el = html.button('<button>Click me</button>');
That way no compilation step would be needed and debugging would be easier as the code executed in the browser is the same code the developer writes.
After “How would they handle large data?” it turns into an unreadable mess.
Communication between elements is not covered, global deps, DOM updates scheduling, content projection, and so on - you “just don't need it” in small demo examples, but you do need it in the real apps.
Clojure datastructures makes this so much more enjoyable. Everything is just basic lists and maps which makes it very flexible and powerful.
[:ul [:li "task 1"] [:li "task 2"]]
It's weird that it's not more common for making web apps.
Not what you'd expect to see.
So I would like to explore the ability to use JSX in non-DOM environments. react-three-fiber does this with Threejs, but then it is still React oriented. I found this article about parsing JSX https://blog.bitsrc.io/demystifying-jsx-building-your-own-js.... And I know babel has something that parses JSX.
Does anyone have recommendations for doing this. Threejs to me a good candidate - a non React version, since it is a hierarchical system (scene, meshes, materials etc), but I suspect there are other applications.
I made an attempt to implement a Javascript version of Hickey's transducers - a sort of conveyor belt of functions and that is another instance of a series of processing steps that might be best represented in JSX
<html lang="en">
<body>
<h1>Web Components Examples</h1>
<h2>Counter Component</h2>
<counter-component></counter-component>
<h2>Clickable Button Component</h2>
<clickable-button></clickable-button>
<h2>Toggler Component</h2>
<toggler-component></toggler-component>
<script>
class CounterComponent extends HTMLElement {
constructor() {
super();
this.count = 0;
this.button = document.createElement('button');
this.button.textContent = this.count;
this.button.addEventListener('click', () => {
this.count++;
this.button.textContent = this.count;
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
class ClickableButton extends HTMLElement {
constructor() {
super();
this.clicked = false;
this.button = document.createElement('button');
this.button.textContent = "Click me!";
this.button.addEventListener('click', () => {
this.clicked = !this.clicked;
this.button.textContent = this.clicked ? "Clicked!" : "Click me!";
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
class TogglerComponent extends HTMLElement {
constructor() {
super();
this.on = false;
this.button = document.createElement('button');
this.button.textContent = "OFF";
this.button.addEventListener('click', () => {
this.on = !this.on;
this.button.textContent = this.on ? "ON" : "OFF";
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
customElements.define('counter-component', CounterComponent);
customElements.define('clickable-button', ClickableButton);
customElements.define('toggler-component', TogglerComponent);
</script>
</body>
</html>Mostly I just do Vanilla.js, but the vanilla DOM creation functions turn really verbose, I got tired of that and created this to cut back on code size and increase readability.
There are other libraries that do something similar, but in my own very biased opinion this is one of the better.
It looks simpler at first glance/ to a untrained eye; but it's just adding complexity without really solving any problems.
I like approaches like Kotlinx.html, scalatags, Elm's HTML package or HtmlFlow. They are also abstractions, but they add typesafety that html-as-a-string does not offer. On top of that you get breakpoints, code completion, and you can keep working in one language.
ultimately go to react.dev because: "Maturing is realizing React is best"
It started as a static site generator but added a bunch of support for client JavaScript too.
I would guess there is more overhead in creating a dom element than a JS object (which JSX elements compile to).
Related
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
Show HN: Launch React components in your app with no-code
A new feature called Collections enables non-technical users to deploy React components in web applications without engineering support, including air traffic controls for display management and a centralized rendering registry.