Server-Driven-UI (React Development) ⚛️

Server driven UI’s are basically a concept for controlling our UI components from server through API calls.

Hello My Spidey’s , make your web shooters Active to catch all great concepts.

This concept is very common and very effective in recent years for many high customer interacted applications for either shopping, food ordering and even hospitality services.

“May you list some application you think that are server driven or regularly changing interfaces.”

Server driven working is very simple and we can implement it in Web Development or Native Applications both :

1. Loads the JSON Structure from any mode :

API Call (make an API where it stores JSON structure in array containing Objects of component type, styles and actions)

Serverless.yml file and many more …

2. Map all properties and object type containing components to display.

You may follow this concept based video for more insight look with reference to SERVER-DRIVEN-UI :

— Must Watch —

#react ⚛️ #serverdriven #UI #JS ServerDriven UI React JS | Web-Application New Video — let’s DO IT — YouTube

3. Make different components in Your React project with App.js as your root file.

return (
<>
{
drivenData.map(({type},index=0)=>{return(
type === “carousel” ? <Carousel data={drivenData[index]} /> :
type === “text” ? <Text data={drivenData[index]} />:””
)})
}
</>
);

like we are two components here :

Carousel and Text

you have more options for components to add and feature to your server driven UI.

Carousel :

<Carousel>
{
carouselData.data.map(({imgs,alt,text,text1,actions,style})=>{
return(
<Carousel.Item interval={1000}>
 <img className="d-block w-100" style={style} src={imgs} alt={alt}/>
<Carousel.Caption>
 <h3>{text}</h3>
 <p>{text1}</p>
 {actions.type === "G-button" ? <Gbutton style={actions.style}       reason={actions.reason} action={actions.action.url}/> :
actions.type === "R-button" ? <Rbutton style={actions.style} reason={actions.reason} action={actions.action.url}/> : ""}</Carousel.Caption>
</Carousel.Item>)})
}
</Carousel>

Text :

<div style={{margin:"50px"}}>
{
textData.data.map(({para,parastyle})=>{
return(
<div>
<p style={parastyle}>{para}</p>
</div>
)})}
{
textData.action.map(({type,action,reason,style})=>{
return (
type === "G-button" ? <Gbutton style={style} reason={reason} action={action.url}/> :
type === "R-button" ? <Rbutton style={style} reason={reason} action={action.url}/> : ""
)
})
}
</div>

server.json file we will obtain in this format :

{
"data":[{
"type":"text",
"data":[{
"para":"using server driven",
"parastyle":{
"fontSize":"40px"
}},
{"para":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's",
"parastyle":{
"fontSize":"10px",
"fontWeight":"600"}}],
"action":[{
"type":"R-button",
"reason": "submit",
"action":{
"url":"https://www.google.com"
},
"style":{
"background": "linear-gradient(to right, gold, darkorange)",
"color": "white",
"--width": "350px",
"--height": "calc(var(--width) / 4)",
"width": "var(--width)",
  ................

This is How server response should look and be consumed in our application.

Good Things About Server Driven UI :

Easy switching and changing components for enhanced user experience.

Real-Time-Based interface- according to needs and content to display

Not regularly changing code base for component rendering or links for controlling actions

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bad Things About Server Driven UI:

We can not use server driven UI for OS or Core Base Application. Those require internal access for controlling applications.

Bit complex to setup as we need to have all components ready to show and manage those from a single JSON some time feels hard.

Hope you got a concept behind the server-driven-UI !

#server-driven #UI #React #web-development #app-native