Self-contained Web Components through Serverless Computing

Markus Ast ts.asukr@m Martin Gaedke moc.ekdeag@nitram

Technische Universit├Ąt Chemnitz, Distributed and Self-organizing Systems Group

Traditional Stack

Traditional Stack

Next Stack

Next Stack

Web Services

  • Comments
  • Votes
  • Maps
  • Checkout
  • ...
Build big complex things out of smaller less complex things

Example: UpVote Component

Web Components?

Front-end (UI)





  
    
      
    
  
  



            

Issues

  • HTML and CSS and JavaScript
  • Updates?
  • Style Isolation?

Web Components


  <script src="js/upvote-button.js"></script>
  <upvote-button></upvote-button>
            

Self-contained Web Components

Web Components (UI) with their back-end integrated

Back-end?

Which platform?

  • PHP?
  • Node.js?
  • C#?
  • ...

Back-end?

PHP, Node.js, C#, ... ?

Function!

Demo

Advantages

  • increase the development speed of new applications
  • decreases the costs of development of new applications
  • enables global scale but still decreases ongoing costs
  • acts as an enabler for powerful end-user development platform
  • scale on small granularity

Traditional Stack

Traditional Stack

Latency for Wordpress-based Smashing Magazine

Next Stack

New Stack

Latency for JAMstack-based Smashing Magazine

How does it work?


<script src="js/upvote-button.js"></script>
<upvote-button endpoint="..."></upvote-button>
            

export default class UpVoteElement extends ServerlessComponent {
  constructor() {
    super({
      git: 'https://github.com/rkusa/upvote-button-fns.git',
      path: btoa(location.href),
    })
  }

  initialize() {
    this.load().catch(console.error)
  }
}
            

async load() {
  // fetch vote count and render UI
}

async toggleVote() {
  // increase/decrease vote count
}
            

Deployment

sequenceDiagram participant U as User participant C as Component participant P as Cloud Provider U->>C: click deploy C->>P: redirect to P-->>U: ask for deployment authorization U->>P: authorize deployment P->>P: deploy function P-->>C: redirect back

Current Deployment

sequenceDiagram participant U as User participant C as Component participant I as components.cloud participant P as Cloud Provider U->>C: click deploy C->>I: redirect to I-->>U: ask for deployment authorization U->>I: authorize deployment I->>P: deploy function P-->>I: redirect back I-->>C: redirect back

What else can we do?




          

What's next?

  • UX of deploying functions
  • Functions lifecycle
  • Composition of Self-contained Web Components
  • Possibility to choose/move between Cloud Providers

Thank you!

Demo Sources