What's going on with Project Fugu? at DevTalks Reimagined

The fugu, or pufferfish, is a toxic, potentially lethal delicacy that, prepared correctly, is a culinary masterpiece.

The web platform is less deadly, but still requires careful preparation when incubating new features. Project Fugu is the Chrome team's initiative to bring more power to the platform. Many of the experiments are trials or behind flags to ensure they are being prepared correctly.

In this session we'll investigate the features that are coming out of the Fugu kitchen, have a taste of some that are nearly ready and take a peek into the future to see what's in store for 2020. By the end you'll be equipped with the features to make your web application a masterpiece too.

---

Links:

All the open Origin Trials: https://developers.chrome.com/origintrials/#/trials/active

Wake Lock API:
https://web.dev/wakelock/
https://wake-lock-demo.glitch.me

Contact Picker API:
https://www.twilio.com/blog/web-contact-picker-api
https://github.com/philnash/contact-picker-twilio-client
https://web.dev/contact-picker/
https://contact-picker.glitch.me/

Native File System API:
https://web.dev/native-file-system/
https://googlechromelabs.github.io/text-editor/

Shape Detection API:
https://web.dev/shape-detection/
https://shape-detection-demo.glitch.me

Transcript

1. WHAT'S GOING ON
   WITH PROJECT
   FUGU?
   @philnash
   

   View Slide

2. Phil Nash
   @philnash
   https://philna.sh
   philnash@twilio.com
   

   View Slide

3. WHAT'S GOING ON
   WITH PROJECT
   FUGU?
   @philnash
   

   View Slide

4. WHAT EVEN IS
   PROJECT FUGU?
   
   @philnash
   

   View Slide

5. @philnash
   

   View Slide

6. View Slide

7. API DESIGN
   @philnash
   

   View Slide

8. PRIVACY & SECURITY
   @philnash
   

   View Slide

9. VENDOR PREFIXES
   @philnash
   

   View Slide

10. The bad old days
    var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;
    01.
    02.
    03.
    04.
    05.
    @philnash
    

    View Slide

11. 
    @philnash
    

    View Slide

12. Flags
    #enable-experimental-web-platform-features
    @philnash
    

    View Slide

13. @philnash
    

    View Slide

14. 
    @philnash
    

    View Slide

15. BUT
    @philnash
    

    View Slide

16. ORIGIN TRIALS
    @philnash
    

    View Slide

17. Origin Trials
    https://developers.chrome.com/origintrials
    https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/
    @philnash
    

    View Slide

18. Origin Trials
    http-equiv="origin-trial"
    data-feature="Web Share"
    data-expires="2017-04-17"
    content="AvAvrNEtWccBI18wmx2kSi..."
    >
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash
    

    View Slide

19. Origin Trials
    • Fixed time limit
    • Canceled if usage > 0.5%
    • Feature may or may not ship
    @philnash
    

    View Slide

20. GET ON WITH THE
    
    @philnash
    

    View Slide

21. WAKE LOCK
    CONTACT PICKER
    NATIVE FILESYSTEM
    SHAPE DETECTION
    @philnash
    

    View Slide

22. WAKE LOCK
    @philnash
    

    View Slide

23. Wake Lock
    screen
    Plans for a system lock are on hold
    @philnash
    

    View Slide

24. Acquiring a lock
    let wakeLock;
    try {
    wakeLock = await navigator.wakeLock.request('screen');
    } catch(e) {
    console.log('Could not attach WakeLock');
    }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash
    

    View Slide

25. RELEASING THE
    LOCK
    @philnash
    

    View Slide

26. Releasing the lock
    let wakeLock;
    try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
    console.log('WakeLock released!');
    });
    } catch(e) { console.log('Could not attach WakeLock'); }
    window.setTimeout(() => wakeLock.release(), 5000);
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    @philnash
    

    View Slide

27. Wake Lock: Links
    Wake Lock introduction:
    https://web.dev/wakelock/
    Wake Lock demo:
    https://wake-lock-demo.glitch.me/
    @philnash
    

    View Slide

28. CONTACT PICKER API
    @philnash
    

    View Slide

29. PRIVATE DATA
    @philnash
    

    View Slide

30. @philnash
    

    View Slide

31. Contact Picker API
    const supported = ('contacts' in navigator && 'ContactsManager' in window);
    @philnash
    

    View Slide

32. Contact Picker API
    async function getContact() {
    const props = ['name', 'tel', 'email'];
    const opts = { multiple: false };
    const contacts = await navigator.contacts.select(props, opts);
    return contacts[0];
    }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash
    

    View Slide

33. Contact Picker API
    const contact = getContact()
    // => {
    // "email": [],
    // "name": ["Phil Nash"],
    // "tel": ["+61 455 123456", "+44 7712 345678"]
    // }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash
    

    View Slide

34. DEMO
    @philnash
    

    View Slide

35. Contact Picker API: Links
    Make phone calls with the Contact Picker API:
    https://www.twilio.com/blog/web-contact-picker-api
    Contact Picker API introduction:
    https://web.dev/contact-picker/
    Contact Picker demo:
    https://contact-picker.glitch.me/
    @philnash
    

    View Slide

36. IT LAUNCHED
    
    CHROME 80
    @philnash
    

    View Slide

37. NATIVE FILE SYSTEM
    API
    @philnash
    

    View Slide

38. Native File System API
    No file chosen
    Choose file
    @philnash
    

    View Slide

39. Native File System API
    Save
    @philnash
    

    View Slide

40. Native File System API
    const getFileHandle = async function() {
    return await window.chooseFileSystemEntries();
    }
    01.
    02.
    03.
    @philnash
    

    View Slide

41. Native File System API
    const getFileTextContents = async function(fileHandle) {
    const file = await fileHandle.getFile();
    return await file.text();
    }
    01.
    02.
    03.
    04.
    @philnash
    

    View Slide

42. Native File System API
    async function getNewFileHandle() {
    const opts = {
    type: 'save-file',
    accepts: [{
    extensions: ['txt'],
    mimeTypes: ['text/plain'],
    }],
    };
    return await window.chooseFileSystemEntries(opts);
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    10.
    @philnash
    

    View Slide

43. DEMO
    @philnash
    

    View Slide

44. PERMISSIONS
    @philnash
    

    View Slide

45. Native File System API: Links
    Native File System API introduction:
    https://web.dev/native-file-system/
    Native File System demo:
    https://googlechromelabs.github.io/text-editor/
    @philnash
    

    View Slide

46. SHAPE DETECTION
    API
    @philnash
    

    View Slide

47. Shape Detection API
    async function getFaces() {
    const faces = await faceDetector.detect(canvasOrImage);
    }
    01.
    02.
    03.
    @philnash
    

    View Slide

48. DEMO
    @philnash
    

    View Slide

49. Shape Detection API: Links
    Shape Detection API introduction:
    https://web.dev/shape-detection/
    Shape Detection API demo:
    https://shape-detection-demo.glitch.me/
    @philnash
    

    View Slide

50. THE WEB HAS A LOT
    TO OFFER
    @philnash
    

    View Slide

51. WE NEED TO GET IT
    RIGHT
    @philnash
    

    View Slide

52. EXPERIMENT!
    @philnash
    

    View Slide

53. FEEDBACK!
    @philnash
    

    View Slide

54. Thanks!
    @philnash
    https://philna.sh
    philnash@twilio.com
    

    View Slide