Django, HTMX and Alpine.js: Modern Websites, JavaScript Optional

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • OPS - Build and Run Open Source Unikernels
  • GitHub repo concordia

    Crowdsourcing platform for full text transcription and tagging. https://crowd.loc.gov

    A few years back, I implemented this as a Django CBV which worked quite well:

    https://github.com/LibraryOfCongress/concordia/blob/main/con...

    That handles a few things like pagination for list views, calling get_absolute_url() on objects in the template context which have that method defined, and running all URLs through request.build_absolute_uri().

  • GitHub repo Phoenix

    Peace of mind from prototype to production

    OP probably talking about Phoenix's "LiveView" (https://www.phoenixframework.org/ check the video about it).

    Phoenix LiveView is a framework where it keeps websocket open with the client and renders DOM changes server side and passes it to the client [0]. Thus with fully server side development without any JS you can have almost full SPA experience.

    [0] Have no experience with it, and only read about it some time ago, so don't judge me on the details, but the gist of the "LiveView" idea should be like that.

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • GitHub repo django-unicorn

    The magical reactive component framework for Django ✨

    Another one to consider is https://www.django-unicorn.com if you want that LiveView feeling for Django.

    For my latest project[1], I've opted for https://unpoly.com instead of Alipine+htmx as Unpoly allows me to write 100% server-side code and sprinkle some progressive enhancement where desirable. As a result, I can offer a no-JS experience (minus the Stripe Checkout) for those who may want/need it. Additionally, it forces me to focus solely on the server-side, and I write more idiomatic Django code as a result.

    [1]: https://heraldsms.com

  • GitHub repo user-event

    🐕 Simulate user events

    I just tried running WinDirStat on the `node_modules` folder in a Create-React-App project I had lying around. Total size was 234 MB. Of that, 129MB was JS files. By far the biggest piece was TypeScript, which has 45MB of .js in 6 files making up its parsing and IDE language service implementation.

    Beyond that, the breakdown is:

    - .ts source files: 25MB

    - Sourcemaps: 23MB

    - Markdown: 15MB

    - JSON: 10MB

    It also looks like there's a 12MB Linux binary that was only in there as a publishing accident for the `user-event` library that has since been resolved ( https://github.com/testing-library/user-event/issues/266 ).

    Or, take Redux Toolkit, which I maintain. If you look at https://unpkg.com/browse/@reduxjs/[email protected]/ , the published package for our current version, it adds up to about 10MB on disk. But, that's because we ship three separate entry points (RTK core, RTK Query UI-agnostic core, RTK Query with React-specific additions), and for each entry point we compile the code to multiple file formats (CommonJS, ESM legacy, ESM modern, ESM with "dev" and "prod" already built in, UMD dev, UMD production), and each of those has sourcemaps. The actual amount of code that ends up in your bundle is about 20KB min+gz.

    So, it's a combination of many things: TS itself is big, libraries typically publish packages containing both the original source code plus multiple build artifacts to run in different environments, and packages also include various metadata and other files as well.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts