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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Paint PWA Capabilities
   Implementing Productivity Apps with Angular and Fugu APIs
   Agenda
   

   View Slide

5. Paint PWA Capabilities
   Implementing Productivity Apps with Angular and Fugu APIs
   Agenda
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Paint PWA Capabilities
    Implementing Productivity Apps with Angular and Fugu APIs
    Agenda
    

    View Slide

12. Implementing Productivity Apps with Angular and Fugu APIs
    Web App
    Manifest
    Service
    Worker
    

    View Slide

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)
    

    View Slide

14. Service Worker
    Implementing Productivity Apps with Angular and Fugu APIs
    PWA
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    

    View Slide

15. Service Worker Generation
    ng add @angular/pwa
    ng build --prod
    PWA
    Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

16. Paint PWA Capabilities
    Implementing Productivity Apps with Angular and Fugu APIs
    Agenda
    

    View Slide

17. Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

18. Project Fugu
    Implementing Productivity Apps with Angular and Fugu APIs
    Capabilities
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. Q&A
    Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

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
    

    View Slide

23. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide