Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making of http://paint.js.org - a Web Component-based Productivity PWA

Making of http://paint.js.org - a Web Component-based Productivity PWA

Progressive Web Apps and the new powerful web APIs provided by Project Fugu allow developers to implement desktop-class productivity apps using web technologies. In this session, Christian Liebel shows you the critical parts of how http://paint.js.org was made, a remake of the productivity app dinosaur Microsoft Paint. It runs great as a standalone application, and since it is based on Web Components, it can even be embedded into other applications. And since everything is web-based, it runs on all operating systems, desktop or mobile, not just Windows 95.

Christian Liebel
PRO

December 07, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

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

    @christianliebel Consultant
  2. 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
  3. Lit @customElement('paint-tool-box') export class ToolBox { render(): TemplateResult { return

    html` ${tools.map( (tool) => html`<paint-tool .tool=${tool} title="${tool.tooltip}" class="${this.drawingContext?.tool === tool ? 'active' : ''} ${tool.instance ? '' : 'unavailable'}" @pointerup="${() => this.selectTool(tool)}" ></paint-tool>`, )} `; } } Making of paint.js.org A Web Component-based Productivity PWA Web Components and Architecture
  4. Web Components Making of paint.js.org A Web Component-based Productivity PWA

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

    Web Components and Architecture
  6. 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
  7. 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
  8. 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
  9. Making of paint.js.org A Web Component-based Productivity PWA Web App

    Manifest Service Worker
  10. 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)
  11. 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
  12. Making of paint.js.org A Web Component-based Productivity PWA

  13. 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
  14. Making of paint.js.org A Web Component-based Productivity PWA Capabilities https://goo.gle/fugu-api-tracker

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

    navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. Making of paint.js.org A Web Component-based Productivity PWA Outlook

  22. 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
  23. Thank you for your kind attention! Christian Liebel @christianliebel [email protected]