A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in Alpine.js (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ Live weather conditions
• 📅 7-day weather forecast
• 🔍 City search functionality
• 📍 Geolocation support
• 💾 Persistent location storage
• 📱 Responsive design
• ♿ Accessible interface
• 🎨 Multi-theme support
• 🧪 Fully unit tested
• 🌐 Internationalized

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

First, follow the repo setup instructions. Then cd apps/alpine and use the following commands:

npm run dev    # Start dev server (python3 -m http.server 3000 || python -m http.server 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (echo 'No build step required')
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

Alpine.js enhances HTML directly with directives. The main index.html uses x-data="weatherApp()" to bind the weather-app.js function to the DOM.

The weatherApp() function returns an object with reactive properties (isLoading, hasError, currentWeather) that automatically update the UI when changed.

Uses Alpine's directive system: x-show for conditional visibility, x-on:click for event handling, and x-text for content binding, making it feel like Vue but with minimal JavaScript.

Alpine works directly in the browser without compilation. Just include the script tag and start using directives - perfect for progressively enhancing existing HTML.

The weather logic is written in plain JavaScript functions that return reactive objects, making it easy to understand and debug without framework-specific patterns.

Alpine is a super lightweight framework for adding interactivity directly in HTML using attributes. It feels like Tailwind but for behaviour, making it ideal for simple UI enhancements without a full build setup. Great for quick prototypes or adding sprinkles of interactivity to static sites.

Alpine.js is like jQuery had a baby with Vue and decided to live directly in your HTML. It's refreshingly simple - you sprinkle a few x- attributes into your markup and suddenly you have reactive behavior. No build tools, no bundlers, no complexity. Just add a script tag and start building.

The approach feels intuitive once you get it. x-data sets up your reactive state, x-show handles conditional rendering, and x-for loops through arrays. Our weather app's forecast list is just <div x-for="day in forecast"> - no components, no imports, no ceremony.

What's clever is how Alpine stays out of your way. The HTML is still readable, the JavaScript is minimal, and everything degrades gracefully if Alpine doesn't load. It's progressive enhancement done right - the page works without JavaScript, but becomes interactive when it loads.

The syntax reads naturally: x-on:click="searchWeather()", x-text="temperature", x-bind:class="{'active': isExpanded}". It's declarative like Vue templates but lives right in the HTML. The reactive updates happen automatically when you modify the data.

For simple interactive websites, Alpine hits the sweet spot. You get modern reactivity without the complexity of a full framework. But for anything complex, you'll miss proper component organization and tooling. Alpine works great for my whois lookup API, because I just needed sprinkles of interactivity to update results, not a full SPA experience.

Since the weather app is very simple, it may be helpful to see a more practical implementation of a Alpine.js app. So, checkout:

Who Dat - WHOIS lookup for domain registration info
🐙 Get it on GitHub at github.com/Lissy93/who-dat
🌐 View the website at who-dat.as93.net

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.