visual-framework / vf-core

A (primarily CSS) framework that targets needs of life science websites and services
https://stable.visual-framework.dev/
Apache License 2.0
22 stars 10 forks source link

Pattern: add a no-js error page example #1524

Closed khawkins98 closed 3 years ago

khawkins98 commented 3 years ago

With @nitinja's conversion of the Jobs page to React (and the abundance of Angular, React and other JS-required sites) it would be good to add

@sturobson writes:

from the govuk folks about this: You should not assume the reason for designing a service that works without CSS or JavaScript is because a user chooses to switch these off. There are many situations when extra layers can fail to load or are filtered, for example:

  • temporary network errors
  • third-party browser extensions like ad blockers
  • third-party supplier downtime, such as when using a content delivery network
  • DNS lookup failures
  • bugs introduced by browser updates
  • corporate firewalls blocking, removing or changing content (large institutions like banks or government departments may use these)
  • mobile network providers changing content to speed up load times and reduce bandwidth usage
  • personal firewalls or antivirus software changing or blocking content
  • the use of unsecure connections, where internet providers insert their own code into the page that accidentally conflicts with your own

Some users turn off features in their browsers deliberately. You should respect their decision and make sure those users can still use your service.

direct link: https://www.gov.uk/service-manual/technology/using-progressive-enhancement#do-not-assume-users-turn-off-css-or-javascript

sturobson commented 3 years ago

I think first it would be better to evaluate if what you're creating, the content, and the expected user experience is better served by code that is run on the client side or the server side.

khawkins98 commented 3 years ago

Draft guidance:

(to be added to https://stable.visual-framework.dev/guidance/javascript/ )


## JavaScript-required applications

Many projects may use solutions (React, Angular or similar) or use Visual Framework components that require JavaScript to function. But before using a solution that requires heavy use of JavaScript, the product team should ask themselves:

1. What are the benefits for the project and user of using a JavaScript solution?
   - Examples: Improved interactivity and state management or specific features.
2. What are the downsides?
   - Examples: Increased page size, computer requirements, technical complexity, SEO complexity.
3.  What recourse do users have when JavaScript fails, is disabled or an older browser is used?
   - See also: [Browser support guidance](https://stable.visual-framework.dev/guidance/browser-support/)
   - The VF supports browsers released within the last five years and have JavaScript enabled. 
   - [Pre-rendering your JavaScript application](https://duckduckgo.com/?q=prerendering+javascript+frameworks) may have many benefits.

In a nutshell: we advise teams to use JavaScript only when required and to provide robust text or fallback functionality. If you are using a JavaScript framework you should also make use of [the JavaScript error template](/patterns/error-pages/).

[Gov.uk provides additional reasoning](https://www.gov.uk/service-manual/technology/using-progressive-enhancement#do-not-assume-users-turn-off-css-or-javascript) on why you should not assume your JavaScript application works for all users. 

Draft error page text for https://stable.visual-framework.dev/patterns/error-pages/


## Error: JavaScript failure

JavaScript is required for this webpage or site.

It seems you either have JavaScript turned off, there was a network failure, or you have a legacy browser. 

### Need assistance?

- [Guides to enable JavaScript](https://enable-javascript.com/)
- [Contact web support for this site](#)
nitinja commented 3 years ago

We might want to add some guidance on when to use JavaScript based app and when to use statically rendered pages.

nitinja commented 3 years ago

Unrelated: I think for the hybrid apps (like jobs, which has some interactive pages but lot of static content pages), we might want to consider prerendering where we generate some pages at build time. We can do this in jobs in future for performance purpose.

khawkins98 commented 3 years ago

Addressed in #1526; Clossing