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.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

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

Implementing code splitting and lazy loading for faster initial loads

How Your Bundle Size Affects The Climate

Demo code and using web workers for performance
28:28 MIN

Demo code and using web workers for performance

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

Why developers and businesses choose to use React
08:01 MIN

Why developers and businesses choose to use React

React and the power of visualisation

Solving UI challenges with a modern tech stack
02:25 MIN

Solving UI challenges with a modern tech stack

Building Interactive Async UI with React 19 and Ariakit

Best practices and the future of browser AI
25:00 MIN

Best practices and the future of browser AI

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

Enhancing runtime performance with CSS and UX
24:03 MIN

Enhancing runtime performance with CSS and UX

The Illusion of a Performant Web Application

Building with familiar React APIs and real CSS
03:03 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

The technology behind in-browser AI execution
13:51 MIN

The technology behind in-browser AI execution

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

Featured Partners

Related Videos

See all videos
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

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

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

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

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

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

Nico Martin

A journey of a long list in React43:08

A journey of a long list in React

Adam Klein

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
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023

From learning to earning

Jobs that call for the skills explored in this talk.