Modern JavaScript I Still Use With a Laravel Backend

Yes, even Laravel people write JavaScript

My primary backend is Laravel and my mobile clients are Flutter—but the browser still needs JS. On this site that means Vite, Alpine, and TipTap in the admin. I do not need every ES proposal. I need the features that keep front-end code readable.

Laravel’s frontend docs: Vite.

What I reach for constantly

• Modules — import/export so Vite can bundle cleanly
• Destructuring — cleaner props and API payloads
• Arrow functions — short callbacks
• Template literals — strings without pain
• async/await — instead of long promise chains
• Optional chaining / nullish coalescing — safer nested access

Vite entry pattern (Laravel)

// resources/js/app.js
import './bootstrap';
import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

{{-- blade --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])

npm ci
npm run dev    # local
npm run build  # production

Alpine for progressive UI

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-cloak>Panel</div>
</div>

I use Alpine when a full SPA is unnecessary. Use React/Vue when the UI complexity deserves it—not for ideology.

Fetch with async/await

async function loadPosts(q) {
  const res = await fetch(`/blog?q=${encodeURIComponent(q)}`, {
    headers: { 'Accept': 'text/html' },
  });
  if (!res.ok) throw new Error('Request failed');
  return res.text();
}

npm lockfile hygiene (same lesson as Composer)

Commit package-lock.json. Prefer npm ci in CI. Treat tiny utility packages with suspicion—the supply-chain essay applies here too. MFA on the npm publisher account is mandatory if you publish anything.

Troubleshooting and common mistakes

Most failures I see are configuration and process issues, not “the framework is broken.” Slow down: reproduce on a clean environment, read the exact error, and change one variable at a time.

• Confirm you are on the documented major version of the tool you are following.
• Prefer official docs over random outdated blog snippets when commands disagree.
• Keep lockfiles committed so teammates and CI install the same dependency graph.
• Separate “works on my machine” fixes (PATH, SDK licenses, local services) from application bugs.

What to do next

Implement the smallest vertical slice from this article on a throwaway branch, then promote the patterns into your real app. Guides that stay theoretical never catch the auth, env, and deploy footguns that actually burn time.

Don’t SPA by default

Blade + Vite + Alpine covers many marketing and content sites—including this portfolio. A React SPA is justified when client-side state and routing complexity exceed what progressive enhancement can hold. I would rather ship a fast multi-page app than a slow SPA shell.

Security in the browser

• Escape output in templates (Blade does this by default with {{ }})
• Never trust client-only checks for authorization
• Keep dependency updates intentional; npm audit is a signal, not a strategy by itself