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

Photoshop, VS Code & Co: How to write web-based productivity apps with Project Fugu

Photoshop, VS Code & Co: How to write web-based productivity apps with Project Fugu

Photoshop is one, Illustrator is one, Visual Studio Code is one too: we’re talking about productivity applications that run on the web. This has been made possible by new interfaces that Project Fugu, a joint effort by Microsoft, Google, and Intel has introduced to the Web. In this session, Christian Liebel from Thinktecture shows you how Adobe and Microsoft have brought their applications to the web. As a member of the capabilities chapter team of the 2021 HTTP Almanac, which examined over 7 million pages for the use of modern web interfaces, Christian will show you the surprising use cases developers have already implemented using Project Fugu.

Christian Liebel

September 28, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu Christian Liebel @christianliebel Consultant
  2. Hello, it’s me. Photoshop, VS Code & Co How to

    write web-based productivity apps with Project Fugu Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  4. ✅ Installable ✅ Offline capable ✅ Access to clipboard ✅

    Access to local files Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu Productivity Apps
  5. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu VS Code https://vscode.dev/
  6. ✅ Provides powerful functions ✅ Makes pre-existing functions available Photoshop,

    VS Code & Co How to write web-based productivity apps with Project Fugu Productivity Apps
  7. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu Photoshop https://creativecloud.adobe.com/cc/photoshop
  8. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  9. Overview Joint effort by Google, Intel, Microsoft, and other Chromium

    contributors Aims to bridge the gap between web applications and platform-specific apps Introduces new capabilities to the web platform while maintaining the user’s security and privacy Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu Project Fugu
  10. 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 Project Fugu How to write web-based productivity apps with Project Fugu Photoshop, VS Code & Co
  11. Async Clipboard API Copy Content await navigator.clipboard.writeText('foo'); await navigator.clipboard.write(/* data

    */); Paste Content const content = await navigator.clipboard.readText(); const content = await navigator.clipboard.read(); Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu Project Fugu
  12. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu Project Fugu Browser navigator.clipboard.writeText('foo'); ClipboardManager Clipboard … NSPasteboard
  13. 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 Project Fugu How to write web-based productivity apps with Project Fugu Photoshop, VS Code & Co
  14. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu File System Access API
  15. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  16. Low-Level Bytecode for the Web Fast, efficient, portable Readable and

    debuggable High execution speed: Can be faster than JavaScript Compile target: Helps bringing other langugages and existing code to the web WebAssembly How to write web-based productivity apps with Project Fugu Photoshop, VS Code & Co
  17. Photoshop’s journey to the web Collaboration between Google and Adobe

    Goal: Make Photoshop more accessible Port (parts of) existing Photoshop source code to the web Dynamic multithreading support for Wasm SIMD instructions for Wasm Support C++ exceptions in Wasm Origin Private File System Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu WebAssembly
  18. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  19. It is a permanent repository of web performance information such

    as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
  20. The Web Almanac is a comprehensive report on the state

    of the web, backed by real data and trusted web experts. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
  21. 8.36M websites tested via WebPageTest and Lighthouse 43.88 TB data

    processed and included in a BigQuery database for analysis Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
  22. h7 Element Used on 0.1% of pages Photoshop, VS Code

    & Co How to write web-based productivity apps with Project Fugu
  23. #content Most popular ID (15% of pages) Photoshop, VS Code

    & Co How to write web-based productivity apps with Project Fugu
  24. 678 MB The weight of the largest desktop page Photoshop,

    VS Code & Co How to write web-based productivity apps with Project Fugu
  25. Largest known z-index value Photoshop, VS Code & Co How

    to write web-based productivity apps with Project Fugu
  26. 548,722 desktop websites use the Async Clipboard API Photoshop, VS

    Code & Co How to write web-based productivity apps with Project Fugu
  27. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu https://clippingmagic.com/
  28. 2,317 websites use the File System Access API Photoshop, VS

    Code & Co How to write web-based productivity apps with Project Fugu
  29. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu https://coreldraw.app
  30. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu https://excalidraw.com
  31. 3,854 confirmed WebAssembly requests on desktop 2,724 domains on desktop

    (0.06%) Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
  32. Adobe and Microsoft were able to bring Photoshop and VS

    Code to the web, many other demos show power of the web Project Fugu: New powerful APIs ship regularly with new versions of Chromium-based browsers WebAssembly: Write performance-critical code or migrate existing code to the web HTTP Archive: Overall, API usage increases rapidly Let’s make the web a more powerful platform! Summary How to write web-based productivity apps with Project Fugu Photoshop, VS Code & Co