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.

Transcript

1. Photoshop, VS Code & Co
   How to write web-based productivity apps
   with Project Fugu
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Demos Project Fugu WebAssembly HTTP Archive
   Photoshop, VS Code & Co
   How to write web-based productivity apps with Project Fugu
   Agenda
   

   View Slide

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
   

   View Slide

4. Photoshop, VS Code & Co
   How to write web-based productivity apps with Project Fugu
   VS Code
   https://vscode.dev/
   

   View Slide

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
   

   View Slide

6. Photoshop, VS Code & Co
   How to write web-based productivity apps with Project Fugu
   Photoshop
   https://creativecloud.adobe.com/cc/photoshop
   

   View Slide

7. Demos Project Fugu WebAssembly HTTP Archive
   Photoshop, VS Code & Co
   How to write web-based productivity apps with Project Fugu
   Agenda
   

   View Slide

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
   

   View Slide

9. API Tracker
   Project Fugu
   https://goo.gle/fugu-api-tracker
   How to write web-based productivity apps with Project Fugu
   Photoshop, VS Code & Co
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Demos Project Fugu WebAssembly HTTP Archive
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    Agenda
    

    View Slide

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
    

    View Slide

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 via File System
    Access API
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    WebAssembly
    

    View Slide

18. Demos Project Fugu WebAssembly HTTP Archive
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    Agenda
    

    View Slide

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

    View Slide

20. 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
    

    View Slide

21. 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
    

    View Slide

22. 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
    

    View Slide

23. h7 Element
    Used on 0.1% of pages
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. 99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999 !important
    Largest known z-index value
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    

    View Slide

28. 99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999999999999999999999999
    99999999999999999999999999999999 !important
    Largest known z-index value
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    https://clippingmagic.com/
    

    View Slide

34. 29
    websites use the File System Access API
    Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    

    View Slide

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

    View Slide

36. Photoshop, VS Code & Co
    How to write web-based productivity apps with Project Fugu
    https://excalidraw.com
    

    View Slide

37. 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
    

    View Slide

38. 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
    

    View Slide

39. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    HTTP Alamanac 2021
    Capabilities Chapter
    

    View Slide