Ashwin Sundar

Empty Web Frameworks

Framework Popularity New project size # files
React 1 340000K 38219
htmx * 44K 1
Angular 5 295000K 23757
Django 13 20K 9
Gatsby 24 542000K 47703
jQuery 3 88K 1

*: Not in top 34

Methodology

React

Reference

  1. Install React (via npm)
> npm install react
> npm view react version
18.2.0
  1. Create a project
> npx create-react-project empty-react-project
  1. Analyze disk usage
> du -h -d 1 emptyDjangoProject 
  339M	empty-react-project/node_modules
   36K	empty-react-project/public
  368K	empty-react-project/.git
   32K	empty-react-project/src
  340M	empty-react-project
> find empty-react-project -type f | wc -l
   38219

htmx

Reference

  1. Copy source code from CDN

Note: htmx can be downloaded directly from a CDN inline with an html file, but for a fair comparison, the code was copied into a file so that the du disk utility could be run

> mkdir empty-htmx-project
> curl -o emptyHtmxProject/htmx.min.js "https://unpkg.com/[email protected]/dist/htmx.min.js"
  1. Analyze disk usage
> du -h emptyHtmxProject
 44K	emptyHtmxProject

Angular

Reference

  1. Install Angular (via npm)
> npm install -g @angular/cli
> npm view angular version
1.8.3
  1. Create project
> ng new emptyAngularProject
? Would you like to enable autocompletion? Yes
? Would you like to share pseudonymous usage data about this project with the Angular Team? No
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
  1. Analyze disk usage
> du -h -d 1 emptyAngularProject 
  294M	emptyAngularProject/node_modules
  336K	emptyAngularProject/.git
   12K	emptyAngularProject/.vscode
   56K	emptyAngularProject/src
  295M	emptyAngularProject
> find emptyAngularProject -type f | wc -l 
  23757

Django

Reference

  1. Install Django
> python -m pip install Django
  Successfully installed Django-4.2.5
  1. Create project
django-admin startproject emptyDjangoProject
  1. Analyze disk usage
> du -h -d 1 emptyDjangoProject 
  16K	emptyDjangoProject/emptyDjangoProject
  20K	emptyDjangoProject
> find emptyDjangoProject -type f | wc -l 
  9

jQuery

Reference

*Note: Like htmx, jQuery can be downloaded directly from a CDN.

  1. Copy source code from CDN
> curl -o emptyjQueryProject/jQuery.min.js "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
  1. Analyze disk usage
> du -h emptyjQueryProject 
  88K	emptyjQueryProject

Gatsby

Reference

  1. Install Gatsby
> npm install -g gatsby-cli
> gatsby --version
Gatsby CLI version: 4.6.0
  1. Create project
> npm init gatsby
? What would you like to call your site? emptyGatsbyProject
? What would you like to name the folder where your site will be created? empty-gatsby-project/
? Will you be using JavaScript or TypeScript? TypeScript
? Will you be using a CMS? No (or I'll add it later)
? Would you like to install a styling system? No (or I'll add it later)
? Would you like to install additional features with other plugins? No
  1. Analyze disk usage
> du -h -d 1 empty-gatsby-project 
  540M	empty-gatsby-project/node_modules
  476K	empty-gatsby-project/.git
   24K	empty-gatsby-project/src
  542M	empty-gatsby-project
> find empty-gatsby-project -type f | wc -l  
  47703