[Go Make Things] Dynamic content on a static HTML page using Web Components and PHP

By rahmat hidayat

Tuesday, February 11, 2025

​ Over the weekend, I converted a suite of custom web apps I maintain for my family from using a JS-rendered UI to my preferred PHP Islands Architecture approach. All of the initial HTML is rendered in advanced. Today, I wanted to show you how I turn static HTML into dynamic web apps using a mix of old-school server techniques and modern HTML Web Components. Let's dig in! Static HTML vs. PHP Islands Architecture With this approach, all of the initial HTML is rendered in advanced. A lot of it is pre-rendered static HTML. Some of it—the stuff specific to the current user—is dynamically rendered on the server with PHP. <p>Your stuff (this list automatically updates whenever the form-success event fires)...</p> <ul> <?php // Reads a flat JSON file // returns an array of stuff $user_stuff = get_user_stuff(); foreach ($user_stuff as $key => $item) : ?> <li><?php echo $item ?></li> <?php endforeach; ?> </ul> Wherever there's a user interaction that updates something on the backend, I user <form> elements that point to a backend endpoint. <form action="/path/to/add-item.php" method="POST"> <label for="item">The New Item</label> <input type="text" name="item" id="item"> <button>Add Item</button> </form> As a baseline experience, submitting the form triggers a full page reload. It sends data to the server, which does some stuff, then redirects the user back to the page they just came from. The page is reloaded, and they see there updates rendered into the new HTML. But I also like ajaxy interactions, which can maintain a user's position on the page and show "in progress" status updates. To support this, I wrap my <form> in an <ajax-form> Web Component… <ajax-form id="add-item-form"> <form action="/path/to/add-item.php" method="POST"> <!-- ... --> </form> </ajax-form> When the user submits the form, this Web Component stops it from reloading the page, and makes a fetch() request to the server. When it gets back a response, it renders it into the UI. It also prevents multiple submissions while one is in progress, clears the form after its successfully submitted, and emits a custom event. (I'll talk more about how this works in another article. For now, you can find that Web Component in my membership toolkit). But this creates a problem… How do you update HTML that depends on that form's data? In JavaScript framework land, you use hydration: HTML is rendered on the server, and then a whole bunch of JavaScript to make it a state-based UI component is loaded to take over. I did not want to do that. So, I created a Web Component that listens for form events and updates the HTML dynamically… <ajax-html id="user-tasks" event-name="form-success" event-target="#add-item-form"> <p>Your stuff (this list automatically updates whenever the form-success event fires)...</p> <ul> <!-- ... --> </ul> </ajax-html> Whenever the form event fires, if it was fired on the [event-target] element, the Web Component asynchronously fetches the page HTML fresh from the server, finds itself in the returned HTML string, and replaces itself with the latest version. The rest of the page remains untouched. And tomorrow, I'll show you how that all works! Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+