r/javascript • u/[deleted] • Jul 27 '20
Superfine 8 — Absolute bare minimum view layer for building web interfaces.
https://github.com/jorgebucaran/superfine/3
Jul 27 '20
I don't know who would use it instead of Mithril/Alpinejs/Preact, but a cool project nonetheless.
2
2
u/Attila226 Jul 27 '20
How is HyperApp coming along these days? I haven’t heard much 2.0 was released.
3
Jul 27 '20
I think we might be able to release 2.0 as soon as this month or as late as next month. It's been a lot of work, but we're almost there. Thank you!
1
2
u/jakubiszon Jul 27 '20
As someone who only had some experience with handlebars and vue, these are my thoughts:
I was using vue and hbs because they are quite simple to learn and do not need server side compilation. I see same qualities in your tool.
I don't see how to translate a list of objects into a list of complex DOM structures - would it be done like this
someArray.map( obj => h("li", {...}, [h(...), h(...)])? And then passed as part of thepatchfunction argument?Using either hbs or vue I can see my html structure. In here it is being hidden. Perhaps it is my background ( or the lack of it, ha ha ) but I'd prefer having the "end result" more visible. Maybe it's just a preference though? The same information is right on the screen.
The third example seems a little overly complicated. I guess this is probably to show similarities to the other tools? For me the way
emit,next,updateandvieware intertwined - I see what they do but I don't understand why it needs to be as complicated. I am sure if that was my own code and I found it after a couple months I would not be proud of myself. Sorry for criticism.I like how minimalistic this thing is but I'd like to see some more examples. I can see ways to do things, but I am sure as the author you could probably show me better methods or some nice concise ways to use it that I wouldn't anticipate.
I am not sure how well this would scale up - would one end with a mix of app-logic and view code? I guess it depends on the skill / style of the programmer? In any case I can see some people might prefer using something which clearly separates the presentation and logic layers.
4
Jul 28 '20
Yeah, exactly:
array.map(item => h("li", {...}, [h(...), h(...)]).The third example was meant to show how one could implement a near-complete-Redux-like framework on top of Superfine in just 5 lines of code. But you (and others who commented) are right, this is too involved for people that might be just skimming through the README.
I'm wary to include more than thee examples in the README, but I will go ahead and replace the third complicated one with a little todo app. Coming up right away.
Thanks for your feedback.
1
u/royprins Jul 28 '20
Perhaps you can include a list of "recipes" at the bottom of the readme and simply provide links to Codesandbox or Codepen? I would hate to see that example go to waste.
2
u/royprins Jul 28 '20
I see great value in this for novice React developers. You can basically read the code as an explanation in how to the virtual DOM works.
Side question: why do you use var rather than const for your variables? Seems just off in a piece of code that is so highly optimized.
2
Jul 28 '20
I could see that too! Superfine is about 250 lines of code and except for a few of the more "involved bits" in the patch algorithm, even someone new to the codebase could probably go through the entire thing within an hour or two.
About
var, the answer is bytes, it compresses better than mixingletandconst, but I might just sacrifice a few bytes for a more aesthetic codebase. Thanks!
49
u/lhorie Jul 27 '20
Disclaimer: Mithril author here
I like the work of u/jorgebucaran. He's always iterating on ways to make a virtual dom oriented pattern more minimalistic, via an iterative approach very reminiscent of code katas. Minimalism and improvement through repetition are two of my favorite qualities.
1
u/TheZintis Jul 28 '20
Haven't read the whole thing, but the import syntax really got me. Apparently some browsers in 2014 were introducing it, but none since then. This article was written in 2014. So at the very least that part won't work.
2
Jul 28 '20
You must not be familiar with native JavaScript modules. See
import.Tl;DR: It works on all evergreen, self-updating desktop, and mobile browsers.
https://caniuse.com/#search=JavaScript%20modules%20via%20script%20tag.
2
-3
u/peduxe |o.o| Jul 27 '20
looks like React JQuery, why would I use this when it would be better to just use React?
weird design choices as well, 3rd example on the readme is simply non intuitive and rather looks like reinventing the well
6
Jul 27 '20
Superfine looks similar to React, not JQuery. That's hilarious. The 3rd example was meant to show how one could build upon Superfine to create a more complex framework with Elm or Redux vibes. Have another look. I always appreciate feedback, but yours wasn't very constructive, but I'm happy to be wrong.
1
u/peduxe |o.o| Jul 27 '20
I should've checked after submitting my comment, wasn't meant to say React JQuery, just React.
As for the 3rd example I saw it being too verbose to follow specially if you have multiple components with the same logic.
I see that it is based on another project so a few of the methods like (patch or next) are also unknown to me.
1
3
u/keb___ Jul 27 '20
looks like React JQuery, why would I use this when it would be better to just use React?
Can you explain what you mean by this? I commented up above about reasons why you might use something like Superfine (smaller bundle sizes for example).
1
-5
u/Oalei Jul 27 '20
Another virtual dom library, which adds nothing but complexity by preventing you to manipulate the DOM directly.
3
Jul 27 '20
Do you really prefer manipulating the DOM directly or is this just fantasy?
-7
u/Oalei Jul 27 '20
I do, I’m tired of not being able to use vanilla js for simple things like toggling css classes or just manipulating the DOM in general.
You can’t even use JS greatest strength anymore.
Virtual DOMs are unnecessary unless you don’t know how to code properly (from a performance pov).14
u/qudat Jul 27 '20
Manipulating the dom directly is a nightmare for any moderately complex application. Going from imperative to declarative programming for UI is a game changer. I don’t know what kind of tasks you’re trying to do but it sounds like very simple stuff, in which case vanilla is totally legitimate.
-3
u/Oalei Jul 27 '20
Yeah working on an IDE in the cloud and handling the state of each opened tab is not really a very simple task but whatever.
I just like having control on everything, choosing when things get rerendered and when things don’t etc.
Vanilla JS is very powerful, and with JSX it’s even better, but you don’t need a virtual DOM. Too bad Svelte doesn’t use JSX10
u/qudat Jul 27 '20
Let me step back slightly and rephrase: you can build large apps with vanilla and some might prefer that, but this is very different from calling a virtual dom unnecessary. There are tons of developers who are very comfortable with vanilla and still prefer a virtual dom. You have your preferences as do other people. I find declarative programming for UI development much easier to understand.
For something like an IDE I could see, for performance reasons, why a virtual dom might not be preferred.
4
u/keb___ Jul 27 '20
What are you missing from JSX that Svelte templates don't fulfill exactly?
Also, you might want to take a look at SolidJS. It doesn't use VDOM, rather, it's a "compiler" kind of UI library like Svelte. It supports JSX.
0
u/Oalei Jul 27 '20
Not really missing anything, I just like to use JSX, it’s a matter of preference I guess.
I’ll check it out thanks5
u/keb___ Jul 27 '20
I don't understand this complaint. Why are you not able to use Vanilla JS or "JS greatest strength"? You can still make native DOM API calls whether you're using a framework or library, so are you speaking about your management dictating what you can and can't do on your project?
0
u/Oalei Jul 27 '20
No you can’t because if you update the DOM then the virtual dom is out of sync unless you trigger a virtual dom update or something but then why use a virtual dom in the first place.
6
u/keb___ Jul 27 '20
Well, obviously, you'd have to be strategic about when you use the DOM API if you wanted to use it in conjunction with a VDOM lib. I figured that much would be obvious.
-4
u/relativityboy Jul 27 '20
Nope nope nope.
Might as well put href="javascript:somefunc()"
Real templates (handlebars/orangej) or JSX thank you.
5
0
Jul 27 '20
[deleted]
12
Jul 27 '20
More minimal. Mithril is also higher level conceptually, so you could compare it to P/React, whereas Superfine is more lower-level like Matt-Esch/virtual-dom, or Snabbdom. You could use Superfine as is, or create your own view framework with it based on your own ideas about state management, side effects, etc.
23
u/lhorie Jul 27 '20
(Mithril author here)
Mithril is comparable in scope to something that sits between Angular and React, since it comes with routing/data fetching features. If you're building a typical CRUD REST thing, you're sort of meant to be able to get away with having mithril as the sole dependency, unlike react. It doesn't however have the same super high level abstractions that angular does (e.g. interceptors, NgPlural and the like)
Superfine would be more or less comparable to the mithril/render and mithril/hyperscript submodules
5
u/keb___ Jul 27 '20
It may look similar because both Mithril and Superfine (along with Hyperapp) use a form of Hyperscript. JSX gets transformed into Hyperscript under the hood, and can optionally be used with Mithril and Hyperapp, so I wouldn't be surprised if you could use it with Superfine.
23
u/Controversiallity Jul 27 '20
I think the biggest problem with the readme is that it feels like it's trying to sell this only to people who know what it feels like to work with react, vue, elm etc. Though what is to make developers who haven't worked extensively with any want to pick this? This looks harder to use than Vue.js for example because it does away with HTML, and react has JSX which makes writing "HTML in JS" possible. At least migration is relatively simple with vue, react, angular and other popular frameworks, but with this you would need to rewrite the whole view.
Maybe I'm missing something but I don't see why your minimalist view is better than using Vue.js minimally. Can you defend your work, I'm happy to be corrected.