DEVELOPER SANDBOX Academy of Mastery
WelcomeBuild · Explore · Create SD
REFERENCE GUIDE

Modern Front-End & Cross-Device Testing Reference

jQuery alternatives • modern UI • cross-device testing
Modern web

For many jobs once handled by jQuery, modern browser APIs are now the lowest-complexity default: selectors, events, classes, fetch, traversal, and DOM updates work directly in current browsers.

Panel 1 / 6

01 — From jQuery to Modern Browser APIs

From jQuery to Modern Browser APIs

jQuery → Native JavaScript

$('.item')
Select matching elements.
document.querySelectorAll('.item')
$('#save')
Select one element by CSS selector.
document.querySelector('#save')
$(el).on('click', fn)
Register an event handler.
el.addEventListener('click', fn)
$(el).addClass('active')
Add a class.
el.classList.add('active')
$(el).removeClass('active')
Remove a class.
el.classList.remove('active')
$(el).toggleClass('active')
Toggle a class.
el.classList.toggle('active')
$(el).hasClass('active')
Check for a class.
el.classList.contains('active')
$(el).closest('.card')
Find the nearest matching ancestor.
el.closest('.card')
$(el).find('.child')
Find a descendant inside an element.
el.querySelector('.child')
$(el).attr('data-id')
Read an attribute.
el.getAttribute('data-id')
$(el).attr('data-id', '42')
Set an attribute.
el.setAttribute('data-id', '42')
$(el).text('Saved')
Set plain text safely.
el.textContent = 'Saved'
$(el).html(markup)
Set HTML markup.
el.innerHTML = markup
$.ajax(...) / $.get(...)
Make an HTTP request.
fetch(url, options)
$(el).remove()
Remove a DOM node.
el.remove()
From jQuery to Modern Browser APIs

Native DOM Best Practices

Prefer platform APIs first
If the task is selectors, events, classes, forms, fetch, or basic DOM updates, native APIs usually remove a dependency without losing capability.
Use event delegation
Attach one listener to a stable parent and inspect event.target/closest() when many dynamic children share behavior.
Use textContent for text
Prefer textContent when inserting plain text. Use innerHTML only when markup is intentional and trusted/sanitized.
Check fetch status
fetch() resolves for HTTP error responses; explicitly test response.ok or response.status before treating the request as successful.
Keep state out of the DOM when it grows
For complex interactive state, a component or reactive library can be clearer than manual DOM mutation.
Progressive enhancement
Start with semantic HTML and working navigation/forms, then add JavaScript behavior where it improves the experience.
From jQuery to Modern Browser APIs

Native Example: Toggle

HTML
JavaScript
const button = document.querySelector('#menuButton');
const menu = document.querySelector('#menu');
button.addEventListener('click', () => {
  const open = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!open));
  menu.hidden = open;
});
Why this is preferred
No library is required; state is reflected in an accessibility attribute and the native hidden property.
From jQuery to Modern Browser APIs

Native Example: GET JSON

Request
const response = await fetch('/api/users');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const users = await response.json();
Use
APIs, JSON endpoints, form workflows, and application data loading.
Best practice
Handle HTTP errors, abort stale requests when needed, and keep request code separate from rendering for larger applications.
From jQuery to Modern Browser APIs

MDN References

querySelector / querySelectorAll
Modern CSS-selector DOM lookup.
addEventListener
Recommended event registration pattern.
classList
Native class manipulation.
closest
Native ancestor traversal.
Fetch API
Modern network request API.

Use these when native JavaScript is possible but a small declarative or convenience layer makes repeated interaction easier. They solve different problems; they are not interchangeable.

Panel 2 / 6

02 — Lightweight jQuery Alternatives

Lightweight jQuery Alternatives

Alpine.js

What it is
A lightweight declarative JavaScript framework that adds state and behavior directly to existing HTML.
Best fit
Dropdowns, tabs, counters, filters, menus, small interactive islands, server-rendered pages, and progressively enhanced sites.
Setup
npm install alpinejs or include Alpine with a deferred script tag.
Core idea
x-data defines local state; x-on/@ handles events; x-show, x-bind, and x-text bind UI to state.
Example
<div x-data="{ open: false }">
  <button @click="open = !open">Menu</button>
  <nav x-show="open">...</nav>
</div>
Best implementation
Keep Alpine state local to the HTML feature it controls. When state becomes application-wide or heavily shared, move to a component/application architecture.
Lightweight jQuery Alternatives

htmx

What it is
A dependency-free browser library that extends HTML with attributes for HTTP requests, targets, swaps, triggers, history, and related hypermedia behavior.
Best fit
Server-rendered applications that want richer interactions without building a large client-side state layer.
Setup
npm install htmx.org, self-host the file, or load it from a CDN.
Core idea
HTML declares the request and where returned HTML should be inserted.
Example
<button hx-get="/users" hx-target="#results" hx-swap="innerHTML">
  Load users
</button>
<div id="results"></div>
Best implementation
Return useful HTML fragments from the server, preserve normal HTTP semantics, and avoid recreating a client-side SPA inside htmx.
Lightweight jQuery Alternatives

Stimulus

What it is
A modest framework that augments HTML with controllers, targets, actions, values, and lifecycle behavior rather than owning rendering.
Best fit
Server-rendered HTML that needs organized JavaScript behavior without replacing the page architecture.
Setup
Install through your JavaScript package setup, then register controllers.
Core idea
HTML points to controller classes through data-controller, data-action, and target attributes.
Example
<div data-controller="hello">
  <input data-hello-target="name">
  <button data-action="click->hello#greet">Greet</button>
</div>
Best implementation
Make controllers small and behavior-focused. Let the server or templates continue to own HTML when that is already your architecture.
Lightweight jQuery Alternatives

Cash

What it is
A very small jQuery-style DOM library for modern browsers.
Best fit
Legacy code or teams that specifically want familiar jQuery-like chaining without carrying full jQuery.
Setup
npm install cash-dom or use its distributed browser build.
Use carefully
It is a syntax-convenience layer, not a modern application architecture. Prefer native APIs for simple new code unless the chaining API gives a real maintenance benefit.
Migration role
Can reduce friction in staged migrations where rewriting every jQuery-style DOM call at once is not practical.
Lightweight jQuery Alternatives

When to Choose Which

Native JS
Default for simple DOM, events, classes, fetch, forms, and small widgets.
No dependency; strongest portability.
Alpine.js
Small reactive behaviors inside existing HTML.
Use when declarative state makes native DOM code noticeably simpler.
htmx
Server-driven interaction and partial HTML replacement.
Use when the server should remain the primary application state/rendering authority.
Stimulus
Organized behavior attached to server-rendered HTML.
Use when you want controller structure without client-side rendering.
Cash
jQuery-like syntax compatibility/convenience.
Use mainly for migration or a deliberate tiny chaining API.
Lightweight jQuery Alternatives

Official Downloads & Docs

Alpine.js — Docs
Start, installation, directives, state, events.
Alpine.js — npm
Package installation.
htmx — Docs / Install
Official documentation and installation options.
htmx — npm
Package distribution.
Stimulus — Handbook / Docs
Official handbook, reference, and installation.
Cash — Source / Docs
Project source and usage documentation.

React, Vue, Svelte, and Lit are not drop-in jQuery replacements. They are better choices when the UI itself has significant state, reusable components, or application-scale interaction.

Panel 3 / 6

03 — Component & Application Alternatives

Component & Application Alternatives

React

Role
Component-based UI library widely encountered in modern front-end teams and application ecosystems.
Best fit
Large interactive applications, reusable component systems, complex shared state, and teams already invested in React tooling.
Setup direction
For a scratch client app, use a modern build setup such as Vite; React's docs recommend frameworks for many new full applications and note Create React App is deprecated.
Example
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Best implementation
Think in components and state transitions rather than selecting elements and mutating them manually.
Component & Application Alternatives

Vue

Role
Progressive component framework with a template-oriented model and strong tooling.
Best fit
Interactive applications and component systems where approachable templates and incremental adoption are valuable.
Setup direction
For a standard client-side Vue app, the official quick start uses a Vite-based setup; use a larger meta-framework only when its features are needed.
Example
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template><button @click="count++">{{ count }}</button></template>
Best implementation
Use components and reactive state; avoid mixing heavy manual DOM manipulation into Vue-controlled UI.
Component & Application Alternatives

Svelte

Role
UI framework that compiles declarative components written with HTML, CSS, and JavaScript into optimized JavaScript.
Best fit
Component-driven sites and apps where concise authoring and compile-time output are attractive.
Setup direction
Use the official Svelte CLI/getting-started flow; SvelteKit is the companion application framework when routing/server/full-stack features are needed.
Example
<script>
  let count = $state(0);
</script>
<button onclick={() => count++}>{count}</button>
Best implementation
Let Svelte own reactive component state instead of manually synchronizing DOM nodes.
Component & Application Alternatives

Lit

Role
Small library built on Web Components standards, adding reactive properties and declarative templates.
Best fit
Shareable custom elements, design systems, components that must interoperate across frameworks, and progressive enhancement.
Setup
npm i lit
Example
import {LitElement, html} from 'lit';
class MyCounter extends LitElement {
  static properties = { count: {type: Number} };
  constructor(){ super(); this.count = 0; }
  render(){ return html`<button @click=${() => this.count++}>${this.count}</button>`; }
}
customElements.define('my-counter', MyCounter);
Best implementation
Use Lit when standards-based custom elements and cross-framework interoperability matter more than adopting a full SPA ecosystem.
Component & Application Alternatives

Architecture Choice

Native / Alpine / Stimulus / htmx
Enhance existing HTML.
Best when server-rendered pages remain central.
React / Vue / Svelte
Own component rendering and application state.
Best when UI state and reusable component composition dominate.
Lit
Build standards-based Web Components.
Best when components must travel across stacks/frameworks.
Avoid framework-by-default
Do not add an application framework just to replace a few selectors or click handlers.
Choose the smallest architecture that remains clear as the feature grows.
Component & Application Alternatives

Vite as Modern Build Tooling

What it is
A modern development/build tool with a fast dev server, HMR, and optimized production build pipeline.
Best use
Vanilla JavaScript/TypeScript, React, Vue, and other modern client projects that need modules, dependencies, bundling, and development tooling.
Start
npm create vite@latest
Development
npm run dev
Production
npm run build
Cross-device local testing
Expose the dev server to your LAN only when needed, then test from a phone/tablet on the same trusted network. Protect private APIs and do not expose a development server to the public internet.
Component & Application Alternatives

Official Docs

React
Installation, setup, components, hooks, and current recommended app approaches.
Vue
Official guide and quick start.
Svelte
Official Svelte documentation.
Lit
Official Web Components library documentation.
Vite
Official development/build tooling guide.

Replacing jQuery is usually an architecture decision, not a syntax exercise. Move simple behaviors to the platform; move complex state to a coherent component or server-driven model.

Panel 4 / 6

04 — Migration & Best Implementation Patterns

Migration & Best Implementation Patterns

Migration Decision Tree

Simple selectors/events/classes?
Use native browser APIs.
Do not replace one dependency with another without a reason.
Small local state?
Use native JS or Alpine.js.
Keep behavior close to the component/HTML it controls.
Server returns HTML?
Consider htmx or Stimulus-style enhancement.
Keep routing, validation, and authoritative state on the server.
Complex client state/components?
Use React, Vue, or Svelte.
Let the chosen framework own its rendered subtree.
Reusable cross-framework component?
Consider Lit/Web Components.
Define a stable custom-element API.
Large jQuery legacy?
Migrate feature-by-feature.
Avoid a risky all-at-once rewrite unless there is a strong business case.
Migration & Best Implementation Patterns

Replace Patterns, Not Just Calls

Events
Move .on() usage to addEventListener or framework event handlers; centralize delegated events where appropriate.
Ajax
Move $.ajax to fetch or a project HTTP client. Preserve aborting, retries, authentication, JSON handling, and error behavior intentionally.
DOM mutation
For simple code use DOM APIs; for component frameworks, update state and let the framework render.
Animation
Prefer CSS transitions/animations or the Web Animations API for straightforward effects; specialized animation libraries still have valid use cases.
Forms
Use native FormData, Constraint Validation, and submit events before adding form libraries.
Plugins
Audit old jQuery plugins individually. Replace only the capability you still need.
Migration & Best Implementation Patterns

Event Delegation Example

jQuery style
$(document).on('click', '[data-remove]', function () {
  $(this).closest('.item').remove();
});
Native equivalent
document.addEventListener('click', (event) => {
  const button = event.target.closest('[data-remove]');
  if (!button) return;
  button.closest('.item')?.remove();
});
Why it works
One listener handles current and future matching children without attaching a listener to every button.
Migration & Best Implementation Patterns

Fetch POST Example

Modern request
const response = await fetch('/api/items', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({name: 'Example'})
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const item = await response.json();
Best practice
Validate server-side, handle non-2xx responses explicitly, avoid embedding secrets in client code, and use AbortController when cancelling stale requests matters.
Migration & Best Implementation Patterns

Dependency Selection Rules

Need
Write down the exact problem before choosing a library.
Maintenance
Check current releases, documentation quality, issue activity, security posture, and ownership.
Scope
Prefer a focused dependency for a focused problem; avoid adding a large framework for one widget.
Standards
Prefer tools that work with semantic HTML, accessibility, browser standards, and ordinary HTTP.
Exit cost
Favor APIs and architectures that can be replaced incrementally rather than locking the whole page into one mechanism.
Team consistency
A slightly larger standard already used by the team can be better than a theoretically smaller one-off dependency.
Migration & Best Implementation Patterns

Accessibility & Resilience

Semantic HTML first
Use real buttons, links, labels, forms, headings, dialogs, and landmarks before scripting custom behavior.
Keyboard
Test all interactive features without a mouse.
ARIA
Use ARIA to express states/relationships that native HTML does not already provide; do not duplicate or contradict native semantics.
Reduced motion
Respect prefers-reduced-motion for nonessential animation.
No-JS / failure mode
For server-driven sites, important navigation and form flows should degrade gracefully when practical.

Use browser automation for repeatable regression coverage. On macOS, Playwright is a strong default because one tool can exercise Chromium, Firefox, and WebKit plus desktop/mobile device profiles.

Panel 5 / 6

05 — Cross-Browser & Cross-Device Automation

Cross-Browser & Cross-Device Automation

Cypress

What it tests
Interactive end-to-end and component tests with an excellent local debugging workflow.
Setup
npm install cypress --save-dev
Open UI
npx cypress open
Headless run
npx cypress run
Cross-browser
Supports Chrome-family browsers and Firefox; current Cypress documentation also exposes WebKit support, with browser-launch documentation describing WebKit as experimental.
Best use
Teams that value an interactive test runner, time-travel-style debugging, component testing, and browser-visible authoring.
Cross-Browser & Cross-Device Automation

Selenium WebDriver

What it is
Mature WebDriver-based browser automation with language bindings and broad browser/platform support.
Best fit
Organizations with existing Selenium infrastructure, multi-language test teams, standards-based WebDriver needs, and large cross-platform grids.
Setup concept
Install the Selenium library for your language and use the appropriate browser/driver setup; modern Selenium includes tooling that reduces manual driver management.
Scale
Selenium Grid distributes browser sessions across machines/environments.
Use instead of Playwright when
Your organization already has mature Selenium/Grid infrastructure or needs its language/ecosystem compatibility.
Cross-Browser & Cross-Device Automation

WebdriverIO

What it is
Node.js automation framework around WebDriver/WebDriver BiDi with integrations for browser, mobile/Appium, and desktop automation.
Setup
npm create wdio@latest ./
Best fit
JavaScript/TypeScript teams that want WebDriver/Appium ecosystems, mobile testing, or one Node-centric automation layer across several targets.
macOS desktop
WebdriverIO documents macOS application automation through Appium's Mac2 driver.
Cross-Browser & Cross-Device Automation

Testing Pyramid for Front-End

Manual responsive pass
Fast layout and interaction checks while developing.
Safari/Firefox/Chrome responsive tools.
Component/unit tests
Fast checks for isolated logic/components.
Framework test tools + Vitest/Jest as appropriate.
E2E automation
Repeat critical user flows in real browser engines.
Playwright / Cypress / Selenium / WebdriverIO.
Simulator/VM
Check OS/browser combinations unavailable on the host.
Xcode Simulator / UTM / VirtualBox.
Physical device
Validate real touch, keyboard, browser chrome, performance, codecs, camera, and device-specific behavior.
Use before release for important supported devices.
Cross-Browser & Cross-Device Automation

Official Downloads & Docs

Playwright
Install, browsers, device profiles, test runner.
Cypress
Installation, E2E/component testing, browser support.
Selenium
Downloads and official WebDriver documentation.
WebdriverIO
Official setup and automation documentation.

Responsive modes are fast approximations; simulators and browser engines are closer; virtual machines add OS coverage; physical devices remain the final authority for device-specific behavior.

Panel 6 / 6

06 — macOS Device, Simulator & VM Testing

macOS Device, Simulator & VM Testing

Safari Responsive Design Mode

Setup
Enable Safari developer features, then use Develop → Enter Responsive Design Mode.
Use
Resize viewports, change pixel ratio, rotate dimensions, and quickly inspect responsive CSS/layout.
Best implementation
Use it during ordinary front-end development, then move important Apple-device checks into Simulator or a physical device.
Limit
Apple explicitly notes viewport presets are approximations and do not reproduce every real-device behavior.
Simulator bridge
Safari Responsive Design Mode can open pages in installed iOS/iPadOS/visionOS simulators for more accurate platform behavior.
macOS Device, Simulator & VM Testing

Xcode Simulator — Free, Not Open Source

What it gives you
Apple's iPhone/iPad/visionOS simulators and Safari environment from a Mac.
Best fit
iOS/iPadOS Safari layout and interaction validation without owning every Apple device.
Setup
Install Xcode and add the simulator runtimes/device types you need.
Why keep it in this guide
It is not open source, but on macOS it is one of the highest-value first-party options for Apple-device web testing.
Still test hardware
Simulators do not reproduce every hardware, performance, input, media, network, or browser-chrome condition.
macOS Device, Simulator & VM Testing

Firefox Responsive Design Mode

Open on macOS
Cmd + Option + M
Use
Device sizes, DPR, touch simulation, orientation, user-agent/device presets, screenshots, and approximate network throttling.
Best fit
Fast Gecko/Firefox responsive checks and testing conditions different from Safari/Chromium.
Limit
Like other responsive modes, it simulates selected device characteristics rather than becoming the actual device/browser.
macOS Device, Simulator & VM Testing

UTM — Open-Source VM Choice for Mac

What it is
Free/open-source VM and system-emulation app designed for macOS, built around QEMU plus Apple virtualization technologies.
Apple Silicon
ARM64 operating systems can run with hardware virtualization; UTM can also emulate other architectures at lower performance.
Best fit
Windows/Linux OS-level testing, isolated environments, older systems, architecture experiments, and browser tests that need another OS.
Setup
Download UTM, create or import a VM, choose guest architecture carefully, install the guest OS/browser, then snapshot a clean testing state.
Best implementation
Prefer same-architecture virtualization for performance. Use emulation only when an architecture mismatch is actually required.
Web testing tip
Use a host-only/shared/NAT networking arrangement that lets the VM reach your development server without exposing it publicly.
macOS Device, Simulator & VM Testing

VirtualBox — Secondary Open VM Option

Current macOS support
VirtualBox 7.2 documentation supports Apple-silicon macOS hosts with Arm64 guests.
Apple Silicon limit
x86-based guests do not run on Arm64 macOS hosts in the documented Arm64 host mode; use Arm64 Linux/Windows guests or choose an emulator such as UTM when x86 emulation is required.
Best fit
Teams already using VirtualBox, reproducible Arm64 guest environments, and test setups shared with non-Mac hosts.
Licensing note
The VirtualBox base package is open source; Oracle's Extension Pack is a separately licensed add-on and should not be assumed to have the same terms.
macOS Device, Simulator & VM Testing

Real Device over Local Network

Workflow
Run your dev server on the Mac, bind it to a reachable LAN interface, and open the Mac's LAN IP and dev-server port from the phone/tablet on the same trusted network.
Use
Real touch input, browser UI, font rendering, viewport behavior, on-screen keyboard, device performance, and physical-network conditions.
Security
Only expose development servers on trusted networks. Never expose private credentials, databases, debug/admin endpoints, or unrestricted development services to the public internet.
Final check
For important releases, combine automation + simulator/VM + at least a small representative real-device matrix.
macOS Device, Simulator & VM Testing

Official Download / Documentation

Safari Developer Tools
Responsive Design Mode, Web Inspector, devices, simulators, and WebDriver.
UTM — Download
Official macOS download page.
UTM — Documentation
Installation, VM settings, sharing, Windows/Linux guest guides.
VirtualBox — Downloads
Official Oracle VirtualBox distribution index/downloads.
VirtualBox — User Manual
Current platform and guest limitations.
Firefox Responsive Design Mode
Official Firefox developer documentation.