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

Web APIs 2019

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

Orlando Del Aguila

March 26, 2019
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

Transcript

  1. Web APIs
    I ❤

    View full-size slide

  2. Orlando
    Del
    Aguila

    View full-size slide

  3. @orlando
    @eatcodetravel
    @eatcodetravel
    orlandodelaguila.com

    View full-size slide

  4. Photo by Ludde Lorentz on Unsplash
    Intersection Observer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    (callback to be called)

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Intersection Observer
    Demo

    View full-size slide

  20. Photo by Davide Cantelli on Unsplash
    requestIdleCallback

    View full-size slide

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

    View full-size slide

  22. requestIdleCallback

    View full-size slide

  23. requestIdleCallback
    requestIdleCallback(callback, options);

    View full-size slide

  24. requestIdleCallback
    requestIdleCallback(callback, options);

    View full-size slide

  25. 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 full-size slide

  26. requestIdleCallback
    requestIdleCallback(callback, options);

    View full-size slide

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

    View full-size slide

  28. requestIdleCallback
    Demo

    View full-size slide

  29. Photo by Jonathan Saavedra on Unsplash
    Payment Request

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Payment Request

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

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

    View full-size slide

  44. Payment Request
    Demo

    View full-size slide

  45. Photo by Joel Filipe on Unsplash
    Web Bluetooth

    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. Web Bluetooth
    Demo

    View full-size slide

  52. Photo by Wyron A on Unsplash

    View full-size slide