Neon — the server-driven UI (SDUI) tool powering apps at Byju’s

By Shashwat Garg

SDUI at Byju’s (Neon)

In the realm of mobile applications, the app’s interface is governed by the application itself, while the contents are provided by the backend server. The visual elements, also known as UI elements, undergo a comprehensive journey before reaching their intended users. Developers construct features, subject them to testing, and then package them for deployment. Subsequently, these features are submitted to app stores such as Play Store/App Store, where the respective teams review them before making them accessible to users. This is a lengthy process, making feature deployment slow.

Even after the updated versions are made available for the users, there is a tendency for only a fraction of users to promptly update their apps upon release, making the feature take even longer to come into play. Not to mention, with each update and feature, the app size will continue to grow, making it bulkier.

Enter Server-Driven UI

In this landscape of lagging app updates and fractured user experiences, Server-Driven UI (SDUI) emerges as a paradigm shift. It empowers developers to break free from the shackles of app store dependencies by centralising UI control across various devices, screens and operating systems. This architecture provides dynamic layouts and personalised features, delivered seamlessly to users in real-time. Imagine new functionalities materialising in the blink of an eye, enriching the user experience. SDUI provides a technical innovation, a reimagination of the possibilities for user interfaces where new functionalities seamlessly appear, improving the user journey one step at a time.

Another advantage of SDUI is how it changes the way developers and product managers interact with the app:

• Developers can build features with the UI layers abstracted out, allowing them to focus more on core functionalities and business logic, making the development process much more agile.
• Product Managers can visualise the UI features directly via SDUI to provide a shared visual canvas, fostering clearer communication with the developers. It also allows PMs to control UI without dev involvement, providing real-time feedback loop and focusing on user experience.

At Byju’s, Neon is the server-driven UI (SDUI) tool we use to deliver dynamic and personalised learning experiences to every student. It lets us create customised dashboards with interactive learning modules, progress trackers, and motivational messages tailored to each student’s class, time of day, and device. This approach keeps students engaged by providing relevant content at the right time, boosting overall learning outcomes. Using Neon, we can run A/B tests to run different section layouts and widget combinations to further optimise the learning experience for every individual.

Nested Approach

The magic of Neon lies in its ability to deliver highly adaptable layouts achieved through a nested approach, where the UI is meticulously constructed using two key elements: containers and widgets.

Containers: Think of them as boxes holding other containers or widgets. Picture a website’s main sections; each section is a container housing smaller elements like text, images, and buttons. Containers can be nested within each other, creating a hierarchical structure for even the most complex layouts.

Widgets: These reusable building blocks fill the containers with functionality. A banner or a feature — each is a widget with its own set of properties and behaviours. They’re like Lego bricks, snapping together to form the interactive elements of the interface.

Nested containers for a layout

The key? Standardisation: Both containers and widgets adhere to a predefined schema, a set of rules that dictate their attributes and interactions. This standardisation is crucial for two reasons:

• Flexibility: The server can effortlessly swap, add, or remove widgets within containers based on user data, preferences, or A/B testing results. It’s like rearranging furniture in a room — the underlying structure remains, but the individual elements can be dynamically adjusted.
• Efficiency: Developers don’t need to reinvent the wheel for every layout. Pre-built, standardised widgets can be combined and nested to create endless variations, saving development time and ensuring consistency across platforms and devices.

This nested approach empowers Neon to deliver complete control over any layout imaginable. We’re not limited to static designs and can create interfaces that adapt and evolve seamlessly in real-time, offering a truly personalised user experience.

Layout Breakdown to containers

Containers

These versatile elements are the foundation for our ever-evolving UI, serving as vessels for widgets and other containers. Imagine them as flexible compartments that can adapt to our needs, taking two primary forms:

• Row Containers: Picture these as horizontal shelves, neatly aligning widgets side-by-side. Ideal for displaying lists, carousels, or product comparisons, they offer an ordered layout for showcasing multiple elements.
• Column Containers: These are like vertically stacked boxes. These containers arrange widgets one on top of the other, perfect for creating content-heavy sections, news feeds, or step-by-step instructions.

But containers aren’t just passive holders. They come equipped with a set of filters, empowering us to refine the user experience further. These provide tailoring content based on specific conditions:

• Date & Time Filters: Showcase seasonal promotions during holidays or display time-sensitive announcements, ensuring users encounter the most relevant information at the right moment.
• A/B Testing Filters: Experiment with different widget combinations or layouts within these containers, analysing user engagement to identify the most effective design strategies.

A/B Testing Dashboard

• Class Filters: Target specific user segments with tailored content. This facilitates showcasing personalised recommendations or educational materials based on a user’s class (e.g., beginner, intermediate, advanced). This filter unlocks highly targeted experiences, catering to individual needs and preferences.

Beyond these filters, we can define custom schemas for specialised configurations. Need a container to handle intricate product filtering options? Or a tailored layout that adjusts based on user preferences? Define your own schema to equip the containers with the specific functionalities that the unique use case demands.

With their versatile nature and powerful filtering capabilities, containers become the dynamic building blocks of Neon, shaping and adapting effortlessly to deliver a personalised and ever-evolving UI.

{
    "id": "104",
    "type": "row",
    "sort_sequence": 3,
    "data": "{}",
    "widgets": [
        {...},
        {...}
    ],
    "tags": [
        "home"
    ],
    "cursor": "eyJjdXJzb3JfdW5pdcgrszjfdtxJzb3J0X3NlcXVlbmNlIjoxfQ==",
    "page_size": 10,
    "total_size": 50
}

Widgets

These reusable components, encompassing buttons and text fields to complex banners and feature modules, provide functionality and user engagement within containers. Like containers, they adhere to a standardised schema, ensuring consistency and streamlined development.

While offering diverse functionalities, widgets share common properties and filters, empowering us to fine-tune their behaviour seamlessly. But widgets aren’t confined to these filters. We can leverage custom properties to configure them for specialised interactions. Need a banner that animates upon user hover? Or a progress bar that adapts its colour based on completion status? Define custom properties within the widget schema to achieve the desired functionality, ensuring the UI elements are versatile and highly interactive.

Custom schema for a widget

Remember, widgets are the interactive stars of Neon. By harnessing their standardised approach and the power of filters and custom properties, we can create engaging experiences that truly resonate with our users.

{
    "id": "widget_10",
    "type": "FEATURE",
    "sort_sequence": 10,
    "component_name": "horizontal_personalised_feed",
    "data": "{\"title\":\"Recommended Videos For You\",\"show_nearby_centers\":true,\"actions\":[]}",
    "param_map": {
        "index": "2",
        "variant": "lms01"
    }
}

Backwards Compatible:

One of Neon’s key strengths lies in its ability to support backward compatibility with different schema versions for layouts. This means that as our app evolves and we introduce changes to the underlying schema that defines containers and widgets, these changes won’t necessarily break existing layouts relying on older schema versions.

Each schema iteration gets assigned a unique version number, allowing for clear identification and management. Meanwhile, Older versions remain accessible, ensuring compatibility with layouts built using them.

This minimizes the risk of breaking existing layouts during schema updates, protecting user experience and preventing potential app store rejections. The schema version also enables developers to introduce new features and functionalities incrementally without requiring immediate updates from all users.

What the future hold for us?

Looking ahead, Neon holds immense potential to revolutionize the way we interact with technology. Here at Byju’s, we are laser-focused on pushing the boundaries of this transformative technology. In our relentless pursuit of enhancing user experience, we are embracing two cutting-edge advancements:

• Envision crafting an ideal user interface — rearranging features, customizing aesthetics, and previewing changes in real-time. Drag and drop features, customize themes, and preview changes instantly with our intuitive “What You See Is What You Get” (WYSIWYG) editor.
• Picture interfaces that not only adapt to user preferences but anticipate their needs. By integrating AI and machine learning, we envision Neon proactively suggesting relevant content, features, and functionalities, creating a truly symbiotic relationship between user and technology.

This potent combination promises to revolutionize the way we interact with our platform, ensuring an intuitive, tailored, and seamless experience.