Each year for the past eight years, a group of front-end developers has conducted a survey titled the State of JavaScript. This survey primarily focuses on the technology stack choices within the front-end and JavaScript development community, rather than delving into design patterns or methodologies. One particularly valuable feature of this survey is its ability to track trends over the years.
In this post, I highlight a few intriguing areas and graphics from the 2024 survey, offering my perspective with a focus on how CMG fits into each trend. In each section, I provide links to the survey for further exploration. All images and references below are sourced from the 2024 State of JavaScript survey.
Audience for this post: Engineers who are familiar with JavaScript will benefit the most, but anyone involved in building software is likely to find something interesting here.
React
While React has lost a bit of market share, it remains a (the?) dominant front-end framework. In the mid-2010s, it felt like a new framework was being released (and dying) every few months. For better or worse, core front-end UI frameworks have reached a level of maturity not seen before in the JavaScript space.
CMG Perspective
CMG primarily uses React for front-end development. While the most popular framework isn’t always the best choice, our decision to adopt React many years ago has proven beneficial in many areas. We benefit from using a framework that is popular, secure, well-supported, actively developed and has rich open-source projects. Sticking solely with React also streamlines other aspects of development, like testing utilities, build tooling, UI components and technical design patterns.
Application Patterns
Which of the following architecture and rendering patterns have you used in the last year?
For how much we hear about server-side rendering (and the pain of Next.js) or React server components, this data shows how single-page applications (SPAs), which render entirely on the end user’s computer, continue to dominate after all these years. In some ways, it’s a case of history repeating itself. Initially, the web was predominantly server-rendered, with dynamic user interfaces gradually introduced throughout the 2000s. The 2010s saw a significant rise in SPAs, transforming how users interacted with web content. In the last five years, we’ve witnessed a resurgence of server-side rendering frameworks.
Given that end-user computers are faster than ever, users are demanding more real-time and more fluid UIs and search engines are now executing JavaScript, it’s reasonable to question the motivation behind bringing rendering back to the server. The data shows this motivation is not as significant as many JavaScript newsletters may imply.
CMG Perspective
CMG predominately develops web applications as SPAs. Recently, we have started exploring dynamic imports to incrementally load UI code as users navigate the application. This technique, along with exploration of host/remote usage (micro front-ends) and tree-shaking, yield performance benefits while maintaining clear boundaries between the front-end and back-end.
Language Features
Which of these syntax features have you used?
More than anything, the lack of exciting features in these responses indicates how mature JavaScript has become. In previous years, you’d often see groundbreaking features like Promises. Today, the most popular addition is nullish coalescing – nice to have, but it’s not shifting how we build.
CMG Perspective
Since we use TypeScript, we already have access to most new language features being introduced for JavaScript.
New Proposals
Which of these active JavaScript proposals are you most excited about?
The most anticipated feature is a revamp of JavaScript’s date and time constructs via a new Temporal proposal. That said, I wouldn’t hold my breath – what programming language has an out-of-the-box date library that developers are actually happy with? Dates are difficult.
Browser APIs
WebSockets are popular, likely due to both their longevity and continued user expectations that web app interfaces should be “dynamic” (chatbots, notification systems, auto-updating data, etc.).
We’re seeing standardization across a variety of techniques that used to require hacky, browser-specific solutions. Examples include the Page Visibility API to detect if users are focused on your browser tab and the Broadcast Channel API for a standard approach to cross-tab communication.
CMG Perspective
We started to use the Notifications API (lumped under “Progressive Web Apps” in the survey) this year to power CMG XCTM’s desktop notifications.
Browser Pain Points
While consistency across browsers continues to be a challenge, only 35% of respondents said as much in the survey, which speaks volumes about where we are now compared to a few years ago, when Internet Explorer was in the mix. It’s funny to now see Safari, built using WebKit, as the most painful browser to work with.
CMG Perspective
Browser-dependent issues are uncommon in our experience, as many of our clients primarily use Chrome or Edge. We’re keeping an eye on our clients’ adoption of alternative browser environments, such as “enterprise browsers” like Island and FDC3-compliant smart desktop environments like OpenFin. Will these environments stick to web standards, or will they remind us more of the Internet Explorer days?
Build and Monorepo Tooling
Out with Webpack, in with Vite
The tide has been turning in Vite’s favor in recent years, evidenced by decisions from some of the biggest open-source projects. Playwright Component Testing has been built with Vite, NX has adopted Vite as its default bundler for newly generated projects and Storybook has added support for it.
Look at the dramatic shift in sentiment, with Vite receiving rave reviews and Webpack continuing its downward slide. However, Webpack will likely maintain significant market share for years to come. Once a dev team has functional build tooling in place and it ‘just works’, it’s difficult to muster the motivation to switch simply because another tool has become more popular. Also, Webpack is not a bad tool.
Webpack Usage |
Vite Usage |
Webpack Sentiment |
Vite Sentiment |
CMG Perspective
Recently, we transitioned away from create-react-app (CRA) project, prompting a reassessment of our build tooling. As a result, CMG adopted Vite as our primary build tool and bundler going forward.
Watch Out for Rolldown
Vite uses esbuild for dev mode bundling, but it uses Rollup for production bundles. This could lead to inconsistencies in what engineers are building with each day versus what actually gets deployed to customers. It also makes Vite’s configuration interface confusing, requiring the use of different tools. Rolldown promises to be the answer to that – more here.
Monorepo Tools
Which of these tools do you use in a professional context?
Only a few years ago, this list was much smaller. The more common approach to front-end development was to maintain many repositories, publishing npm packages to facilitate artifact sharing. Lerna paved the way to think differently – focusing on ease of sharing code, atomic commits and simplified dependency management. The next generation of monorepo tooling (NX, pnpm, Turborepo) continues the evolution.
CMG Perspective
CMG utilizes a front-end monorepo, where all our applications and libraries are organized within a single repository. This structure is divided into folders, each representing a distinct project. To manage this setup, we embraced Yarn Workspaces several years ago. More recently, we have integrated NX, which interops well with Yarn Workspaces. With the removal of CRA in 2024, we anticipate leveraging additional benefits from NX in future projects.
Testing Frameworks
Decrease in Positivity
Why is it that every notable testing framework has decreased in positivity in recent years? Well, take a look at the early years: there were few options for testing complex web applications. Maybe our expectations were low, but now that we have many options, we are going down a path similar to front-end frameworks. We’re in the messy middle, waiting for the stable winners to emerge.
TestCafe and Playwright
Most have never heard of TestCafe, and those that have used it have a negative sentiment. This is in stark contrast to Playwright, which has seen a dramatic increase in usage and awareness over the past two years.
CMG Perspective
We adopted Playwright as our standard end-to-end testing framework a couple of years ago. We are in the process of phasing out TestCafe this year.
Selenium
A majority have heard of Selenium but have not used it, and I can assure you this is not because it has yet to gain adoption. It’s a reflection of Selenium’s age. Its longtime presence in the end-to-end testing world has left an impression, but it is now rarely used. It seems likely that this “heard of it” stat results from tenured engineers retelling Selenium war stories.
CMG Perspective
Selenium has not been part of CMG’s testing strategy.
Testing Lightning Round
- Jest: Still the dominant player in unit testing, although Vitest is viewed as an improved alternative that offers API compatibility with tests written for Jest.
- Storybook: Since its inception, Storybook has been highly effective for isolated development and documenting standard UI components. It’s great to see it categorized as a testing utility. In recent years, Storybook maintainers have focused more on using it for automated testing.
- Testing Library: We transitioned to Testing Library as the utility library for testing React components for new development. We currently maintain some legacy test files using Enzyme, that once was the only solution for unit testing React components, reflecting its historical role in React testing.
What’s Missing?
Notably missing from this survey are CSS and component library questions. While it is the State of JavaScript and not the “State of UI,” the survey largely focuses on building web applications. A core part of that is working with a UI library and styling solution, which are nowadays implemented in JavaScript.
While the survey has a section focused on meta frameworks, it’s glaringly missing questions regarding technology choices related to common needs, like state management, routing and data grids.
Overall Takeaways
The 2024 State of JavaScript survey provides an intriguing snapshot of the JavaScript ecosystem’s continued evolution and maturity. While some trends, like the enduring dominance of React and SPAs, reflect stability, others, such as the rise of sophisticated monorepo managers and standardization of Web APIs, highlight innovation in specific areas. CMG’s strategic alignment with these trends — prioritizing React, adopting Vite and leveraging modern testing frameworks — positions us to stay ahead of the curve and deliver maximum value to our clients. As the JavaScript landscape continues to shift, maintaining a balance between adopting emerging tools and sticking with proven technologies will be key to our long-term success.
