Implementing Productivity Apps With Angular And Fugu APIs

Double-click a file, make changes, and save it back to disk: That’s how productivity apps, IDEs, and image editors have worked since the early days of desktop computing. Until now, web applications could not integrate into this workflow. Fortunately, Project Fugu, a cross-vendor initiative by Google, Microsoft, and Intel, aims to bring very powerful native capabilities to the web—file handler registrations, clipboard, and file system access included! This allows web developers like you to finally bring Office-style apps, IDEs, text, image, or video editors to the web. Thinktecture’s Christian Liebel shows you how to integrate Native File System and File Handler API into your Angular app.

Transcript

1. Christian Liebel @christianliebel Consultant Implementing Productivity Apps with Angular and Fugu APIs
2. Hello, it’s me. Implementing Productivity Apps with Angular and Fugu APIs Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. https://paint.js.org – Productivity app – Draw images – Lots of actions & tools – Installable – Read/save files – Copy/paste images from/to clipboard – Share files to other apps – Register for file extensions Implementing Productivity Apps with Angular and Fugu APIs Demo Use Case
4. Paint PWA Capabilities Implementing Productivity Apps with Angular and Fugu APIs Agenda
5. Paint PWA Capabilities Implementing Productivity Apps with Angular and Fugu APIs Agenda
6. 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+ Paint Implementing Productivity Apps with Angular and Fugu APIs
7. Canvas 2D Context fillRect(x, y, width, height) strokeRect(x, y, width, height) beginPath() moveTo(x, y) lineTo(x, y) fill() stroke() Paint Implementing Productivity Apps with Angular and Fugu APIs
8. Low-latency Rendering Paint Web pages need to synchronize with the DOM on graphics updates causing latencies that can make drawing difficult Low-latency rendering skips syncing with the DOM with can lead to a more natural experience Supported on Chrome (Chrome OS and Windows only) Implementing Productivity Apps with Angular and Fugu APIs
9. Pointer Events Paint 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 Implementing Productivity Apps with Angular and Fugu APIs
10. Bresenham Line Algorithm The user may move faster than the input can be processed For this case, we need to remember the previous point and interpolate the points in between The Bresenham line algorithm calculates the missing pixels between two given points Paint Implementing Productivity Apps with Angular and Fugu APIs
11. Paint PWA Capabilities Implementing Productivity Apps with Angular and Fugu APIs Agenda
12. Implementing Productivity Apps with Angular and Fugu APIs Web App Manifest Service Worker
13. manifest.webmanifest { "short_name": "Paint", "name": "Paint Workshop", "theme_color": "white", "icons": [{ "src": "icon.png", "sizes": "512x512" }], "start_url": "/index.html", "display": "standalone", "shortcuts": [/* … */] } Implementing Productivity Apps with Angular and Fugu APIs PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar)
14. Service Worker Implementing Productivity Apps with Angular and Fugu APIs PWA Service Worker Internet Website HTML/JS Cache fetch
15. Service Worker Generation ng add @angular/pwa ng build --prod PWA Implementing Productivity Apps with Angular and Fugu APIs
16. Paint PWA Capabilities Implementing Productivity Apps with Angular and Fugu APIs Agenda
17. Implementing Productivity Apps with Angular and Fugu APIs
18. Project Fugu Implementing Productivity Apps with Angular and Fugu APIs Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google
19. 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 Shipped with Google Chrome 86 Implementing Productivity Apps with Angular and Fugu APIs Capabilities
20. File System Handling API Register your PWA as a handler for file extensions Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Implementing Productivity Apps with Angular and Fugu APIs Capabilities
21. Q&A Implementing Productivity Apps with Angular and Fugu APIs
22. New powerful APIs regularly ship with new releases of Chromium-based browsers Some only add minor finishing touches, others enable whole application categories as productivity apps to finally make the shift to the web Some APIs already made their way into other browsers (e.g., Web Share) Fugu process makes sure that capabilities are implemented in a secure, privacy-preserving manner Let’s make the web a more capable platform! Implementing Productivity Apps with Angular and Fugu APIs Summary
23. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com