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 dev...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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!
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!
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.
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 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.
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.
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.
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.
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.
@alxwnth Absolutely agree! Sometimes, simpler solutions like Spring or Flask with minimal JavaScript can be just as effective. It’s a great reminder to appreciate the power of simplicity in web development. Thanks for sharing!
I am also working with React. But still, to me backend development is desirable as front end developer faces challenges while making their website responsive for these devices 😅
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) { ... }
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
@jahid2121
I understand your preference for backend development. Making websites responsive across various devices can be challenging. However, mastering these media queries is key to creating a great user experience. Thanks for sharing your thoughts!😅
I dunno, backend can also get extremely complicated. Some microservices make you want to jump off a cliff
In my experience, front end is way, way more complex and difficult to wrap your mind around than back end. Back end is like doing math. In general, you know exactly what needs to be achieved and how to achieve it. Yeah, sure, there are plenty of complex tasks for the backend, but I'm speaking generally.
Front end is more like trying to build a skyscraper out of a mix of lincoln-logs, dominoes, cards and lego bricks, while sitting in a spinning washing machine. There are so many terribly designed moving parts, and it's up to you to make something solid out of it all. It feels like being an artist who's given a broom, a dirty sponge, an old speaker grille, a grubby old sneaker, and a bucket of paint and asked to create a beautiful landscape.
Although I'm not bad at front-end (I do it about 50% of the time), I find it incredibly frustrating and I'd rather be in the server-side code any day of the week.
Interesting. I'm fine with front end and backend and both can get complicated but in my experience, microservices can become much much more complex than front end. It can become so complex that one point no one even has the full picture anymore.
Thank you for sharing your opinion with us.
I think angular is not that complex to understand even though I am new to angular I can understand the easily IDK but thanks for the heads up about this topic.
Thanks for sharing your perspective on this topic!
well frontend is complicated because framework make it so, the most projects such do not require such technologies. My opinion jquery is enough
@michalispapamichael I understand your point. While jQuery can handle many tasks, modern frameworks offer more powerful tools and structure for complex projects. They help manage larger applications more efficiently.
Web development is probably the easiest, react/angular are hard
@raythurnevoid Web development might seem easy, but React and Angular have steep learning curves. Their complexity can be challenging for many developers. That's why frontend development can feel complicated.
started React still learning before going to finish React ,there would be a lot of frameworks to come I think
@sharmi2020 Starting with React is a great step! It's true that new frameworks are always emerging. The key is to keep learning and adapting to stay updated in front-end development.
Cool, nice article.
Thank You!
Thank for sharing opinion your with us.
Thank You!
Actually, new frameworks, such as angular, react, and vue, brought new problems
@milesgreen I completely agree! New frameworks were meant to solve old problems, but they ended up creating new ones. It's like we're playing a game of whack-a-mole, where we fix one issue but create another.
Nice
Thank you!
Thank you everyone
As far as I know, code refactoring and Code Organization is universal in case of API, but project specific in case of frontend. This creates complexity
Refactoring is an integral and important part of the continuous development process. If you have a popular, high-demand application, it will be constantly changing and adapting to the users’ requests in order to remain competitive. Hence, a properly organized refactoring process can allow easy app scaling in the future as well as it can help fix existing issues. I can compare refactoring to an update of a vehicle model range. Same as when the car goes through updates and innovations, an application becomes more advanced and efficient with every new version, and refactoring plays a big role in the process of its optimization.
Tailwind is a GO!
Medical insurance for enterprises is a crucial aspect of corporate welfare, designed to provide comprehensive health coverage for employees. This type of insurance encompasses an array of medical services, including routine check-ups, emergency care, and specialized treatments, ensuring that the workforce remains healthy and productive. By investing in robust التأمين الطبي للمنشآت insurance plans, enterprises not only comply with legal obligations but also demonstrate a commitment to their employees’ well-being. This, in turn, fosters a positive work environment, improves job satisfaction, and enhances overall organizational efficiency.
not so good. title vs b0dy (and expectation vs reality) ratio is not matched.
The very first question, and supposed topic of the entire article. But I don't see you addressing it, whatsoever. 🤷♂️
not so good. title vs body (and expectation vs reality) ratio is not matched.
@2u841r Thanks for your honest feedback! I understand what you mean, maybe my title was a bit misleading. I'll try to make my title and content more aligned in my future posts.