This article offers a perspective on the current state of front-end development, intended for both new and seasoned developers. As a front-end developer myself, I utilize modern tools regularly. However, my concern is that we are over-relying on JavaScript, even for tasks that could be efficiently accomplished with pure HTML. Also, we are making it more difficult than it needs to be in most cases.
Looking back to the period between 2000 and 2010, front-end development was significantly more limited compared to today’s capabilities. A considerable amount of code was dedicated to ensuring cross-browser compatibility, primarily due to Internet Explorer’s lack of full web standards support. This often resulted in complex code and “hacks” to achieve consistent functionality across browsers. For instance, developers frequently employed unusual filters in Internet Explorer to enable transparent PNG support. Also, something as simple as attaching an event to an element was different across browsers.
Creating layouts with tables or floating divs was a laborious process, often requiring extensive revisions after testing in Internet Explorer. This contributed to widespread frustration with Internet Explorer. Layout techniques that are now trivial were once arduous and time-consuming. There were no CSS Grids nor Flexbox to create layouts. We relied only on table and floating elements that later needed to be cleared so the layout functioned correctly. Everything was a hack to create layouts.
JavaScript faced similar challenges. The transition from DHTML to a more structured approach, emphasizing the separation of concerns (CSS, JavaScript, and HTML), was a positive step. However, some modern JavaScript projects exhibit characteristics reminiscent of the DHTML era’s “spaghetti code.”
Even Ajax, now streamlined with fetch requests, was cumbersome due to the need to manage state changes and create browser-specific request objects. Internet Explorer 6 and 5.5, in particular, required distinct handling and additional checks for Ajax support.
My intention is not to criticize current practices, but to provide historical context. Frameworks and libraries emerged to address the complexities of browser inconsistencies. CSS frameworks, for example, speeded up development and mitigated cross-browser issues, primarily by simplifying layout and element positioning.
In the early 2010s, a basic toolkit of an editor, HTML, CSS, and JavaScript sufficed for most projects. Today, developers often import gigabytes of files to execute a simple “hello world” example. The emphasis on React in many learning environments raises concerns about the potential neglect of foundational web technologies.
The widespread adoption of jQuery in the past underscores the historical challenges of front-end development. Today, browsers offer powerful native capabilities, such as querySelectorAll and querySelector, that reduce the need for external libraries in many cases. Similarly, CSS has advanced significantly, enabling animations and layouts that were once unreachable. Think about the tools that could have been created in the 2000s with the features that exist natively in the browsers in terms of HTML, CSS, and JavaScript. Ajax was like magic in the mid-2000s but with the tools today, the code will be smaller and probably have the same features that we enjoy in the 2020s.
Initiatives like HTMX represent a promising direction, aligning with the historical emphasis on utilizing essential tools for web development. Also, going with simplicity which should be a north for us as developers. Remember, that somebody needs to maintain that code that you create today. Importing hundreds of modules into your application will become a nightmare in the future. We saw that happened before and it will probably happen again. I really like the approach of HTMX because it opens the door for developers to use JavaScript only where they need it without relying only on JavaScript to create web applications. But even better, most of the “difficult” parts that modern frameworks are trying to avoid with JavaScript, HTML, and CSS, have native alternatives in the browser and we must use them instead of just another dependency or pollyfil.
In conclusion, while modern front-end development offers unprecedented capabilities, it’s crucial to maintain a focus on foundational principles and avoid unnecessary complexity. By leveraging the power of modern browsers and web standards, developers can create efficient and accessible web experiences. I know that I was all over the place on this article but the main point is that you might not need jQuery (as written for a decade now) but you might not need React either.
