Plug: I work on Million.js: <1kb virtual DOM - it's fast!
TL;DR
Virtual DOM needs to leverage the compiler, so that unnecessary di...
For further actions, you may consider blocking this person and/or reporting abuse
I don't understand. What is it that React or another virtual DOM library can do, that Svelte can't?
They both create and update DOM elements - both support loops, conditionals, components, state, and so on.
Something like Sinuous can even do precise updates without virtual DOM, like Svelte, without the compile step or static analysis, JSX being an optional convenience.
What is missing that makes virtual DOM still worthwhile?
Here's a clarification on that point: dev.to/aidenybai/comment/1gkdi
Sorry, that didn't help me either. Can you give a concrete case/scenario where this difference would come into play?
In terms of concrete examples WHILE being very different, other people on dev.to might have more experise to provide a better example. Examples I can think of right off the bat might be:
Why does React have FC while svelte has .svelte files? Why does React have JSX while you can write practically html/css/js in Svelte? Why does React have hooks while svelte you can just declare a function and attach it using a directive?
Generally, I think it's because React depends on vdom, where JSX was basically made for constructing vnodes, FC was made to make components from vnodes, and hooks based off of FC.
Svelte literally compiles down to near imperative operations, meaning that their API design can be much more radical in the sense that it's constrained to certain API decisions, but unrestricted from JavaScript (kind of), while React is constrained to the API of JavaScript, but at the same time is restricted to JavaScript.
I think that's a peculiar point of view. From my perspective, libraries like React or Sinuous aren't restricted to JavaScript, they're enabled by it - the fact that you get access to the entire language gives you degrees of freedom. Whereas something like Svelte or Vue apparently want to usurp or replace JavaScript rather than leverage it.
I mean, I get what you're saying - that e.g. Svelte isn't limited by JavaScript; they can change or enhance it as they see fit. There is more room for creativity. But there's also limitations to that approach - for example, React users naturally got access to Typescript, whereas Svelte users have to wait for the maintainers to make that possible. It kind of exists in it's own little bubble outside the JavaScript ecosystem proper. Whereas React and Sinuous exist within that sphere.
I've never been fond of tools that take away responsibilities from the language and platform and try to reinvent, subvert or displace them. I'm more impressed with projects that attempt to build within the constraints of the language and platform, than with projects that try build around it. Projects that build within are generally simpler, whereas projects that build around tend to be massively complex and have to reinvent the wheel. I like simple things.
I get where you're coming from, and that's a really good point. I also add that a library can be both enabled and restricted by a language.
I really like your perspective! I have a question though: From my personal experience, libraries like React do simple things really well, but as more and more complexity is introduced in your application, it becomes more and more unweildy. You could argue that increased abstraction could simplify complex use cases but make simple use cases very difficult. Sort of like a balancing act.
That sounds right (and I promise I'm not just trying to be Mr. Opposite here) but again, my experience is the opposite: more abstraction tends to favor simple use-cases - the ones the author was able to conceive of.
Big libraries tend to make easy things easier, which I find unnecessary and restrictive. Complex abstractions tend to be tailored towards a very specific "happy path" - whatever the author thought was "right", or whatever the pattern he got tired of repeating. It tends to get in the way of complex use-cases, if they don't happen to fit well with the abstraction.
On the other hand, they can of course speed the development of things that are a good fit - but that's what I would call "large" or "repetitive" use-cases, rather than really "complex", by which I would mean something that isn't your average everyday problem.
Where I grow tired of the big, complex libraries, is that, if a project is large or runs long enough, you will run into one of these cases that requires you to break outside the "happy path". At that point, you're going to "pay back" some of what you saved by making easy things easier.
So I'd just rather not. I like small, simple things that focus on the hard problems and don't try to make things easier if they're already easy. In many cases, the big abstractions are focused on reducing lines of code or making things more "elegant", which usually also means taking away choices and options, increasing (but hiding) overall complexity, and making things less transparent.
To provide you with a real world example, consider state management in React. When you first learn about it, it's just
setStateoruseState, which seems really simple, until you realize it only really works well for control state, and not so well for application state. So you end up with props, component state, and some form of application state, maybe contexts, some patterns, or even more abstraction: a third-party library. Complexity spreads.Now in contrast, consider the state management mechanism in Sinuous: observables, which work exactly the same everywhere. If you want component state, you create observables in your component - if you want application state, you create them somewhere outside your components. There's only one way to create and use state. You have to learn one pattern and use it correctly, and it's maybe a bit more verbose than some of your favorite state management approaches in React, but then that's it. You're done. It generalizes really well. You're not going to learn bit by bit how to solve this or that state problem, and you're not going to evaluate a bevy of state management libraries, or spend months becoming an expert at various state management patterns that might be better or worse for this or that.
Don't get me wrong, I'm not promoting Sinuous (which, full disclosure, I really do enjoy) and it might have drawbacks in other areas where React or Vue or whatever does better - but in this one area, it's just a beautiful example of "right amount of abstraction", which, in my book, tends to be "as little and as general as necessary".
Do you know Rich Hickey? If you haven't seen "Simple made Easy", go watch that. In my opinion, it's the most important video on software development there is. Completely changed my perspective, in ways that have made me much more productive, successful, and happy with software development. In many ways, successful software development is less about picking the right tools, and more about avoiding complexity - choosing simplicity. 😄♥️
Wow, thanks so much for this. Sinuous looks really cool! It looks like a really great hybrid between the Vue composition API (which I think was derived from the concept of observables) and lit-html, and I can see why you would think it's great. I've been looking around for a daily-driver library for a while, and this seems like it is a really good fit!
Side note: I was looking through the readme and I'm not sure if this was an inconsistency or a progression of timeline I missed:
I'll be sure to watch that video. Thanks so much for your time, this has made me realize I still have so much to learn and experience
Good idea, tho I believe in the future more and more solutions will avoid virtual DOM 😉 Like Svelte, which is essentially a compiler 😉
Like Solid too
What about SolidJS?
What part of SolidJS?
SolidJS compiles down the way Svelte does and runs in the DOM. There is no virtual DOM. And it is extremely fast -- slower only than vanilla JS. And truly reactive, like RxJS. Is uses JSX as its templating language -- no VDOM needed. It can be used with Web Components. You can use native DOM events, etc.
What does Million.js give me that SolidJS lacks? What problem are you solving that SolidJS hasn't already solved? You might chat with @ryansolid about it if you're really interested in hearing an alternative view from the source.
Million.js isn't competing in the same field as SolidJS -- Million.js is a Virtual DOM engine, which libraries can be built off of (e.g. React), and SolidJS is a fully fledged library.
Million.js attempts to use techniques specified to reduce diffing (the main bottleneck of Virtual DOM) by assuming that the library developer will leverage the compiler to optimize.
I see. I guess if you want to stick with React or Vue or whatever (they have huge ecosystems), then it does make sense. I'm not sure I see -- if the SolidJS approach works -- what the advantage is that makes building yet more VDOM-based libraries/frameworks. But maybe it's just me.
Now I have a project I can study and tweak. Thanks for sharing!
Happy to help!
Love the project, still waiting for more posts about Million :D
can we use it with JSX
Yep! It's intended to be used with JSX
how to use it with webpack, and can I use it with next js
You probably have to use a bundler
What about no vdom and no compiler? 🤯
Virtual DOM in only runtime suffers from the pitfalls specified here: dev.to/aidenybai/million-js-the-fu....
i have created something like this in the past but its just the conversion from json to html, no editing or other features
Nice!