Cross-platform components with Svelte

An overview of how we created a cross-platform component library using Svelte and Custom Elements.

Transcript

1. Cross-platform components with Svelte Cameron Stitt
2. Compare the Market Principal Engineer
3. Our Problem • ~8 years of code across multiple different stacks • JSP, React & Svelte • We want to get consistency with our designs across all our applications • Component library per stack would require significant work
4. Our Solution • A cross-platform component library that outputs: ◦ Svelte components ◦ React components ◦ Custom Elements • Change once, update everywhere • Components are all written in Svelte
5. What is Svelte? • “A radical new approach to building user interfaces” • Compilation of components to performant code • No virtual DOM • Native state management • Reactive variables • A quick example
6. What are Custom Elements? • Part of the Web Component spec • “Custom HTML tags” • Native support for most browsers • Polyfill to enable support for all browsers • A quick example
7. Custom Elements Lifecycle • connectedCallback ◦ Invoked each time the custom element is appended into a document-connected element • disconnectedCallback ◦ Invoked each time the custom element is disconnected from the document's DOM • adoptedCallback ◦ Invoked each time the custom element is moved to a new document • attributeChangedCallback ◦ Invoked each time one of the custom element's attributes is added, removed, or changed
8. Custom Elements with Svelte • Can be generated with compiler option (customElements: true) • A tag in your component defines the element name • Has full integration into the Custom Element lifecycle • A quick example
9. Custom Elements inside React and Vue • React ◦ Treated like all other JSX ◦ There is a rather minimal page in React docs • Vue ◦ Treated like a normal Vue component • A quick example
10. Our Workflow Svelte Custom Element React Wrapper React Apps Svelte Apps Anything else! Component Library
11. In Production - here
12. Questions? email: github: slides: web: cameron@cam.st cam-stitt SpeakerDeck https://cam.st