React Conferences

React Advanced 2023

React Advanced 2023

English versionEN

Video: Harnessing the Power of Messagechannel and Broadcastchannel

Daniel Jakobsen

Daniel Jakobsen

This talk explores hidden web APIs for communicating between iframes and web workers. It discusses the disadvantages of a naive messaging approach and introduces the message channel API as a solution. The speaker also presents a library called message-channel-shake that simplifies message channel implementation. The talk covers various technologies like React, broadcast channel, and transferable objects.

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

Read FAQ and transcription

browser api react broadcast channel

Daniel Jakobsen

Daniel Jakobsen

11 min

23 Oct, 2023

Comments

Sign in or register to post your comment.

Available in other languages:

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

Install Nothing: App UIs With Native Browser APIs

JSNation 2024

31 min

Install Nothing: App UIs With Native Browser APIs

Scott Tolinski

Co-host of Syntax.fm

This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.

Pushing the Limits of Video Encoding in Browsers With WebCodecs

JSNation 2023

25 min

Pushing the Limits of Video Encoding in Browsers With WebCodecs

Top Content

Watch video: Pushing the Limits of Video Encoding in Browsers With WebCodecs

Akash Hamirwasia

Akash Hamirwasia

Razorpay, India

This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.

video javascript webassembly browser api

WebHID API: Control Everything via USB

JSNation 2022

23 min

WebHID API: Control Everything via USB

Nikita Dubko

Lead Frontend Developer and CSS Evangelist

Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.

browser api innovation

Visualising Front-End Performance Bottlenecks

React Summit 2020

34 min

Visualising Front-End Performance Bottlenecks

Richie McColl

React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.

performance devtools browser api

Automate the Browser With Workers Browser Rendering API

JSNation 2024

20 min

Automate the Browser With Workers Browser Rendering API

Gift Egwuenu

Developer Advocate at Cloudflare.

The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

tooling browser api cloudflare

MIDI in the Browser... Let's Rock the Web!

JSNation 2022

28 min

MIDI in the Browser... Let's Rock the Web!

Jean-Philippe Côté

Jean-Philippe Côté

Professor @ Collège Édouard-Montpetit

MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

browser api web apps audio

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser

Node Congress 2022

57 min

Writing Universal Modules for Deno, Node and the Browser

Workshop

Luca Casonato

This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.

typescript node.js deno browser api