🧩 JS Framework Showcase

A structured collection of frontend framework and build-tool setups, comparing how different JavaScript ecosystems approach component architecture, rendering, and state management.

---

📖 About This Repository

Most tutorials teach one framework in isolation, which makes it hard to see how they actually differ. This repository takes the opposite approach — the same kind of small app, rebuilt across 13 different frontend frameworks and build tools, so the differences in syntax, rendering strategy, and mental model are easy to compare side by side.

Each folder is a standalone, runnable project.

---

📑 Table of Contents

• Tech Stack
• Folder Structure
• Getting Started
• How They Compare
• Key Concepts by Framework
• Author

---

💻 Tech Stack

---

📁 Folder Structure

Folder	Framework	Category	Docs
react-app	React	Component library, Virtual DOM	react.dev
angular-app	Angular	Full framework, TypeScript-first	angular.dev
vue-app	Vue.js	Progressive framework	vuejs.org
svelte-app	Svelte	Compiler, no virtual DOM	svelte.dev
preact-app	Preact	Lightweight React alternative	preactjs.com
solid-app	Solid.js	Fine-grained reactivity	solidjs.com
qwik-app	Qwik	Resumable framework	qwik.dev
astro-app	Astro	Island architecture	docs.astro.build
ember-app	Ember.js	Convention-based framework	emberjs.com
lit-app	Lit	Native Web Components	lit.dev
marko-app	Marko	Server-first UI language	markojs.com
vanilla-app	Vanilla JS	No framework, plain JS	MDN
vite-app	Vite	Build tool, not a UI framework	vite.dev

---

🚀 Getting Started

Prerequisites

• Node.js (LTS version recommended)
• npm (comes bundled with Node.js)

Clone the Repository

git clone https://github.com/asmashahzadi764-alt/js-framework-showcase.git
cd js-framework-showcase

Each folder listed above is a standalone project. To run any of them, cd into it and start the dev server:

cd react-app        # or angular-app, vue-app, svelte-app, etc.
npm install
npm run dev

The terminal will print your local server URL — usually localhost:5173, or localhost:4200 for Angular.

---

⚖️ How They Compare

	Rendering	Language	Learning Curve	Best Suited For
React	Virtual DOM	JS / JSX	Moderate	Large interactive SPAs
Angular	Real DOM + change detection	TypeScript	Steep	Enterprise-scale apps
Vue	Virtual DOM	Templates	Easy	Rapid development
Svelte	Compiled, no runtime VDOM	Templates	Easy	Lightweight, fast apps
Preact	Virtual DOM (smaller footprint)	JS / JSX	Moderate	React-like API, smaller bundle
Solid	Fine-grained reactivity	JSX	Moderate	High-performance UIs
Qwik	Resumable, no hydration	JSX	Moderate	Fast-loading, content-heavy sites
Astro	Islands, mostly static	JS / JSX / Multiple	Easy	Blogs, marketing pages
Ember	Real DOM, convention-based	JS	Steep	Long-term structured apps
Lit	Native Web Components	JS / TS	Easy	Reusable, framework-agnostic UI
Marko	Server-first, streaming	Marko syntax	Moderate	High-traffic, server-rendered apps
Vanilla JS	Direct DOM manipulation	JS	Easy	Fundamentals, small scripts
Vite	— build tool —	—	Easy	Dev server & bundling for any of the above

---

🧠 Key Concepts by Framework

• React — component composition, virtual DOM diffing
• Angular — dependency injection, modules, TypeScript-first structure
• Vue — template syntax close to plain HTML
• Svelte — reactivity handled at compile time, no runtime virtual DOM
• Preact — React-compatible API in a smaller bundle
• Solid — fine-grained reactivity, updating only what changes
• Qwik — resumability, skipping hydration entirely
• Astro — island architecture, minimal shipped JavaScript
• Ember — convention-over-configuration
• Lit — framework-agnostic UI via native Web Components and Shadow DOM
• Marko — server-first rendering with streaming HTML
• Vanilla JS — direct DOM manipulation, no abstraction layer
• Vite — instant dev server startup via native ES modules

---

👩‍💻 Author

Asma Shahzadi