Here, you’ll find information about Beagle before getting deeper in the project.

What is Beagle?

Beagle is an open source framework of cross-platform development based on the implementation paradigm of Server-Driven UI.

It’s possible to create, test and quickly update native application’s components without need to approve these changes on the store (App Store or Play Store).


Beagle’s version follow the semantic versioning concept. The documentation is versioned according to the major Beagle version, meaning the main version. Between platforms, the features compatibility is by the minor version. For example, it is possible to use 1.0.0 in the backend with 1.0.1 on Android, 1.0.2 on iOS and 1.0.3 on the web react.

Some definitions on this documentation exists only only in some specific minors or patches. See the captions used to denote these cases:

  • x.y.z: an exclusive definition of the version x.y.z;
  • >=x.y.z: existing definition from x.y.z version;
  • <=x.y.z: existing definition until the x.y.z version.

How does Beagle works?

The tool works as a facilitator of BFF (Backend For Frontend). This means that Beagle, from a library of components defined in the Design System of the Android, iOS or Web application, makes the visual and behavioral change of them by returning a JSON file that indicates what and where each component should be rendered and which the action they are going to perform.

The reason Beagle is able to make this frontend change from the backend is because its architecture is structured in Server-Driven UI, where BFF builds the data, components and actions present on the screen in a declarative way, and forwards them in a JSON format, while the front-end deserializes it, renders the visual components natively in addition to executing and assigning the actions present in each of them.

Beagle’s Pillars

Considering that it’s a tool based on Server-Driven, the JSON objects configured to run your application can be organized in 3 basic pillars:

  • Content
  • Visual Structure
  • Flow (or Actions)

After defining in the frontend and backend how the visual structure of the application will be with the customized components and actions, as well as how they can be changed, the BFF will be able to communicate with the front.

In this way, new features, flows, customizations and combinations of visual components can be tested without the need to publish updates to the application, optimizing type A / B tests.

Why use Beagle?

The main advantages of using Beagle on your project are:

  • More flexibility at work, specially among developers and UI/UX designers when it’s necessary to make specific changes.
  • Easy app maintenance which enables to make constant tests to improve your application.
  • Minor risks of duplicate code because all consumption of APIs, flows and rules will be in one place, BFF.

Another fundamental gain is that Beagle allows you to reduce user’s feedback time, once that the changes are quickly done, tested and validated.

Last modified February 12, 2021: Fix/migrate images to aws (#299) (a7bb5457)