惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
有赞技术团队
有赞技术团队
H
Help Net Security
V
Visual Studio Blog
F
Fortinet All Blogs
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 司徒正美
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
腾讯CDC
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Stack Overflow Blog
Stack Overflow Blog
I
InfoQ
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
L
LangChain Blog
N
Netflix TechBlog - Medium
罗磊的独立博客
The GitHub Blog
The GitHub Blog
云风的 BLOG
云风的 BLOG
Hugging Face - Blog
Hugging Face - Blog
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
Recent Announcements
Recent Announcements

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
JSDA-Kit - A Revolutionary Simple Approach to Build Moder...
Alex M · 2026-05-08 · via DEV Community

Alex M

Hey everyone.

PHP (Hypertext Preprocessor) is an incredibly popular language for web development. Despite years of people predicting its demise, its popularity has only grown lately. Over 70% of all websites on the internet run PHP on the server.

Do you remember how PHP won its original popularity? It gave developers the ability to inject logic directly into the body of an HTML document on the server. With PHP, the Web became truly dynamic. And behind that capability was a dead-simple mental model — which is exactly what made it so compelling.

A lot has changed since then, but the demand for simplicity has only increased. Everything has become way too complicated. We've started applying absurdly complex abstractions on top of what the platform already gives us — just to solve simple problems. You know exactly what I'm talking about.

Today, I want to tell you about a tool that can bring back that simplicity and control — without sacrificing capability. It's called JSDA-Kit. But first, a quick primer on what JSDA actually is:

JSDA — JavaScript Distributed Assets — is an architectural principle that brings the PHP mental model into the JavaScript world. JSDA is a set of conventions stating that ordinary standard JS modules (ESM) can serve as self-contained endpoints for generating text-based web assets: HTML, CSS, SVG, JSON, XML, and more.

The idea is straightforward: if your ESM module default-exports a string, we can treat it as a web asset with the corresponding MIME type.

For example: a file named page.html.js is treated as an HTML page with MIME type text/html, and styles.css.js as a CSS file with MIME type text/css, and so on.

You can read more about JSDA in the manifest. Now let's get to what this actually gives us in practice.

Everything above is not just some odd idea — it works, and it works really well. To prove it, I've prepared a dedicated template repository that lets you spin up a full-featured JSDA project in seconds. It's a project with a minimal dependency footprint and minimal configuration (easy to security-audit), yet it includes everything you need to be a legitimate competitor to things like, say, the popular Next.js.

What You Get Out of the Box

  • Static site generation — SSG and SSR with file-system-based routing, just the way we like it
  • JSDA Server — processes requests to JSDA endpoints and serves ready-made assets in real time, with cache management, middleware support, optional custom routing, SSR, and more
  • Full-featured components — work on the server, on the client, or in hybrid/isomorphic mode (Symbiote.js Custom Elements)
  • Dramatically simple templating — a basic but powerful template engine for HTML and beyond
  • Any asset type from ESM modules — generate assets from standard template literals or any other way you prefer
  • Flexible asset composition — compose JSDA assets with async logic support: ESM imports, CDN code, top-level await, etc.
  • CLI tools — for development, building, and deployment
  • SSR made dead simple — super straightforward and efficient thanks to Symbiote.js
  • Isomorphic state management — incredibly simple yet incredibly powerful (Symbiote.js PubSub)
  • Cloud image management — manage cloud image collections with optimization and interactive widget generation (galleries, 360° panoramas, and more)
  • Markdown rendering — built-in syntax highlighting for code blocks (perfect for your documentation and technical articles)
  • Automatic asset minification and bundling — JS, CSS, HTML, etc. — on the fly
  • GitHub Actions workflow — automatic static site deployment to GitHub Pages (free-tier static hosting friendly)
  • Flexible CSS workflow — forget about additional pre- and post-processors
  • Total freedom and flexibility — combine with any other tools and approaches, zero vendor lock-in
  • TypeScript support without a transpilation step — JSDoc definitions + *.d.ts, the code you wrote is the code that runs. No source map headaches, easy testing
  • Minimal configuration — simple yet flexible config (project.cfg.js) with type checking, config merging, comments, etc.
  • Easy 100% Lighthouse scores — minimal dependencies, minimal client-side overhead (looking at you, React!)
  • No hydration mismatches — ever

All of this with minimal dependencies, minimal lines of code, and zero vendor lock-in — as close to the native platform capabilities as possible, without reinventing the wheel.

Compare how much more complex the same things are in Next.js. The difference is dramatic — across every metric.

Naturally, it's all open source (MIT License).

Getting Started

You can spin up a project in under a minute. Two options:

Option 1: GitHub Template
Since jsda-template is a GitHub Template Repository, just click the green "Use this template" button on the repo page — it will generate a fresh repository for you instantly. Then clone it and run npm install.

Option 2: CLI Scaffold

mkdir my-project
cd my-project
npx jsda scaffold
npm install

Enter fullscreen mode Exit fullscreen mode

Once the project is ready, you have two main modes:

Static site (SSG + SSR + dev server):

# Development
npx jsda ssg 

# Production
npm run build

Enter fullscreen mode Exit fullscreen mode

Output goes to dist/. A GitHub Actions workflow is already included for automatic deployment to GitHub Pages.

Dynamic app (JSDA server + SSR):

npx jsda serve

Enter fullscreen mode Exit fullscreen mode

The server starts at http://localhost:3000. Routes are defined in src/dynamic-pages/routes/routes.js.

That's it. No twenty-step setup guides, no config rabbit holes.

🔗 Template repository — https://github.com/rnd-pro/jsda-template
🌐 Live demo (SSG, GitHub Pages) — https://rnd-pro.github.io/jsda-template/
📦 JSDA-Kit (core library) — https://github.com/rnd-pro/jsda-kit
⚡ Symbiote.js (Custom Elements framework) — https://github.com/symbiotejs/symbiote.js