An easy intro to edge computing

Wondering what edge computing is all about? If you've ever visited a website before you can understand it! It's also easier than you might expect to get started using it. In this series we'll introduce the concepts and practices in leveraging the edge to enhance your websites using Glitch and Fastly.

But first, let's explore how we got here...

Web hosting

When I visit a website, my browser downloads the site content onto my device, like text, images, other media assets, and code defining how the browser should render the pages I interact with on my device.

The content of the site often comes from servers that are far away from me. For example, I'm in the UK, and many of the sites I visit are hosted in the US. It's a long way for the content to travel, which can cause latency – it can make the experience slow. 🐢

Caching

Let's say there's a website I visit every day – it would be pretty wasteful to download everything fresh each time, especially since the site has image files like logos that don't change very often. Luckily my browser has the ability to cache these assets – to store copies of them locally on my device.

The website owner can specify caching rules that tell the browser how long to keep these assets before requesting them fresh from the server.

🤔 Browser caching saves a ton of traffic and makes the web faster for us, but what if my neighbor down the street often also visits the same website? Are we both downloading the same content all the way across the planet..!?

CDNs

CDNs (Content Delivery Networks) add a layer of caching to the web by storing copies of assets on their servers. CDN servers are positioned at locations all around the globe. 🌍

If the website me and my neighbor visit every day is using a CDN, we can both get the assets from a server located closer to us than the server hosting the website. This means I can request the site and get at least part of the response from a CDN server in the UK, instead of my request having to go all the way to the US!

This is what happens when I make a request to a website using a CDN:

• If the content is stored in the CDN cache, I'll get a response from there and my request will not need to go anywhere near the origin – where the site is hosted.
• If the content isn't in the cache, the CDN will make the request to the origin and return the content to me.
  • If the content is cacheable, the CDN will store it so that people visiting the site after me receive the response directly from the CDN.

If the website owner decides to update the content, for example the site design, and they don't want users getting the version that's stored in cache anymore, they can purge the cache, so that new requests fetch the updated content from the origin host. Once the new content is stored in the CDN cache, subsequent visitors receive it from the CDN server near them and once again enjoy a faster experience.

The edge

Caching improves website performance through networks of servers that are located nearer users – edge networks. But these servers can do more than return assets – they can execute code. This means we can build processing into our websites that runs near the end user – that's edge computing!

Edge computing lets us build applications that center the user, running code that enhances website UX close to relevant user information. Many IoT (Internet of Things) applications also leverage the edge to run processing nearer user devices.

Edge applications sit between the user and origin, and can do many things:

• 🚧 Manipulate the request from the user and/or the response from the origin, for example to include geolocation data or personalize the display.
• 🧪 Deliver different versions of the site to user cohorts, for example to run A/B testing.
• 🏭 Respond to the user with content generated entirely at the edge without even using an origin server.
• ⛑️ Handle origin errors to provide a reliable experience even if something goes wrong at the website host.
• 🔐 Carry out parts of website functionality at the edge, like authentication.
• 💌 Power instant realtime communication with users around the globe.

Building the future of the web

Most large websites now use cloud hosting – where the site runs on servers managed by a provider who allocates resources on demand. These web applications are often serverless, where the cloud provider also manages provision of the server infrastructure – the platform the website runs on. These serverless cloud technologies expose server resources through software interfaces – so we can control what happens at the server using code.

The programmable edge brings this pattern to edge networks – developers can control everything that happens between the user and the hosting server in code. This enables developers to build powerful applications that create new kinds of user experience.

🎏🚀 Technologies like edge computing have so far mainly been used by large organizations. We're working to make it easier for everyone to access these capabilities, to enable you to build the future of the web using Fastly and Glitch. Stay tuned for step by step tutorials walking you through doing just that!

For an interactive version of this guide, check out ~fastly-compute-intro in the Glitch editor.

Next up:

• Where is the edge?
• Build your own edge computing app