CDN Know-how: Run JavaScript on CDN Edge Nodes with EdgeRoutine

Image for post
Image for post

By Alibaba Cloud ApsaraVideo Team.

This blog is a recap of “The Guide to Alibaba Cloud Content Delivery Network (CDN) EdgeRoutine” video by Hong Xiaolong, Alibaba Cloud intelligent technology expert. In this blog, Hong will introduce EdgeRoutine (ER), providing detailed information about the background, functions, and case studies of EdgeRoutine and a step-by-step demonstration to acquaint users with the potential of EdgeRoutine in actual business operations.

Cloud-native and Edge Computing Are the New Normal

Cloud-native has become a worldwide technology trend in recent years as enterprises are accelerating their cloud migration efforts. The implementation of cloud-native technologies has tremendous momentum in both public and private clouds and is expected to enter a phase of “explosive growth” according to analyst firms like Gartner.

Image for post
Image for post

Serverless and FaaS exhibit huge technical advantages and commercial potential with their soaring market shares. These technologies are now growing even faster than containers.

Edge computing is another emerging sector continuously gaining popularity. As an integral part of this technology, CDNs are the most effective facilitators since they are able to run computing services on their globally-deployed edge nodes. The most important benefit of edge computing is its ability to improve network performance by reducing latency. Gartner even predicts that by 2025, the promise of such low latency will attract three-quarters of enterprise-generated data to be created and processed at the edge. Currently, edge computing is permeating every aspect of our daily lives such as transportation, healthcare, and entertainment.

Innovations Through the Combination of Cloud-native and Edge Computing

With traditional infrastructure as a service (IaaS), services are delivered using abstracted physical servers, such as Elastic Compute Service (ECS) instances, Elastic Container Instances (ECIs), or even higher-level architectures like serverless or FaaS. As the service boundary keeps moving up, isolation costs are falling. Therefore, now cloud customers enjoy better-performing auto scaling and flexible pay-as-you-go billing plans. Alibaba Cloud CDN has deployed more than 2,800 edge nodes worldwide. We draw upon the design thinking behind the two most popular technologies — cloud-native and edge computing — while also combining their applications. Currently, we are exploring the innovative technologies and products that could result from applying serverless computing at the edge.

One result of this exploration is Alibaba Cloud CDN EdgeRoutine.

EdgeRoutine is an edge computing application that uses the edge serverless architecture. It features a low latency, requires no maintenance, and uses a flexible pay-as-you-go billing plan.

Image for post
Image for post

Let’s use a comparison matrix to visualize the differences between using physical servers and using cloud-native technologies. In terms of latency, an on-premises database solution suffers from high latency due to insufficient bandwidth or location restrictions, whereas serverless benefits from lower migration costs due to its lightweight nature and generally achieves mid-level latency with no strict restrictions on locations. Edge serverless, on the other hand, relies on the computing power of edge nodes and provides even lower latency. In terms of computing power, edge nodes generally have limited resources, and therefore, are a good lightweight solution with moderate computational capacity. They are more elastic and involve lower isolation costs compared with lower-layer containers, virtual machines, and physical servers. With respect to cost, serverless ranks high in cost-effectiveness, followed by containers, virtual machines, and physical servers. Serverless is second only to edge serverless. Based on the resource sharing feature of CDNs, edge serverless meets customer expectations for edge nodes by providing an optimal price-performance ratio.

EdgeRoutine provides services based on Alibaba Cloud CDN and is deployed in more than 70 countries across six continents for near-ubiquitous global coverage.

What Is EdgeRoutine?

EdgeRoutine is an edge serverless computing environment developed by the Alibaba Cloud CDN team. EdgeRoutine makes it easy for users to run custom JavaScript or WebAssembly (not currently available) code on CDN edge nodes. This means you do not have to worry about hardware configurations, deployment regions, scheduling, or elastic scaling. After the code is deployed to the production environment, the system automatically runs and executes the code on all edge nodes globally. EdgeRoutine has the following four characteristics:

1) Lightweight

  • Simple code snippet integration is supported.
  • EdgeRoutine allows a maximum upload size of 1 MB for individual files and supports uploading webpack bundles (bundle.js files).
  • EdgeRoutine supports the triggering of multiple types of events, such as fetch, chrome, and set.

2) Low-latency

  • Cold starts take 5 to 10 ms, which readies EdgeRoutine to serve requests within a short period of time after global code deployment.
  • Deployment across the extensive network of edge nodes facilitates nearby access by end-users.
  • After code checks are complete, changes take effect within seconds, and the modified configuration is refreshed within seconds.
  • Dynamic Content Delivery Network (DCDN) accelerates origin pulls.

3) Comprehensive

  • EdgeRoutine has a default memory of 128 MB and a limit of 5 ms for CPU time, which is sufficient for most customers. EdgeRoutine also offers paid computing power upgrades.
  • Given that EdgeRoutine is a lightweight serverless computing platform whose performance relies on the efficient use of network bandwidth, certain limits are applied to files, processes, and socket speed. It only supports HTTP and HTTPS traffic.
  • We do not recommend storing sensitive data in EdgeRoutine. Features like edge key-value store and data caching will be added later to facilitate computing and data storage.

4) Flexible

  • EdgeRoutine provides a JavaScript runtime environment and supports ES6 class syntax.
  • It supports the standard Service Worker Web API, allowing front-end applications to adapt to the web application without any changes.
  • Through integration with the CDN, EdgeRoutine allows extending services with custom CDN logic and implementing a highly programmable CDN for specific requirements.

Technical Principles of EdgeRoutine

CDNs have a multi-level cache hierarchy that reduces latency for static content delivery by pulling and caching static assets from the origin to the CDN node closest to the client. The static content can be fetched directly from the cache instead of origin servers upon requests, which shortens the distance the data must travel and speeds up content delivery. Alibaba Cloud CDN offers a multi-level (two levels by default) cache hierarchy that significantly improves the cache hit ratio and cuts down on origin requests.

Image for post
Image for post

Based on the multi-level cache hierarchy of Alibaba Cloud CDN, EdgeRoutine is deployed at edge locations, which are at the same layer as edge gateways and edge caches. EdgeRoutine is an independent component and provides a stand-alone JavaScript runtime environment.

EdgeRoutine intelligently identifies the requests received by edge environments and edge gateways. If edge code is configured, these requests can also be forwarded directly to EdgeRoutine from the edge gateways via transparent proxies. In essence, the process by which EdgeRoutine takes over requests for edge code implementation is equivalent to the takeover of the request lifecycle with edge code.

Lightweight computing and related CDN functions are both supported within the request lifecycle. Users may leverage the high cache hit ratio by specifying a proxy with parameters such as cdnproxy:true to forward requests to edge gateways, from which requests proceed through the multi-level cache hierarchy of the CDN.

EdgeRoutine supports both the serverless implementation and the initiation of new fetch requests. These fetch requests are not main requests, but subrequests generated within customer code. Directly access domain names over the Internet with such subrequests, or use a CDN proxy to forward the requests to Alibaba Cloud CDN. For small- to medium-sized websites, simply host the static pages on edge caching servers without purchasing additional cloud services. This approach makes the most of the convenience of serverless computing and the advantages of CDN.

Use Cases

  • CDN-related Functions: Use EdgeRoutine to execute custom code for functions like request interception, traffic throttling, content generation, multi-source data merging, and asynchronous authentication. These CDN functions are highly programmable and support the flexible modification, testing, and canary release of code provided by EdgeRoutine. EdgeRoutine enables enterprises of all sizes to combine and implement functions independently and promptly with no need for additional operations.
  • Front-end Service: EdgeRoutine supports features such as web API deployment, web acceleration, HTML parsing, Edge Side Includes (ESI), and edge server-side rendering (SSR). You can also implement edge-optimized API gateways to shift traffic. Browser rendering optimizations can’t be overemphasized in the application of ever-changing front-end technologies. Therefore, CDNs are developed to cater to this need through their accelerated delivery of static content, such as CSS, JavaScript, images, and videos. In addition, EdgeRoutine is blazing a trail for front-end performance optimization with its introduction of edge computing in collaboration with cloud computing and clients. This allows offloading the computational stress on web browsers/app clients to edge servers, where certain front-end and non-intensive computing tasks are performed. It is fair to say that EdgeRoutine is contributing to the further development of micro-frontend architecture.
  • Canary Release: Developers perform A/B tests to compare code and app versions as a way to implement canary release. Not only does this improve performance stability, but it also allows users to systematically optimize and quickly roll back updates, providing a clearer breakdown of conversion rates and user acquisition rates for new features. For example, developers can partition geographical regions for canary releases at a finer granularity, such as at the region or province level.
  • IoT Data Convergence and Computation Offloading: IoT devices use a gateway to analyze generated data and store analysis results in a data center system. This process involves data aggregation, analysis, and transmission to the central hub. Edge computing helps collect and combine pre-aggregated data and then distributes large-scale offline or stream computation to edge nodes, reducing latency and alleviating computational stress on clients and the origin server.

The following figure presents the scenarios where EdgeRoutine is applied:

Image for post
Image for post

Typical Applications

This section demonstrates some of the typical applications of EdgeRoutine.

We’ve all had the annoying experience of visiting websites on 3G and 2G connections. Having a faster 4G connection has helped with the situation, and 5G will offer even higher speeds.

The main function of CDNs is to accelerate the loading of static content from websites. A CDN serves cached content to users from the nearest location, accelerating access to text, images, videos, and other static content forms.

However, this dispatching technique is not universally adaptable as we cannot use it to accelerate the delivery of dynamic content. Take Alibaba’s international site as an example. Visitors to this site may be located in countries far from the site’s origin servers, which slows down the network performance and creates a poor user experience.

The following figure illustrates the rendering performances of search attempts on the app before and after EdgeRoutine is applied. The upper part shows conventional rendering, where a blank screen is displayed for the first second and then the full page suddenly appears. This is because the content, including the subresources like images, is completely rendered on the client-side only after multiple JavaScript requests are made via the front-end to obtain the necessary resources to render the page.

Image for post
Image for post

But is this worth a one-second delay?

Can we use EdgeRoutine for dynamic rendering? The answer is Yes.

With EdgeRoutine, rendering is more efficient and requires only one request from the client. We can render the business logic in the front-end as a stream, with the frames rendered first, followed by the gradual rendering of the static content. EdgeRoutine allows the assembly and stream output of all pictures and videos at the edge of the network, where we can even request multiple resources with an asynchronous concurrent request. We can see from the lower part of the figure that the page remains completely blank for the first 0.3 seconds, after which the overall frame appears within less than 0.1 seconds. All basic information, such as descriptions and prices, are shown in less than one second except for the largest images which are rendered at last.

The differences in time to first byte (TTFB) and content downloading signify a tremendous improvement in both the above-the-fold time and download time. Edge rendering and edge SSR are innovative application scenarios introduced by EdgeRoutine. EdgeRoutine can achieve rendering with performance similar to local rendering as long as the low-latency mode is enabled at the edge. In addition, CDN can be used to speed up the delivery of static files.

Computation occurs whenever we use mobile apps and desktop clients. The dynamic logic computing must be processed by virtual servers on the cloud. Even the simple operation of entering an account password requires data authentication by an origin server. These tasks generate high latency and a large number of queries per second (QPS), putting a great deal of stress on the origin servers.

Can we use edge computing to reduce the load on the origin servers?

Sure, we can. For instance, dynamic authentication can be implemented in an edge environment for reduced QPS, lower latency, and no need for back-to-source processing. We also employ CDN to cache both static resources and dynamic data for tasks that require the assembly and combination of these two types of content.

Faced with the hundreds of millions of connected smartphone devices, developers of popular apps generally need to evaluate client-side performance, use canary updates for multiple app versions, and A/B test new features to monitor performance and conversion rates. However, using the origin server alone to handle the requests from such a massive number of clients would undoubtedly generate an excessive QPS and crash the origin servers. Therefore, in most cases, only 3% or 5% of the total clients would be chosen as test samples.

EdgeRoutine relieves this pressure by dispersing the QPS load to globally-distributed CDN nodes, providing further support for backtracking by aggregating the analyzed data back to the enterprise data center.

Furthermore, the deployment of a personalized search algorithm is prohibitively expensive when origin pulls are involved. EdgeRoutine adopts a different approach where no decision is required from the origin server, and location-based recommendations can be directly computed on the edge nodes by matching the keywords between resources and user profiles.

Tutorials and Demonstrations

We’ve built a command-line utility, edgeroutine-cli, that works on macOS, Windows, and Linux. It offers support for the debugging, uploading, canary testing, and canary release of code. Learn more about edgeroutine-cli at using the following links:

1) EdgeRoutine Demo: Hello World

Image for post
Image for post

2) EdgeRoutine Demo: Hello World Local Debugging

Image for post
Image for post

3) EdgeRoutine Demo: Webpack Bundling

Image for post
Image for post

The views expressed herein are for reference only and don’t necessarily represent the official views of Alibaba Cloud.

Original Source:

Written by

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store