HTMX, from zero to hero!
Sconto del 20% per più persone della stessa azienda
Duration: 2 days| Price: € 590,00 VAT excluded
Prerequisites
Basic knowledge of Javascript, CSS, HTML, and a server-side technology such as Delphi (DMVCFramework), Python (FastAPI), or C# (ASP.NET). Please communicate your preferred server-side technology upon registration..
Description
If you’re looking to simplify the development of dynamic web interfaces without having to learn a complex framework, HTMX is the ideal solution. In this two-day course, you will discover why HTMX is revolutionizing the way we build web applications, offering a simple and powerful approach based on HTML, with minimal need for JavaScript (or none at all).
Throughout the course, we’ll explore HTMX’s strengths, such as time savings through its declarative syntax and direct integration with HTTP servers. You’ll learn how to implement advanced UX patterns, including inline data editing, infinite scrolling, incremental search, file handling with progress bars, custom dialogs, and more. You’ll also discover techniques for creating animations, tab interfaces, and keyboard shortcuts, improving the user experience without complicating the code.
We’ll delve into integrating Hyperscript to add client-side logic without external dependencies, handling complex interactions with HTMX events, using built-in extensions, and how to create your custom extensions. We’ll also see how to integrate HTMX with Alpine.js to further enhance the functionality of your applications.
Finally, we’ll discuss efficient deployment strategies to bring your HTMX applications to production. By the end of the course, you’ll be ready to develop dynamic and high-performance web interfaces with ease and speed.
HTMX is a lightweight JavaScript library that allows you to access modern browser features directly from HTML, eliminating the need for heavy client-side frameworks and, most importantly, client-side state. HTMX is very lightweight and does not depend on other JavaScript libraries. These characteristics allow us to skip the client-side JavaScript compilation phase, greatly simplifying the process and reducing the number of people required for the project. HTMX’s general philosophy aligns well with the simplicity focus of DMVCFramework and Python. Typically, a web application using HTMX is faster (in terms of UX) than one written using JavaScript frameworks like Angular or React. While there is no one-size-fits-all best choice, HTMX saves time and money in many situations and has a shallow, linear learning curve. HTMX’s popularity skyrocketed after it was included among the projects sponsored by GitHub for their Github Open Source Accelerator!
✅ With a client-side JavaScript framework: DB ➡️ JSON ➡️ JS ➡️ HTML
✅ With HTMX: DB ➡️ HTML
Contents
Why HTMX is revolutionary compared to other frameworks
Strengths of the HTMX approach
How HTMX saves time
Best practices and UX patterns
Inline editing of data objects
Bulk update of multiple data rows
Click to load more rows in a table
Deleting rows in a table
How to modify rows in a table
Implementing infinite scrolling on a page
Field validation inline
Active search (incremental search as the user types)
Implementing a progress bar
How to make values in a selection dependent on another selection
Various animation techniques
How to upload a file via Ajax with a progress bar
Dialog
Creating tabbed interfaces
Creating keyboard shortcuts for HTMX elements
Implementing drag-and-drop reordering
Updating multiple DOM elements with a single request
How to implement a custom confirmation dialog window with HTMX
Integration with Hyperscript
HTMX events
Built-in extensions
How to write an HTMX extension
Integration with Alpine.js
Deployment strategies
