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 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