Understanding the Problem
Migrating a legacy frontend application to a cutting-edge framework can be a time-consuming and effortful task, especially when that frontend represents thousands of engineering hours accumulated over many years. Regardless, to you this migration makes business sense. Which raises the question: how should you approach it?
You could dive in headfirst and fully commit to the migration. However with limited resources, this approach might divert attention from other business objectives. Instead, consider a more incremental strategy - one that allows you to steadily adopt a modern framework while simultaneously reaping its benefits.
For instance, you aim to use Svelte for you frontend in the long term. Yet, your current architecture is not ready for such a shift. You could instead start by adopting Svelte in a more gradual way: compile Svelte components to web components and integrate them into your existing architecture. This sets you up well for a complete migration in the future.
This example demonstrates such an approach. It’s a Turborepo monorepo that includes a Svelte UI library, which compiles into web components. Once deployed, other applications can access these web components via a CDN or directly using the import statement (if within the monorepo). Additionally, the monorepo includes a Storybook application for visualising each UI component and a simple HTML site that imports them via a CDN.
How this works
As mentioned, this is a Turborepo monorepo which contains the following.
- A UI library built using Svelte which compiles into web-components.
- Two Applications, to show the flexibility of how the web-components can be used:
- A Storybook Application
- A simple HTML site
Svelte Web-Component UI Library
The UI library consists of individual Svelte components, which are then compiled into web components at build time. For example PrimaryButton.svelte compiles to PrimaryButton.js and placed within the dist directory.
For deployment, we tell Vercel that we want the output to be each of the JavaScript files that are created. This means that if you wanted to use the PrimaryButton you could access it via https://name.vercel.com/primarybutton.js.
Storybook
Not even the most skilled developer can tell you what a component looks like just by staring at compiled code. That’s where Storybook lends a helping hand. This application is included within the Turborepo app and leverages the Lit framework in order for us to visualise each component.
Currently there is a hot-reload issue when applying changes to the components. Therefore you will need to reload the Storybook application for each change.
When running the application (live or locally), you will see each of the components under their corresponding names. To showcase the flexibility of UI library, we have included graphs from ChartJS as well as a component, List, that makes a call to a third party API.
Simple HTML Site
As stated, this is just a simple HTML site. However this site makes use of the UI components that were generated using Svelte. A bit like a HTML site that has Svelte micro-frontends. In order to make use of the components, all we had to do was import them using the script tag.
<script src="https://tr-svelte-webcomponents-storybook.vercel.app/primarybutton.js"></script>
<script src="https://tr-svelte-webcomponents-storybook.vercel.app/barchart.js"></script>
<script src="https://tr-svelte-webcomponents-storybook.vercel.app/linechart.js"></script>
<script src="https://tr-svelte-webcomponents-storybook.vercel.app/bubblechart.js"></script>
Then to use them, we can call them as HTML tags.
<sv-barchart></sv-barchart>
<sv-linechart></sv-linechart>
<sv-bubblechart></sv-bubblechart>
Resources
Codebase → GitHub - sixfwa/tr-svelte-webcomponents: Svelte Web Components
Svelte Web Component UI Library → https://tr-svelte-webcomponents-storybook.vercel.app/primarybutton.js
Storybook → storybook - Storybook
HTML Example → https://simple-html-sv.vercel.app/