Overview

The Hypermedia Driven Application starter kit is a solid platform for front-end development, following the Hypermedia Driven Application (HDA) architecture and the Locality of Behaviour (LoB) principle. It allows developers to create highly interactive, SPA-like web apps without the overhead. The kit includes a working demo with full page transitions and example components using Alpine.js, Vue 3, and vanilla JS.

Features

Laravel Mix 6 / Webpack 5 / PostCSS 8 - provides a robust ES6 development environment with script and style injection (HMR, file watching)
htmx for HTML-over-the-wire
Tailwind CSS for utility-first CSS
Alpine.js + Async Alpine for composing behaviour directly in markup, with support for asynchronous on-demand components
Vue.js (v3) for complex reactive applications using SFCs
Minimalistic JavaScript framework for vanilla JS components
Lazyloading of components as they enter the DOM, with loading strategies including visible, idle, and media
Framework-agnostic - compatible with vanilla JS, Vue, jQuery, GSAP, Alpine.js, or any other framework
SASS auto compiling, prefixing, minifying, and sourcemaps
CSS Autoprefixer, PostCSS Preset Env for older browsers
Polyfills for older browsers (Core-Js 3)
SVG icon sprites
Image optimization
Static files management (fonts, images, etc.)
Eslint for JavaScript linting
Stylelint for CSS linting

Summary

The Hypermedia Driven Application starter kit is a powerful platform for front-end development, providing developers with a set of robust tools and technologies. It follows the HDA architecture and LoB principle, allowing for the creation of highly interactive web apps without the overhead. With its support for various frameworks and its flexible component system, developers can find a balance between Locality of Behaviour and Separation of Concerns. Overall, the kit offers a comprehensive solution for modern front-end development.

Croxton

Hda Starter Kit