Sharing Top Content from the Angular-sphere.

A Real-World Comparison of Front-End Frameworks with Benchmarks

  • At the time of writing (Dec 2017) the RealWorld project is available in the following frameworks:Metric #1: PerformanceFirst meaningful paint test with Lighthouse Audit that ships with Chrome.The sooner you paint, the better the experience for the person who is using the App.
  • GZIPed response headers plus the response body, as delivered by the server.Smaller file = faster download and less to parse.This depends on the size of your framework, any extra dependencies you added, and how well your build tool can make a small bundle.Transfer size (KB) – lower is betterMetric #3: Lines…
  • Blank and comment lines are not part of this calculation.Why is this meaningful?If debugging is the process of removing software bugs, then programming must be the process of putting them in – Edsger DijkstraThe fewer lines of code you have the smaller probability of an error and smaller code base to…
  • We are comparing similar implementations and look at how bundle sizes differ.
  • Elm is doing an amazing job when it comes to bundle size and especially when you look at lines of code.AppRun bundle size 18.7KBLines of codeThis has the biggest impact on you as a software developer.

Over the last couple of years we have seen an explosion of front-end frameworks. Each one of them is more than capable of building great web applications. So how do you compare and decide which one…

At the time of writing (Dec 2017) the RealWorld project is available in the following frameworks:Metric #1: PerformanceFirst meaningful paint test with Lighthouse Audit that ships with Chrome.The sooner you paint, the better the experience for the person who is using the App. Lighthouse also measures First interactive, but this was almost identical for most apps.First meaningful paint (ms) – lower is betterMetric #2: SizeTransfer size is from the Chrome network tab. GZIPed response headers plus the response body, as delivered by the server.Smaller file = faster download and less to parse.This depends on the size of your framework, any extra dependencies you added, and how well your build tool can make a small bundle.Transfer size (KB) – lower is betterMetric #3: Lines of CodeUsing cloc we count lines of code in each repo’s src folder. Blank and comment lines are not part of this calculation.Why is this meaningful?If debugging is the process of removing software bugs, then programming must be the process of putting them in – Edsger DijkstraThe fewer lines of code you have the smaller probability of an error and smaller code base to maintain.# Lines of code – fewer is a RealWorld Comparison and not a benchmark in a vacuum. Tests were performed out of Europe (Switzerland). All Apps were hosted on Github. Values may differ for you, which is fine. Tests were performed couple of times for each app, then averaged, and rounded. Results were pretty linear when comparing throughout the day. Most of the libraries/frameworks are in the range…

A Real-World Comparison of Front-End Frameworks with Benchmarks