[

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

](https://lp.logrocket.com/blg/content-advisory-board-signup).metrics-banner {padding: 8px 0px; background: #764abc ;color: #ffffff;} .metrics-banner h6 {color: #ffffff;text-align:center; margin: 0px !important;} #metrics-embed {width: 65.5%; margin: 0px auto; display: block;} .mediumnavigation {padding: 0px 0px 8px 0px;} @media all and (max-width: 800px){ .mediumnavigation{box-shadow: none !important;} #metrics-embed {width: 90%;} .mainheading {padding: 4rem 0 1rem 0;} }

2019-01-30

1955

Kevin Ball

Jan 30, 2019 ⋅ 6 min read

The increasing nature of frontend complexity

Kevin Ball I love writing code, but I also love teaching and helping teams reach their full potential. I can help your frontend developers level up their skills, improve their processes, and really up their game through on-site or remote training.

LogRocket Galileo logo

Introducing Galileo AI

LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns.

LEARN MORE

.plug-dev-top--card { border: 2px solid rgba(118, 74, 188, 0.2); border-radius: 8px; background-color: #491d90; justify-content: space-between; align-items: center; padding: 16px; font-family: 'Proxima Nova', sans-serif; display:flex; gap: 1rem; cursor: pointer; } .plug-dev-top--logo { width: 48px; height: 48px; border-radius: 50%; } .plug-dev-top--blurb { h2 { font-weight: 800; font-size: 22px; line-height: 22px; color: #fff; width: 70%; margin: 0 0 5px 0; } h3 { font-weight: 900; font-size: 13px; line-height: 13px; letter-spacing: 0.1em; color: #fff; opacity: 0.5; white-space: nowrap; margin: 0; } } .plug-dev-top--cta { background-color: #fff; color: #764abc; border: none; border-radius: 4px; padding: 10px; font-size: 16px; font-weight: 800; font-family: 'Proxima Nova', sans-serif; text-decoration: none; width: 25%; text-align: center; &:hover { text-decoration: none; color: #a58ec8; } } .plug-dev-top--asset { position: relative; height: 400px; overflow: hidden; transition: all 0.3s ease; margin-top: 30px; &.lr-hidden { height: 0; margin: 0; } }

See how LogRocket's Galileo AI surfaces the most severe issues for you

Check it out

Frontend web development has never been a hotter or more controversial topic.

Where once it was the server-side community that was embroiled in arguments over seemingly obscure topics, like whether ORMs were useful abstractions, now you can’t ask whether CSS belongs in JavaScript without raising everyone’s hackles.

The proliferation of frameworks and buzzwords in the JavaScript ecosystem has gotten so extreme that Medium thought pieces on JavaScript fatigue are the new lightning rod of the development world. We can’t even stare at our own navels without sparking off a ‘navel-gazing considered harmful’ trend on hackernews.

What is the source of all of this frustration and angst? Is this the standard cycle of new technologies sparking backlash by everyone invested in prior generations of technology, or is there an underlying root cause?

Controversy follows change and uncertainty. Where there are real problems and no accepted right answer, we argue over possibilities. And when we disagree about what the problems even are, we run into real challenges.

Controversy tends to spike in the development community during periods of change. And, surprise, we are in the midst of a massive and rapid period shift in complexity from the backend to the front.

Front end software development is:

– real-time (instant load, 60fps)
– distributed, incremental (synchronize remote data as needed)
– asynchronous
– reactive (react to user actions in realtime)

Front end is the hardest kind of dev I do. The folks who do it every day are heroes.

— Yehuda Katz 🥨 (@wycats) November 14, 2017

Conservation of complexity

Not everywhere in the web world are things increasing in complexity. It’s never been easier to put together a database-driven API. For simple examples, you can fire up Firebase and never touch a line of code. The tooling and automation has reached an incredible level of sophistication, and as a result many tasks are simpler than ever before.

Sophistication in tooling has not made our job as engineers go away.

There seems to be a universal axiom that the amount of complexity we have to account for never goes down, it simply moves around. In this case, the reduction of complexity in creating server-side applications has co-occurred with a dramatic shift of complexity towards the frontend, a shift we are very much still in the midst of dealing with.

Origins of the shift: Not one megatrend, but three

The rise in frontend complexity stems from the confluence of three megatrends, each with their own reasons and impacts, coming together to create a perfect storm.

Diversification of devices

The first of these megatrends is the incredible diversification of network connected devices that run web browsers. When I started in the web, you assume your users were on desktop devices running on dial-up or DSL. The variation in screen size, latency, and bandwidth that we had to deal with were minimal. Today’s frontend developers need to account for everything from tiny budget phones with only 320px wide screens on 3G connections up to massive desktop screens running on high speed corporate ethernet.

The bar for quality is higher

At the same time, the quality bar has risen dramatically.

[

](https://lp.logrocket.com/blg/learn-more)

[#replay-signup { margin-block: 1rem; display: flex; gap: 0.5rem; flex-direction: column; align-items: center; border: 1px solid #E6DFF6; border-radius: 16px; padding: 0.5rem 2rem; background-color: #F4F0FB; font-family: 'Proxima Nova', sans-serif; font-size: 0.95rem; h3 { margin: 0; font-weight: bold; } p { max-inline-size: 65ch; } .replay-signup-form-wrapper { width: 60%; } .nf-before-form-content { display: none; } input.nf-element[type="submit"] { background-color: #764abc; color: #fff; border-radius: 8px; padding-block: 10px; height: unset; width: 100%; display: block; } .nf-response-msg { font-size: 1.2rem; text-align: center; } }

](https://lp.logrocket.com/blg/learn-more)

The Replay is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

Notice: JavaScript is required for this content.

{{{ data.renderProgressBar() }}} {{{ data.renderBreadcrumbs() }}} {{{ data.renderPartTitle() }}}

{{{ data.title }}}

{{{ data.renderNextPrevious() }}}

{{{ ( part.errors ) ? '' : '' }}} {{{ part.title }}}

Over 200k developers use LogRocket to create better digital experiences

Learn more →

@media all and (max-width: 800px){ .tweet-embed-container {flex-direction: column !important;} .single-tweet, .embed-tweet-right {width: 100% !important;} } .embed-link {text-decoration: none;} .embed-link:hover {text-decoration: none;} .tweet-embed-container {border-radius: 20px; background: radial-gradient(79.69% 102.24% at 100% 100.11%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(89.7% 115.09% at 3.43% 2.75%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), #764ABC; background-blend-mode: overlay, overlay, normal; box-shadow: 0 4px 0 #d5d5d5; width: auto; padding: 20px 15px; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: 0 auto; gap: 3%; } .single-tweet {width: 50%;} .single-tweet img {max-width: 100%;height: auto; border-radius:7px;} .embed-tweet-right {width: 46%;} .embed-tweet-right h2 {font-family: 'Avenir'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 28px; color: #FFFFFF;} .embed-btn { display: flex; flex-direction: row; justify-content: left; width: 170px; gap: 5px; align-items: center; padding: 0px 10px; font-family: 'Avenir'; font-style: normal; font-weight: 900; font-size: 16px; line-height: 16px; color: #764ABC; height: 48px; /* White */ background: #FFFFFF; mix-blend-mode: normal; box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.11); border-radius: 80px; border: none; }

The web is in the midst of a shift from the most widely used document platform in the world to the most widely used application platform. Users expect web applications to feel as snappy and responsive as native applications. Increasingly, design is a differentiator.

Massive market growth

Finally, the number of consumers able to access the web has grown dramatically. According to the ICT report on internet usage, since 2010 alone we’ve gone from approximately 2 BILLION people online to over 4 BILLION, a massive increase in the audience that web developers are targeting.

Evidence of the shift

It is this combination of trends — the increased complexity of environments, higher quality bar, and the market pressure of a massive increase in audience that has led to the frantic and often chaotic explosion of activity in the frontend web space.

Evidence of this explosion is everywhere. With HTML, CSS, and JavaScript as the primary tools used to address the frontend, we can see this looking at those ecosystems.

Ecosystem growth

The number of JavaScript packages registered on npm is on a fundamentally different growth curve than packages in every other programming language.

Comparison of module counts by ecosystem. Source: http://www.modulecounts.com/

Frontend HTML and CSS frameworks have also multiplied. Five years ago you might have had three choices — the venerable grid960 or one of the newly hot full featured frameworks, Bootstrap or Foundation. Today, a quick search for “css frameworks” turns up a list of over 100!

New programming models

Beyond the explosion of tooling in the existing language ecosystem, we’re also seeing a fundamental shift in the programming models & possibilities available to us. To handle increasingly complex user interfaces, we’re seeing a shift towards new programming models.

The first efforts work within the existing languages to use models that are shown to better scale with complexity — component-based architectures, functional programming mechanisms, and carefully encapsulated state.

The next generation is going farther, thinking beyond the limits of the JavaScript programming model with new languages that have fundamentally different programming models like Elm and Web Assembly.

What does this all mean?

One of the most obvious impacts of this massive shift in complexity is visible in the stress and fatigue that frontend developers have been feeling and complaining about.

When your field is changing so quickly that best practices are obsolete within two years, you have to run just to keep up.

The same thing happened a decade ago in server technology — keeping up with the latest and greatest in Ruby on Rails or Django was a full-time job. But today, that technology stack has matured.

This isn’t to say stagnated. Not at all. There is still serious progress being made. But, one can make a good living as an API developer using Ruby on Rails without spending half of your work life racing to keep up. In fact, some of the biggest differences in recent releases have been not in the core technology, but in integrating the newest frontend tools like webpack.

You can’t escape tooling

Another major impact of the massive shift in complexity towards the frontend, is that frontend tooling is no longer a “nice to have.” It is both a necessity and a glaring pain point.

Tools exist for a purpose. Humans can only comprehend and handle so much complexity at a time. Tools allow us to encapsulate blocks of complexity into simpler pieces, letting us abstract away problems and create increasingly complex solutions.

As our requirements on the frontend have become complex, an entire ecosystem of frontend tools has germinated out of necessity. Tools like gulp, webpack, brocolli, rollup, babel, flow, and more exist to help us harness the chaos and make it manageable.

However, for all of the frontend tooling that has been developed, it’s actually one of the glaring holes in the ecosystem. Compared to back-end tooling, the frontend tooling ecosystem is incredibly raw and immature.

Browsers are moving rapidly to improve debugging tools, but logging is still primitive. Build tools are also improving rapidly but they too are still in their infancy. Furthermore, configuring them is overly complex (have you tried configuring webpack by hand recently?. Plus, community support and funding continue to lag behind backend tooling.

Tremendous opportunity

The combination of massive market demand and glaring holes in the ecosystem creates an incredible opportunity for individuals and companies alike.

At the company level, the inadequacy of the tooling available for the frontend creates business opportunities to plug those gaps. LogRocket is attacking the problem of frontend logging, but there are a multitude of other opportunities here.

Who will create a better frontend focused IDE? Better frontend performance monitoring? Better systems for testing and validation? While versions of these tools all exist, they all feel primitive compared to the level of tooling available to us in the backend.

At the individual level, the opportunity is even larger. New tooling and frameworks create tremendous power, allowing individuals to solve problems and create products that previously took entire teams to implement (or weren’t even possible).

And the field is expanding far faster than the number of developers can keep up. Obviously, tons of demand and not enough supply equals jobseeker’s market.

But when you combine that with exponentially increasing power to create value you get a market where a skilled frontend developer can practically dictate their terms.

Where is this going?

Making predictions in a field changing as rapidly as this one is an exercise in misestimation. But, there are a few things I can say with certainty.

First, it’s not going to slow down anytime soon. The forces that have driven the rise in frontend complexity are not going away, and the current solutions are just not good enough for the pace of innovation to drop.
Second, “frontend web development” will expand into more and more previously native domains.

The rise of WebVR creates an opportunity to create powerfully immersive media experiences that previously might have required massively custom solutions. And with the web, you can seamlessly and progressively engage someone into a VR experience, adjusting for the power of their device, and linking out to non-VR resources where they are more appropriate.

New specifications like the Web Payments API support seamless access to capabilities that previously were restricted to native devices only. Imagine a world where paying for things online is as simple as buying things from an app store — a simple thumb ID and you’re done. What new experiences will move to the web? What new opportunities will this unlock?

The complexity will continue to increase, but the supporting tooling ecosystems will also mature. It’s already happening. Look no further than the way we’re working on the core underlying technologies. There’s TC39 working on the JavaScript language and the CSS WG working on the CSS specification.

Both have dramatically improved the speed and consistency of new spec releases. The spec communities have figured out how to iteratively improve the specifications, and the browser vendors are increasingly able to coordinate and release improvements on an ongoing basis.

Astoundingly, we have reached a point where every major browser is an evergreen browser. Now we can imagine a future where almost every user has instant access to new web platform features as they are developed.

Lastly, we’re also seeing the non-browser tooling starting to improve. Webpack and Babel are increasingly being supported by the community, and tooling vendors like LogRocket are beginning to carve out supportable businesses and support frontend developers.

The future’s so bright…

This is a hard time to be a frontend developer.

The technology is moving so fast it’s hard to keep up, the ecosystem is fragmented, and there is tremendous pressure for even individuals to meet and exceed the user experience standards set by massive billion-dollar companies.

All of that is true, and yet I could not be more excited about the future of frontend development. We’re in an incredible time of innovation and change, with the browser transitioning to become the platform for application delivery and execution for an audience that is 4 billion strong and growing. There have never been more opportunities, and there has never been more powerful tooling.

This is an amazing time to be a frontend developer.

Kevin Ball has been a web developer for over a decade, co-founded and served as CTO for 2 web startups, and has given talks all over the world. He is currently president of ZenDev, LLC, a frontend consulting and training company, and publishes the Friday Frontend newsletter.

.plug-cta-button { display: block; margin: 0 auto; width: 250px; height: 55px; background-color: #764abc; border-radius: 8px; color: #fff !important; font-family: proxima-nova, sans-serif; font-size: 16px; font-weight: 800; text-decoration: none; text-align: center; line-height: 55px } #plug-tabs > ul { display: flex; border-bottom: 1px solid gray; list-style: none; padding: 0; } #plug-tabs > ul li a, #plug-tabs > ul li a:active, #plug-tabs > ul li a:hover { display: block; padding: 0.25rem 1rem; text-decoration: none; } #plug-tabs .ui-tabs-active { border-top-right-radius: 8px; border-top-left-radius: 8px; border: 1px solid gray; border-bottom: 1px solid white; margin-bottom: -1px; } #plug-tabs pre { margin: 0 0 1rem 0; } window.addEventListener('load', function() { jQuery("#plug-tabs").tabs(); });

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side
- npm
- Script tag
$ npm i --save logrocket

// Code:

import LogRocket from 'logrocket'; LogRocket.init('app/id');

// Add to your HTML:

(Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin

Get started now

.share-icon.share-twitter span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-twitter.svg"); } .share-icon.share-reddit span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-reddit.svg"); } .share-icon.share-linkedin span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-linkedin.svg"); } .share-icon.share-facebook span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-facebook.svg"); }

Stop guessing about your digital experience with LogRocket

[

Get started for free

](https://lp.logrocket.com/blg/signup)

@media all and (max-width: 750px) { .footer-cta-logo-container {display:none !important;} .footer-cta-container h2 {width: 90% !important; padding-top: 50px !important;} .footer-cta-button {width: 40% !important;} } .footer-cta-container {border-radius: 20px;background: linear-gradient(90.32deg, #8F00FF 0.28%, rgba(143, 0, 255, 0) 99.72%), #764ABC; box-shadow: 0px 64px 74px 0px #764ABC40; padding-bottom: 30px; width: 95%; margin: 0 auto 60px auto; position: relative; margin-top: 3rem; } .footer-cta-tr {position: absolute; top: 30px; right: 30px; } .footer-cta-bl {position: absolute; bottom: 30px; left: 30px; } .footer-cta-bl {} .footer-cta-logo-container { width: 20%; padding: 10px 15px; display:block; margin: 0 auto; position: relative; background: #fafafa; border-radius: 0 0 20px 20px; } .footer-cta-logo-container::before { content: ""; position: absolute; top: 0px; height: 50px; left: -25px; width: 25px; border-top-right-radius: 25px; box-shadow: 0 -25px 0 0 #fafafa; } .footer-cta-logo-container::after { content: ""; position: absolute; top: 0px; height: 50px; right: -25px; width: 25px; border-top-left-radius: 25px; box-shadow: 0 -25px 0 0 #fafafa; } .footer-cta-container h2 {color: #ffffff; text-align: center; width: 70%; position: relative; margin: 40px auto;} .footer-cta-container a {text-decoration: none;} .footer-cta-logo-container img {display: block; margin: 0 auto; padding: 10px; max-width: 150px;} .footer-cta-br {position: absolute; left: 5px; bottom: 5px;} .footer-cta-button {padding: 10px 20px; border: 1px solid #ffffff; width: 20%; border-radius: 20px; color: #ffffff; position: relative; display:block; margin: 0 auto 20px auto; text-align: center; text-decoration: none;}

Should you bet on Valdi instead of React Native?

](https://blog.logrocket.com/valdi-instead-react-native/)

Valdi skips the JavaScript runtime by compiling TypeScript to native views. Learn how it compares to React Native’s new architecture and when the trade-off makes sense.

Ikeh Akinyemi

Dec 30, 2025 ⋅ 7 min read

[

8 frontend development trends 2026

The 8 trends that will define web development in 2026

](https://blog.logrocket.com/8-trends-web-dev-2026/)

What trends will define web development in 2026? Check out the eight most important trends of the year, from AI-first development to TypeScript’s takeover.

David Omotayo

Dec 30, 2025 ⋅ 6 min read

[

AI First Debugging

AI-first debugging: Tools and techniques for faster root cause analysis

](https://blog.logrocket.com/ai-debugging/)

AI-first debugging augments traditional debugging with log clustering, pattern recognition, and faster root cause analysis. Learn where AI helps, where it fails, and how to use it safely in production.

Alexander Godwin

Dec 29, 2025 ⋅ 6 min read

[

Container queries in 2026: Powerful, but not a silver bullet

](https://blog.logrocket.com/container-queries-2026/)

Container queries let components respond to their own layout context instead of the viewport. This article explores how they work and where they fit alongside media queries.

Sebastian Weber

Dec 26, 2025 ⋅ 12 min read

View all posts

#comments .comment .reply::after { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/reply.svg"); background-repeat: no-repeat; }

Leave a ReplyCancel reply

document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } });

{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/logrocket/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}

Would you be interested in joining LogRocket's developer community?

Yea No Thanks

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

{{{ data.beforeForm }}} {{{ data.afterForm }}}

{{{ data.renderFieldsMarkedRequired() }}}

{{{ data.beforeFields }}} {{{ data.afterFields }}}

{{{ data.beforeField }}} {{{ data.afterField }}}

{{{ nfi18n.formHoneypot }}}

{{{ data.beforeField }}} <# /* * Render our input limit section if that setting exists. */ #>

<# /* * Render our error section if we have an error. */ #>

<# /* * Render any custom HTML after our field. */ #> {{{ data.afterField }}}

<# /* * This is our main field template. It's called for every field type. * Note that must have ONE top-level, wrapping element. i.e. a div/span/etc that wraps all of the template. */ #> <# /* * Render our label. */ #> {{{ data.renderLabel() }}} <# /* * Render our field element. Uses the template for the field being rendered. */ #>

{{{ data.renderElement() }}}

<# /* * Render our Description Text. */ #> {{{ data.renderDescText() }}}

{{{ data.renderElement() }}}

<# if ( data.type === "listcheckbox" || data.type === "listradio" || data.type === "listimage" || data.type === "date" || data.type === "starrating" ) { #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '*' : '' }}} {{{ data.maybeRenderHelp() }}} <# } else { #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '*' : '' }}} {{{ data.maybeRenderHelp() }}} <# } #>

{{{ data.msg }}}

{{{ data.currentCount() }}} {{{ nfi18n.of }}} {{{ data.input_limit }}} {{{ data.input_limit_msg }}} <# let myType = data.type if('save'== data.type){ myType = 'button' } #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}}

The increasing nature of frontend complexity - LogRocket Blog

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

The increasing nature of frontend complexity