Lädt...


🔧 Over-Architecting in Web Design


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

I recently read a post by @justinfagnani on X that says:

"Lit is not a framework. The browser is the framework."

This got me thinking about how we've been building for the web in recent years.

For quite some time now, if you know HTML, CSS, and JavaScript, you really don’t need a framework to build web applications. At most, you might use some libraries to simplify certain tasks, but even these are gradually being incorporated into the platform itself, like routing or state management.

Our focus, however, has shifted towards learning frameworks, and now meta-frameworks, which do make it easier to build web environments. They optimize pages, automatically generate necessary files like sitemaps.xml, optimize images, remove unused CSS, bundle, minify, and optimize JavaScript. They’re effective, yes. But they don't adhere to the standard.

Meta-frameworks like Astro let you use standards, but they don’t exactly make it easy. Instead, they streamline using other frameworks or their own components in a more user-friendly, non-standard format to "simplify" component creation. They also employ techniques to facilitate SEO, loading, and indexing—depending on how you’ve implemented them.

To me, this approach has two major issues:

  1. Cognitive overload: Developers must learn to manage not only the framework itself but now also the meta-framework and its set of tools, which often adds unnecessary complexity to project architecture.

  2. Detachment from the standard: Focusing on frameworks means we’re not investing time in understanding the latest developments in the web itself, which are substantial. CSS, for example, is making a huge leap forward with features like container queries. Meanwhile, JavaScript and HTML are also evolving, with HTML potentially introducing a new <select> element that will allow HTML and CSS within <option>, opening new and more flexible ways to create rich selectors.

In many frameworks, though, these innovations are implemented through their own components, so to developers, it can seem like these new features are framework inventions instead of standard advancements.

I remember a few years ago, when these meta-frameworks were just emerging, a developer excitedly told me, “They’ve invented SSR (Server-Side Rendering); now we can generate HTML on the server, creating static pages.” I looked at him in surprise. He insisted, thinking I was just as impressed with this “novelty” saying, “Isn’t it incredible? What a fantastic idea.” The irony was that SSR has been around since the early days of the web.

Today’s web developers, those studying web development and entering the field, often lack historical context. They don’t know how web development originally worked. They don’t understand the reasons we moved from server-side rendering to client-side rendering and started using frameworks. Somewhere along the line, when “Ajax” gained popularity, we lost our way—probably driven by the desire for standards to cover everything we needed, while big companies fought to impose their own criteria, tags, and languages in the browser (I still remember Microsoft’s infamous VisualBasicScript).

Frameworks aren’t the problem. Not at all. They added power and value to web development. They allowed us to create applications for everyone, spurring the rise of hundreds of thousands of web developers and bootcamps.

Frameworks and meta-frameworks aren’t the issue; they even helped democratize web development, enabling millions to create applications and fueling the bootcamp boom. But as the web platform matures and standards become more robust, framework creators have business incentives to retain and promote their tools. They’re not going to say, “Stop using my framework; you can do everything with standards now.” Plus, migrating applications built with these frameworks to the standard is nearly impossible, especially since, in my experience, most lack E2E or functional tests to ensure that migration maintains the original behavior.

So, why aren’t we investing in tools that help us leverage today’s standards?

There isn’t a meta-framework that “forces” you to use the standard, making it easier in the process.

We need solutions that help us organize our projects efficiently and assist with build and optimization tasks if we want to do SSR, CSR, SSG, ISR, Hydration, create MPAs or SPAs. But we should be fully aware of our needs and the pros and cons of each choice. These tools should optimize images, JavaScript, CSS, and generate only the necessary files. They should allow the use of libraries that stick to the standard and adequately cover the platform’s remaining gaps. They should optimize and support SEO, loading, and indexing, facilitate testing, and harness the platform’s power.

It’s time to reduce over-engineering and excessive architectural design in our web projects. Let’s keep learning, not just how to use a framework, but also how to appreciate and apply the incredible advancements in web standards.

No excuses.

...

🔧 The Future of Web Design: Expert Insights from Leading Kochi Web Design Companies


📈 17.21 Punkte
🔧 Programmierung

🔧 Getting Started with Object-Oriented Design (Part 2): Design Principles and Design Patterns


📈 15.74 Punkte
🔧 Programmierung

🔧 System design | High Level Design and Low Level Design | Part 2


📈 15.74 Punkte
🔧 Programmierung

🔧 Comparing Web Design, Web Development, and Web Hosting: A Comprehensive Guide


📈 15.31 Punkte
🔧 Programmierung

📰 Digital Security Over & Over (& Over) Again - We Get It ... There's Risk


📈 14.98 Punkte
📰 IT Security Nachrichten

🔧 What is Biophilic Design? How to Reconnect with Nature through Web Design


📈 13.85 Punkte
🔧 Programmierung

🔧 User-Centric Design in the Digital Age: Trends Shaping Web Design and UI/UX Experiences


📈 13.85 Punkte
🔧 Programmierung

🐧 The Role of Graphic Design in Web Design


📈 13.85 Punkte
🐧 Linux Tipps

🕵️ Design By Web Design Mumbai Yaaaro - SQL Injection vulnerability


📈 13.85 Punkte
🕵️ Sicherheitslücken

📰 UX & WEB DESIGN MASTER COURSE: STRATEGY, DESIGN, DEVELOPMENT


📈 13.85 Punkte
📰 Alle Kategorien

🔧 Web Design Trends: What’s Hot in UX/UI Design


📈 13.85 Punkte
🔧 Programmierung

🔧 How is mobile-first web design different from adaptive and responsive design?


📈 13.85 Punkte
🔧 Programmierung

🔧 The Evolution of Web Design: A Look Back Over 30 Years


📈 13.6 Punkte
🔧 Programmierung

🐧 Linux Took Over the Web. Now, It's Taking Over the World


📈 13.34 Punkte
🐧 Linux Tipps

🔧 Learning the Differences Between Web Development and Web Design—How Do You Find the Right Partner?


📈 11.96 Punkte
🔧 Programmierung

🔧 Typography in Web Design: Essential Tips for Web Designers


📈 11.96 Punkte
🔧 Programmierung

🔧 Web accessibility, how to design web pages for everyone


📈 11.96 Punkte
🔧 Programmierung

🔧 How Web GDE Martine Dowden approaches web design from an accessibility perspective


📈 11.96 Punkte
🔧 Programmierung

📰 How do I install an SSL? - The Web Doctor Web Design


📈 11.96 Punkte
📰 IT Security Nachrichten

📰 Twitter im Web: Erneute Design-Änderungen und Progressive Web App


📈 11.96 Punkte
📰 IT Nachrichten

🕵️ Web Design by Mark Nakamura Web Development by Ben Greeley SQL Injection Vulnerability


📈 11.96 Punkte
🕵️ Sicherheitslücken

📰 Fractal Design Era ITX - Kompaktes PC-Gehäuse mit edlem Design


📈 10.5 Punkte
📰 IT Nachrichten

🔧 What is Design Thinking? Understanding the Design Thinking Process.


📈 10.5 Punkte
🔧 Programmierung

🔧 Inversion of Control (Design Principle) & Dependency Injection (Design Pattern)


📈 10.5 Punkte
🔧 Programmierung

🔧 Randomized Block Design(RBD) and Randomized Complete Block Design(RCBD)


📈 10.5 Punkte
🔧 Programmierung

🪟 App-Design für Entwickler: Erste Schritte beim App-Design


📈 10.5 Punkte
🪟 Windows Server

🔧 Unraveling the Complexities of Software Design with Domain-Driven Design (DDD)


📈 10.5 Punkte
🔧 Programmierung

📰 Fractal Design Era ITX - Kompaktes PC-Gehäuse mit edlem Design


📈 10.5 Punkte
📰 IT Security Nachrichten

🔧 System design: Design an ATM Machine


📈 10.5 Punkte
🔧 Programmierung

📰 Porsche Design Honor Magic V2 RSR – Honor und Porsche Design stellen Smartphone vor


📈 10.5 Punkte
📰 IT Nachrichten

🔧 Material Design 3: All You Need to Know About the Google's Design System


📈 10.5 Punkte
🔧 Programmierung

⚠️ [webapps] - Design by ARRR Design - SQL Injection


📈 10.5 Punkte
⚠️ PoC

🔧 1.0 Figma UI/UX Design - Master the Tools and Techniques of Modern Interface Design Introduction


📈 10.5 Punkte
🔧 Programmierung

matomo