JSDA-Kit - 現代的なウェブを構築するための革新的なシンプルアプローチ

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 Once the project is ready, you have two main modes: Static site (SSG + SSR + dev server): # Development npx jsda ssg # Production npm run build 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 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 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 capabi