Build Once, Use Anywhere
Microfrontends with Svelte
The Requirements
- One Week
- Build an App that can run in two different places
- Should have a standalone dev/deployment cycle
- Must meet the Web Component Standard
One Week
Build Once, Use Anywhere
Server 2
Server 1
Our Own Site
Salesforce
Server 2
Server 1
Our Own Site
Salesforce
Standalone Dev/Deployment
Server 2
Server 1
Our Own Site
Salesforce
Our Feature-App
Proxy Server
Server 2
Server 1
Our Own Site
Salesforce
Our Feature-App
Proxy Server
Server 2
Server 1
Our Own Site
Salesforce
Our Feature-App
Proxy Server
Microfrontends
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams.
Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
https://micro-frontends.org/
Web Component!
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
https://svelte.dev/
Building It
Let's Dive In!!
Success!
Think Forward
- Keep the "contract" stable
- Create a manifest file
- If using SPA's with runtime frameworks, or many SPA's on one page, use an orchestration layer (eg. Single-spa)
Microfrontends
- Great fit for web components
- Nice for diverse architecture
- Probably not necessary for all cases
Questions?
Get in touch:
@evanfuture
Thank You!
Build Once, Use Anywhere: Microfrontends with Svelte
By Evan Payne
Build Once, Use Anywhere: Microfrontends with Svelte
What do you do when you have less than a week to build a web component that can be used in two different places but still has a standalone development and deployment process? Sounds like a perfect use-case for Microfrontends! And while we're at it, let's give Svelte a try! In this talk, I'll walk you through how and why the Svelte/Microfrontend combination ended up being a complete pleasure to work with.
