GitXplorerGitXplorer
t

web-components-at-the-edge

public
6 stars
1 forks
1 issues

Commits

List of commits on branch main.
Verified
9bbc0b885f24bf875d1b2fdb7452e72f754c7470

latest presentation starter patch for bg flicker (#17)

tthescientist13 committed a year ago
Verified
859021da1a053c6f316e517e4bf9a9487a7f5d36

update greenwood 0.29.0 and latest presentation plugin (#16)

tthescientist13 committed a year ago
Verified
bdd73437b1c33c70c42508b30a3912cf402d7c09

upgrade latest version of WCC (#15)

tthescientist13 committed 2 years ago
Unverified
325cc2528b113181a85871f8eced36dad95079fa

link to youtube for the talk

tthescientist13 committed 3 years ago
Verified
ab35c7275a4d810c84176dae947a4c651426afad

bump latest wcc v0.3.0 (#14)

tthescientist13 committed 3 years ago
Verified
81fbc6438920c69e8abbeecf3987c8a308bb2694

pin wcc to only install the patch range (#13)

tthescientist13 committed 3 years ago

README

The README file for this repository.

Netlify Status

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:

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