Hey folks! Welcome back to the htmx journey. Today, we’re diving into a bit of web development history and how htmx is taking us forward… by looking backward. Cue the DeLorean because we’re heading back to the days when server-driven development was all the rage.
The Evolution of Web Technologies
Once upon a time, websites were just plain HTML, served straight from a server to your browser. And guess what? It worked! Sure, it was primarily static, but it was simple, effective, and didn’t require a degree in JavaScript wizardry.
Then came the rise of JavaScript frameworks—Angular, React, Vue—all promising rich client-side interactivity. They brought us SPAs (Single-Page Applications), where the server’s only job was to throw data over the fence and say, “Good luck!”
But here’s the thing:
- Client-side frameworks introduced complexity.
- They made simple things complicated.
- They demanded build tools, module bundlers, transpilers—a whole toolbox just to get a web app running.
Why We’re Coming Back to Server-Driven Development
After years of struggling with massive client-side apps and their ever-growing complexity, developers are starting to say, “Wait a minute… Wasn’t it easier when the server did most of the work?”
The truth is, for many web apps, you don’t need a full SPA framework. Instead, you can get 80% of the benefits with just a sprinkling of htmx.
Here’s why developers are flocking back to server-driven setups:
- Better Performance: HTML over the wire is surprisingly fast.
- Simplicity: You don’t have to wrestle with state management libraries and build tools.
- SEO Friendly: Since most rendering happens on the server, search engines don’t need fancy tricks to read your content.
Enter htmx: Your New Best Friend
So how does htmx make server-driven development cool again? You can add interactivity to your ASP.NET Razor Pages without a ton of JavaScript. Think of htmx as the bridge between simple server-rendered pages and the dynamic web experiences users love.
Here’s a fun little example:
Let’s say we want to add some interactivity to a basic ASP.NET Razor Page.
Index.cshtml
@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
<title>htmx History Example</title>
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h1>Welcome Back to Server-Driven Development!</h1>
<div id="time-area">
<button hx-get="/Index?handler=GetTime" hx-target="#time-area">What's the time?</button>
</div>
</body>
</html>
Index.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
namespace YourNamespace.Pages;
public class IndexModel : PageModel
{
public IActionResult OnGetGetTime()
{
var currentTimeHtml = $"<p>Current Time: {DateTime.Now:HH:mm:ss}</p>";
return Content(currentTimeHtml, "text/html");
}
}
What’s Happening Here?
- The
buttonis making a request to the server (hx-get="/GetTime") and loading the response right into the#time-areadiv. - No need for writing JavaScript or handling the AJAX call manually. htmx does the heavy lifting for you.
- It’s simple, clean, and easy to understand.
How htmx Simplifies Frontend Development
Unlike traditional frameworks that require complex client-side state management and rendering logic, htmx lets you keep your C# Razor Pages as the brains of your app. The front end just handles displaying the HTML the server sends back.
htmx brings back the simplicity of server-side rendering while allowing you to sprinkle interactivity where it’s needed. No fancy build tools. No massive dependency trees. Just straightforward, developer-friendly code.
Why This Matters for ASP.NET Developers
If you’re building apps with Razor Pages, htmx is a perfect match. It’s like adding dynamic functionality to your pages without turning your app into a complicated beast. And the best part? Your existing skills with C# and Razor Pages are all you need.
Stay tuned for the next post where we’ll build something even cooler with htmx. And as always, happy coding!