Virtual DOM is pure overhead

Tired of ? Code with vanilla and and gain

- interoperability
- lower learning curve
- long component lifespan
- better performance
- zero dependencies


Get started today with my book Fullstack Web Components: The Complete Guide To Building UI Libraries with Web Components available on Newline!

· · Web · 2 · 5 · 9

@iplayitofflegit one important thing to add; learn how to incorporate FLUX based state management.

@jerryD That's a great idea Jerry! I used only browser specifications in the book to demo the use value of web components having zero dependencies. Good idea for a blog post or other supplemental content coming out later this year.

@tanner @iplayitofflegit Use data properties and URL query parameters - that's what they are there for (also local and session storage). HTTP should be stateless.

@tanepiper @iplayitofflegit Sorry, I meant more the mechanics of it, e.g data binding and updating the DOM with getters and setters, observation of data etc.

@tanner @iplayitofflegit Gotcha, when I wrote Formula I did a bunch of observer stuff for the DOM for state - although not getters and setters, but used Svelte - although if I get time I want to make it totally framework agnostic

@tanepiper @tanner There’s a State decorator for in Readymade that enables one-way data binding in component templates, but at the expense of performance so I made it optional. In the survey that happens for web component libraries Readymade is in the middle of the pack with state management but near the top without. At the bare minimum Readymade is some decorators for handling template declaration and events, which keeps it small and performant.

@tanepiper @tanner the book follows a similar decorator pattern, so you can understand how libraries like Lit or Readymade work under the hood. In Chapter 4 you code a decorator pattern, not for state management. Kept the book so engineers only code with browser spec. Later there could be an update that implements the Context Protocol but that’s still in proposal status.

@tanepiper @tanner Context isn't a replacement for state management, but integral part that's missing IMHO. In the book, I go over three ways for components to communicate, best practices for declaring getters and setters (esp for form-associated), and there is a complex data model that renders a table, but chose not to employ a specific library because I thought it detracted from the mission, which was to be the best resource for . State is a topic for a blog post though.

Sign in to participate in the conversation
Designers & Developers

A community for web designers and developers to connect with like-minded fellas from across the globe.