Originally written by Jacek Schae, translated by authorized LeanCloud.

We will compare the front-end frameworks based on the RealWorld sample application. RealWorld sample application features:

  • RealWorld applications

    More complex than to-do applications. Often to-do applications do not convey enough knowledge and insight to build practical applications.

  • standardized

    Projects follow specific rules. Provides back-end apis, static markup languages, styles, and API specifications.

  • Written and reviewed by professionals

    Ideally, this would be a high-consistency, high-fidelity project written or reviewed by a professional using the technology.

Comparison libraries and frameworks

As of this writing, the RealWorld sample application repository contains 18 Conduit (Medium.com clone) implementations.

Regardless of the popularity of the framework, front-end frameworks listed in the RealWorld repository are included in the comparison.

measure

performance

How long will it take for the app to display the content and make it usable?

size

How big is the application? We only compare compiled JavaScript file sizes. All applications use the same CSS style file, which is loaded from the CDN. All applications use the same HTML. Each of these frameworks supports compilation or conversion to JavaScript, so we only measure JavaScript file sizes.

Lines of code

How many lines of code does it take to create a RealWorld application according to the specification? To be fair, some implementations have slightly more functionality, but that shouldn’t make a significant difference. We only measure the SRC/directory for each application.

performance

We will use Chrome’s Lighthouse Audit to test performance. Lighthouse returns scores between 0 and 100. 0 is the lowest score.

configuration

All tests use the following configuration:

Performance scores are based on the following measures:

  • First Contentful Paint (the First rendering time of content elements in a page)
  • First Meaningful Paint (First render time for Meaningful content elements on a page)
  • Speed Index (visual rate of change during page loading)
  • First CPU Idle
  • Time to Interactive
  • Estimated Input Latency (Estimated Input Latency)

See the Lighthouse Scoring Guide for details.

TL; DR

The faster you render the first time, and the less time it takes to operate, the better your application’s user experience will be.

Note: We skipped PureScript because it has no Demo application.

conclusion

Most apps are rated above 90. As a result, users probably won’t notice a significant difference in the performance of these frameworks.

size

The transfer size is calculated according to the Chrome Developer tools Web TAB, including the response header and the response body (GZIP compressed) delivered by the server.

This depends on the size of the framework and the size of additional dependencies, as well as the efficiency with which build tools can streamline unused code.

TL; DR

The smaller the file, the faster the download and the less content you have to parse. (The units in the figure below are KB.)

conclusion

There have been some surprising results. Svelte, the Magic Disappear UI framework, deserves its name. Stencil is a relatively new framework and performs well. Both frames are relatively new, pushing dimensions to new limits.

Lines of code

We use CLOC to count the number of lines of code in the SRC directory of each repository, regardless of empty lines and comments. Why compare lines of code? This is because:

If debugging is the process of removing software bugs, programming must be the process of embedding bugs.

Edsger Dijkstra

TL; DR

The chart below shows how concise a given library/framework/language is. How many lines of code are required to implement an almost identical application (some with slightly more functionality) according to the specification.

Note: We skipped Imba because CLOC can’t handle.imba files. Elm developers write code like branches, so it’s a lot of lines (at least that’s what I’m told). Angular+ NGRX only computes.ts and.html files in the libs directory. If you think this is wrong, please tell me the correct numbers and how to calculate them. Hyperapp had an incorrect line of code calculation at the time of publication, thanks to Mateusz Kwasniewski for pointing out the correct line of code.

conclusion

In terms of lines of code, the Re-frame using ClojureScript gives the result of cracking 💥. Clojure is known for its unusually high expressiveness. If you care about lines of code, you should know something about ClojureScript, AppRun, Svelte.

conclusion

Don’t forget that this is not an exact and fair comparison. Some implementations separate the code, some do not. Some are on GitHub, some on Now, and some on Netlify. If you still have to ask which is the best? All I can say is that the best framework is the one that best fits your needs.

Q: Favoring strong type checking? A: Learn about Elm, PureScript, TypeScript — Angular, AppRun, Dojo.

Q: Want a very lightweight frame? A: Svelte, Stencil, AppRun.

Q: Want to maintain as little code as possible? A: Learn about Re-frame (using ClojureScript), AppRun, Svelte.

Q: Want to learn something new? A: Choose frames you don’t understand!

FAQ

1. Why not compare frames X, Y, and Z?

Because the implementation in the RealWorld repository is incomplete. Consider contributing code! Implement them with your favorite libraries/frameworks and we’ll include them in our next comparison!

2. Why is it called RealWorld?

Because its function is more complex than the to-do application. RealWorld doesn’t mean we compare salary levels, maintenance levels, productivity, learning curves, etc. There are other studies that answer some of these questions. RealWorld means that the app will connect to a server like a RealWorld project, authenticate users, and allow them to add, delete, change, and check.

3. Why didn’t you include my favorite frame?

Go back to the first question above. However, I want to emphasize that the implementation in the RealWorld repository is incomplete. These are the results of community efforts, not mine. If you want to see your favorite frameworks in comparison, consider contributing code.

4. Which version of the library/framework are you comparing?

Version available as of this writing (March 2019). See the RealWorld warehouse for details.

5. Why is there no comparison to a much more popular framework?

Again, look at the previous question. Quite simply, the implementation in the RealWorld repository is incomplete.

Thanks to Rich Harris and Richard Feldman for reviewing this article before publication.

If you enjoyed this post, follow me on Twitter. I only tweet about programming and technology.

Note: Various implementation differences (such as whether Vue is paired with Vuex) and other factors can have a significant impact on the results, so the chart is for reference only and does not accurately reflect the framework’s strengths and weaknesses. Moreover, the selection of a framework involves many factors, many of which in most scenarios weigh much more than performance, size, or lines of code. So, as stated in the article, the best framework is the one that best fits the requirements.