The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

Core points

• Despite the rise of client frameworks such as AngularJS, progressive enhancement (PE) remains the best choice for solving web development problems such as extensive browser support, maintenance, and future developments of applications.
• PE is not for users who disable JavaScript, but about enhancing the user experience when certain JavaScript features are available. It doesn't make any assumptions about your audience like a client framework.
• PE critics often claim that this means supporting old browsers, but in fact, providing fallbacks to older browsers is the advantage of PE, rather than its main goal.
• JavaScript frameworks can provide short-term benefits, but may lead to reduced visitors and long-term maintenance difficulties. They stay firmly in the present, unlike PE, which allows modern APIs without breaking the application.
• Progressive enhancement separates content, layout, and functionality for easy maintenance, reduces testing burden, supports a variety of devices, and ensures SEO and accessibility. Despite the rise of client-side JavaScript frameworks, this technology still works.

Louis recently commented in the forum topic "Are we in a rebound of script dependencies?":>I think that to some extent, we are in a rebound of script dependencies, which may be a piece of stuff Good thing.

In short – I agree. Others also agreed, including Web Expert PPK (Angular Questions), Jeremy Keith (Angular Momentum), and Jake Archibald ( Progressive Enhancement is Still Important).

• Despite the rapid rise of client frameworks, relatively few web applications are suitable for using JavaScript frameworks.
• Progressive enhancement remains the best choice for solving web development problems such as extensive browser support, maintenance, and future developments of applications.

Let's define the term we are discussing...What is a JavaScript dependency?

The use of client frameworks has increased. They provide server-side coding modes such as MVC, template views, reusable components, form validation, and more. AngularJS is probably the most famous and popular, but it is not the only solution. Unlike server-side frameworks, client alternatives must run on browsers with modern JavaScript enabled. Without JavaScript, they fail. TIDAL is a typical example; if JavaScript is not available, the user will see a blank page. No content, no errors, and no registration form. While there is almost no reason not to display messages, JavaScript dependent applications have some good use cases:

• Prototype Quickly simulate websites and applications, as the client framework provides a wealth of components and shortcuts.
• Pure client application If your application is simple and does not require server interactions other than the initial download, the JavaScript framework may be a good choice (assuming you can delete unwanted content).
• Internal Enterprise Application Forced JavaScript is not a problem when you understand your audience and the devices you use. Angular was originally designed for enterprise applications.
• Fine interface Consider action games, Google Maps, and documentation. Developing JavaScript-free alternatives is futile. Google created a basic HTML version of Google Maps, but it was actually a different app and was abandoned in 2010.

There are other cases, but most public-facing websites and applications do not fall into these categories. No one will stop you from using client frameworks, however, when you have a hammer, everything looks like a nail. Quote Louis again:>Developers seem to use them just for the sake of using dazzling new tools, not because they solve the actual problem.

What is gradual enhancement?

Progressive enhancement (PE) is not a technology, but a development method. I wrote some tutorials and examples in 2009, but this concept has been discussed since 2003. You start by building a basic user experience level and then add more advanced features when your browser supports it. Push PE to the extreme of logic:

1. You create a pure HTML application, and all important processing is done on the server side. It can run in any browser; mobile device, Lynx, IE1.0 or any browser you use.
2. You use CSS to enhance the layout. CSS is PE ready because browsers ignore properties they don't understand. You can further enhance it with options like media queries or @supports rules. The app still works anywhere, but provides an improved experience for browsers with modern CSS capabilities.
3. You use JavaScript enhancements. JavaScript is the most unstable layer, as language and API support varies from browser to browser. Assuming it runs, you will test availability before using them. For example, when canvas or SVG is supported, you can convert data tables into beautiful charts.

Every browser receives the best app it can handle. There may not be two browsers that offer the exact same experience. Mobile-first responsive design and less-used offline priority are examples of progressive enhancement techniques. Let's check out PE's criticism.

Myth: No one disables JavaScript

Second people know what JavaScript is. Few browsers allow users to disable JavaScript (easy) This is absolutely correct. PE critics then concluded:>Those who do not have JavaScript get what they deserve.

It is dangerous to assume that JavaScript will always, anywhere, and at any time to reach the level required for your application. Everyone has JavaScript, right? This shows. Progressive enhancement is not for users who disable JavaScript. It is to enhance the user experience when certain JavaScript features are available. When JavaScript is disabled, the application may provide a bad interface, but the user will still get something .

Myth: No one uses old browser

What do we mean by "old"? For most developers, it's any browser that has been released for more than twelve months. Not everyone can use the latest and best apps:

• Large organizations and government departments
• Disabled
• People of Developing Countries
• The less wealthy class in the community
• Anyone using iPhone 5.0 or Android 4.0 and below.

These departments may not matter to you. But don't they ever matter? Progressive enhancement does not make any assumptions about your audience. This is not the case with client frameworks. Those who can't use your application will disappear from the server log. It will soon turn into a self-fulfilling prophecy: "No one uses our app on an old browser, so we can continue to do that..." Myth: Progressive enhancement is anti-JavaScript

Progressively enhance the basic advantages of inclusion of the web. A site or application that can run on any network device anywhere in the world can be developed. The better the device, the better the user experience. Client frameworks make JavaScript an absolute dependency. You no longer encode the web. Your application uses the Web as a delivery mechanism for a specific runtime engine. A browser is your operating system and updates can break your application.

Myth: Progressive enhancement makes assumptions about users and devices

PE is about

not doing

assumptions. You don't assume anything - this is the core premise of this technology. JavaScript frameworks will make you mistakenly think that everyone is using a powerful browser on a powerful device. We have made these assumptions before. How is this different from assuming that everyone is using broadband? Or everyone has at least a 17-inch screen that is at least 960 pixels wide? Or will everyone use IE6 now and in the future? Myth: Progressive enhancement means support for outdated browsers

Progressively Enhanced Critics think you'll spend all your time working on old browsers. In fact, it's the opposite: you never need to deal with old browsers because the proper fallback is already in place. Supporting old browsers is an advantage of PE –

rather than target

. You can support the worst browsers, but you can build any baseline you like. For example, I am currently developing an application where addEventListener is a requirement for most JavaScript runs. Therefore, IE8 and below will not be able to display feature enhancements. I can solve this problem, but it's not worth the investment as it's an enterprise application without old IE users. However, IE8 users can still use the system and can improve it if needed.

Myth: JavaScript Framework Applications are cooler

You can use PE technology to create applications that look the same. The reason for the confusion is that most JavaScript frameworks provide a range of pre-developed widgets that look good. These same widgets can be used in progressively enhanced applications, however, without JS, they fall back to the basic HTML alternative. PE also allows you to use modern HTML, CSS, and JavaScript APIs that have not yet appeared in any browser. Consider the Fetch API - a modern alternative to XMLHttpRequest. It supports minimally, but I can use it without problems as I can fall back to XMLHttpRequest or server request. The JavaScript framework stays firmly in the present - not the future. Myth: Gradually enhanced hinders web development

Or, more specifically, the client framework is at the forefront of technology, pushing the web forward. Sorry, but this is an illusion. AngularJS-like frameworks implement magical features, but, if you dig deeper, you're still using HTML, CSS, JavaScript, and DOM operations. At best, it is an abstraction. At worst, it is a distraction. Your client framework is only as good as the browser that developed it. AngularJS 2.0 is completely rewritten because features such as Object.observe() and Web Components were not common when AngularJS 1.x were released. The framework forces you to use old technology, but hides the implementation from you. PE allows you to use any modern API without breaking your application. Good luck in upgrading from Angular 1...

Myth: JavaScript framework makes development easier

This part is correct - but only if you start building your application. You can access a range of controls that reduce initial development time. However, you are then trapped within the scope of the framework, which can lead to problems later on. Assume that your application has been running for a while and the customer requires support

BrowserX

. It is used by a major customer and is not particularly old; Blackberry browser, iPhone 4, Android 3.3, etc. They may expect development time to be several days, but it may not be possible if your JavaScript framework is incompatible. For applications developed using PE technology, this problem may never occur; you may already support the browser. Further enhancements can be added without major rewrites.

Myth: Progressive enhancement is double the workload

This is the most popular quote from critics. The only people who say PE is overworked are those who have never tried it or have failed in some way. If you didn't think about PE from the beginning, it will only take twice as long. Trying to rebuild PE into existing applications is doomed to fail - especially for applications that rely on JavaScript. Let's consider a simple example, such as a paging list of search query results. The first page loads return all HTML. It's fast, JavaScript doesn't need to do anything. Behind the scenes, we use database queries and insert the results into the HTML template. You can quickly adjust the same service to return the results as JSON data or result HTML without title and footer. When the user clicks on "Page 2", the second page result will be displayed:

• With JavaScript, we can intercept clicks and use Ajax technology to get the results of the page. HTML data can be inserted into the page using innerHTML. Alternatively, we can use page 1 as a template for the returned JSON data.
• If JavaScript, XMLHttpRequest, or Fetch is not available— or Ajax call fails—we can request the second page full HTML.

This requires more work, but it is definitely not double the amount of work. We benefit from cross-browser fault-tolerant solutions.

Myth: Gradually enhanced meaninglessly - website development or extinction

The logic behind this argument is that the website will eventually become obsolete. So you can use a framework that targets a specific technology at a specific point in time. I hope so. If your code is good, it will be used for much longer than you expected. Bad code survives longer because no one wants to touch it. However, again using progressive enhancement, you do not make any assumptions other than the web will continue as a client/server-based HTML-based system. The web needs to change fundamentally to make your application fail—it will no longer be the web!

Myth: Progressive Enhancement is an old technology recommended by the old predecessors

Quote Oddz:>The surge in client-side JavaScript frameworks has made you a minority along with other "old seniors".

Yes, thank you! The JavaScript rebound was led by people who have been developing on the web for quite some time. Are we all stubborn people who are afraid of new technologies and cannot keep pace with the times? Maybe. Or maybe it is because we have learned some lessons from many, many of our historical mistakes? JavaScript framework raises familiar questions:

• Some people mix HTML and features like we used to use onclick handlers, such as

• They target specific browsers. There has been a resurgence of 's "Best Way to Browse..." messages and tags.

• They make assumptions about today's web—for example, JavaScript works anywhere, and 2MB per page is reasonable.

• They have no plans for the future.

JavaScript framework mainly benefits developers - rather than users. They can provide short-term benefits at the cost of reduced visitors and painful long-term maintenance. And don't forget SEO. Google indexes JavaScript pages, but it is not necessarily able to track every logical branch. It's also difficult to link back to a specific URL unless you write your code carefully. Progressive enhancement complements the web's advantages:

It separates content, layout and functionality for easy maintenance
You are writing defensive, fault-tolerant, device-independent code for the web—
• instead of the browser
You can support various devices
Your testing burden is reduced because your application can still run when there is a failure
SEO and accessibility are built-in (or require less effort)
Websites and applications will run on browsers released today, yesterday and tomorrow
No one refutes the advantages of progressively enhanced or proposes better techniques.

Only one downside: It's clear that many developers still don't trust or understand the progressive enhancement. Long live the rebound of JavaScript dependencies!

FAQs (FAQ) about JavaScript dependencies and progressive enhancement

What is a JavaScript dependency?

JavaScript dependency means that JavaScript code depends on other JavaScript files or libraries to run normally. For example, if a JavaScript file uses a function or variable defined in another file or library, it is said to depend on that file or library. Dependencies can make code more efficient and manageable, but they can also introduce complexity and potential problems if not managed properly.

What is progressive enhancement in JavaScript?

Progressive enhancement is a design philosophy that first emphasizes core web content and then gradually adds more detailed and complex layers of presentation and functionalities on top of it. In the context of JavaScript, this means writing code that provides basic functionality to all browsers, while providing advanced functionality to browsers that can support it.

How does JavaScript dependencies affect gradual enhancement?

JavaScript dependencies may hinder progressively enhanced implementation. If a JavaScript file relies heavily on other files or libraries that not all browsers support, it may not provide basic functionality to those browsers. This goes against the principle of progressive enhancement, which aims to provide core functionality to all users.

What are the advantages of gradual enhancement?

Progressive enhancement provides many benefits. It ensures that all users can access the core content and features of the webpage, regardless of the functionality of their browser. It also promotes good web practices such as semantic HTML and separation of concerns, and makes the website more resistant to potential problems with JavaScript or CSS.

What are the disadvantages of JavaScript dependencies?

While JavaScript dependencies can make code more efficient and manageable, it can also introduce complexity and potential problems. If the dependency is not managed properly, it may cause problems such as bloating code, slow loading time, and possible conflicts between different files or libraries. It can also make the code harder to maintain and debug.

How to effectively manage JavaScript dependencies?

There are several strategies to effectively manage JavaScript dependencies. These strategies include using module bundlers like Webpack or Rollup that can bundle all dependencies into a single file; using package managers like npm or Yarn that can help you manage and update dependencies; and using ESLint The code inspector can help you discover potential problems with dependencies.

How to achieve progressive enhancement in my JavaScript code?

Implementing progressive enhancements in your JavaScript code includes writing code, providing basic functionality to all browsers, and then gradually adding more advanced features to browsers that can support it. This can be done by using feature detection to check if the browser supports a feature before using it and ensuring that your code can be elegantly downgraded in browsers that do not support certain features.

What is the relationship between JavaScript dependencies and client-side JavaScript framework?

Client JavaScript frameworks usually rely heavily on JavaScript dependencies. These frameworks (such as React, Angular, and Vue.js) contain many built-in features and libraries that your code can rely on. While this can make development faster and easier, it can also lead to potential problems if these dependencies are not managed properly.

What is the role of progressive enhancement in the client JavaScript framework?

Progressive enhancement can play a key role in the client-side JavaScript framework. These frameworks often include features that allow developers to implement incremental enhancements, such as server-side rendering and code segmentation. These features can help ensure that your web application provides core functionality to all users regardless of the functionality of their browser.

How to balance JavaScript dependencies and progressive enhancement in my web development project?

Balanced JavaScript dependencies and progressive enhancement requires careful planning and good coding practices. You should minimize dependencies in your code and make sure they are managed properly. At the same time, you should work hard to achieve incremental enhancement, ensuring that your web application provides core functionality to all users. This may involve the use of feature detection, elegant downgrades, and other technologies.

The above is the detailed content of The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement. For more information, please follow other related articles on the PHP Chinese website!