Making of paint.js.org A Web Component-based Productivity PWA Christian Liebel @christianliebel Consultant

Hello, it’s me. Making of paint.js.org A Web Component-based Productivity PWA Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

https://paint.js.org – Productivity app – Draw images – Lots of actions & tools – Installable – Read/save files – Copy/paste images from/to clipboard – Share files to other apps – Register for file extensions Making of paint.js.org A Web Component-based Productivity PWA Demo

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

Web Components – The web’s native component model – Easy interop – Very basic: No data binding, dependency injection, … Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Related APIs Custom Elements API Definition of custom HTML elements Interaction via custom DOM attributes, properties, and events Shadow DOM Can prevent DOM access from outside Can prevent CSS manipulation from outside HTML Templates (not used in this demo) Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Lit – Provided by Google – Lightweight library (5 KB) – Custom lifecycle on top of Web Components – Tagged template literals for HTML and CSS to prevent XSS attacks including support for data binding – TypeScript decorators for component registration and attribute/property declaration Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Lit @customElement('paint-tool-box') export class ToolBox { render(): TemplateResult { return html` ${tools.map( (tool) => html` this.selectTool(tool)}" >`, )} `; } } Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Web Components Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Store Pattern Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Embedded https://node-projects.github.io/web-component-designer-demo/index.html Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

Canvas – Plain bitmap for the web – Cross-platform, hardware- accelerated graphics operations – Supports different contexts (2D, 3D: WebGL, WebGL 2.0) – Supported on all evergreen browsers and on IE 9+ Making of paint.js.org A Web Component-based Productivity PWA Canvas and Input

Canvas 2D Context fillRect(x, y, width, height) strokeRect(x, y, width, height) beginPath() moveTo(x, y) lineTo(x, y) fill() stroke() Making of paint.js.org A Web Component-based Productivity PWA Canvas and Input

Pointer Events Making of paint.js.org A Web Component-based Productivity PWA Canvas and Input Users nowadays use different input methods, cross-platform apps should cover all of them Pointer Events offer an abstract interface to catch all input methods (pointerdown, pointermove, pointerup) event.offsetX/event.offsetY contain the pointer’s position relative to the listener

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

A Web Component-based Productivity PWA Making of paint.js.org Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Making of paint.js.org A Web Component-based Productivity PWA Web App Manifest Service Worker

Web App Manifest Distinguishes Web Apps from Websites JSON-based file containing metadata for apps only Apps can be identified by search engines, app store providers, etc. Making of paint.js.org A Web Component-based Productivity PWA Offline Capability and Installability

manifest.webmanifest { "short_name": "Paint", "name": "Paint Workshop", "theme_color": "white", "icons": [{ "src": "icon.png", "sizes": "512x512" }], "start_url": "/index.html", "display": "standalone", "shortcuts": [/* … */] } Making of paint.js.org A Web Component-based Productivity PWA Offline Capability and Installability Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar)

Service Worker JavaScript snippet executed in an own thread, registered by the website Acts as a controller, proxy, or interceptor Has a cache to store responses (for offline availability and performance) Can wake up even when the website is closed and perform background tasks (e.g., push notifications or sync) Making of paint.js.org A Web Component-based Productivity PWA Offline Capability and Installability

Service Worker Making of paint.js.org A Web Component-based Productivity PWA Offline Capability and Installability Service Worker Internet Website HTML/JS Cache fetch

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

Making of paint.js.org A Web Component-based Productivity PWA

Project Fugu Making of paint.js.org A Web Component-based Productivity PWA Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google

Making of paint.js.org A Web Component-based Productivity PWA Capabilities https://goo.gle/fugu-api-tracker

Browser Making of paint.js.org A Web Component-based Productivity PWA Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker

Async Clipboard API Allows reading from/writing to the clipboard in an asynchronous manner (UI won’t freeze during long-running operations) Reading from the clipboard requires user consent first (privacy!) Supported by Chrome, Edge and Safari Making of paint.js.org A Web Component-based Productivity PWA Copy and Paste

Async Clipboard API const btnCopy = document.querySelector('#copy'); btnCopy.addEventListener('click', async () => { const blob = await toBlob(canvas); await navigator.clipboard.write([ new ClipboardItem({[blob.type]: blob}) ]); }); Making of paint.js.org A Web Component-based Productivity PWA Copy and Paste

Async Clipboard API const btnPaste = document.querySelector('#paste'); btnPaste.addEventListener('click', async () => { const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { for (const type of clipboardItem.types) { if (type === 'image/png') { const blob = await clipboardItem.getType(type); const image = await getImage(blob); ctx.drawImage(image, 0, 0); } } } }); Making of paint.js.org A Web Component-based Productivity PWA Copy and Paste

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

File System Access API Some applications heavily rely on working with files (e.g. Visual Studio Code, Adobe Photoshop, …) File System Access API allows you to open, save and override files and directories Supported by Chrome, Edge Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

File System Access API btnSave.addEventListener('click', async () => { const blob = await toBlob(canvas); const handle = await window.showSaveFilePicker(fileOptions); const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); }); Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

File System Access API btnOpen.addEventListener('click', async () => { const [handle] = await window.showOpenFilePicker(fileOptions); const file = await handle.getFile(); const image = await getImage(file); ctx.drawImage(image, 0, 0); }); Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

File Handling API Register your PWA as a handler for file extensions Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

File Handling API "file_handlers": [{ "action": "/index.html", "accept": { "image/png": [".png"] } }] Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

File Handling API if ('launchQueue' in window) { launchQueue.setConsumer(async params => { const [handle] = params.files; if (handle) { const file = await handle.getFile(); const image = await getImage(file); ctx.drawImage(image, 0, 0); } }); } Making of paint.js.org A Web Component-based Productivity PWA File Access and File Handling

Web Components and Architecture Canvas and Input Offline Capability and Installability Copy and Paste File Access and File Handling Dark Mode Making of paint.js.org A Web Component-based Productivity PWA Agenda

CSS Custom Properties – Also known as “CSS variables” – Cascade even through Shadow DOM boundaries, i.e. they can be accessed by subordinate components – Paint.js.org defines the Windows 95 color scheme on app root level :host { --button-face: rgb(192 192 192); --button-light: white; --button-dark: rgb(128 128 128); --button-darker: black; --button-text: black; } Making of paint.js.org A Web Component-based Productivity PWA Dark Mode

prefers-color-scheme CSS Media Feature – The prefers-color-scheme CSS media feature indicates which color scheme the user prefers – Takes two values: – light, if the user prefers a dark-on-light color scheme (or didn’t actively make a decision) – dark, if the user prefers a light-on-dark color scheme – Preference is usually inherited form the operating system’s settings – Changes are automatically reflected (e.g., when the operating system switches between light and dark mode based on time) Making of paint.js.org A Web Component-based Productivity PWA Dark Mode

CSS-Only Light Mode :host { --button-face: rgb(192 192 192); --button-light: white; --button-dark: rgb(128 128 128); --button-darker: black; --button-text: black; } Dark Mode @media (prefers-color-scheme: dark) { :host { --button-face: rgb(64 64 64); --button-light: rgb(128 128 128); --button-dark: rgb(32 32 32); --button-text: white; } } Making of paint.js.org A Web Component-based Productivity PWA Dark Mode

Making of paint.js.org A Web Component-based Productivity PWA Dark Mode

Web Components: Very robust, works consistently across evergreen browsers, perfect for integration scenarios. Lit: Shares basic concepts with other frameworks/libraries (such as Angular), but is much more lightweight. Paint.js.org is smaller (= transferred bytes) than the Windows 95 of Paint (320K)! Capabilities: Powerful APIs available on Chromium and WebKit-based browsers, fallbacks are used for other browsers. Conclusion: Successful project! 🥳 You can perfectly implement web- based (= cross-platform), desktop-class productivity applications. Making of paint.js.org A Web Component-based Productivity PWA Summary

Making of paint.js.org A Web Component-based Productivity PWA Outlook

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]