Eliran Natan

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

Is lazy loading enough? What if your app could predict a user's next click and load the code before they even ask?

Build UIs that learn - Discover the powerful combination of UI and AI
#1about 2 minutes

Solving slow load times in single-page apps

React's lazy loading API helps with initial load times but introduces delays when components are actually rendered.

#2about 3 minutes

Prefetching components by predicting user actions

Improve user experience by using dynamic imports to prefetch components or entire routes before the user requests them.

#3about 2 minutes

Applying machine learning to user sequence prediction

Frame user navigation as a sequence prediction problem where the model learns from click history to predict the next action.

#4about 4 minutes

Implementing a neural network with TensorFlow.js

Build a neural network in the browser using TensorFlow.js with LSTM layers and one-hot encoding to handle sequential user interaction data.

#5about 1 minute

Training the prediction model asynchronously in the browser

Use the asynchronous `.fit()` command in TensorFlow.js to train the model with user data in the background without blocking the UI.

#6about 7 minutes

Architecting the solution with the React Context API

Use a `PredictorContext` for ML logic and a `PrefetchContext` as a message bus to decouple prediction triggers from prefetching actions across the application.

#7about 3 minutes

Summary of key techniques for a self-learning UI

A recap of combining React's code splitting, TensorFlow.js for prediction, and Context API for a robust, performance-oriented architecture.

Related jobs
Jobs that call for the skills explored in this talk.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Implementing code splitting and lazy loading for faster initial loads
02:43 MIN

Implementing code splitting and lazy loading for faster initial loads

How Your Bundle Size Affects The Climate

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Why developers and businesses choose to use React
01:18 MIN

Why developers and businesses choose to use React

React and the power of visualisation

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Solving UI challenges with a modern tech stack
01:24 MIN

Solving UI challenges with a modern tech stack

Building Interactive Async UI with React 19 and Ariakit

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Best practices and the future of browser AI
03:28 MIN

Best practices and the future of browser AI

Privacy-first in-browser Generative AI web apps: offline-ready, future-proof, standards-based

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Enhancing runtime performance with CSS and UX
02:54 MIN

Enhancing runtime performance with CSS and UX

The Illusion of a Performant Web Application

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Demo code and using web workers for performance
01:45 MIN

Demo code and using web workers for performance

Privacy-first in-browser Generative AI web apps: offline-ready, future-proof, standards-based

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Building with familiar React APIs and real CSS
01:58 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The technology behind in-browser AI execution
02:20 MIN

The technology behind in-browser AI execution

Generative AI power on the web: making web apps smarter with WebGPU and WebNN

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

Featured Partners

Related Videos

See all videos
Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Machine learning in the browser with TensorFlowjs38:24

Machine learning in the browser with TensorFlowjs

Håkan Silfvernagel

A journey of a long list in React43:08

A journey of a long list in React

Adam Klein

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

From ML to LLM: On-device AI in the Browser27:23

From ML to LLM: On-device AI in the Browser

Nico Martin

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Related Articles

View all articles
BB
Benedikt Bischof
How we Build The Software of Tomorrow
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Thomas Dohmke who introduced us to the future of AI – coding.This is how Thomas describes himself:I am the CEO of GitHub and drive the company’s...
How we Build The Software of Tomorrow
LM
Luis Minvielle
The Best Upcoming IT Webinars
Now that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
The Best Upcoming IT Webinars
AM
Ashutosh Mishra
16 Best Free React UI Libraries in 2025
Web development is moving incredibly fast. New features pop up all the time, but there's one constant issue that keeps coming up: keeping your app's interface looking attractive and impressive. While new features are born and killed as the project gr...
16 Best Free React UI Libraries in 2025

From learning to earning

Jobs that call for the skills explored in this talk.