Up next in 10
Server-Driven UI: Building Dynamic React Applications by Dipanshu Gupta | React and Chill Conference
0 views
Aug 6, 2025
Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences. Talk Structure and Content: 1. Introduction (3 minutes) a. The UI Adaptability Challenge: Quickly summarizing the common struggle of keeping UIs up-to-date with changing requirements. b. Enter Server-Driven UI (SDUI): Concisely explaining the core principle of SDUI ā shifting UI logic to the backend for flexible control. c. React's Perfect Fit: Emphasizing how React's component model aligns seamlessly with SDUI's structure. 2. Real-World Impact: The E-commerce Example (5 minutes) a. The Problem: Describing the pain points of managing frequent promotions, seasonal changes, and personalized recommendations in a traditional e-commerce app. b. The SDUI Solution: Showcasing how SDUI allows dynamic updates to product displays, banners, and personalized content without app updates. 3. Building Blocks of SDUI with React (10 minutes) a. Simplified Architecture: A concise illustration of the core components: API, schema, and React components. b. Flexible Schemas: Briefly touching on best practices for designing schemas that can handle diverse UI elements. c. Data Flow in Action: Demonstrating a simplified code snippet, showing how React components fetch data from the server and render elements based on the received configuration. d. State Management Tips: Highlighting key strategy for handling state in a SDUI-powered React app (e.g., prioritizing server-side state for core UI logic). š Conference Website: š Conference Website: https://reactandchill.live
View Video Transcript
0:03
I'm theu a software engineer at red hat
0:05
I'm theu a software engineer at red hat
0:05
I'm theu a software engineer at red hat and it's an absolute pleasure to be here
0:07
and it's an absolute pleasure to be here
0:07
and it's an absolute pleasure to be here with you all um before starting the
0:10
with you all um before starting the
0:10
with you all um before starting the today's topic like let me give my small
0:12
today's topic like let me give my small
0:12
today's topic like let me give my small introduction so I'm working have three
0:16
introduction so I'm working have three
0:16
introduction so I'm working have three years of working experience in react and
0:18
years of working experience in react and
0:18
years of working experience in react and frontend Technologies mostly my work is
0:20
frontend Technologies mostly my work is
0:20
frontend Technologies mostly my work is around the open source projects and as
0:22
around the open source projects and as
0:22
around the open source projects and as I've said this is my first time as a
0:23
I've said this is my first time as a
0:23
I've said this is my first time as a speaker so please help me I don't break
0:26
speaker so please help me I don't break
0:26
speaker so please help me I don't break anywhere and coming onto the topic uh so
0:29
anywhere and coming onto the topic uh so
0:30
anywhere and coming onto the topic uh so so this session is going to about the
0:31
so this session is going to about the
0:31
so this session is going to about the server driven UI or I like to call it as
0:34
server driven UI or I like to call it as
0:34
server driven UI or I like to call it as sdii in short nowadays so user demands
0:37
sdii in short nowadays so user demands
0:37
sdii in short nowadays so user demands seamless personalized responsive
0:39
seamless personalized responsive
0:39
seamless personalized responsive interfaces that can keep up with the
0:42
interfaces that can keep up with the
0:42
interfaces that can keep up with the everchanging needs today I'm excited to
0:45
everchanging needs today I'm excited to
0:45
everchanging needs today I'm excited to dive into the powerful approach that can
0:46
dive into the powerful approach that can
0:46
dive into the powerful approach that can help us meet these demands by Ser UI
0:50
help us meet these demands by Ser UI
0:50
help us meet these demands by Ser UI this concept allows us to Inc build
0:53
this concept allows us to Inc build
0:53
this concept allows us to Inc build incredible adaptable and flexible user
0:55
incredible adaptable and flexible user
0:55
incredible adaptable and flexible user interfaces by shifting much of our UI
0:58
interfaces by shifting much of our UI
0:58
interfaces by shifting much of our UI logic to the server
1:00
logic to the server
1:00
logic to the server will explore how this aligns uh with the
1:04
will explore how this aligns uh with the
1:04
will explore how this aligns uh with the react component this architecture
1:06
react component this architecture
1:06
react component this architecture creating Dynamic and responsive UI that
1:08
creating Dynamic and responsive UI that
1:08
creating Dynamic and responsive UI that can evolve in real time without
1:10
can evolve in real time without
1:10
can evolve in real time without requiring the constant redeployment of
1:13
requiring the constant redeployment of
1:13
requiring the constant redeployment of our frontend applications so whether you
1:15
our frontend applications so whether you
1:15
our frontend applications so whether you are a season developer looking to
1:16
are a season developer looking to
1:17
are a season developer looking to streamline your UI management uh
1:19
streamline your UI management uh
1:19
streamline your UI management uh someone's who's just curious about the
1:21
someone's who's just curious about the
1:21
someone's who's just curious about the latest Trend in front development this
1:23
latest Trend in front development this
1:23
latest Trend in front development this session will offer valuable insights
1:25
session will offer valuable insights
1:25
session will offer valuable insights into how the server UI can elevate your
1:28
into how the server UI can elevate your
1:28
into how the server UI can elevate your projects so let's dive in so before uh
1:32
projects so let's dive in so before uh
1:32
projects so let's dive in so before uh now before jump into details here's a
1:34
now before jump into details here's a
1:34
now before jump into details here's a quick overview of what we'll cover today
1:37
quick overview of what we'll cover today
1:37
quick overview of what we'll cover today we'll start off by looking at the common
1:39
we'll start off by looking at the common
1:39
we'll start off by looking at the common challenges in traditional UI development
1:42
challenges in traditional UI development
1:42
challenges in traditional UI development particularly how difficult is it to keep
1:45
particularly how difficult is it to keep
1:45
particularly how difficult is it to keep interfaces adaptable to changing en
1:48
interfaces adaptable to changing en
1:48
interfaces adaptable to changing en requirements from there we'll explore
1:50
requirements from there we'll explore
1:51
requirements from there we'll explore how sdii addresses these challenges and
1:53
how sdii addresses these challenges and
1:53
how sdii addresses these challenges and why react is such a natural Feit to this
1:56
why react is such a natural Feit to this
1:56
why react is such a natural Feit to this approach we'll then move on to the real
1:59
approach we'll then move on to the real
2:00
approach we'll then move on to the real World
2:01
World
2:01
World example where I'll demonstrate the
2:03
example where I'll demonstrate the
2:03
example where I'll demonstrate the impact of sdii can have on e-commerce
2:07
impact of sdii can have on e-commerce
2:07
impact of sdii can have on e-commerce application next we'll get into the
2:09
application next we'll get into the
2:09
application next we'll get into the technical details breaking down the code
2:11
technical details breaking down the code
2:11
technical details breaking down the code building blocks of SDI discussing best
2:14
building blocks of SDI discussing best
2:14
building blocks of SDI discussing best practices for Designing flexible schemas
2:17
practices for Designing flexible schemas
2:17
practices for Designing flexible schemas and walking through a code example to
2:19
and walking through a code example to
2:19
and walking through a code example to see the SD in action in react uh and
2:22
see the SD in action in react uh and
2:22
see the SD in action in react uh and last we'll also read the pros and cons
2:24
last we'll also read the pros and cons
2:24
last we'll also read the pros and cons of the sdii and we'll take a closer look
2:27
of the sdii and we'll take a closer look
2:27
of the sdii and we'll take a closer look at which companies that are already uh
2:29
at which companies that are already uh
2:29
at which companies that are already uh leveraging this approach in the
2:31
leveraging this approach in the
2:31
leveraging this approach in the applications so uh so with this road map
2:34
applications so uh so with this road map
2:34
applications so uh so with this road map in mind let's start with the first topic
2:37
in mind let's start with the first topic
2:37
in mind let's start with the first topic understanding the UI adaptability
2:38
understanding the UI adaptability
2:38
understanding the UI adaptability challenge talking about a challenge that
2:41
challenge talking about a challenge that
2:41
challenge talking about a challenge that every UI developer is all familiar with
2:44
every UI developer is all familiar with
2:44
every UI developer is all familiar with adaptability as developers uh we find
2:47
adaptability as developers uh we find
2:47
adaptability as developers uh we find ourselves in constant Rise Against Time
2:50
ourselves in constant Rise Against Time
2:50
ourselves in constant Rise Against Time uh new features and the ever growing
2:53
uh new features and the ever growing
2:53
uh new features and the ever growing demand for personaliz user experience
2:55
demand for personaliz user experience
2:55
demand for personaliz user experience I'm sure many have experienced the
2:57
I'm sure many have experienced the
2:57
I'm sure many have experienced the frustration of trying to keep the user
2:58
frustration of trying to keep the user
2:58
frustration of trying to keep the user interface in sync with the rapid changes
3:01
interface in sync with the rapid changes
3:01
interface in sync with the rapid changes but here's the thing keeping up with
3:03
but here's the thing keeping up with
3:03
but here's the thing keeping up with these changes isn't just about any new
3:05
these changes isn't just about any new
3:05
these changes isn't just about any new code this also increases the complexity
3:07
code this also increases the complexity
3:07
code this also increases the complexity and making the UI more fragile uh what
3:10
and making the UI more fragile uh what
3:10
and making the UI more fragile uh what was once a simple interface can quickly
3:13
was once a simple interface can quickly
3:13
was once a simple interface can quickly become a tangled web of interdependent
3:16
become a tangled web of interdependent
3:16
become a tangled web of interdependent components so like what's the result of
3:19
components so like what's the result of
3:19
components so like what's the result of this uh longer devopment Cycles higher
3:21
this uh longer devopment Cycles higher
3:21
this uh longer devopment Cycles higher maintenance cost and increasing risk of
3:23
maintenance cost and increasing risk of
3:23
maintenance cost and increasing risk of user dissatisfaction so clearly
3:26
user dissatisfaction so clearly
3:26
user dissatisfaction so clearly something needs to be changed we need an
3:28
something needs to be changed we need an
3:28
something needs to be changed we need an approach that not only keeps paace with
3:30
approach that not only keeps paace with
3:30
approach that not only keeps paace with these demands but also gives the
3:32
these demands but also gives the
3:32
these demands but also gives the flexibility to adapt on the flly without
3:34
flexibility to adapt on the flly without
3:34
flexibility to adapt on the flly without sacrificing the quality or speed so this
3:38
sacrificing the quality or speed so this
3:38
sacrificing the quality or speed so this where uh this is where we enter the
3:41
where uh this is where we enter the
3:41
where uh this is where we enter the server driven
3:42
server driven
3:42
server driven UI and a concept that is both elegant
3:45
UI and a concept that is both elegant
3:45
UI and a concept that is both elegant simple but yet
3:47
simple but yet
3:47
simple but yet powerful imagine this uh instead of
3:50
powerful imagine this uh instead of
3:50
powerful imagine this uh instead of locking down your your logic into the
3:52
locking down your your logic into the
3:52
locking down your your logic into the client where every change requires a TS
3:55
client where every change requires a TS
3:55
client where every change requires a TS update and deployment you let the server
3:57
update and deployment you let the server
3:57
update and deployment you let the server take the control that's right so with
4:00
take the control that's right so with
4:00
take the control that's right so with sdui the server becomes the arator of
4:03
sdui the server becomes the arator of
4:03
sdui the server becomes the arator of your user interface the UI logic is no
4:05
your user interface the UI logic is no
4:05
your user interface the UI logic is no longer rigit predefined structure
4:09
longer rigit predefined structure
4:09
longer rigit predefined structure instead it becomes a fluid adaptable
4:11
instead it becomes a fluid adaptable
4:11
instead it becomes a fluid adaptable framework that can change in real time
4:14
framework that can change in real time
4:14
framework that can change in real time based on the servers command so how does
4:18
based on the servers command so how does
4:18
based on the servers command so how does it work then at it core the sdii shifts
4:22
it work then at it core the sdii shifts
4:22
it work then at it core the sdii shifts the responsibility of determining the UI
4:25
the responsibility of determining the UI
4:25
the responsibility of determining the UI what the UI should look like and how it
4:27
what the UI should look like and how it
4:27
what the UI should look like and how it should behave from the client side to
4:28
should behave from the client side to
4:29
should behave from the client side to the server
4:30
the server
4:30
the server rather than hard coding the UI
4:32
rather than hard coding the UI
4:32
rather than hard coding the UI components and their interactions to the
4:34
components and their interactions to the
4:34
components and their interactions to the front end we let the server decide the
4:38
front end we let the server decide the
4:38
front end we let the server decide the server sends the detail
4:40
server sends the detail
4:40
server sends the detail instructions essentially a blueprint
4:42
instructions essentially a blueprint
4:42
instructions essentially a blueprint telling the client what components to
4:44
telling the client what components to
4:44
telling the client what components to render how they should be laid out and
4:47
render how they should be laid out and
4:47
render how they should be laid out and even how they should behave in response
4:49
even how they should behave in response
4:49
even how they should behave in response to the user
4:51
to the user
4:51
to the user interactions think about uh the
4:53
interactions think about uh the
4:53
interactions think about uh the possibili here you can push updates to a
4:55
possibili here you can push updates to a
4:55
possibili here you can push updates to a UI without touching the client side code
4:57
UI without touching the client side code
4:57
UI without touching the client side code new features new design tweaks
4:59
new features new design tweaks
4:59
new features new design tweaks personalized content all of it can be
5:01
personalized content all of it can be
5:01
personalized content all of it can be roll out dynamically simply by just
5:03
roll out dynamically simply by just
5:03
roll out dynamically simply by just updating the server there's no need to
5:06
updating the server there's no need to
5:06
updating the server there's no need to go through the lendage process of
5:07
go through the lendage process of
5:07
go through the lendage process of redeploying redeploying your front end
5:09
redeploying redeploying your front end
5:09
redeploying redeploying your front end application every time a need Chang is
5:11
application every time a need Chang is
5:11
application every time a need Chang is needed with this approach you are not
5:13
needed with this approach you are not
5:13
needed with this approach you are not just speeding up your development cycle
5:15
just speeding up your development cycle
5:15
just speeding up your development cycle you're also enhancing the flexibility
5:17
you're also enhancing the flexibility
5:17
you're also enhancing the flexibility and scalability of your application so
5:20
and scalability of your application so
5:20
and scalability of your application so as we de Deep dive into the sdii we'll
5:22
as we de Deep dive into the sdii we'll
5:22
as we de Deep dive into the sdii we'll just see how the approach is
5:24
just see how the approach is
5:24
just see how the approach is revolutionized and particularly when
5:26
revolutionized and particularly when
5:26
revolutionized and particularly when with pair with the powerful framework
5:28
with pair with the powerful framework
5:28
with pair with the powerful framework like react how
5:30
like react how
5:30
like react how so you now all might be wondering like
5:33
so you now all might be wondering like
5:33
so you now all might be wondering like uh why is react a perfect fit for the
5:36
uh why is react a perfect fit for the
5:36
uh why is react a perfect fit for the sdii so it's a question that gets to the
5:39
sdii so it's a question that gets to the
5:39
sdii so it's a question that gets to the heart that of sdy uh like makes so
5:42
heart that of sdy uh like makes so
5:42
heart that of sdy uh like makes so powerful is react as many of you know
5:45
powerful is react as many of you know
5:45
powerful is react as many of you know it's just a powerful framework uh a
5:47
it's just a powerful framework uh a
5:47
it's just a powerful framework uh a react is just a powerful framework
5:48
react is just a powerful framework
5:48
react is just a powerful framework JavaScript Lively framework uh it's a
5:52
JavaScript Lively framework uh it's a
5:52
JavaScript Lively framework uh it's a game changer in how we think about
5:54
game changer in how we think about
5:54
game changer in how we think about building user interfaces the secret
5:56
building user interfaces the secret
5:56
building user interfaces the secret Source lies in the react component based
5:58
Source lies in the react component based
5:58
Source lies in the react component based architecture but Des design that is
6:00
architecture but Des design that is
6:00
architecture but Des design that is inherently modular reusable and
6:03
inherently modular reusable and
6:03
inherently modular reusable and Incredibly
6:04
Incredibly
6:04
Incredibly flexible this is exactly what makes
6:07
flexible this is exactly what makes
6:07
flexible this is exactly what makes react such a natural Ali for the sdii so
6:11
react such a natural Ali for the sdii so
6:11
react such a natural Ali for the sdii so I'll break it down for you so at its
6:13
I'll break it down for you so at its
6:13
I'll break it down for you so at its core react encourages us to think in
6:15
core react encourages us to think in
6:15
core react encourages us to think in components small selfcontained pieces of
6:18
components small selfcontained pieces of
6:18
components small selfcontained pieces of the UI that can be mixed matched and
6:21
the UI that can be mixed matched and
6:21
the UI that can be mixed matched and used across different parts of an
6:23
used across different parts of an
6:23
used across different parts of an application this components are like
6:26
application this components are like
6:26
application this components are like building blocks that the server can
6:27
building blocks that the server can
6:28
building blocks that the server can assemble in various ways depending on
6:30
assemble in various ways depending on
6:30
assemble in various ways depending on the context user or situation so imagine
6:34
the context user or situation so imagine
6:34
the context user or situation so imagine a possibility where we you just coding
6:36
a possibility where we you just coding
6:36
a possibility where we you just coding the static page you are creating a
6:37
the static page you are creating a
6:37
the static page you are creating a flexible system of components that a
6:40
flexible system of components that a
6:40
flexible system of components that a server can control and manipulate in
6:41
server can control and manipulate in
6:41
server can control and manipulate in real time need to change let's say you
6:44
real time need to change let's say you
6:44
real time need to change let's say you need to change the layout for specific
6:46
need to change the layout for specific
6:46
need to change the layout for specific promotion the server will simply
6:48
promotion the server will simply
6:48
promotion the server will simply instruct react to rearrange the
6:50
instruct react to rearrange the
6:50
instruct react to rearrange the components accordingly want to
6:52
components accordingly want to
6:52
components accordingly want to personalize your UI for different users
6:56
personalize your UI for different users
6:56
personalize your UI for different users the server will send a unique
6:57
the server will send a unique
6:57
the server will send a unique configurations to the react and react
6:59
configurations to the react and react
6:59
configurations to the react and react with handle and render the exact UI that
7:02
with handle and render the exact UI that
7:02
with handle and render the exact UI that the user
7:03
the user
7:03
the user needed but then it's also not about the
7:06
needed but then it's also not about the
7:06
needed but then it's also not about the flexibility react virtual Dome is
7:08
flexibility react virtual Dome is
7:08
flexibility react virtual Dome is another key Advantage when it comes out
7:10
another key Advantage when it comes out
7:10
another key Advantage when it comes out to the sdii uh the virtual Dome is like
7:14
to the sdii uh the virtual Dome is like
7:14
to the sdii uh the virtual Dome is like reacts internal memory of the UI it
7:17
reacts internal memory of the UI it
7:17
reacts internal memory of the UI it allows react to update only the parts of
7:19
allows react to update only the parts of
7:19
allows react to update only the parts of the UI that need to change without
7:22
the UI that need to change without
7:22
the UI that need to change without rendering the entire page this ensures
7:25
rendering the entire page this ensures
7:25
rendering the entire page this ensures that even when the server is sending
7:26
that even when the server is sending
7:26
that even when the server is sending frequent updates or complex instructions
7:29
frequent updates or complex instructions
7:29
frequent updates or complex instructions the UI remains fast responsive and
7:31
the UI remains fast responsive and
7:31
the UI remains fast responsive and efficient think about it so react
7:34
efficient think about it so react
7:34
efficient think about it so react doesn't just render components render
7:36
doesn't just render components render
7:36
doesn't just render components render them
7:36
them
7:36
them intelligently and in this Essence so
7:39
intelligently and in this Essence so
7:39
intelligently and in this Essence so react and sdii complements each other
7:42
react and sdii complements each other
7:43
react and sdii complements each other perfectly now before we deep
7:50
di before we deep di let's address key
7:53
di before we deep di let's address key
7:53
di before we deep di let's address key question how does this approach differ
7:56
question how does this approach differ
7:56
question how does this approach differ from traditional data catching So In
7:58
from traditional data catching So In
7:58
from traditional data catching So In traditional setup imagine the server
8:01
traditional setup imagine the server
8:01
traditional setup imagine the server fetching raw data like list of products
8:05
fetching raw data like list of products
8:05
fetching raw data like list of products or user details from database this data
8:07
or user details from database this data
8:07
or user details from database this data is just sent to the client which uses it
8:09
is just sent to the client which uses it
8:09
is just sent to the client which uses it to prefill which uses is used in the
8:13
to prefill which uses is used in the
8:13
to prefill which uses is used in the pre-fill static UI components Cod it
8:15
pre-fill static UI components Cod it
8:15
pre-fill static UI components Cod it inside the front end and here the client
8:18
inside the front end and here the client
8:18
inside the front end and here the client has the control over the user interface
8:21
has the control over the user interface
8:21
has the control over the user interface how the UI look like now I'll introduce
8:24
how the UI look like now I'll introduce
8:24
how the UI look like now I'll introduce the sdii to you this approach flips the
8:27
the sdii to you this approach flips the
8:27
the sdii to you this approach flips the script so instead of sending the just a
8:29
script so instead of sending the just a
8:29
script so instead of sending the just a raw data the server also provides the
8:32
raw data the server also provides the
8:32
raw data the server also provides the detailed instructions on how the UI
8:34
detailed instructions on how the UI
8:34
detailed instructions on how the UI should look like and how the UI should
8:36
should look like and how the UI should
8:36
should look like and how the UI should be structured should be rendered this
8:38
be structured should be rendered this
8:38
be structured should be rendered this means the server not only tells the
8:41
means the server not only tells the
8:41
means the server not only tells the client what data to display but also how
8:43
client what data to display but also how
8:43
client what data to display but also how the data should be display and what
8:45
the data should be display and what
8:45
the data should be display and what components to use their layout and
8:47
components to use their layout and
8:47
components to use their layout and behavior to truly grasp the power of
8:51
behavior to truly grasp the power of
8:51
behavior to truly grasp the power of sdii let's walk to the scenario like uh
8:54
sdii let's walk to the scenario like uh
8:54
sdii let's walk to the scenario like uh many of us can relate to that is
8:55
many of us can relate to that is
8:55
many of us can relate to that is managing an e-commerce application uh
8:59
managing an e-commerce application uh
8:59
managing an e-commerce application uh like picture this like if it's a holiday
9:01
like picture this like if it's a holiday
9:01
like picture this like if it's a holiday season and your e-commerce platform
9:03
season and your e-commerce platform
9:03
season and your e-commerce platform needs to update its UI to reflect the
9:06
needs to update its UI to reflect the
9:06
needs to update its UI to reflect the recent latest offers promotions season
9:09
recent latest offers promotions season
9:09
recent latest offers promotions season themes and some personalized
9:11
themes and some personalized
9:11
themes and some personalized recommendations in traditional setup
9:13
recommendations in traditional setup
9:13
recommendations in traditional setup this is easier than said time a
9:16
this is easier than said time a
9:16
this is easier than said time a promotion ends a new one starts or
9:19
promotion ends a new one starts or
9:19
promotion ends a new one starts or season things need to be roll out your
9:21
season things need to be roll out your
9:21
season things need to be roll out your developers have to dive into that front
9:23
developers have to dive into that front
9:23
developers have to dive into that front end code they meticulously update their
9:26
end code they meticulously update their
9:26
end code they meticulously update their UI components test the changes and the
9:29
UI components test the changes and the
9:29
UI components test the changes and the then redeploy the entire application
9:31
then redeploy the entire application
9:31
then redeploy the entire application this process is not only time consumed
9:33
this process is not only time consumed
9:33
this process is not only time consumed but also prone to delays and bugs even a
9:36
but also prone to delays and bugs even a
9:36
but also prone to delays and bugs even a small oversight can disrupt The
9:38
small oversight can disrupt The
9:38
small oversight can disrupt The Experience leading to the frustration
9:39
Experience leading to the frustration
9:39
Experience leading to the frustration and lost of Lost in
9:42
and lost of Lost in
9:42
and lost of Lost in sales this is where the S shines instead
9:45
sales this is where the S shines instead
9:45
sales this is where the S shines instead of sending only the product information
9:46
of sending only the product information
9:46
of sending only the product information from the server where the rest of
9:48
from the server where the rest of
9:48
from the server where the rest of information is hardcoded in the front
9:49
information is hardcoded in the front
9:50
information is hardcoded in the front end he can send the information like
9:52
end he can send the information like
9:52
end he can send the information like homepage layout offers and other things
9:55
homepage layout offers and other things
9:55
homepage layout offers and other things in the e-commerce that you can see on
9:56
in the e-commerce that you can see on
9:56
in the e-commerce that you can see on the uh screenshot uh from the server
10:00
the uh screenshot uh from the server
10:00
the uh screenshot uh from the server also so with sdii we offers we when a
10:03
also so with sdii we offers we when a
10:03
also so with sdii we offers we when a new offer starts there's no need for
10:06
new offer starts there's no need for
10:06
new offer starts there's no need for developer to manually update the front
10:07
developer to manually update the front
10:07
developer to manually update the front end code the developer can just update
10:10
end code the developer can just update
10:10
end code the developer can just update the layout and other information from
10:12
the layout and other information from
10:12
the layout and other information from the back end itself in essence uh SD
10:15
the back end itself in essence uh SD
10:15
the back end itself in essence uh SD brings a level of flexibility it
10:18
brings a level of flexibility it
10:18
brings a level of flexibility it controls the gamechanging e-commerce and
10:20
controls the gamechanging e-commerce and
10:20
controls the gamechanging e-commerce and Beyond uh but I'll let's dive deep dive
10:24
Beyond uh but I'll let's dive deep dive
10:24
Beyond uh but I'll let's dive deep dive into much deeper how will this be done
10:28
into much deeper how will this be done
10:28
into much deeper how will this be done in the code level
10:31
sorry y
10:34
sorry y
10:34
sorry y so yeah for this uh to De that more uh
10:37
so yeah for this uh to De that more uh
10:37
so yeah for this uh to De that more uh building a server driven component
10:39
building a server driven component
10:39
building a server driven component application with react requires a solid
10:41
application with react requires a solid
10:41
application with react requires a solid graphs of its key components and
10:42
graphs of its key components and
10:42
graphs of its key components and workflow so let's I'll break down to you
10:45
workflow so let's I'll break down to you
10:45
workflow so let's I'll break down to you uh into manual pieces so you can see how
10:47
uh into manual pieces so you can see how
10:47
uh into manual pieces so you can see how it come together first of all let's talk
10:49
it come together first of all let's talk
10:49
it come together first of all let's talk about the schema so schema is basically
10:51
about the schema so schema is basically
10:51
about the schema so schema is basically the blueprint of the UI coming from the
10:53
the blueprint of the UI coming from the
10:53
the blueprint of the UI coming from the server it's a carefully crafted format
10:57
server it's a carefully crafted format
10:57
server it's a carefully crafted format that defines everything from
10:59
that defines everything from
10:59
that defines everything from layout of components to the specific
11:02
layout of components to the specific
11:02
layout of components to the specific interactions when the user send this
11:04
interactions when the user send this
11:04
interactions when the user send this schema to the client via the API this
11:07
schema to the client via the API this
11:07
schema to the client via the API this it's not just sending a fake set of
11:09
it's not just sending a fake set of
11:09
it's not just sending a fake set of instructions it's also providing a
11:11
instructions it's also providing a
11:11
instructions it's also providing a comprehensive map that guides the
11:13
comprehensive map that guides the
11:13
comprehensive map that guides the construction of the user interface uh
11:16
construction of the user interface uh
11:16
construction of the user interface uh the schema may include details about
11:18
the schema may include details about
11:18
the schema may include details about what components to use where to place
11:20
what components to use where to place
11:20
what components to use where to place them how they should look and how they
11:22
them how they should look and how they
11:22
them how they should look and how they should be in uh response to the user
11:25
should be in uh response to the user
11:25
should be in uh response to the user other thing is the react components in
11:27
other thing is the react components in
11:27
other thing is the react components in SD setup the react components are DES in
11:29
SD setup the react components are DES in
11:29
SD setup the react components are DES in such a way that they are flexible and
11:31
such a way that they are flexible and
11:31
such a way that they are flexible and responsive to the schema they uh that
11:34
responsive to the schema they uh that
11:34
responsive to the schema they uh that are provided by the server the beauty of
11:37
are provided by the server the beauty of
11:37
are provided by the server the beauty of this approach is that the UI logic is no
11:40
this approach is that the UI logic is no
11:40
this approach is that the UI logic is no longer hard hardcoded in the client side
11:43
longer hard hardcoded in the client side
11:43
longer hard hardcoded in the client side instead it's driven by the servers
11:45
instead it's driven by the servers
11:45
instead it's driven by the servers instructions making the UI incredibly
11:48
instructions making the UI incredibly
11:48
instructions making the UI incredibly adaptable to the changes so but then how
11:51
adaptable to the changes so but then how
11:51
adaptable to the changes so but then how it comes all together so in talking uh
11:54
it comes all together so in talking uh
11:54
it comes all together so in talking uh let's dive into the short demo uh I have
11:57
let's dive into the short demo uh I have
11:57
let's dive into the short demo uh I have recorded it so to Avo any last minute
12:00
recorded it so to Avo any last minute
12:00
recorded it so to Avo any last minute server crashes that tends to happen a
12:02
server crashes that tends to happen a
12:02
server crashes that tends to happen a lot with me so I'll play this so in this
12:06
lot with me so I'll play this so in this
12:06
lot with me so I'll play this so in this demonstration I'll walk you through the
12:08
demonstration I'll walk you through the
12:08
demonstration I'll walk you through the example of a website which is made with
12:10
example of a website which is made with
12:10
example of a website which is made with react node and Express at the back end
12:12
react node and Express at the back end
12:12
react node and Express at the back end first let's look at the back end where
12:14
first let's look at the back end where
12:14
first let's look at the back end where we Define the UI schema the schema
12:16
we Define the UI schema the schema
12:16
we Define the UI schema the schema defines the component like header
12:18
defines the component like header
12:18
defines the component like header product L banners and Footers uh with
12:21
product L banners and Footers uh with
12:21
product L banners and Footers uh with properties that control the appearence
12:23
properties that control the appearence
12:23
properties that control the appearence and content we are using the expressjs
12:26
and content we are using the expressjs
12:26
and content we are using the expressjs to set up the
12:27
to set up the
12:27
to set up the server and uh that server your
12:30
server and uh that server your
12:30
server and uh that server your configuration uh is sent by the schema
12:33
configuration uh is sent by the schema
12:33
configuration uh is sent by the schema by the post
12:34
by the post
12:34
by the post API and then on the front end side we
12:37
API and then on the front end side we
12:37
API and then on the front end side we fetch the UI configurations from the
12:39
fetch the UI configurations from the
12:39
fetch the UI configurations from the back end and we are fetching it and then
12:42
back end and we are fetching it and then
12:42
back end and we are fetching it and then we are storing in inside the state and
12:44
we are storing in inside the state and
12:45
we are storing in inside the state and then dynamically rendering the
12:46
then dynamically rendering the
12:46
then dynamically rendering the components so I defined the structure of
12:48
components so I defined the structure of
12:48
components so I defined the structure of components in another file uh but let's
12:51
components in another file uh but let's
12:51
components in another file uh but let's see how the website will look like so
12:52
see how the website will look like so
12:52
see how the website will look like so let's see this is example website that
12:54
let's see this is example website that
12:54
let's see this is example website that that I have created so with let's say if
12:57
that I have created so with let's say if
12:57
that I have created so with let's say if I want to change the content of the
12:59
I want to change the content of the
12:59
I want to change the content of the banner uh right now we have d one get
13:01
banner uh right now we have d one get
13:01
banner uh right now we have d one get one fre if I want to change the content
13:03
one fre if I want to change the content
13:03
one fre if I want to change the content of the banner I just go back to the
13:05
of the banner I just go back to the
13:05
of the banner I just go back to the server change that to let's say last day
13:08
server change that to let's say last day
13:08
server change that to let's say last day for the
13:09
for the
13:09
for the offer and let's say I also want to
13:11
offer and let's say I also want to
13:11
offer and let's say I also want to change the color of the banner I can
13:13
change the color of the banner I can
13:13
change the color of the banner I can just change the color let's say green
13:17
just change the color let's say green
13:17
just change the color let's say green and there you go if you yeah now you see
13:21
and there you go if you yeah now you see
13:21
and there you go if you yeah now you see there's the banner has been changed and
13:24
there's the banner has been changed and
13:24
there's the banner has been changed and yeah so this is a small demonstration of
13:27
yeah so this is a small demonstration of
13:27
yeah so this is a small demonstration of how the websites can use this config uh
13:31
how the websites can use this config uh
13:31
how the websites can use this config uh sdii in the
13:35
work
13:37
work
13:37
work so so that was a quick demo uh in case
13:40
so so that was a quick demo uh in case
13:40
so so that was a quick demo uh in case you want to uh have a quick look at the
13:42
you want to uh have a quick look at the
13:42
you want to uh have a quick look at the code you can visit my giup repository uh
13:45
code you can visit my giup repository uh
13:45
code you can visit my giup repository uh I'll give a two second pause if you want
13:47
I'll give a two second pause if you want
13:47
I'll give a two second pause if you want to save the
13:50
link okay then coming on to the next uh
13:53
link okay then coming on to the next uh
13:53
link okay then coming on to the next uh like one of the Corner Stones Corner
13:55
like one of the Corner Stones Corner
13:55
like one of the Corner Stones Corner Stones of the sdii is the design of the
13:58
Stones of the sdii is the design of the
13:58
Stones of the sdii is the design of the flexibles schemas uh these schemas aren
14:01
flexibles schemas uh these schemas aren
14:01
flexibles schemas uh these schemas aren just uh technical detail they are the
14:04
just uh technical detail they are the
14:04
just uh technical detail they are the backbone of your entire user interfaces
14:07
backbone of your entire user interfaces
14:08
backbone of your entire user interfaces so shaping not only the structure of a
14:10
so shaping not only the structure of a
14:10
so shaping not only the structure of a UI but also behavior of its component to
14:13
UI but also behavior of its component to
14:13
UI but also behavior of its component to truly harness the sdii it's crucial to
14:15
truly harness the sdii it's crucial to
14:15
truly harness the sdii it's crucial to understand how to create schemas that
14:17
understand how to create schemas that
14:17
understand how to create schemas that can accommodate a wide range of UI
14:19
can accommodate a wide range of UI
14:19
can accommodate a wide range of UI elements and scenarios so consider
14:21
elements and scenarios so consider
14:21
elements and scenarios so consider example let see this an action imagine
14:24
example let see this an action imagine
14:24
example let see this an action imagine you have e-commerce application with a
14:26
you have e-commerce application with a
14:26
you have e-commerce application with a list of products displayed on the
14:27
list of products displayed on the
14:27
list of products displayed on the homepage in traditional setup the logic
14:29
homepage in traditional setup the logic
14:30
homepage in traditional setup the logic for displaying this list along with the
14:32
for displaying this list along with the
14:32
for displaying this list along with the filtering or sorting options would be
14:33
filtering or sorting options would be
14:34
filtering or sorting options would be handled by the front end but with the
14:36
handled by the front end but with the
14:36
handled by the front end but with the sdii now the schema can be defined let's
14:39
sdii now the schema can be defined let's
14:39
sdii now the schema can be defined let's say a list component that includes
14:41
say a list component that includes
14:41
say a list component that includes optional filtering and uh sorting
14:45
optional filtering and uh sorting
14:45
optional filtering and uh sorting capabilities here what the magic come uh
14:49
capabilities here what the magic come uh
14:49
capabilities here what the magic come uh happens so the server acting as
14:51
happens so the server acting as
14:51
happens so the server acting as orchestrator can dynamically toggle
14:54
orchestrator can dynamically toggle
14:54
orchestrator can dynamically toggle these options based on the users's need
14:56
these options based on the users's need
14:56
these options based on the users's need preferences or even current offers all
15:00
preferences or even current offers all
15:00
preferences or even current offers all without changing a single hand of the
15:01
without changing a single hand of the
15:01
without changing a single hand of the code but the power of the uh flexible
15:06
code but the power of the uh flexible
15:06
code but the power of the uh flexible schemas goes beyond the stalling
15:07
schemas goes beyond the stalling
15:07
schemas goes beyond the stalling features it enables realtime
15:09
features it enables realtime
15:09
features it enables realtime personalization let's say you have your
15:12
personalization let's say you have your
15:12
personalization let's say you have your schema includes logic to adjust the UI
15:15
schema includes logic to adjust the UI
15:15
schema includes logic to adjust the UI based on the user Behavior such as
15:18
based on the user Behavior such as
15:18
based on the user Behavior such as showing a more prominent call to action
15:20
showing a more prominent call to action
15:20
showing a more prominent call to action for users who have just visited the
15:23
for users who have just visited the
15:23
for users who have just visited the product page multiple times but haven't
15:25
product page multiple times but haven't
15:25
product page multiple times but haven't made a purchase the server can instantly
15:27
made a purchase the server can instantly
15:28
made a purchase the server can instantly adjust that UI to to reflect his uh to
15:31
adjust that UI to to reflect his uh to
15:31
adjust that UI to to reflect his uh to reflect this uh personalization
15:33
reflect this uh personalization
15:33
reflect this uh personalization providing a tailored personalized
15:35
providing a tailored personalized
15:35
providing a tailored personalized experience to the user so again all of
15:38
experience to the user so again all of
15:38
experience to the user so again all of this happens without needing to needing
15:40
this happens without needing to needing
15:40
this happens without needing to needing to redeploy your code and updating the
15:43
to redeploy your code and updating the
15:43
to redeploy your code and updating the client side
15:44
client side
15:44
client side application so now let's let's just
15:47
application so now let's let's just
15:47
application so now let's let's just weigh the pros and cons of sdii because
15:51
weigh the pros and cons of sdii because
15:51
weigh the pros and cons of sdii because with the pros there's also be cons of
15:52
with the pros there's also be cons of
15:52
with the pros there's also be cons of this so with the starting with the pros
15:55
this so with the starting with the pros
15:55
this so with the starting with the pros SDI offers Dynamic GUI updates control
15:59
SDI offers Dynamic GUI updates control
15:59
SDI offers Dynamic GUI updates control by the server this means you can roll
16:01
by the server this means you can roll
16:01
by the server this means you can roll out the changes in real time without the
16:03
out the changes in real time without the
16:03
out the changes in real time without the need of the client side updates then we
16:05
need of the client side updates then we
16:05
need of the client side updates then we can tailor the interface to the behavior
16:08
can tailor the interface to the behavior
16:08
can tailor the interface to the behavior and per preference for the user for
16:11
and per preference for the user for
16:11
and per preference for the user for better uh personalization without
16:13
better uh personalization without
16:13
better uh personalization without increasing the app size also but when
16:16
increasing the app size also but when
16:16
increasing the app size also but when they are Pros let's see when what the
16:17
they are Pros let's see when what the
16:18
they are Pros let's see when what the call also uh so this could means like uh
16:21
call also uh so this could means like uh
16:22
call also uh so this could means like uh with the SDI uh the server demand is
16:24
with the SDI uh the server demand is
16:24
with the SDI uh the server demand is increased a lot and the latency could
16:27
increased a lot and the latency could
16:27
increased a lot and the latency could also directly get impact with the user
16:30
also directly get impact with the user
16:30
also directly get impact with the user experience Additionally the managing the
16:32
experience Additionally the managing the
16:32
experience Additionally the managing the state across uh server and client can
16:35
state across uh server and client can
16:35
state across uh server and client can also become complex especially when
16:38
also become complex especially when
16:38
also become complex especially when striving to maintain realtime updates
16:42
striving to maintain realtime updates
16:42
striving to maintain realtime updates and lastly offline support can be
16:44
and lastly offline support can be
16:44
and lastly offline support can be challenged without a connection to the
16:45
challenged without a connection to the
16:45
challenged without a connection to the server app functionality could be
16:48
server app functionality could be
16:48
server app functionality could be severly
16:49
severly
16:49
severly limited so like coming to the last uh so
16:53
limited so like coming to the last uh so
16:54
limited so like coming to the last uh so if you ask me who is using this uh so
16:57
if you ask me who is using this uh so
16:57
if you ask me who is using this uh so the companies like ASB V Spotify Netflix
17:00
the companies like ASB V Spotify Netflix
17:00
the companies like ASB V Spotify Netflix are some of the examples that uh use
17:02
are some of the examples that uh use
17:02
are some of the examples that uh use this approach to uh Drive the realtime
17:06
this approach to uh Drive the realtime
17:06
this approach to uh Drive the realtime personal experience they use the uh sdui
17:10
personal experience they use the uh sdui
17:10
personal experience they use the uh sdui so I'll just take example of Airbnb so
17:12
so I'll just take example of Airbnb so
17:12
so I'll just take example of Airbnb so for example Airbnb use this dynamically
17:14
for example Airbnb use this dynamically
17:14
for example Airbnb use this dynamically control to their mobile application
17:17
control to their mobile application
17:17
control to their mobile application layout uh and content for the better
17:20
layout uh and content for the better
17:20
layout uh and content for the better user experience based on the location
17:23
user experience based on the location
17:24
user experience based on the location and preferences of the user and it also
17:27
and preferences of the user and it also
17:27
and preferences of the user and it also helps them to make the app live and
17:30
helps them to make the app live and
17:30
helps them to make the app live and adaptable Al so if uh anyone from the
17:33
adaptable Al so if uh anyone from the
17:33
adaptable Al so if uh anyone from the audience is from these companies uh feel
17:35
audience is from these companies uh feel
17:35
audience is from these companies uh feel free to share your thoughts on how
17:37
free to share your thoughts on how
17:37
free to share your thoughts on how you're achieving this as long this is
17:39
you're achieving this as long this is
17:39
you're achieving this as long this is not a trade secret for of course
17:42
not a trade secret for of course
17:42
not a trade secret for of course yeah and yeah with that I like to I like
17:46
yeah and yeah with that I like to I like
17:46
yeah and yeah with that I like to I like to open the floor to any question you
17:48
to open the floor to any question you
17:48
to open the floor to any question you might have in case uh you are using any
17:51
might have in case uh you are using any
17:51
might have in case uh you are using any other approach than the server UI feel
17:54
other approach than the server UI feel
17:54
other approach than the server UI feel free to share your thoughts and in case
17:56
free to share your thoughts and in case
17:56
free to share your thoughts and in case you want to reach me out uh like these
17:58
you want to reach me out uh like these
17:58
you want to reach me out uh like these are my my handles so thank you
18:07
[Music]