Web APIs 2019

Presentation explaining and showing demos of 4 Web APIs I would like to use more this year. You can find the code here https://github.com/orlando/web-apis-talk

Transcript

1. Web APIs
   I ❤
   

   View Slide

2. Web APIs
   I "
   

   View Slide

3. Orlando
   Del
   Aguila
   

   View Slide

4. @orlando
   @eatcodetravel
   @eatcodetravel
   orlandodelaguila.com
   

   View Slide

5. Photo by Ludde Lorentz on Unsplash
   Intersection Observer
   

   View Slide

6. Intersection Observer
   Observe intersection changes
   between an element and its ancestors
   

   View Slide

7. Intersection Observer
   obs = new IntersectionObserver(callback, options);
   obs.observe(targetElement);
   

   View Slide

8. Intersection Observer
   new IntersectionObserver(callback, options);
   

   View Slide

9. Intersection Observer
   options = {
   root: document.getElementById('#ancestor'),
   rootMargin: "0px",
   threshold: 0
   };
   

   View Slide

10. Intersection Observer
    options = {
    root: document.getElementById('#ancestor'),
    rootMargin: "0px",
    threshold: 0
    };
    Can be an element or null
    null == viewport
    

    View Slide

11. Intersection Observer
    options = {
    root: document.getElementById('#ancestor'),
    rootMargin: "0px",
    threshold: 0
    };
    To adjust the root element bounding rectangle
    Behaves like CSS’ margin property
    

    View Slide

12. Intersection Observer
    options = {
    root: document.getElementById('#ancestor'),
    rootMargin: "0px",
    threshold: 0
    };
    Points where you want to get notified

    (callback to be called)
    

    View Slide

13. Intersection Observer
    options = {
    root: document.getElementById('#ancestor'),
    rootMargin: "0px",
    threshold: 0
    };
    0 == when every pixel is intersected
    

    View Slide

14. Intersection Observer
    options = {
    root: document.getElementById('#ancestor'),
    rootMargin: "0px",
    threshold: [0, 0.25, 0.5, 0.75, 1]
    };
    Also accepts an Array
    Here we will be called 5 times
    at 25% intervals
    

    View Slide

15. Intersection Observer
    new IntersectionObserver(callback, options);
    

    View Slide

16. Intersection Observer
    observeCallback = (entries, observer) => {
    entries.forEach(entry => {
    // use entry read only attributes
    });
    };
    

    View Slide

17. Intersection Observer
    observeCallback = (entries, observer) => {
    entries.forEach(entry => {
    this.setState({
    visible: entry.isIntersecting
    });
    });
    };
    entry has multiple properties
    https://mzl.la/2Yv0P7F
    In the demo we only use:
    intersectionRatio => int
    isIntersecting => boolean
    

    View Slide

18. Intersection Observer
    obs.observe(targetElement);
    Observe an element against its rootElement
    A single observer can ‘observe’ multiple elements
    

    View Slide

19. Intersection Observer
    obs.disconnect();
    Stop observing all elements
    

    View Slide

20. Intersection Observer
    Demo
    

    View Slide

21. Photo by Davide Cantelli on Unsplash
    requestIdleCallback
    

    View Slide

22. requestIdleCallback
    Queues a function to be called during a
    browser's idle periods
    

    View Slide

23. requestIdleCallback
    

    View Slide

24. requestIdleCallback
    requestIdleCallback(callback, options);
    

    View Slide

25. requestIdleCallback
    requestIdleCallback(callback, options);
    

    View Slide

26. requestIdleCallback
    options = {
    timeout: 1000
    }
    Only accepts timeout as milliseconds
    If callback has not been called when timeout ends,
    callback will be called in the next idle period
    

    View Slide

27. requestIdleCallback
    requestIdleCallback(callback, options);
    

    View Slide

28. requestIdleCallback
    (deadline) => {
    deadline.timeRemaining() -> int
    deadline.didTimeout -> bool
    };
    

    View Slide

29. requestIdleCallback
    Demo
    

    View Slide

30. Photo by Jonathan Saavedra on Unsplash
    Payment Request
    

    View Slide

31. Payment Request
    Provide a consistent UX for users and
    merchants
    

    View Slide

32. Payment Request
    It doesn’t take care of payments.
    Only provides a faster way for users
    to provide their payment
    information.
    

    View Slide

33. Payment Request
    

    View Slide

34. Payment Request
    new PaymentRequest(
    supportedMethods,
    cartDetails,
    options
    )
    

    View Slide

35. Payment Request
    new PaymentRequest(
    supportedMethods,
    cartDetails,
    options
    )
    

    View Slide

36. Payment Request
    {
    supportedMethods: "basic-card",
    data: {
    supportedNetworks: [
    "visa",
    "mastercard",
    "amex",
    "jcb",
    "diners",
    "discover",
    "mir",
    "unionpay"
    ],
    supportedTypes: ["debit", "credit"]
    }
    }
    

    View Slide

37. Payment Request
    new PaymentRequest(
    supportedMethods,
    cartDetails,
    options
    )
    

    View Slide

38. Payment Request
    {
    id: 'order-123',
    displayItems: [
    {
    label: 'Example item',
    amount: {currency: 'USD', value: '1.00'}
    }
    ],
    total: {
    label: 'Total',
    amount: {currency: 'USD', value: '1.00'}
    }
    };
    

    View Slide

39. Payment Request
    new PaymentRequest(
    supportedMethods,
    cartDetails,
    options
    )
    

    View Slide

40. Payment Request
    {
    requestPayerEmail: true,
    requestPayerName: false,
    requestPayerPhone: true,
    requestShipping: false
    };
    

    View Slide

41. Payment Request
    request
    .show()
    .then((paymentResponse) => {
    // Here we would process the payment
    // with Stripe for example
    })
    

    View Slide

42. Payment Request
    request
    .show()
    .then((paymentResponse) => {
    // Here we would process the payment
    // with Stripe for example
    })
    

    View Slide

43. Payment Request
    paymentResponse.requestId
    paymentResponse.methodName
    paymentResponse.details
    paymentResponse.shippingAddress
    paymentResponse.shippingOption
    paymentResponse.payerName
    paymentResponse.payerEmail
    paymentResponse.payerPhone
    paymentResponse.complete(status = "unknown")
    paymentResponse.retry()
    

    View Slide

44. Payment Request
    paymentResponse.complete("success").then(() => {
    window.alert("Thanks for giving us your money");
    });
    “success" can also be “error" or “unknown” (default value)
    

    View Slide

45. Payment Request
    Demo
    

    View Slide

46. Photo by Joel Filipe on Unsplash
    Web Bluetooth
    

    View Slide

47. Web Bluetooth
    Provides the ability to connect and
    interact with Bluetooth Low Energy
    peripherals.
    

    View Slide

48. Web Bluetooth
    Bluetooth Low Energy (BLE) is
    different than good ol’ Bluetooth.
    BLE broadcasts the services it
    provides and you can filter only the
    devices you need before pairing.
    

    View Slide

49. Web Bluetooth
    navigator.bluetooth.requestDevice({
    filters: [{ services: ["battery_service"]}]
    });
    

    View Slide

50. Web Bluetooth
    navigator.bluetooth.requestDevice({
    filters: [{ services: ["battery_service"]}]
    }).then((device) => { use device };
    battery_service is just one of the many you can use here
    Here’s a list http://bit.ly/2HLqvHQ
    

    View Slide

51. Web Bluetooth
    Each type of service has a different way of doing things
    We will look the code in the demo
    navigator.bluetooth.requestDevice({
    filters: [{ services: ["battery_service"]}]
    }).then((device) => { use device };
    

    View Slide

52. Web Bluetooth
    Demo
    

    View Slide

53. Photo by Wyron A on Unsplash
    

    View Slide