Is front-end development too complex? Today, we'll talk about it.
The goal is to help you understand today's front-end development.
Front-end development is important for any developer. It affects how well web apps work.
Many developers find modern front-end frameworks hard to use. This is because technologies change quickly, and web apps need to be:
fast
interactive
easy to maintain
Front-end development has become more complex over the years.
Front-end development has changed a lot since the days of jQuery. New frameworks like Angular, React, and Vue have introduced new challenges:
State Management: The web is stateless, so we need strong solutions to manage the state. Angular and React tried to solve these issues but brought their problems.
Dependencies: Many dependencies and tools make project setup harder. While useful, they need regular maintenance. Abandoned packages can also cause issues.
SEO and Performance: Modern frameworks must have good SEO and fast loading times.
Web evolution: Web apps now aim to be as engaging as mobile apps, driving complexity.
Complex Modern frameworks: There are many frameworks available to use.
State Management Evolution
In the past, managing state in web apps was simple but limited. As apps got more complex, we needed better state management. Angular offered a complete solution but it was heavy and complex.React provided a simpler, component-based approach.
This example shows how Reactâs useState hook makes state management easy.
The Dependency Dilemma
Modern front-end projects have many dependencies. They bring great features but you need to manage and update them often. Tools like Webpack and Babel add complexity but are essential.
Managing dependencies is simple. But, you have to keep an eye on updates and compatibility.
Where to start in front-end development?
First, master the fundamentals and then...
I strongly recommend React. It's one of the best and most popular front-end frameworks.
React is a safe bet!
React Developer Roadmap in 6 Simple Steps
HTML, CSS, and JavaScript fundamentals
Git version control system
React fundamentals
State management
API interaction
Testing
Conclusion
Front-end development is more complex now. It's the truth. Yet, this complexity meets the needs of modern web apps.
Mastering current tools is key to building strong, high-performing web apps.
Stay willing to learn, improve, and build awesome apps!
Please, comment on your thoughts. Your thoughts are valuable to contribute to the front-end development field. All are welcome! I want to hear them.
Keep up the good work! :)
Top comments (78)
HTML was created 1993 to display complex information over the newly invented internet. It worked, but was fairly limited.
CSS was added 1996 to cure the limitations. This worked, but dealing with complex content was still callenging.
People invented site generators like Wordpress (2003) or Typo3 (1997) to manage content. This worked, but only for static pages.
So, people invented frameworks like Angular (2009) or React (2011) to get more interactivity, but each of this system implemented their own and very special way to solve the problems. So, things got very complex as we know.
Now it's 2024. Maybe It's simply time for something new.....
.
Svelte!
Svelte is great.
HTMX is great
Tailwind is great
...
If we complete this list, we just see the question, not the answer.
I get it. It's subjective. I'll just say that Svelte is my one true religion. Svelte or die!!
ItÂŽs interesting to have a look back. See this list of programming languages and an article about the software crisis
In the 1980ÂŽs people used procedural code to write monolithic applications, and nearly a whole industry crashed, because they where unable to manage the growing complexity with the existing tools. Some software companies spent 80-90% of their resources in debugging existing code, as any new development caused so many unexpected side effects.
Does this sound familiar?
In the 90's, the rise of OOP Methods allowed to develop software in distributed teams. But modern software is also fault tolerant, event driven and supported by operation systems, that support a distributed architecture.
IÂŽm not sure what the future will be. The internet is still evolving fast. Tools like Svelte bring a fresh twist to the game, but can you really do things with Svelte that you cannot do with React? Svelte is still a tool to build User interfaces, but what about the backend? And is the whole thinking of "frontend" and "backende" maybe part of the problem?
Svelte can do the same things as React. The point is that Svelte does it better, with less code and is easier to learn and understand. Once you get a little into Svelte it makes you say "Oh... this is what React should have been" instead of the mess that React is now.
And Svelte (+kit) does backend functionality too. It's not just a frontend framework like React.
Go through it's tutorials and your eyes will be open đ
Complexity has always been a challenge in software development. Modern tools like Svelte and React help, but the real solution might lie in rethinking the separation of front-end and back-end.
Sveltekit does both. No separation. Unsure why you are not acknowledging it.
In any case, the current massive advancement in software is largely reliant on the fact that we separate things. There are countless NPM packages, NuGet packages and whatnot to enable developers everywhere achieve their goals easier. You might be right that a framework that does it all is perhaps an interesting solution, but there will always be cases where this is not suitable for, again, countless reasons.
If time has demonstrated something, is that there is no no-solution-fits-all kind of solution.
Anyone for HTMX with go? It always works for me.
Front-end development has evolved with each advancement addressing past limitations, but adding complexity. In 2024, it might be time to rethink and simplify our approach.
This is my issue. HTML never got the updating it needed, so JS fixed some of it.
Then JS got too complicated so Angular came in to fix the issues with state.
Then React came to fix the issues that angular caused with state (and presumably disliking MVC?).
Repeat that for every js framework to ever exist.
Now youâve got a front end and pseudo backend on the client side, and an actual backend or just an API manager sitting there and SEO dropped and state management got even worse than what angular and react âfixedâ.
Then next.js came to say âhey letâs do our program not on the client, but on the server! Itâll solve all of our state management issues!(and SEO like previously mentioned)â Like it was some grand new idea, but thatâs what the internet WAS when it was just CSS, HTML, jQuery/Ajax(not defending jQuery, that was the beginning of this mess I think). It didnât have SEO issues, or slow page load times.
These guys took themselves full-circle.
The root of the problem is that HTML is severely lacking. And theyâre afraid to do sweeping changes or upgrades to HTML because the entire web foundation is on top of it. You can only do so much with a poor foundation.
The only interactive elements HTML has is and , and then the form elements it got input, select, textarea, and form back in the mid 90s so you could sign up for stuff, like buy a plane ticket. After that you only get more form element pieces like radio or file. No extra capabilities added since the mid 90s basically. Like, bro⊠wtf. I guess details and summary elements were the big claim to fame after that.
HTML4 was released in 1997! And HTML5 wasnât out until 2014⊠just stagnating and rotting.
Iâve left out details like flash and interactivity and app like experiences and all that jazz. All the regular buzzwords. I tried to boil this down to the root cause, and I think itâs largely HTML and browsers not supporting any other scripting language than JS.
@siccoo You're right, HTML's limitations have forced us to rely on JavaScript and frameworks to fill the gaps. It's time for a fundamental change to HTML, but I understand the challenges of making sweeping changes to the web's foundation. Thanks for sharing your insightful perspective!
Exactly
What update do you think should have been be applied to HTML to make it a game changer? ItÂŽs just a text format, not much more. If you try to extend this format with whatever is useful, you end up with toolboxes like Bootstrap. We know this is not the solution.
Maybe, the whole system of web development ist standing upside down. We are still sending text files from a server to a client like Tim Berners-Lee did. But the majority of uses wants to run complex and highly distributed applications.
I donÂŽt think, HTML is the problem, itÂŽs just the wrong tool for the task.
Are you familiar with React releasing their new compiler? I does make some of this much easier.
No it doesn't, the main problem is still there
Literally every checkpoint in the history of front-end web development đŻ
Just a heads up that the Markdown we use here supports syntax highlighting, and is generally more accessible than inserting an image of code. Images of text are an issue for people using screen readers, for example, and their content won't get picked up by the site's search facility.
You can add code blocks with 3 backticks:
More details in our editor guide!
I guess it's been easier these days with many useful tools & resources present, like the ones here: webcurate.co/c/frontend-development
Perhaps a few years ago, it was more challenging to get on to something, however, these days for everything you want to create you can either find a code snippet for it or tool designed specifically to facilitated its creation.
Is it really easier these days? People are drowning in the flood of âusefulâ tools.
Exactly. And cutting and pasting snippets of code is no way to develop a manageable system. You have to understand what the code is actually doing. Pity the poor developer who has to add a feature or fix a bug in pages cobbled together like this. It leads to a bloated and convoluted code base.
Not to mention, devs are uniformly terrible at documentation, whether it be comments in code or explanations of a new library or technology.
While I certainly want to acknowledge all other points here as valid, and with merit. This little post made me so happy to see. Documentation is notoriously awful in many cases and it is a true pity. I do not necessarily blame a truly technical mind for not being able to explain something simply, but when it can take nearly 2 hours, or much more sometimes, just to figure out what a certain "feature" is accomplishing and then getting the proper practice with consistent implementation, the process can get seriously daunting. Especially for newer developers like myself.
All that said, I do have massive respect for what people have created over the years to try to solve the issue. It's like a knife in a professional kitchen...there is always the right knife for the job, just got to know how to use it :)! Thanks for reading.
No, its way harder and far slower. And as you say so much time is lost simply in the 'paradox of choice'.
I could build win32 apps 10x faster 30 years ago. For a start I had WYSIWYG layouts, design time views of data, no CSS to worry about and 1 UI component set! Persistence was built in and I didnt have to build 3 tier UI->API->DB and could go UI->DB.
I get your point, but we can't say these tools are totally useless. For eg. I don't think I could have ever been able to easily create grid systems without the help of Bootstrap, the same applies to creating carousels, with the help of Swiper.js.
Maybe we can say: too many of them miss a common sense.
Many tools do not only provide a special functionality, the also reinvent the wheel. They introduce their own syntax, semantics and often their own very special way of thinking (like tailwind or React). It is very much like it was in the first days if computer programming when we had no interface guidelines. Everybody invented a new way of usage. I once found a program that implemented 7 different ways to input a number. It was nearly unusable.
My favourite example are loops. Even though Javascript provides more than enough ways to write a loop, all modern frameworks like Angular, React or Vue introduced their own syntax.
I hope that we come back to better standards. If I want to use a new tool, it often ends as a research project to find out, what programmers had really done. Curated lists may help to separate the wheat from the chaff, but even people who write this lists seem to be overwhelmed sometimes.
With all its tradeoffs, React (JSX template part Iâd say, framework-agnostic) way is probably the lesser evil â HTML-like syntax and minimal DSL (as compared to others). No absolute though, which is fair IMO.
Indeed, modern tools and resources like webcurate.co make front-end development much more accessible and efficient than before. Itâs amazing how far weâve come!
This article doesn't provide a clear picture of the frontend development landscape. All your recommendation is "use react, it is perfect!" When in reality, the scope of the project determines the need of certain architecture.
For starters, React ecosystem is so extense that easily you can get the wrong tool for the right solution. It requires certain degree of experience to architect a good solution.
You forgot what Angular, Solid, Vue, Svelte etc can bring to the table, and the ecosystem of UI libraries and interfaces is tremendous. Honestly speaking, the impression I got over this article is not positive.
Sadly I can't recommend this article to anyone asking for why frontend is so complicated. I feel some ChatGPT structured article here as the explanatory points are very vague.
@erickrodrcodes Thank for sharing opinion your with us.
The ever changing landscape of JS based frameworks is very complex and it's virtually impossible to keep up if you're a "must use latest flavor of the month" JS UI framework type of developer.
But if you like all the power of those frameworks but like the simplicity of a single language solution then say hello to my little friend: Apache Wicket. It was first released in 2004 and still, in 2024, making Web UI so simple you'll wonder why you aren't already using it if you already know Java.
The issue is that many people assume any Java based UI is all "back end" like 'ye olde' JSP (vomit) and just serves up static content with no JS/interactive/partial updating sexiness - but that's not the case with Wicket - in the browser it operates as a fully capable, interactive, partial updating JS framework but the developer doesn't have to ever write a single line of JS!!
The best thing is that the Wicket framework is component oriented and all the JS is handled by the framework and within the built-in and third party components. As a Java developer you get to leverage all that brilliantly crafted JS without ever needing to touch JS and without even having to be concerned that your app is running in two different worlds: back end and front end.
If you're a JS fiend then, of course, you can create your own specialized Wicket components but with the mega library of existing components I've never had the need to.
This may be a route that I go in the future, but I currently don't have the time to set aside. Excellent opinion and support.
Simplicity looks like complexity to those who can't see the patterns. That is, everything seems complicated to those without the experience to understand the underlying concepts, but once you do then everything seems obvious. Once you truly understand why a given group of solutions existsâlike Webpack and Rollup, or React and Svelteâand I don't mean the general pitch of what a solution does but the specific axiomatic problems that they each solve (or don't), then the technologies themselves become very easy to understand. However, most people jump into the technologies without understanding the discrete underlying concepts.
@horaciocolbert Understanding frontend development can seem complex without seeing the underlying patterns. Once you grasp the fundamental concepts and the specific problems that each technology addresses, it becomes much simpler. Many find it complicated because they jump in without this foundational knowledge.
I disagree. Your argument seems a little flawed. The fact that one can understand a concept doesn't make the concept itself simple or even obvious. If that were the case, we could all be astrophysicists. It's the addition of unnecessary - and many times complicated and convoluted - concepts that makes frontend development so complicated.
Or maybe it's just time we collectively accept that only a tiny fraction of us are Facebook and Google, and that we don't need ridiculously complex frameworks for the vast majority of things we stubbornly insist on using them.
@borfast You make a good point. Most of us don't need overly complex frameworks for everyday projects. Simpler solutions can often meet our needs just as well.
The complicated part firstly for me to Frontend Development is people, been that people have different tastes and is almost impossible to meet everyone's tastes. But however I think it would be necessary explaining both what is the complicated part of being a frontend developer and why frontend is becoming so complicated technically.
@siccoo The complicated part of frontend development is meeting diverse user preferences. Additionally, the evolving technology and increasing complexity of user interfaces add to the challenge. Balancing aesthetics and functionality is key.
I wrote an article regarding this too, is in this link linkedin.com/pulse/frontend-develo.... You said the complicated part of FED is meeting diverse user preferences which is people been that they have different tastes or demands, and that's exactly what's in the article, off which you are absolutely correct.
Nice content.. pls I have question .. have been in react for a while now .. and am thinking of learning Vue before going to backend .. or should I start backend and then later add Vue to my frontend skills ?..
@morningstar Thanks for your comment! If you're already comfortable with React, it might be beneficial to start learning backend development first. You can always add Vue to your skill set later, giving you a well-rounded understanding of both frontend and backend.
Start with backend. Learn some proper software engineering principles, preferably with a better language than JS or TS, and forget the crazyness of the frontend world for a while. People are finally maturing and gaining some sense in the frontend world but we're still ways off from where we should be.
Front-end development is so complicated because everyone is using React.
React is one of the best technologies for front-end development and you should learn it to keep up with the recent trends.
You respond like an AI.
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more