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

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

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

April 25, 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. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  3. ✅ 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
  4. Photoshop, VS Code & Co How to write web-based productivity

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

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

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

    Co How to write web-based productivity apps with Project Fugu Agenda
  8. 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
  9. 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
  10. 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
  11. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu Project Fugu Browser navigator.clipboard.writeText('foo'); ClipboardManager Clipboard … NSPasteboard
  12. 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
  13. 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
  14. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  15. 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
  16. 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 via File System Access API Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu WebAssembly
  17. Demos Project Fugu WebAssembly HTTP Archive Photoshop, VS Code &

    Co How to write web-based productivity apps with Project Fugu Agenda
  18. 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
  19. 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
  20. 8.2M websites tested via WebPageTest and Lighthouse 39.5 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
  21. h7 Element Used on 0.1% of pages Photoshop, VS Code

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

    & Co How to write web-based productivity apps with Project Fugu
  23. 51 trillion years Largest max-age value recorded Photoshop, VS Code

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

    to write web-based productivity apps with Project Fugu
  25. 560,359 websites use the Async Clipboard API Photoshop, VS Code

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

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

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

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

    apps with Project Fugu https://excalidraw.com
  30. 3854 confirmed WebAssembly requests on desktop 2724 domains on desktop

    (0.06%) Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
  31. 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 usage was low in 2021, but APIs may catch on 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