A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in jQuery (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/jquery and use the following commands:

npm run dev    # Start dev server (vite --port 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (vite build)
npm start      # Serve built prod app (from ./dist)

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

jQuery follows a DOM-centric approach where you select elements first ($('#weather-container')) then manipulate them. The weather-ui.js demonstrates classic jQuery patterns.

Unlike declarative frameworks, jQuery requires explicit DOM updates. When weather data changes, you manually call $('#temperature').text(temp) to update the display.

jQuery's strength lies in its CSS selector engine. Complex DOM queries like $('.forecast-item.active .details') make it easy to find and manipulate specific elements.

Uses jQuery's event delegation with .on() method to handle dynamically added forecast items, ensuring click handlers work on elements added after page load.

The weather service leverages jQuery's $.ajax() method for HTTP requests, providing a clean Promise-like interface with .done() and .fail() callbacks.

jQuery was once the king of the web, making DOM manipulation and AJAX simple back when browsers were inconsistent. Most of what it offers is now part of vanilla JS, so it’s largely unnecessary today. Still, it powered much of the modern web and is a big part of web history.

Let's be honest - building a modern app with jQuery in 2024 feels like showing up to a Formula 1 race with a vintage car. It'll get you there, but everyone will wonder what the f*ck you are on. Still, jQuery powered the web for over a decade, and is still actually very widley used (thanks WordPress), so it's worth understanding what made it so dominant. Nowadays pertty much everything jQuery could do, is implemented into ES6+ natively, so there's little point in jQuery (unless u r supporting IE11).

The TL;DR of jQuery's magic was always in the simplicity. $('#weather-display').html(weatherHtml) just works. No virtual DOM, no component lifecycle, no build process - just select elements and manipulate them. The method chaining is genuinely elegant: $('.forecast-item').addClass('active').fadeIn(300) reads like English.

For our weather app, jQuery actually handles the basic functionality fine. Event delegation with $(document).on('click', '.forecast-toggle', handler) works perfectly, and $.ajax() fetches weather data without fuss. But you quickly realize you're manually managing everything React or Vue handles automatically - state updates, DOM synchronization, component organization.

The imperative style becomes tedious fast. Want to update the temperature display? Manually find the element and change its text. Need to show/hide loading states? Manually toggle CSS classes. It works, but you'll write 3x more code than you would in Svelte.

jQuery still has its place for simple enhancements to static sites, but for anything interactive, modern frameworks or even vanilla JS, are just better. The ecosystem and community have largely moved on, and you'll spend more time fighting against jQuery's limitations than building features.

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