Which Front‑End Framework Wins? Real‑World Benchmarks on Performance, Size, and Code Lines

In recent years, front‑end technologies—especially frameworks—have exploded in popularity, each capable of building great web applications. Developers need a meaningful comparison based on three key factors: real‑world operational apps, standardization (including server‑hosted back‑end API, static HTML, CSS), and expert‑built projects.

Eric Simons created a medium‑size blog project that implements the same HTML structure, CSS, and API spec while swapping the front‑end library or framework. This serves as the benchmark for the comparison.

Performance : Measured by how quickly the app becomes usable and displays content, using Chrome's Lighthouse audit for first‑render and first‑interaction timing.

Size : Measured by the transmitted bundle size reported in Chrome's network tab, considering GZip compression; smaller files mean faster downloads and parsing.

Code Lines : Counted with the open‑source tool cloc, which tallies source lines in the src directory, excluding blanks and comments. Fewer lines generally imply lower error probability and maintenance complexity.

The frameworks evaluated (as of December 2017) include:

React/Redux

Elm

Angular 4+

AngularJS 1.5+

React/MobX

Crizmas MVC

ClojureScript Keechma

AppRun

Performance results show most frameworks fall within good to excellent ranges with no dramatic differences. Size measurements reveal relatively small variations; AppRun’s bundle is notably tiny at 18.7 KB. Code‑line counts highlight Elm’s efficiency, while dynamic languages (React, AngularJS, etc.) tend to have higher counts.

Strongly typed frameworks (Elm, Angular 4+, AppRun) contrast with dynamic ones (React/Redux, Angular 1.5, React/MobX, Crizmas MVC, ClojureScript Keechma, re‑frame). Neither type is universally better; the choice depends on project needs, similar to preferences for TDD.

Future evaluations will include additional frameworks such as Vue, Preact, Ember, Svelte, and Aurelia.

Overall, real‑world product performance may differ from benchmark results due to server load, network bandwidth, and other factors, but the study provides a practical reference for selecting a front‑end framework.