16 ms·
UnsuckJS: Progressively enhance HTML with lightweight JavaScript libraries
- ilrwbwrkhv 3y agoWhat's great about Mithril is that is squeezes a router in that tiny size. None of the others have that I imagine. If you do need a full blown single page app, Mithril takes care of it all.
- nullwarp 3y agoYes! I don't think Mithril gets enough attention. It's my go to JS framework when I need more than Vanilla JS but don't need something like React.
- ilrwbwrkhv 3y agoWhy would you ever need React over Mithril?
- skrebbel 3y agoColleagues, ecosystem
- jrajav 3y agoThe ecosystem, if you're building a product of a certain complexity and can't afford writing large, complex, un-battle-tested views from scratch.
- ilrwbwrkhv 3y agoWhat's an example of a large, complex, unbattle tested view?
- mhio 3y agoMaterial Design
- slmjkdbtl 3y agoDid you ever run into performance problem with Mithril? I like how simple it is to use but the idea to run / diff the entire component tree on every user interaction kinda scares me
- toastercat 3y agoI've been using Mithril since 2017 or so. The answer is: no. To give you a production example, Mithril is used in the video game Guild Wars 2 to render the marketplace in-game and the lead web engineer reported that it was performant enough for their use-case [1]. (I've played Guild Wars 2 and never noticed any issues with it, so good enough for me). In most cases, your bottleneck won't be Mithril (or React for that matter), but instead what expensive computations you're doing in your components. While React has React.memo, Mithril has the `onbeforeupdate` hook [2] you can use to memoize components if you need it. [1] https://carlmungazi.github.io/sourcecodeadventures/posts/pat-interview https://carlmungazi.github.io/sourcecodeadventures/posts/pat... [2] https://mithril.js.org/lifecycle-methods.html#avoid-premature-optimizations https://mithril.js.org/lifecycle-methods.html#avoid-prematur...
- naasking 3y agoSee benchmarks: https://krausest.github.io/js-framework-benchmark/2023/table_chrome_114.0.5735.90.html https://krausest.github.io/js-framework-benchmark/2023/table...
- endofreach 3y agoHaven‘t heard of it yet. Sounds exactly like what i needed many times lately. Thanks!
- canadiantim 3y agoLooks great, love the list so thanks for putting it together. In an ideal world your table would also have a first commit row that way I can better compare how well established each library is (GitHub stars mostly does this but date of first commit would help give sense of momentum too)
- adparadox 3y agoI didn't post the site to HN, but I did create it. Adding the first commit is an interesting idea. Or some way to measure longevity (i.e. how long has the library been worked on). I'll try to figure out a good way to do that or if you put up a PR I will take a look at it: https://github.com/adamghill/unsuckjs.com https://github.com/adamghill/unsuckjs.com.
- noizejoy 3y agoNice idea! I was just surprised to see the table rows and columns opposite of what I’m used to seeing in lists where one dimension is more likely to grow much longer than the other. i.e. I would have expected the libraries as rows, rather than columns. More like such lists are typically done in Wikipedia.
- adparadox 3y agoIt definitely might make more sense that way! I was playing around with different ways to display the data and landed on this approach even though maybe it's a little clunky. I could flip it and see how it feels -- thanks for the suggestion!
- moozeek 3y agounpoly.com would fit this list (can't PR on mobile)
- Danjoe4 3y agoYou can do a lot with Django templates. Sprinkle in any of these and I find it unlikely you'll be reaching for React. Although if you have lots of React experience I am a believer in "use what you know". Tool familiarity > trimming dependencies
- LordDragonfang 3y agoDjango templates are nice, but fall flat if you want to do anything remotely dynamic with your model. The fact that you need to define custom template tags for things as simple as getting an attribute from a dict in your model is a real pain point.
- no_wizard 3y agoIf you use the Jinja bridge you’ll have an easier time all around I think
- LikeAnElephant 3y agoCompletely agree. I honestly always thought Django Templates mostly were Jinja2, until I looked more closely and realized how wrong I was. Since then I exclusively use Jinja2 in my Django apps and my life is so much better.
- samwillis 3y agoThis is a brilliant list, I'm a particular fan of HTMX and Alpine.js. The move back towards small dependancy free JS libs, in combination with modern JS ES Modules, is absolutely brilliant. I learnt web dev back in the late 90s by doing "view source", and was still learning about new things that way well over a decade later. If we can move back towards that, by not having a build step, it will be amazing for new devs starting out and learning new things. Obviously larger apps, with many dependancies, will require all the incredible work thats gone into modern JS tooling, but for so many simpler (and not so simple) sites this process really does make sense.
- kitsunesoba 3y ago> I learnt web dev back in the late 90s by doing "view source", and was still learning about new things that way well over a decade later. If we can move back towards that, by not having a build step, it will be amazing for new devs starting out and learning new things. Same here, and I couldn't agree more. Had minified library soup with dynamic page content been the norm back then it would've been much harder to get started, and there's a high chance I would've just given up somewhere in the process. Having a build step also increases activation energy and friction which impedes the sort of in-the-moment tinkering that often sparks projects.
- dheera 3y ago> Having a build step also increases activation energy and friction Yes this! As an interpreted language it should not need a build step. Every project should be git clone https://github.com/user/foo && cd foo && google-chrome index.html
- Zelphyr 3y agoYou guys are singing the song of my people. For years I've been confounded at the idea that we need to be building/compiling interpreted code. And the tooling... my God! I know this makes me sound like an old man (because I am) but, it used to be all I needed was an editor, an FTP client, and a browser. write-upload-refresh. Today, I find VS Code, `git push`, and a browser still serves me very well.
- satvikpendem 3y agoI can do the same thing via NextJS and output pure HTML and CSS without any JS at all. Or with server components, output only the minimal JS needed. Not sure why everyone wants to write a programming language inside HTML like lit does.
- spankalee 3y agoHow is Lit's use of JS in templates any different than JSX? Both use JS for expressions and control-flow.
- ReD_CoDE 3y agoJSX is expensive than JS, because JSX first needs to become JS, then other things happen
- spankalee 3y agoThat doesn't speak to this comment: > Not sure why everyone wants to write a programming language inside HTML like lit does When that's exactly what the OP's suggestion of React does.
- earthboundkid 3y agoThere are a bunch of server side apps that turn JSX into static HTML with no JS. It’s just a template language that compiles into JS but you can do anything with it you could do with other template languages.
- FireInsight 3y agoThe king of "use JS frameworks, output pure HTML" is Astro. (https://astro.build/ https://astro.build/) It's basically an SSG where you can use a number of frameworks to write your components, and shipping any JS is explicitly opt-in.
- satvikpendem 3y agoAstro is pretty nice too, I was going to write my blog with it but I liked the instant page transitions that NextJS provides out of the box for which I couldn't find a suitable solution in Astro.
- FireInsight 3y agoI get these for when your stack contains python/go/ruby and your page is SSR. But more recently I've just come to enjoy the full blown Javascript Framework. I use Svelte exclusively, and the bundle sizes aren't too large thanks to the compiler. I can write TS which is way more comfortable than JS or even Python or Go IMO.
- PaulHoule 3y agoYep. Myself I am working with HTMX and thinking about how the back end framework changes to make the most of HTMX. For instance I have a screen that has a bunch of dropdown inputs that automatically post changes to the server when you flip them and sometimes the options change when you flip them. The dropdown is defined in a macro that can be used in a template or that can be directly sent to the server. HTMX also can update several things in one request: for instance when I add a new RSS feed to YOShInOn it has to (1) insert the item into the feed, (2) tear down a modal dialog, and (3) update the count of the number of feeds. You very much need a server-side framework that makes it routine to do all that.
- spankalee 3y agoYou can get small sizes, great DX, first-class TypeScript support, all without the compiler though.
- FireInsight 3y agoBut I like the compiler.
- tbeseda 3y agoFor the sake of a compiler? I'd rather not add complexity for complexity's sake. Or does it give you another advantage not mentioned above?
- FireInsight 3y agoWell, I like the idea of a compiler, that doesn't include "the framework" as a bundle required to run my code, but bundles up my code itself as being functional without "the framework".
- amadeuspagel 3y agoThe table is a bad format for this.
- deleted 3y ago[deleted]
- DaiPlusPlus 3y agoThe bottom row of the table is "IE11 Compatible". ...IE11 hasn't been relevant on the public-web for at least a decade now, and I'm fairly sure it's now entirely gone from corporate/enterprise situations now too, given MS' even-more-aggressive-than-usual campaign to kill it off in Feburary of this year: https://www.cnet.com/tech/services-and-software/rip-internet-explorer-microsoft-kills-off-legacy-browser/ https://www.cnet.com/tech/services-and-software/rip-internet... ...why is that there? It's weird - it's like saying iPhone 14 is not compatible with 30-pin dock-connectors.
- adparadox 3y agoIt's there because some libraries explicitly call it out as a benefit so I included it. The code is OSS (https://github.com/adamghill/unsuckjs.com https://github.com/adamghill/unsuckjs.com) -- feel free to make a PR to be the change you want to see in the world.
- tylerrobinson 3y agoNot true. There are still legacy use cases where IE11 is required for support in enterprise and regulated businesses. Ending soon? Hopefully. But not gone.
- daveoc64 3y agoInternet Explorer 11 is still supported in Windows Server 2022, which goes out of support in October 2031. It's also supported in Server 2016 and 2019. It's also supported in Windows 10 LTSC versions for large companies. IE 11 mode for Edge is also supported until at least 2029 on all currently in-support Windows operating systems. So it can be very relevant if you have legacy systems that still need to be maintained.
- earthboundkid 3y agoAnd McDonalds released a game about Grimace’s birthday for the Game Boy Color this week. It’s still not a relevant gaming platform for 99% of developers.
- SkyPuncher 3y ago
- smusamashah 3y agoThere should be another row that which of these can be included as a standalone javascript lib in html instead of requiring NPM.
- adparadox 3y agoNot requiring NPM was one of my original requirements for anything on this list. All of these libraries should be available from HTML directly -- let me know or make a PR if that isn't the case.
- smusamashah 3y agoI looked at the first one on the list "lit" and the very first thing it says on github is to install via npm.
- spankalee 3y agoThat's because the vast majority of the JS ecosystem installs libraries via npm. We can't really put all of the different ways to use Lit on the front page, but we document how to use Lit from a CDN right on the getting started page: https://lit.dev/docs/getting-started/#use-bundles https://lit.dev/docs/getting-started/#use-bundles
- hluska 3y agoIf you read the documentation, you’ll find these links: Core - https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js All - https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js
- vxNsr 3y agoMaybe you can add that somewhere in subtitle somehow? as it's not immediately clear
- adparadox 3y ago
- aarpmcgee 3y agoPerhaps Crank.js[1] would belong on this list [1]: https://crank.js.org/ https://crank.js.org/
- adparadox 3y agoThanks for the recommendation -- looking through the docs, it seems like it fits! I'll add it in a few or feel free to make a PR.
- 11235813213455 3y agoWhere is preact?
- adamzochowski 3y agoI don't think preact is part of the "progressive enhance html" Progressive enhance HTML means whatever backend you use, it spits out html, and the HTML is rendered without Javascript. Preact fails this. The libraries are meant to progressively enhance html by replacing or enhancing certain actions with small javascript. For example, with htmx, usually clicking on html link would load complete page, but with clever htmx directive, the link onclick will only load/replace what is needed. Think of progressive enhance html as html first. As the page working even if javascript is disabled.
- badbotty 3y agoThat doesn’t describe mithril which is on the list though
- examplary_cable 3y agoAwesome list! I love that the cognitive overhead for web apps now is so great many people are "returning to monke" and coding in simple HTML/CSS/JS haha. Question: Shouldn't the items be in the row so I can see all of them at once? Why are the items in the columns? I'll open a issue (:
- FireInsight 3y agoOn mobile, I actually think it's pretty good like this. The names of the fields should stay visible when scrolling, though. Maybe this could be made reactive?
- adparadox 3y ago>Shouldn't the items be in the row Maybe! I was messing with different UI approaches to relay this data and this made sense to me, but I'll see if switching to rows is more clear. Thanks for the idea!
- mNovak 3y agoThe column layout is basically impossible for me to meaningfully navigate on my laptop -- the scrollbar and descriptions don't both fit on the screen (appreciate the repeated titles at the bottom, but ultimately they don't say much)
- examplary_cable 3y ago> The column layout is basically impossible for me to meaningfully navigate Same. Somebody said it was done this way because of mobile. I'm not sure. It's just weird to see "items" horizontally and properties vertically. I'm usually familiar with: prop | prop | prop item | value| value item2| value| value
- bmacho 3y agoDon't you have horizontal scrolling on your laptop? Edge of the trackpad, or 2-3 fingers?
- 3y ago
- vxNsr 3y agoCool idea! nice to see these all in one place. one suggestion, on non-ultrawide screens when you scroll you no longer see the left labels, would be cool to have them float when you start scrolling left so they're always visible.
- xnx 3y agoGreat resource. I initially skipped clicking on this because I thought "UnsuckJS" was yet another JavaScript framework.
- tln 3y agoI'd love to see a list of heavily interactive sites that use the HTMX technique. I believe Github uses something like HTMX + ActionCable, and it shows how good that experience can be (and some limitations). But I think it's in the small minority. It'd be nice to know of more examples, instead of just more libs.
- danielvaughn 3y agoSame, it seems like the kind of thing that would be highly useful with light interactivity, but may not scale well. I also haven't really spent much time in it, so idk.
- mikepurvis 3y agoI haven't studied the guts of it, but I've been impressed recently with Github. It feels like a normal, page-by-page application, with human-readable URLs, and none of the usual SPA shenanigans as far as after-page loading, infinite-scroll nonsense, or broken back button behaviour... but then stuff happens like a page that's sitting open on a PR automatically pulls new comments as they are posted, and it looks identical to if that page was loaded afresh. Spiffy.
- canadiantim 3y agoI very much agree. GitHub is always a source of inspiration for me design-wise
- caseyf 3y agoHey.com is one.
- tln 3y agoGood example, thanks. Also Basecamp
- BeefySwain 3y agoGreat list, I went ahead and added it to the bottom of my "Awesome" Python HTMX page: https://github.com/PyHAT-stack/awesome-python-htmx/tree/main https://github.com/PyHAT-stack/awesome-python-htmx/tree/main
- dmje 3y agoSo interesting, and refreshing, to see the tide gently turning in this direction :-)
- l5870uoo9y 3y agoLightweight is good, but above all I want a productive JS library. Perhaps I should just make the switch from React to Svelte.
- WinstonSmith84 3y agoSurprised to not see Qwik. It's probably more a framework than just a HTML enhancer, yet it fits very much in that philosophy of reducing JS to the very bare minimum
- FireInsight 3y agoSo does Astro, many others. These are frameworks with no build steps that can be included from a CDN, though.
- nathias 3y agodo not use lit and webcomponents under any circumstances, please
- markhesketh 3y agoWhy not?
- nathias 3y agoIt sucks so much its unreal, forces OOP JS, which causes extreme amounts of boiler plate code and mutation bugs, making a simple change becomes a one week task. I'm just doing a complete rewrite of a legacy codebase made with TS, webcomponents and lit into a modern framework, which is about the only sane thing to do with it.
- BeefySwain 3y agoI would love to see a more fleshed out rebuttal of it. Is it a scale issue?
- nathias 3y agoWeb components were invented to make components more reusable independently of frameworks, nice, but turns out frameworks kept improving and now code is much more reusable between any modern framework (react/svelte/vue) than with web components. They are fully enapsulated and a pain to style, so if you don't need that encapsulation for some reason, you should not use them. Lit is a framework for using web components, managing state and routing, it adds lots of boilerplate and uses OOP hierarchies to couple abstractions that could be otherwise separate. Lit uses object properties to detect changes and provides rerendering of the changed parts of the app. This combo makes it work so terrible, you're orcestrating encapsulated components within inheritance chains and each part has a lot of boiler plate code and a lot of mutation. Its separating encapsulation by technology instead of concern, and enforcing this really hard. The end result is code terrible to read and very hard to change, full of mutation bugs and broken flows that don't properly update.
- coreyp_1 3y agoIt would be handy to see the license. It's becoming increasingly more dangerous to use anything in the GPL family for anything but the narrowest of use cases. It's to the point that, even now, if it's GPL I refuse to incorporate it, even in personal projects. And I'm not against open source... Everything I write is MIT.
- musicale 3y agoWhat changed to make GPL more "dangerous" - and to whom? I was under the impression that nearly every Linux distro uses GPL code in the kernel and/or userland.
- coreyp_1 3y agohttps://www.gnu.org/licenses/gpl-faq.en.html#SystemLibraryException https://www.gnu.org/licenses/gpl-faq.en.html#SystemLibraryEx... The GPL carves out exceptions for the use of system libraries. But, as for the "dangerous" part: * I work in an industry in which software patents are required to survive. Personally, I hate software patents, but it is a reality until the law changes. As such, the GPL invalidates patents, making anything GPL completely off limits. That means that I would not have a job, and then there would be fewer competitors in the marketplace, which would make prices rise considerably. Too bad, too, because we would donate back improvements that are general enough to benefit others. Rather, now we just use proprietary solutions wholly because GPL is a minefield for us. * I have personal projects. I write code that I want to use myself as well as allow others to use. I use MIT because GPL discourages that somewhat (the point above). I may want to use my personal projects commercially some day. MIT allows that; GPL makes it impossible. In other words, if I choose GPL today, I have poisoned that code from myself for the rest of my life. In short GPL is not "free" as in freedom, because it comes with strings attached. It's communist in philosophy, but I hesitate to say that because then everybody jumps to some *a priori* conclusion of what they are now convinced that I'm saying, without listening to what I'm actually saying. GPL says, in short, that the software is freely available for public use, but not for private use. (Yes, there are nuances to that, so much so (and so confusing) that most people either just ignore it, or say "IANAL...") It demands that 100% of the work of anyone in the future must be donated back to the collective for free. That is not freedom. Create as much GPL code as you like. I create MIT. You can use mine (and I'm happy for you to!), but I can't use yours because of the restrictions you put on it. We can let the future decide which is more "free".
- drschwabe 3y agoNice to see sprae on there it's handy when you want reactivity with minimal fuss. I would lobby for featuring Webreflection's uhtml it is a workhorse for me personally.
- nektro 3y agorows and columns should be switched
- kurokawad 3y agoam i the only one who finds weird the table distribution? like having the libs on the horizontal axis
- Blackthorn 3y agoIt's good that I know what htmx is already, because that description is kinda bad it doesn't really describe what htmx actually does to progressively enhance html.
- recursivedoubts 3y agogreat list but needs https://unpoly.com https://unpoly.com, which is explicitly focused on progressive enhancement in a way that htmx is not yeah, it's bigger than most of the other libraries, but it does an absolutely excellent job on progressive enhancement source: i'm the creator of htmx edit: PR here: https://github.com/adamghill/unsuckjs.com/pull/13 https://github.com/adamghill/unsuckjs.com/pull/13
- deleted 3y ago[deleted]
- timlwhite 3y agoGreat list. Site is clear and easy to read!
- acaloiar 3y agoGreat list! To the maintainer: Cloudflare is mangling your HTML and redacting lit's `@version` with `[email protected]`.
- adparadox 3y agoYikes! Thanks for letting me know. I'll fix that asap.
- KennyBlanken 3y ago> Zero-dependency, build-free framework for the artisanal web. It's extremely difficult to take anyone seriously when they claim their framework is for the "artisanal web."
- endofreach 3y agoI love that so many here share the sentiment. I never liked reactjs. Started to use vue for almost all frontend needs. But even knowing what i do, it‘s way too much tooling just to get started. Now i despise all the frameworks & libraries and go vanilla 9/10.
- 65 3y agoSort of unrelated but I find it ironic this website is written in Python. It's a single HTML page. Make it a static site and host it for free/low-cost on S3 or something. Why do you need to host this website on a server, use Docker, etc? My personal blog is a static site using Next.js, I pay $0 to host it on S3. To me this is less about simplicity and more about being anti JS ecosystem, and being different just to be different. Any legacy site probably has some kind of Javascript framework, jQuery, or something set up where adding another library on this list adds complexity. Any new site that requires a decent amount of interactivity would probably be better with a battle tested framework like React. I've tried many of the libraries listed here, have tried the view engine + Alpine approach, etc, and time and time again I find it's simpler from a development perspective to just use Next.js. That is to say, for any hobby project, use whatever you want. Try new things. But for production apps, just use React.
- adparadox 3y ago>I find it ironic this website is written in Python. It's a single HTML page. Make it a static site and host it for free/low-cost on S3 or something. Why do you need to host this website on a server, use Docker, etc? Originally it _was_ just HTML + CSS, but I wanted each library's repository metadata (latest version, last commit, etc) to be dynamically retrieved and doing that client-side was brittle and way too slow. So, I used it as an excuse to see how far I could push my own personal static-site framework (https://coltrane.readthedocs.io/en/latest/ https://coltrane.readthedocs.io/en/latest/).
- DangitBobby 3y agoYep. Just today I was working on a project that I started as a simple set of forms with HTML, CSS, and light vanilla JS + jQuery which over time has naturally accreted a bespoke event-handler framework (really not a bad one, all things considered), wishing I had just done it in React from day 1. Now we are battling complexity every day to support a highly interactive app and we're going to have to try convince the client to give us some time to refactor for some breathing room.
- jgalt212 3y agoalpine.js is pretty clean, but every time I've been tempted to use it, I'm reminded that we have to load jquery because many pages are heavily dependent on datatables.net. And there is no way we are dropping datatables.net.
- earthboundkid 3y agoLol, Stimulus got jacked.
- 5350-uiop-1130 3y agowhy isn't some kind of baseline state/reactivity/ajax built directly into html standards by now. there are too many ways to do the same thing in webdev. it's so stressful. each approach has its own trade-offs and edge cases you not might find until the eleventh hour..
- slekker 3y agoIf I understood correctly Lit tries to be that
- azangru 3y ago> Lit ... IE11 Compatible Not for long :-) I believe they are dropping IE11 support in a version that is coming out soon. (But then, IE support these days is such an edge case. No pun intended.)
- JodieBenitez 3y agoI was praising HTMX the other day when someone pointed me to Unpoly. Indeed, after I converted one of my apps to it, Unpoly is really a better version of HTMX and I think it deserves more exposure. https://unpoly.com https://unpoly.com
- spinningslate 3y agoAlso an HTMX fan and hadn't heard of unpoly. Looks interesting (and site design is great). Thanks for the highlighting.
- JodieBenitez 3y agoRelevant discussion: https://news.ycombinator.com/item?id=36086102 https://news.ycombinator.com/item?id=36086102
- frederich 3y agoThanks, I've just added mine called bau, a reactive ui library under 300 lines of code, available at https://github.com/grucloud/bau https://github.com/grucloud/bau