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

Installation

1. Review the settings in webpack.mix.settings.js and tailwind.config.php and customize them for your project.
2. Create an .env file and add an environment variable DEFAULT_SITE_URL pointing to the hostname of your local website.
3. Choose one of the following workflows to run:
   • Run the development server (with hot module reloading and file watching).
   • Run the development server (with linting and source maps).
   • Run the production build.
4. Use eslint to fix your JavaScript and stylelint to fix your styles.
5. Refer to the package.json file to view the list of supported browsers for this project.

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.