Superpowers of Browser's Web API

Rate this content
Bookmark

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more! 

Nikola Mitrovic
Nikola Mitrovic
30 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk covers various web APIs and their functionalities, including the intersection observer API, screen wake lock API, background sync API, and broadcast channel API. The speaker emphasizes the importance of optimizing performance and using standardized code to reduce application bundle size. They also highlight the need for environmental responsibility in JavaScript development. The Talk addresses handling API support and modifying code to suit different browser implementations.

Available in Español

1. Introduction to Web API

Short description:

Today we're going to talk about web API and its functionalities provided by our browsers. Before that, let's go over some JavaScript basics. We'll discuss the event loop and how setTimeout works. setTimeout is a web API provided by the runtime environment. Let's explore some lesser-known APIs and dive into the world of web API.

I wish you a warm welcome to today's conference and today's talk. Thank you so much for being here today. Today we're going to talk about something called web API. But before we do that, we need to take a small step back and go to some JavaScript basics.

Can anybody tell me what the output of this code would be? Anybody? Don't be shy. 132. Okay, great. May I ask you how do you know that? Okay, that's correct. That's cool.

So you mentioned there's an event loop, right? But before setTimeout goes to the event loop, we have one intermediate step. Let's visualize this example a bit. We have the first call, right? Which is synchronous. We get that to the call stack and it gets immediately executed. Then we have a second call which is async which needs to go around somewhere and wait for the number of milliseconds that we put. And then it goes to the event loop, right? And then we have a third call which gets, again, executed. Event loop checks if the call stack is empty and then that callback in the setTimeout gets pushed to the call stack and gets executed then. But the question is where? Where does setTimeout wait for that number of milliseconds that we put?

So when we were announcing the conference, some of the speakers were telling that one of the best qualities that we may have as engineers is to be curious. So if you're curious as we are, you would probably go and Google this. And the first link that we might have is this setTimeout from MDN documentation. If we click that, we can see specification about setTimeout function and we can learn all about it. But we can see that it's under the tab called web APIs. If we click that, we can see that actually setTimeout is functionality provided by runtime and not by JavaScript per se, meaning the environment that we execute our JavaScript in is providing us with this functionality. And as we can see, there are a lot of functionalities provided by our browsers. You might recognize most of these, like DOM API or Fetch API or local storage, session storage, service workers. So probably you've used a lot of these APIs. But I was wondering through this list, and I was wondering, what are some of the not so well-known exotic, let's say, APIs that we might use but we are not using in our everyday work? So basically that's what we are trying to explore today. So the answer to this question is web API. setTimeout is a web API. And we've already seen that basically web API is like a huge list of functionalities provided by our browsers. I'm going to quickly introduce myself.

2. Introduction to Intersection Observer API

Short description:

When I was in high school, I always wanted to study psychology. Now I work as a development lead, teaching people how to deal with stress, communicate with clients, and do technical presentations. Today, I'll share my super powers of web APIs. Let's start with an example using the intersection observer API to determine if an element is visible on a page. We can use this in our real-life projects and presentations.

When I was in high school, I always wanted to study psychology. Now I work my dream job as a development lead, where I teach people how to deal with stress, how to communicate with a client, how to do technical presentations, obviously, and stuff like that. And of course I'm a software engineer at Vega IT. My name is Nikola Mitrovic. These are my super powers of web APIs for you for today.

Okay. We go to our first example for today. Let's say we have a page like this, which is like an empty page and it only has a background. But once we scroll, we start observing something in the bottom left corner. It's a small astronaut, and once that astronaut is fully visible, he says, hello world. We scroll a bit up, and again, the message goes away. We scroll a bit down, and the astronaut says again, hello world. So how did we manage to do this? There is a very cool API called intersection observer API, which basically figures if the element is visible on a page or not.

If we would build a hook in React for this, we would probably call it something like use visible, and it would look something like this. We would pass a reference of an element that we're trying to observe. In our case, it was the astronaut icon. And there are some options, configuration options, that we might provide to the intersection observer. One of those options is root element. So if we pass null, we observe the visibility of an element comparing to the whole document. So we can observe visibility comparing to some other element, like inner element or inner container or something like that. We could put root margin around that. So if we want to catch that intersection a little bit earlier, and there is a certain threshold, so we want 100% of visibility in this case, but we might modify that. We would have a state like is visible, right? And then we instantiate intersection observer. In the callback, we might see that there is an entry object. And on that entry object, there is a property called is intersensing. Once we do that, we can set our state and what's only left to be done is to observe that element. And pretty much that's it. And we return that state. Of course, the example that I showed with astronaut was cute or whatnot. But you're probably wondering how can we use in our real life projects in our real life presentations.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)