Hey! You got your web app in my web app!

Embedded web applications are those that are designed to live in a larger application to provide specific bits of functionality. They have historically been described with words like “widgets” or “third party javascript”. Examples might be a live support chat widget or a buy now button. Typically these types of projects are built with complex custom javascript that adds an iframe and interacts with a back end API. This approach allows a minimal amount of user customization, and is fairly complex to build and maintain. With the rise of statically generated websites and micro front ends, it is a great time to consider better ways to build these kinds of applications.

In this session, we are going to explore this topic by using an easy to understand example: adding an interactive shopping cart to a static website. We’ll look at both client and server code. We’ll talk about how using Custom Elements instead of iframes give us better tools for building our front end and give more power and flexibility to our users. We’ll talk about the Event State Reducer pattern and how it gives us a radically simpler developer experience when compared with traditional API driven approaches, and we’ll talk about how to better structure our APIs to support this new paradigm. As a bonus, we will see how multiple collaborating elements on a single page can let us bring a level of interactive experience to a statically generated website beyond what you may have thought possible.

Join the Discord server for discussion about meetup events and for more general JS help and conversation: https://discord.gg/8enKaa6egs