Upgrade to Pro — share decks privately, control downloads, hide ads and more …

APICON 2017: State of Web APIs

APICON 2017: State of Web APIs

My Slides for my talk @APICON 2017 in Berlin. State of Web APIs.

Carsten Sandtner

September 20, 2017
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

Transcript

  1. STATE OF WEB
    APIS
    Carsten Sandtner // @casarock // #APICON // Berlin

    View Slide

  2. CARSTEN
    SANDTNER
    @CASAROCK

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. THE WEB

    View Slide

  7. BROWSER WARS

    View Slide

  8. BROWSER WARS
    USER AGENTS
    Mosaic/0.9 !// grandmother of all!
    Mozilla/2.02 [fr] (WinNT; I) !// Netscapes first!
    Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) !// IE4!
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like
    Gecko)
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like
    Gecko) Chrome/58.0.3029.110 Safari/537.36

    View Slide

  9. BROWSER DETECTION
    https://flic.kr/p/49DTbL

    View Slide

  10. BROWSER WARS
    BROWSER DETECTION
    function lib_bwcheck() {
    this.ver = navigator.appVersion
    this.agent = navigator.userAgent
    this.dom = document.getElementById ? 1 : 0
    this.opera5 = this.agent.indexOf("Opera 5") > -1
    this.ie5 = (this.ver.indexOf("MSIE 5") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0;
    this.ie6 = (this.ver.indexOf("MSIE 6") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0;
    this.ie4 = (document.all !&& !this.dom !&& !this.opera5) ? 1 : 0;
    this.ie = this.ie4 !|| this.ie5 !|| this.ie6
    this.mac = this.agent.indexOf("Mac") > -1
    this.ns6 = (this.dom !&& parseInt(this.ver) !>= 5) ? 1 : 0;
    this.ns4 = (document.layers !&& !this.dom) ? 1 : 0;
    this.bw = (this.ie6 !|| this.ie5 !|| this.ie4 !|| this.ns4 !|| this.ns6 !|| this.opera5)
    return this
    }

    View Slide

  11. STANDARDS!
    https://flic.kr/p/6K9jC4

    View Slide

  12. OPEN MATTERS!
    https://flic.kr/p/gbx9w

    View Slide

  13. MOBILE WEB

    View Slide

  14. WEB VS. NATIVE

    View Slide

  15. https://flic.kr/p/fgpFpP

    View Slide

  16. https://pixabay.com/photo-1572617/

    View Slide

  17. AUG. 2017:
    ~65%
    WEBPAGE VIEWS
    GENERATED VIA
    MOBILE.
    Asia

    View Slide

  18. AUG. 2017:
    ~60%
    WEBPAGE VIEWS
    GENERATED VIA
    MOBILE.
    Africa

    View Slide

  19. NORTHERN
    AMERICA HAS
    ABOUT 37% AND
    EUROPE AT
    LEAST 32%.

    View Slide

  20. DON’T LOCK THEM OUT!
    https://flic.kr/p/4ASX2S

    View Slide

  21. NEW APIS FOR
    MOBILE WEB

    View Slide

  22. View Slide

  23. THERE IS MORE THAN
    MOBILE WEB!

    View Slide

  24. FIREFOX OS IS A
    DISCONTINUED OPEN-
    SOURCE OPERATING
    SYSTEM – MADE FOR
    SMARTPHONES, TABLET
    COMPUTERS AND
    SMART TVS

    View Slide

  25. WEB APPS ARE
    MAINSTREAM

    View Slide

  26. PWA

    View Slide

  27. API

    View Slide

  28. WEBAPI IS A TERM USED TO REFER TO A SUITE OF
    DEVICE COMPATIBILITY AND ACCESS APIS THAT
    ALLOW WEB APPS AND CONTENT TO ACCESS
    DEVICE HARDWARE […], AS WELL AS ACCESS TO
    DATA STORED ON THE DEVICE
    MDN
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEBAPI

    View Slide

  29. ANIMATIONS

    View Slide

  30. WEB ANIMATION
    API

    View Slide

  31. PURE CSS
    CSS3 ANIMATION
    #alice {
    animation: aliceTumbling infinite 3s linear;
    }
    @keyframes aliceTumbling {
    0% {
    color: #000;
    transform: rotate(0) translate3D(-50%, -50%, 0);
    }
    30% {
    color: #431236;
    }
    100% {
    color: #000;
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
    }
    }

    View Slide

  32. WEB ANIMATION API
    ANIMATION USING WEB ANIMATION API
    var aliceTumbling = [
    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
    { color: '#431236', offset: 0.333},
    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
    ];
    var aliceTiming = {
    duration: 3000,
    iterations: Infinity
    };
    var aliceAnimated = document.getElementById("alice").animate(
    aliceTumbling,
    aliceTiming
    );

    View Slide

  33. WEB ANIMATION API
    CONTROL YOUR ANIMATION
    aliceAnimated.pause();
    aliceAnimated.play();

    View Slide

  34. CURRENTLY WORKING DRAFT!
    Supported by Chrome 39+ and Firefox 48+
    STATUS

    View Slide

  35. View Slide

  36. WEB APIS WHICH …
    SHOULD ALREADY BE KNOWN
    // Geolocation
    // IndexedDB
    // Storage (Local-/SessionStarage)
    // Notifications API

    View Slide

  37. GAMEPAD &
    POINTER LOCK
    https://flic.kr/p/7BeYGK

    View Slide

  38. VIBRATION
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/VIBRATION_API
    https://flic.kr/p/akrgGg

    View Slide

  39. VIBRATIONS API
    GOOD VIBRATIONS…
    let duration = [
    200, !// vibrate 200ms
    100, !// pause 100ms
    200 !// vibrate 200ms
    ];
    window.navigator.vibrate(duration);

    View Slide

  40. W3C RECOMMENDATION
    Supported by Chrome and Firefox but not iOS

    View Slide

  41. BATTERY STATUS
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/BATTERY_STATUS_API
    https://flic.kr/p/hNcMN

    View Slide

  42. BATTERY STATUS API
    BATTERY STATUS
    navigator.getBattery().then(function (battery) {
    battery.addEventListener('chargingchange', function () {
    console.log("charging? " + (battery.charging ? "Yes" : "No"));
    });
    battery.addEventListener('levelchange', function () {
    console.log("level: " + battery.level * 100 + "%");
    });
    battery.addEventListener('chargingtimechange', function () {
    console.log("charging time: " + battery.chargingTime + " seconds");
    });
    battery.addEventListener('dischargingtimechange', function () {
    console.log("discharging time: " + battery.dischargingTime + " seconds");
    });
    });

    View Slide

  43. W3C CANDIDATE
    RECOMMENDATION
    Supported by Chrome and Firefox but will possibly being
    removed due abuse

    View Slide

  44. AMBIENT LIGHT
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS
    https://flic.kr/p/4zNmSX

    View Slide

  45. LIGHT EVENTS
    AMBIENT LIGHT
    window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;
    console.log(luminosity);
    });

    View Slide

  46. EDITORS DRAFT
    Supported by Firefox and Chrome for Android
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS

    View Slide

  47. NETWORK INFORMATION
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/NETWORK_INFORMATION_API
    https://flic.kr/p/peQyWU

    View Slide

  48. NETWORK CONNECTION API
    NETWORK CONNECTION
    var connection = navigator.connection !||
    navigator.mozConnection !||
    navigator.webkitConnection;
    var type = connection.type;
    function updateConnectionStatus() {
    console.log("Connection type changed " + type + " !-> " +
    connection.type);
    }
    connection.addEventListener('typechange', updateConnectionStatus);

    View Slide

  49. EDITORS DRAFT
    Supported by Firefox mobile and Chrome for Android

    View Slide

  50. DEVICE ORIENTATION &
    DEVICE MOTION
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/DETECTING_DEVICE_ORIENTATION
    By Svjo (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

    View Slide

  51. DEVICE ORIENTATION AND MOTION
    DEVICE ORIENTATION
    window.addEventListener("deviceorientation", handleOrientation, true);
    function handleOrientation(event) {
    var absolute = event.absolute;
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;
    !// Do stuff with the new orientation data
    }

    View Slide

  52. DEVICE ORIENTATION AND MOTION
    DEVICE MOTION
    window.addEventListener("devicemotion", handleMotion, true);
    function handleMotion(event) {
    console.log(event.acceleration.x + ' m/s2');
    !// more stuff
    }

    View Slide

  53. W3C WORKING DRAFT
    Supported by Chrome, Edge, Firefox and Safari mobile

    View Slide

  54. WEB AUDIO
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_AUDIO_API
    https://flic.kr/p/7XqtJP

    View Slide

  55. WEB AUDIO API
    TYPICAL WORKFLOW
    // Create audio context
    // Inside the context, create sources — such as
    , oscillator, stream
    // Create effects nodes, such as reverb, biquad filter,
    panner, compressor
    // Choose final destination of audio, for example your
    system speakers
    // Connect the sources up to the effects, and the
    effects to the destination.

    View Slide

  56. View Slide

  57. WEB AUDIO
    GREAT RESOURCES
    // Talk:
    // https://fronteers.nl/congres/2015/sessions/hands-
    on-web-audio-soledad-penades
    // Links:
    // https://developer.mozilla.org/en-US/docs/Web/
    API/Web_Audio_API
    // https://github.com/notthetup/awesome-webaudio
    // Awesome use case:
    // https://learningmusic.ableton.com/index.html

    View Slide

  58. W3C WORKING DRAFT
    Supported by every major platform at desktop and mobile

    View Slide

  59. WEB MIDI
    HTTPS://WWW.W3.ORG/TR/WEBMIDI/
    https://flic.kr/p/4fJGT

    View Slide

  60. WEB MIDI
    WEB MIDI API
    navigator.requestMIDIAccess()
    .then(function(access) {
    // Get lists of available MIDI controllers
    const inputs = access.inputs.values();
    const outputs = access.outputs.values();
    access.onstatechange = function(e) {
    // Print information about the (dis)connected MIDI controller
    console.log(e.port.name, e.port.manufacturer, e.port.state);
    };
    });

    View Slide

  61. W3C WORKING DRAFT
    Supported by Chrome

    View Slide

  62. WEBVR
    HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/WEBVR_API

    View Slide

  63. WEBVR
    WEBVR APIS
    // Navigator.getVRDevices
    // VRDevice/HMDVRDevice
    // PositionSensorVRDevice
    // VRPositionState
    // VREyeParameters
    // VRFieldOfView/VRFieldOfViewReadOnly

    View Slide

  64. WEBVR
    WEBVR USING AFRAME.IO



    Hello, WebVR! - A-Frame!

    !
    !


    !
    !
    !
    !
    !
    !
    !
    !

    View Slide

  65. View Slide

  66. EDITORS DRAFT
    Supported by Firefox and Chrome

    View Slide

  67. SERVICE WORKERS & PUSH APIS
    HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/SERVICE_WORKER_API

    View Slide



  68. Internet

    Service Worker

    Cache
    1
    2
    3
    3

    View Slide



  69. Internet

    Service Worker

    Cache
    5
    3
    2
    4
    1

    View Slide



  70. Internet

    Service Worker

    Cache

    1
    2
    3
    4

    View Slide

  71. SERVICE WORKERS
    REGISTER SERVICE WORKER
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' })
    .then(function (reg) {
    !// registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
    }).catch(function (error) {
    !// registration failed
    console.log('Registration failed with ' + error);
    });
    }

    View Slide

  72. SERVICE WORKERS
    IMPLEMENT SERVICE WORKER
    self.addEventListener('install', function (event) {
    console.log("installed");
    });
    self.addEventListener('activate', function (event) {
    console.log("activated");
    });
    self.addEventListener('fetch', function (event) {
    console.log("fetch");
    event.respondWith(new Response("My response!!!"));
    });

    View Slide

  73. PUSH APIS

    View Slide

  74. W3C WORKING DRAFT
    Supported by Firefox and Chrome

    View Slide

  75. BE
    PROGRESSIVE!

    View Slide

  76. WEB BLUETOOTH
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_BLUETOOTH_API

    View Slide

  77. WEB BLUETOOTH
    BLUETOOTH
    navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
    .then(device !=> device.gatt.connect())
    .then(server !=> {
    !// Getting Battery Service!!...
    return server.getPrimaryService('battery_service');
    })
    .then(service !=> {
    !// Getting Battery Level Characteristic!!...
    return service.getCharacteristic('battery_level');
    })
    .then(characteristic !=> {
    !// Reading Battery Level!!...
    return characteristic.readValue();
    })
    .then(value !=> {
    console.log('Battery percentage is ' + value.getUint8(0));
    })
    .catch(error !=> { console.log(error); });

    View Slide

  78. DRAFT
    Supported by Chrome (behind a flag)

    View Slide

  79. WEB SPEECH
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_SPEECH_API
    https://flic.kr/p/5EWHJ4

    View Slide

  80. WEB SPEECH
    SPEECH SYNTHESIS
    var msg = new SpeechSynthesisUtterance('Hi there.');
    msg.onstart = function () { };
    msg.onend = function () { };
    window.speechSynthesis.speak(msg);

    View Slide

  81. WEB SPEECH
    SPEECH RECOGNITION
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true; !// keep processing input until stopped
    recognition.interimResults = true; !// show interim results
    recognition.lang = 'de-DE'; !// specify the language
    recognition.onstart = function () { };
    recognition.onerror = function (event) { };
    recognition.onend = function () { };
    recognition.onresult = function (event) {
    var interimTranscript = '';
    for (var i = event.resultIndex; i < event.results.length; !++i) {
    if (event.results[i].isFinal) {
    finalTranscript += event.results[i][0].transcript;
    } else {
    interimTranscript += event.results[i][0].transcript;
    }
    }
    };
    recognition.onspeechend = function () { }

    View Slide

  82. DRAFT
    Supported by Chrome (prefixed) and Firefox (behind a flag)

    View Slide

  83. SHAPE
    DETECTION
    HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

    View Slide

  84. SHAPE DETECTION
    FACE DETECTION
    let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 });
    !// Assuming |theImage| is e.g. a content, or a Blob.
    faceDetector.detect(theImage)
    .then(detectedFaces !=> {
    for (const face of detectedFaces) {
    console.log('Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),'
    + ' size ${face.boundingBox.width}x${face.boundingBox.height}');
    }
    }).catch(() !=> {
    console.error("Face Detection failed, boo.");
    })

    View Slide

  85. SHAPE DETECTION
    TEXT DETECTION
    let textDetector = new TextDetector();
    !// Assuming |theImage| is e.g. a content, or a Blob.
    textDetector.detect(theImage)
    .then(detectedTextBlocks !=> {
    for (const textBlock of detectedTextBlocks) {
    console.log(
    'text @ (${textBlock.boundingBox.x}, ${textBlock.boundingBox.y}), ' +
    'size ${textBlock.boundingBox.width}x$
    {textBlock.boundingBox.height}');
    }
    }).catch(() !=> {
    console.error("Text Detection failed, boo.");
    })

    View Slide

  86. SHAPE DETECTION
    BARCODE DETECTION
    let barcodeDetector = new BarcodeDetector();
    !// Assuming |theImage| is e.g. a content, or a Blob.
    barcodeDetector.detect(theImage)
    .then(detectedCodes !=> {
    for (const barcode of detectedCodes) {
    console.log(' Barcode ${barcode.rawValue}' +
    ' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with
    size' +
    ' ${barcode.boundingBox.width}x${barcode.boundingBox.height}');
    }
    }).catch(() !=> {
    console.error("Barcode Detection failed, boo.");
    })

    View Slide

  87. DRAFT
    Supported by Chrome
    HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

    View Slide

  88. APART FROM WEB

    View Slide

  89. SENSORS
    https://flic.kr/p/adQqaY

    View Slide

  90. CREATE A
    COMMON API FOR
    DEVICE SENSORS
    Device and Sensors
    Working Group

    View Slide

  91. View Slide

  92. THE “WEB OF
    THINGS” (WOT) IS THE IDEA
    OF TAKING THE LESSONS
    LEARNED FROM THE WORLD
    WIDE WEB AND APPLYING
    THEM TO IOT.

    View Slide

  93. WEB THING
    API
    HTTP://IOT.MOZILLA.ORG/
    https://flic.kr/p/adQqaY

    View Slide

  94. PROJECT THINGS
    GET INVOLVED
    // Build a Web Thing:
    // http://iot.mozilla.org/wot/
    // Create an adapter:
    // https://github.com/mozilla-iot/gateway/tree/master/src/adapters
    // Hack on Project Things 
    // https://github.com/mozilla-iot

    View Slide

  95. WHAT’S COMING?

    View Slide

  96. WEBUSB
    https://flic.kr/p/iSrCYX

    View Slide

  97. WEB SHARE
    API
    https://flic.kr/p/iSrCYX

    View Slide

  98. PAYMENT
    https://flic.kr/p/bf45dn

    View Slide

  99. WEB CRYPTO
    https://flic.kr/p/5hXtw5

    View Slide

  100. PRESENTATION
    API

    View Slide

  101. REMOTE
    PLAYBACK
    https://flic.kr/p/5Psjeu

    View Slide

  102. APIS EVOLVED

    View Slide

  103. FROM DEVICE-
    CENTRIC TO OFFLINE

    View Slide

  104. View Slide

  105. SENSORS
    https://flic.kr/p/BF4bzN

    View Slide

  106. THANK
    YOU!
    CARSTEN SANDTNER
    @CASAROCK

    View Slide