How Nativeblocks works (Simplified Guide)

Android iOS

Have you ever wondered how Nativeblocks operates behind the scenes? Let's break it down into a human-friendly explanation!

The Orbit System of Nativeblocks

Picture Nativeblocks as a solar system. At the center, we have the core SDK that is responsible for fetching screen and component JSON files from a backend API. This core engine processes the JSON into smaller parts, creating a tree hierarchy that can be rendered on the app.

The core SDK is minimal. It doesn’t include pre-built UI components. Instead, it relies on external tools and systems that orbit around it, feeding it what it needs.

The Components System

The components system is your gateway to bringing custom elements into the server-driven UI (SDUI). Nativeblocks components fall into two primary categories:

Blocks These are declarative UI components, think buttons, text fields, dropdowns, or any other interface element. Blocks are the building blocks of the app’s UI, allowing developers to design screens in a modular way.
Actions Actions are where the magic happens. They define business logic or app behaviors, triggered when the core SDK sends an event. For example, an action could: Make an API request, Handle navigation within the app, or Request permissions from the user.

With this separation, Nativeblocks ensures that you can manage both UI and functionality independently.

Writing Components for SDUI

Nativeblocks makes it easy for developers to contribute to the SDUI ecosystem. Using the app’s native language, you can write your own blocks and actions. The process is straightforward:

Mark Your Code By adding some simple annotation markers to your component code, you prepare it for the SDUI system.
Compile and Integrate Nativeblocks compiles the annotated code, generates the necessary JSON and supporting logic, and imports it into the core SDK.
Build and Upload Once integrated, the JSONs are ready to create dynamic screens and adapt UI changes directly from the backend without modifying client-side code.

The JSON Builder

The JSON builder is the backbone of SDUI. It allows developers (and even non-coders) to design and manage UI and actions without touching the client code. Nativeblocks provides two powerful tools for this:

Nativeblocks Studio A visual editor built for users. With Studio, you can:

Create a new screen.
Add blocks to the layout.
Link block events (like a button click) to actions (like sending an API request or navigating to another screen).

For instance, you could build a login page visually:

Add a text field for the username.
Add another for the password.
Place a “Login” button that sends an API request when clicked.
Navigate to the home screen upon a successful login.

Nativeblocks DSL For developers who prefer writing code, the DSL allows you to use your favorite language (Go, TypeScript, PHP, or others) to define screens and actions declaratively. Once written, Nativeblocks’ CLI compiles your code into JSON and uploads it directly to native clients like Android and iOS.

The Bigger Picture

With tools like Nativeblocks Studio and DSL, developers and designers can create dynamic, server-driven apps without dealing with backend infrastructure. Nativeblocks takes care of compiling, uploading, and integrating everything into the app seamlessly.

Whether you’re a developer building custom components or a non-coder designing screens visually, Nativeblocks empowers you to focus on what matters: creating excellent user experiences.

So, what will you build with Nativeblocks? The possibilities are endless!