WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 24, 2021

Build UIs that learn - Discover the powerful combination of UI and AI

Eliran Natan

What if your UI could predict a user's next click? Discover how to eliminate latency by combining React and TensorFlow.js for intelligent predictive prefetching.

Pause
Mute Enter Fullscreen
#1 about 2 min

The problem of loading delays in single-page applications

Heavy React components increase load times even when utilizing standard lazy loading APIs.

#2 about 2 min

Breaking the loading trade-off with predictive prefetching

Prefetching entire routes or components before a user clicks entirely removes waiting time.

#3 about 3 min

Using sequence prediction to guess the next user action

Tracking ordered click sequences enables training an intelligent mechanism to forecast probability distributions for upcoming actions.

#4 about 3 min

Designing a neural network for click sequence prediction

Function approximators with one-hot encoding and long short-term memory layers output accurate probabilities for the next action.

#5 about 3 min

Implementing and training the prediction model in TensorFlow.js

The TensorFlow.js library provides commands to stack network layers, request predictions, and asynchronously fit models to sequence batches in the browser.

#6 about 7 min

Linking UI predictions to code prefetching with React context

Connecting decentralized prediction triggers with rendering components via an application-wide context coordinates seamless dynamic code imports.

#7 about 4 min

Combining React code splitting APIs with machine learning models

Merging predictive machine learning functionality with decentralized frontend state contexts drastically improves application performance through anticipatory rendering.

Matching moments

57 sec

Implementing predictive prefetch with machine learning

Jessica Janiuk · JS Congress

1:10 min

Balancing prediction accuracy with background loading eagerness

Medhat Dawoud Medhat Dawoud · World Congress 2025

4:05 min

Navigating cross-browser progressive enhancement for machine learning

Thomas Steiner · Coffee With Developers

5:36 min

Evaluating page performance using customized ML prediction models

Perf + AI

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann +2 · LIVE

4:30 min

Scaffolding pages and routing single-page applications with Next.js

Josh Goldberg · JS Congress

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
3 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
4 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
11 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
16 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
17 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
24 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Stage 3

Sandboxing the Swarm: Building Secure, Serverless AI Agents with Wasm

Lena Hall, Thorsten Hans

Lena Hall
Thorsten Hans
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 7

Designing High-Performance AI APIs: Lessons from Serving Millions of Real-Time Requests

Wayne Liu

Chief Growth Officer and Americas President of Perfect Corp.

Wayne Liu
Open session

World Congress 2026 North America

September 24, 2026 · 10:20–10:50

Stage 1

The Browser Is Becoming an AI Runtime

Ajit Varma, Will Bryk

Ajit Varma
Will Bryk
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

Related videos

Run AI models in the browser: Real life scenarios and implementations thumbnail
33:15
Europe 2026 Virtual • 2 months ago

Run AI models in the browser: Real life scenarios and implementations

Alexandru Hang

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP) thumbnail
20:30
World Congress 2025 • about 1 year ago

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)

Marc Müller

Machine learning in the browser with TensorFlowjs thumbnail
38:24
LIVE • over 5 years ago

Machine learning in the browser with TensorFlowjs

Håkan Silfvernagel

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more thumbnail
1:06:20
LIVE • 10 months ago

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney, Jan Deppisch

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.