Optimizing Front-end Frameworks for Strong and Small Full Stack Apps: A Real-World Conduit Benchmark
The Conduit benchmark, a real-world clone of Medium.com, has recently updated its benchmark results, showcasing the performance of 18 different front-end frameworks in building a full-stack application. The results demonstrate that 13 of these frameworks achieved a top score of 90 out of 100 points or more in the Lighthouse performance evaluation.
The Top-Performing Frameworks
The top-performing frameworks, including Elm, Dojo, Vue, Angular, Aurelia, Stencil, Svelte, and React, are already well-established and mature frameworks. However, the results also highlight the performance of simpler frameworks such as AppRun and HyperApp, as well as the compiled JavaScript framework Imba.
Performance Evaluation
The Conduit benchmark focuses on three key areas: performance, size, and code quantity. Performance is evaluated using the Lighthouse tool, which assesses six weighted metrics:
- Time to Interactive (TTI): The time it takes for a page to become interactive.
- Speed Index: The speed at which page content is processed, with lower scores indicating faster performance.
- First Contentful Paint (FCP): The time it takes for the browser to start rendering the first byte of content.
- First CPU Idle: The time it takes for the page to become interactive without waiting for all elements to be loaded.
- First Meaningful Paint (FMP): The time it takes for the user to perceive the main content of the page.
- Estimated Input Latency: The delay between user input and the response.
Transfer Size and Code Quantity
The Conduit benchmark also evaluates the transfer size of each framework, which is measured using the Network page in Chrome developer tools. The results show that six of the top-performing frameworks (Svelte, Stencil, AppRun, Dojo, HyperApp, and Elm) have a transfer size of less than 30KB.
Why are these Frameworks so Small?
The small transfer sizes of these frameworks can be attributed to various features, including:
- Svelte’s ability to compile API into optimized JavaScript.
- Stencil’s compilation into a Web component, resulting in a small transfer size of only 6KB.
- AppRun and HyperApp’s small volumes of 3KB and 1KB, respectively.
- Dojo’s automatic code split characteristics and optimized PRPL performance mode.
- Elm’s optimization for asset files in version 0.19.
Conclusion
The Conduit benchmark provides valuable insights into the performance of 18 different front-end frameworks in building a strong and small full-stack application. By evaluating performance, size, and code quantity, developers can make informed decisions when choosing a framework for their next project. The results highlight the importance of considering multiple factors when selecting a front-end framework, and the need for a holistic approach that balances quality and quantity.
Framework Benchmarking
Framework benchmarks, such as the Conduit benchmark, play a crucial role in comparing the performance of various frameworks in a meaningful way. By evaluating different aspects of a framework, such as performance, size, and code quantity, developers can make informed decisions and choose the best framework for their project. However, the choice of framework should also consider other factors, such as the specific needs of the project, the experience of the development team, and the overall quality and quantity of the framework.