Progressive Enhancement with Actions

Progressive enhancement is a design philosophy in web development that emphasizes providing content and core functionality to everyone while delivering an enhanced experience to users who can afford it.

In this chapter, we will start with a more in-depth discussion of what progressive enhancement is. There are many ways to achieve progressive enhancement in your application; we will explore one of them by using Svelte actions. I will explain my reasoning as to why I think Svelte actions are designed for this use case.

Toward the end of the chapter, we will go through a few examples of using Svelte actions to progressively enhance our application.

By the end of this chapter, you will be able to build an application that follows the principles of progressive enhancement and supports as many user devices as possible.

This chapter covers the following topics:

• What is progressive enhancement?
• Why use Svelte actions for progressive...

Technical requirements

You can find the examples and code for this chapter here: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter07.

What is progressive enhancement?

The most important thing in progressive enhancement is missing from the phrase itself. Something that is implied here is where are we progressively enhancing from.

The main idea of progressive enhancement is to provide a great baseline of essential content and core functionality to everyone, regardless of the browser software, device hardware, or the quality of the internet connection. Older browser software may not support newer JavaScript syntaxes and CSS features; older device hardware may take up more time to process and render your web page; a slower internet connection may take longer to load the resources needed to display your web page.

How do we ensure our web page stays usable for as many users as possible? Think about this for a while—I will come back to it later.

For users who can afford better browsers, more powerful hardware, and higher internet bandwidth, we progressively provide an enhanced experience to them. We leverage...

Example – previewing a link with a <a> element

In our first example, we will explore how to progressively enhance a <a> element to display a preview when hovered upon.

Here, the browser receives HTML that contains a <a> tag with a href attribute, like this:

<a href="..." />

It then creates a hyperlink. When you click on the hyperlink, the browser will navigate to the destination specified in the href attribute.

This is the default behavior of the <a> element.

As the user loads the JavaScript, we want to make the <a> element do more than just navigate to a new location.

We are going to enhance the <a> element by having it show the destination location when hovering over it.

To do that, we are going to create a preview action and use it on the <a> element:

<script>
  function preview(element) {
  }
</script>
<a href="..." use:preview>Hello</a>

...

Example – progressively enhancing a form

A <form> element is a section of a document that can contain inputs that will be used to submit information.

By default, when you submit a form, the browser will navigate to a URL to process the form submission. This means that the user will lose the state they are in as they navigate away from the current page when they submit the form.

However, with the ability to make asynchronous requests through the browser fetch API, we can now submit data through API requests without leaving the current page, and stay where we are.

This means that if the site is playing music, video, or animation, they will still be playing while we make asynchronous API calls.

Our task now is to create an action to enhance the form element so that the enhanced form will not navigate to a new location, but rather submit the form data asynchronously.

For lack of a better name, I am going to call this enhancing action enhance.

Before we proceed...

Summary

In this chapter, we explained what progressive enhancement is and why it is important. Following up on that, we learned how we can use Svelte actions to progressively enhance our elements.

We went through two different examples of progressive enhancements—enhancing a link to make it show a preview popup, and enhancing form elements to submit a form asynchronously.

In the past three chapters, we’ve seen three different patterns and use cases of Svelte actions, creating custom events, integrating UI libraries, and progressive enhancements. What you can do with Svelte actions is not limited to the three different use cases that we’ve discussed so far, but hopefully, these patterns have opened your imagination and made you see what is possible with Svelte actions.

With that, we are moving on to the next part of the book. We will be exploring Svelte context and stores from Chapter 8 to Chapter 12, exploring their various use cases, such as in state...