web-components-at-the-edge

Slides for my virtual track talk at OpenJS World (2022) titled Web Components at the Edge. Video recording is available on YouTube. Hosted on Netlify and built using GreenwoodJS with the greenwood-starter-presentation theme pack plugin.

To operate the deck in full screen, click the "Presenter mode" button and use the left and right arrows keys to navigate through the slides. Hit ESC to exit presenter mode.

Local Setup

If you would like to run this project locally

1. Have NodeJS LTS installed (or nvm use if you have nvm installed)
2. Clone or fork this repo
3. Install dependencies

   $ npm ci

Presentation

To run the slides locally, run npm start

You can now view the slide deck by opening localhost:8080 in your browser.

Demo

There are two runtimes used for the demo section of this talk:

• Serverless - Using Architect, a serverless framework for AWS. Code can be found in the serverless/ directory.
• Edge Functions - Powered by Netlify running Deno. Code can be found in the netlify/ directory.

Note: All demos use my project wcc for rendering native custom elements. It is still a WIP, so some minor refactoring may be ongoing.

Serverless

There are three paths available for this demo, all available from the /demo path

• /demo1 - Basic example
• /demo2 - Example with data fetching
• /demo3 - Example with progressive hydration

Live

This demo has two live environments:

• Production (used in the presentation)
• Preview (preview environment for PRs)

Local

To view the demo locally to start Architect's sandbox, run

$ npm demo:serverless

Edge

There are three paths available for this demo, all available from the /demo path

• /demo1 Basic example
• /demo2 Example with data fetching
• /demo3 Example with geo-location

Live

This demo has two live environments:

• Production (used in the presentation and shares the same environment)
• Preview - For PRs, and will be dependent on PR preview URL.

Local

To view the demo locally to start Netlify's sandbox, run

$ npm demo:edge