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
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. API Tracker Project Fugu https://goo.gle/fugu-api-tracker How to write web-based productivity apps with Project Fugu Photoshop, VS Code & Co
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 via File System Access API 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. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
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
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
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
23. h7 Element Used on 0.1% of pages Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
24. #content Most popular ID (14% of pages) Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
25. 51 trillion years Largest max-age value recorded Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
26. Largest known z-index value Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
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
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
29. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu Methodology
30. 560,359 websites use the Async Clipboard API Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
31. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
32. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
33. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu https://clippingmagic.com/
34. 29 websites use the File System Access API Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu
35. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu https://coreldraw.app
36. Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu https://excalidraw.com
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
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
39. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com HTTP Alamanac 2021 Capabilities Chapter