Eliran Natan
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.
Matching moments
02:43 MIN
Implementing code splitting and lazy loading for faster initial loads
How Your Bundle Size Affects The Climate
01:18 MIN
Why developers and businesses choose to use React
React and the power of visualisation
01:24 MIN
Solving UI challenges with a modern tech stack
Building Interactive Async UI with React 19 and Ariakit
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
02:54 MIN
Enhancing runtime performance with CSS and UX
The Illusion of a Performant Web Application
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
01:58 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
02:20 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
27:01The Journey of a Pixel in a React Application
Shem Magnezi
38:24Machine learning in the browser with TensorFlowjs
Håkan Silfvernagel
43:08A journey of a long list in React
Adam Klein
40:24Snappy UI needs no Single-Page Application
Clemens Helm
30:07Accessibility in React Application
Julia Undeutsch
40:19React and the power of visualisation
Daisy Muyldermans
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
04:58NoCode LiveCode: Leveraging AI Tools to Craft Fully Functional Apps!
Karan Shetti
Related Articles
View all articles
.webp?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
Schulz.codes GmbH
Darmstadt, Germany
Intermediate
Senior
React
JavaScript
TypeScript
Cap3 GmbH
Kiel, Germany
Intermediate
Senior
React
Angular
JavaScript
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Speech Processing Solutions
Vienna, Austria
Intermediate
CSS
HTML
JavaScript
TypeScript
Nia Health GmbH
Berlin, Germany
Intermediate
Senior
CSS
GIT
React
TypeScript
Saby New Compy
Bielefeld, Germany
Intermediate
Java
Kotlin
