Angular VS Alpine.js

In the recent version, two long-awaited issues in the Angular repo were closed. Angular major version, v18, shipped the Unified Control State Change Events amongst other features, and the minor version, v18.1, took advantage of the block template syntax by adding a new built-in feature to the template known as the Template Local Variables, denoted by @let block.

Note: Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit with official integrations. While for other frameworks e.g. Angular and Qwik, you may still benefit from this tutorial and you would need to further set up the community maintained framework integrations.

Ready to explore this new feature? Check out the official release notes for more details and start simplifying your Angular apps today!

The most common and well known is React, with many others sharing this space, such as Svelte, SolidJS, Angular, Vue, Qwik and more. All are impressive feats of engineering and come with bold statements.

GitHub | npm | website

Angular

Angular (GitHub: angular/angular)

Paths are like the roadmap of your application. They help you navigate through your data, manage functions, and control actions with precision. If you’re a front-end developer coming from other frameworks like React, Angular, or Vue, you’ll find that paths in Total.js UI offer a unique and powerful way to handle your application's state and behavior.

✅ Angular 18 ✅ Angular Material ✅ Unit Testing with Jest ✅ End-to-End Testing with Cypress ✅ Internationalization with Transloco ✅ Auto documentation with Compodoc ✅ Provide component examples with Storybook ✅ Analyse your project with source-map-explorer ✅ Docker ✅ ESLint ✅ Prettier ✅ Commit Linting ✅ AuditJS Audit this application using Sonatype OSS Index ✅ Auto-generate a CHANGELOG with auto-changelog

We must recognize the benefits that client-side rendering offers, but perhaps the pendulum has swung too far. Is it possible to have the best of both worlds? In some corners of the industry, cooler heads have prevailed, and the term SSR has been coined to describe a return to what we've been doing for ages—albeit with some modern enhancements. The idea is to leverage AJAX, JavaScript, and browser improvements without the unnecessary bloat. While many tools are available, I frequently hear about Vue. js and HTMX. A recent search also led me to Alpine.js. And I've long been a proponent of Vaadin.

In this blog post, we'll delve into the process of creating a shopping cart using Alpine.js. We'll explore how to structure components, manage state with Alpine's store, and implement essential features such as fetching new products, adding and removing items, calculating total price, and handling UI interactions.

Note: Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit with official integrations. While for other frameworks e.g. Angular and Qwik, you may still benefit from this tutorial and you would need to further set up the community maintained framework integrations.

Alpine.js GitHub

Note: this.$el is there because I'm using Alpinejs to wrap all the code inside a component. $el is a ref to the root element.

Both Alpine.js and ReactJS bring unique strengths to the frontend development landscape. Alpine.js's simplicity and lightweight nature make it a compelling choice for certain projects, while ReactJS's mature ecosystem and robust architecture are unparalleled for large-scale applications.

The platform is built with Laravel, and we integrate Chart.js using Alpine.js.

By default, there is no React.js on the client, see results for the impact, but it's clearly a better golden path for static sites. I even chose to only keep JSX as Astro components to opt-in to a very light Alpine.js client-side library for light interactivity like the search/header.