This book focuses on a modern, streamlined approach to web development using HTMX and WebStencils.

HTMX is a lightweight JavaScript alternative for building dynamic web user interfaces and is becoming the goto solution for web developers as it helps them significantly reduce the amount of JavaScript they need to write, making the development process faster and more intuitive, simpler to read and debug and easier to maintain.

HTMX’s simplicity aligns perfectly with RAD Studio’s rapid application development ethos, allowing developers to focus more on application logic instead of struggling with complex front-end code.

The beauty of WebStencils lies in its template-driven architecture. Instead of reinventing the wheel, developers can expose existing business logic via reusable and customisable templates that seamlessly integrate with existing applications, reducing the friction of bringing older projects to the web. This not only accelerates development but also enhances collaboration between development teams, enabling them to work more closely with existing codebases.

By reading this book, you will learn how to leverage the power of HTMX and WebStencils to develop modern web applications with less effort and greater flexibility. Whether you are working on enhancing existing desktop applications for the web or building new, dynamic web projects, this book provides practical insights to help you get the most out of RAD Studio’s evolving web development ecosystem.

You can learn more about RAD Studio or download a free trial to code along with the examples in this book from https://www.embarcadero.com/products/rad-studio

Let’s dive into how these technologies can simplify your workflow and take your web development projects to the next level! 

Preface

01 - Introduction to HTMX

What is HTMX?
Brief Overview
Comparison with Traditional JavaScript and AJAX
Core Concepts
hx-get: Fetching Content via GET Requests
hx-target: Specifying the Target Element for the Response
hx-post: Submitting Data via POST Requests
hx-put, hx-patch, hx-delete Requests
hx-swap: Controlling How Content is Swapped
Additional Core Concepts

02 - Introduction to WebBroker

What is WebBroker?
Key Features of WebBroker
Core Concepts
Components and Architecture
Creating a WebBroker Application
Handling Requests and Responses
Deployment and Scalability
Session Management in WebBroker
Approaches to Session Management
Implementing In-Memory Session Management
Integrating Session Management into WebModule
Security Considerations
CSRF Protection
Data Validation
Cross-site Scripting (XSS)
Other Security Considerations

03 - Developing your first web app using WebBroker

Introduction
Creating a "Hello World" Application
Basic To-Do App

04 - Advanced Attributes and Security Using HTMX

Introduction
Advanced Attributes
hx-put and hx-delete: Submitting Requests via PUT and DELETE
hx-trigger: Customizing Event Triggers
hx-select: Selecting Parts of the Server Response
hx-include: Including Additional Data in Requests
hx-push-url: Updating the Browser's URL

05 - Introduction to WebStencils

What is WebStencils?
Core Concept
Integration with HTMX
CSS and JS Agnostic
WebStencils Syntax
The @ Symbol
Curly Braces for Blocks { }
Accessing Values with the Dot Notation
WebStencils Keywords and Examples
@page
@query
Comments (@*.*@)
@if and @else
@if not
@ForEach
Conclusion

06 - Components and Layouts Options

Introduction
WebStencils Components
WebStencils Engine
WebStencils Processor
TWebStencilsEngine and WebBroker
Adding Data with AddVar
Layout and Content Placeholders
@RenderBody
@LayoutPage
@Import
@ExtraHeader and @RenderHeader
Template Patterns
Standard Layout
Header/Body/Footer
Reusable Components
Conclusion

07 - Migrating the T o-Do app to WebStencils

Introduction
Converting HTML Constants to Templates
Main Layout Template
To-Do List Template
Updating the WebModule
Adding Extra Functionality
Task Categories
Task Filtering
Conclusion

08 - Advanced Options with WebStencils

Introduction
@query Keyword
@Scaffolding
@LoginRequired
OnValue Event Handler
Template Patterns
Standard Layout
Header/Body/Footer
Reusable Components
Conclusion

09 - Using RAD Server Integration with WebStencils

Introduction
Integrating WebStencils with RAD Server
Using WebStencils Processors
Using WebStencils Engine
Recreating the Tasks app to RAD Server
Database management
Controller arguments
From Actions to Endpoints
Processing data on the requests
Handling static JS, CSS and images
Frontend sources

10- Resources and Further Learning

Documentation and links
Official HTMX documentation (HTMX.org)
Delphi and HTMX (Embarcadero Blog)
RAD Server T echnical Guide
HTMX in an MVC Pattern (HTMX.org)
WebStencils (DocWiki)
UI/CSS libraries
Extending HTMX even further
AlpineJS
Hyperscript