Alpine.js

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

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
  • Alpine.js

    A rugged, minimal framework for composing JavaScript behavior in your markup.

    Yeah, this is the dealbreaker for me with alpine.js and htmx.

    And I wouldn't even say "tight CSP" as much as "standard CSP." To make alpine.js play nice with CSP, you have to allow unsafe-eval, which severely weakens your protection against XSS.

    alpine.js claims to have a compatibility build with CSP, but it's not officially available, doesn't fully work, and the parts that are broken in the CSP build aren't documented.[0]

    htmx works under CSP, but it opens a new vector for attackers to inject JS into your page, which effectively neuters CSP.[1]

    [0] https://github.com/alpinejs/alpine/discussions/1944

    [1] https://htmx.org/docs/#security

  • htmx

    </> htmx - high power tools for HTML

    Actually, HTMX has a fundamental flaw if it comes to history restoration: In some scenarios it takes snapshots of the DOM for history navigation, just before navigating away from a page. If the DOM was previously modified by other JS libraries like e.g. Alpine, these changes end up in the history snapshot, leading to unexpected results [1]. I've had a much smoother experience with Alpine.js + swup [2]. Disclaimer: I became a maintainer of swup this year.

    [1] https://github.com/bigskysoftware/htmx/issues/1015

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • petite-vue

    6kb subset of Vue optimized for progressive enhancement

    petite-vue is indeed intended to fill the gap for progressive enhancement cases where Vue 3 would be too heavy-handed.

    It is not abandoned, but rather it is considered "done" because the scope is well defined. I don't think it needs more features (as that would defeat the purpose of being lean and minimal). If you find yourself needing more than what petite-vue provides, you can either go up to Vue proper, or try https://alpinejs.dev/.

    That said, I should update the README to indicate this more clearly.”

    Github discussion: https://github.com/vuejs/petite-vue/discussions/53

  • phoenix_live_view

    Rich, real-time user experiences with server-rendered HTML

  • swup

    :tada: Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.

  • Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  • mikado

    Mikado is the webs fastest template library for building user interfaces.

    Yet another JS framework. How fast is it really? The learning curve may not be worth it if it's slower than https://www.solidjs.com/ and according to https://krausest.github.io/js-framework-benchmark/current.ht... few things are faster than a very little-known framework called Mikado (https://github.com/nextapps-de/mikado). That being said, I would never sacrifice performance of my software for how trendy or popular something is, e.g. React is #1 in popularity yet it's overcomplicated, massive, slow as hell.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • solid-site

    Code that powers the SolidJS.com platform.

    Yet another JS framework. How fast is it really? The learning curve may not be worth it if it's slower than https://www.solidjs.com/ and according to https://krausest.github.io/js-framework-benchmark/current.ht... few things are faster than a very little-known framework called Mikado (https://github.com/nextapps-de/mikado). That being said, I would never sacrifice performance of my software for how trendy or popular something is, e.g. React is #1 in popularity yet it's overcomplicated, massive, slow as hell.

  • joystick

    A full-stack JavaScript framework for building web apps and websites.

    How about plain HTML, CSS, and JavaScript? [1]

    [1] https://github.com/cheatcode/joystick#writing-a-component

  • knockout

    Knockout makes it easier to create rich, responsive UIs with JavaScript

    I still use Knockout[0] for almost an identical experience.

    0: https://knockoutjs.com/

  • jsx

    The JSX specification is a XML-like syntax extension to ECMAScript.

    FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties.

    But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1].

    1: First sentence of https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”

  • daisyui

    ⭐️ ⭐️ ⭐️ ⭐️ ⭐️  The most popular, free and open-source Tailwind CSS component library

    I've been using daisyui + svelte and I'm pretty happy with it so far. It may not be as rich as some of the react UI libraries but the basics are all there.

    https://daisyui.com/

  • astro

    Astro is the all-in-one web framework designed for speed 🏝️✨

    Shameless plug: Astro supports Alpine.js and is a great dev environment for trying out Alpine for the first time. Astro runs in the browser as well, via Stackblitz!

    - Astro: https://astro.build/

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