React vs Angular vs Vue vs Svelte
The same web app written in React, Vue, Svelte, and Angular.
The writeup
Check out this fun and easy-to-follow article for details. It has performance charts, commentary and comparisons on the four frameworks, and actually picks a winner! (Spoiler alert! React wins.)
What is this?
You're looking at a repository holding four versions of the same exact web application written using different frameworks.
It's a dashboard app. It uses a bunch of placeholder widgets with random colors for simplicity but we created one widget with a five-day weather forecast for realism. This setup will demo how React, Svelte, Angular, and Vue handle:
- Responsive web design
- Consuming an API service using Ajax
- Complex layouts using CSS flexbox and grid
- Client-side routing in a SPA
- Several generations of components
- Passing props
- Maintaining component state
- Dynamically creating components
Dashboard app description
We're building a site whose main feature is a dashboard.
- The site will have X "pages" and a navbar across the top. The dashboard is just one of those pages.
- Start with 25 widgets but it should flex given any number
- Responsive with one widget across on a phone. Like two across on an iPad portrait or three-ish when landscape. The widgets will be between ... ummm ... 350 and 500 pixels wide with a 16:9 aspect ratio.
- One widget will be built out. It will consume data from a CORS API hosted somewhere. The others can be placeholders for a proof-of-concept.
How do I run the projects?
- Fork or clone this repo (or just download the zip).
- Go to any of the four sub-projects
- Follow the instructions that you'll find in the individual READMEs.
Here are the projects
Angular
React
Vue
Svelte
