To maintain a clear separation between HTML and JavaScript logic.
This separation keeps presentation distinct from logic as much as possible and have as few abstractions as possible.
Develop layout with HTML/CSS and the logic with Alpine.js for two-way data bindings and reactivity.
To have some kind of central registry of HTML templates and Javascript classes and use it to register components.
The registry is just 2 properties in the global app object, app.templates and app.components.
Server-side rendering of templates (similar to htmx) is supported out of the box, same directives render bundled or remote HTML templates the same way without any external dependencies.
How the registry is delivered to the browser depends on bundling or application, for example:
Native support:
More ideas:
Components: These are the primary building blocks of the UI. They can be either standalone HTML templates or HTML backed by JavaScript classes, capable of nesting other components.
Main Component: Displays the current main page within the #app-main HTML element. It manages the navigation and saves the view to the browser history using app.savePath.
History Navigation: Supports browser back/forward navigation by rendering the appropriate component on window popstate events, achieved using app.restorePath.
Direct Deep-Linking: For direct access, server-side routes must redirect to the main app HTML page, with the base path set as ‘/app/’ by default.
Visit the tutorial.
Visit the documentation.
Available at demo.
External rendering is not working due pages only serving static content, local demo shows server-side rendering.
Vlad Seryakov
Licensed under MIT