icon

Choosing a Ligthweight Web Framework

I like to do this research from time to time. So here are the results of my latest search for the lightest and most capable framework for building web applications.

CSS Only Minimal Frameworks

  1. basscss 2.13kb gzip
    • rapid prototyping
    • incredibly simple visual style
    • somewhat constrained
    • no buttons, colors or visual appeal
  2. Furtive 2.47kb gzip
    • looks nice
    • includes basscss-like utilities
    • buttons, colors, forms etc
  3. Lotus 2-8k depending
    • small project
    • visually unusual
    • super easy to customize a small build
  4. Milligram 2.3k gzip CSS
    • looks nice - unoffensive but low contrast
    • lacks useful utility classes for padding and margins
    • flexbox percentage based grid
    • built with SASS
    • latest browser versions only
  5. PicnicCSS 7.2k gzip
    • opinionated, applies to default html elements (just use <button>) which seems useful
    • interesting components
    • not a fan of some of the UI choices
  6. Pure 3.8k gzip CSS
    • older project built by Yahoo
    • I still like the visual style
    • no utility classes for padding margin etc
    • can customize the modules you need
    • unique grids! (24ths and 5ths)
  1. Foundation 13.4kb gzip CSS & 27.6k gzip JS
    • SASS modules allow minimizing size by only loading style components you need.
    • complete framework for web development aims to solve a huge variety of problems when building apps
    • requires jquery
  2. Bootstrap 19.7k gzip CSS &9.8k gzip JS
    • most well known framework
    • tons of themes and examples
    • requires jquery
    • v3 offers LESS v4 (still in alpha) offers SCSS
  3. Spectre 10k gzip CSS
    • CSS only but contains many useful elements and widgets
    • good value
    • uses LESS instead of SCSS
  4. Vuetify 42k gzip CSS & 19k gzip JS
    • addon for building apps in vuejs 27.6k gzip JS
    • material design visuals
    • complete component framework including functionality
    • powerful interactivity

Combo Pack

If you find things that you like about several of these framework consider putting them together. Especially with the help of SCSS compilation tools you can build the exact system you need.

If I just want a quick combo of pre-baked frameworks I can try using basscss for layout and utilities and then adding a customized Lotus css that includes [responsive extras, buttons, forms, tables, colors].

That makes roughly 2KB for basscss and then 727 bytes gzipped for Lotus library. Concatenating them together gets you a compressed payload of 2.82kb. You could load the less important one (Lotus) asynchronously so only basscss would be blocking. I mean heck both could be inlined and only increase the html response by 4K leaving lots of room in your HTML payload for more JS and markup.

Icons

Almost every app ends up needing icons. Icon compression varies widely based on browser support. Glyphicons included with bootstrap is between 20 and 40kb.

But, most projects I see end up choosing FontAwesome - The entire fontawesome pack is between 80 and 300kb of fonts and 7k gzip of CSS. That’s a lot of extra weight.

Fontello will let you customize an icon set. A subset of just 18 FontAwesome Icons is less than 10KB of font files and .5k gzip CSS.

Back in my day we used a PNG sprite sheet for each page. And we were happy with our bitmaps! It was a pretty good way of keeping page load times down and displaying your icons, but maintenance was a pain.

Building a JS App

The number of frameworks you can choose for writing a single page application seems to grow at a pretty steady pace. And the popularity of these grows and wanes very quickly.

Here’s a table borrowed from https://gist.github.com/Restuta/cda69e50a853aa64912d which shows where the popular frameworks stand in file size.

Approximations for GZipped versions
Name Size
Ember 2.2.0 111K
Ember 1.13.8 123K
Angular 2 111K
Angular 2 + Rx 143K
Angular 1.4.5 51K
React 0.14.5 + React DOM 40K
React 0.14.5 + React DOM + Redux 42K
React 15.3.0 + React DOM 43K
backbone + underscore + jquery 48.4K
Vue 2.0.3 23K
Inferno 1.2.2 20K
Preact 7.2.0 4K
Mithril 0.2.5 7.8K
HyperApp 0.7.1 1K

Comparing the capabilities of all of these frameworks is beyond the scope of this article. Honestly, the vary significantly. Some of these are scalpels and some are lawn-mowers.

I’ve tried using Mitrhil in a fun project lately and really liked it. You get a lot of power in 8 kilobytes.