Building Multi-Page Applications with Enhance
Introduction to Enhance
When it comes to building multi-page applications (MPAs), there are numerous languages and frameworks to choose from. However, few focus on the most basic language for building MPAs – HTML. Most options require learning how to install and configure multiple packages just to get started. What if there was a framework that allowed you to build your app with a simple HTML file and add features incrementally? Enter Enhance, a framework that enables progressive enhancement.
What is Enhance?
Enhance is a web standards-based HTML framework that allows developers to build websites using web platform standards. This approach offers several benefits:
- Smaller app bundle size
- Better performance
- Easier team collaboration
Enhance makes building user interfaces easy by leveraging web components. It provides a simple way to add pages to your app through its file-system based router and allows you to define API routes to handle server requests.
Progressive Enhancement
Enhance is built on the idea of progressive enhancement, which means you don’t need to work on every aspect of your app at once. You can start with basic HTML, add styling, interactions, and data incrementally, and deploy your app at any point.
Creating an Example Project
Let’s build a simple app that converts text to uppercase. We’ll start with a basic HTML file and add features incrementally.
- Create a new Enhance project
- Install dependencies and start the project
- Create a form with a text input and submit button
- Define a GET API route to handle form submissions
- Display the result on the page
Initial HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Uppercase</title>
</head>
<body>
<form>
<label for="text">Text:</label>
<input type="text" id="text" name="text">
<button type="submit">Convert to Uppercase</button>
</form>
<div id="result"></div>
</body>
</html>
Adding JavaScript to Improve User Experience
To make our app more interactive, we’ll add JavaScript to handle form submissions and display the result without reloading the page.
- Redefine the custom element for the browser
- Add JavaScript to handle form submissions and display the result
Updated JavaScript Code
class TextToUppercase extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const form = this.shadowRoot.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const text = form.querySelector('#text').value;
const result = text.toUpperCase();
this.shadowRoot.querySelector('#result').textContent = result;
});
}
}
customElements.define('text-to-uppercase', TextToUppercase);
Next Steps
There’s more to learn about Enhance and its features. Check out the docs to explore more examples and tutorials. Try building a counter app without JavaScript and then improve it with JavaScript. With Enhance, you can build powerful and interactive apps incrementally.