Server Driven UI com Beagle Web: Motivação e conceitos iniciais

Esta é uma série de artigos que pretende apresentar o Beagle focando mais em sua vertente web. Se você não conhece o Beagle, visite nossa página em usebeagle.io.

Neste artigo, falaremos de forma mais abstrata o que é o Beagle dando mais ênfase em sua biblioteca para a web, quais problemas tentamos solucionar, as abordagens que utilizamos e desafios que enfrentamos atualmente.

Um passo atrás: O que é Server Driven UI?

Chamado de Backend Driven UI, é uma abordagem onde as views são definidas e controladas por um servidor, chamado nesse caso de backend for frontend ou simplesmente BFF. Em outras palavras, uma API cria as definições de layout com os componentes e atributos que este tem. O frontend, por sua vez, recebe essa especificação e renderiza a implementação nativa de cada componente. Esse processo permite que sites e apps sejam alterados rapidamente sem a necessidade de um novo deploy ou uma nova release.

Quais as vantagens dessa abordagem?

1. Fazer testes de hipótese para experimentar teorias sobre um produto;
2. Facilidade em alterar as views independente de processos de atualização;
3. Criar rapidamente views com novas features utilizando os componentes já existentes

O que é o Beagle?

O Beagle surgiu na Zup quando observamos que, em grande parte dos produtos, é demorado e complexo testar novas ideias. Afim de facilitar e agilizar esse processo independente do canal de comunicação (web ou mobile), o Beagle se propõe a padronizar a forma em que se cria novas features e que se altera fluxos de uma aplicação.

• Como alterar nossos fluxos sem a necessidade de se preocupar com atualizações e todo o processo burocrático de publicação nas aplicações?
• Como testar rapidamente se uma nova feature faz sentido para os usuários?
• Como criar features simples com componentes que já existem na nossa aplicação sem a necessidade de onerar desenvolvedores?

Pensando em tudo isso, entendemos que a abordagem Server Driven UI nos auxiliaria em todos esses desafios. Nasceu então o Beagle, que é um produto com o objetivo de criar uma plataforma para acelerar o desenvolvimento em Server Driven UI.

Beagle Web

Em um primeiro momento, o Beagle foi focado apenas na construção do backend e renderização mobile. No entanto, a ideia da mesma API definir as views de múltiplos canais também inclui o mundo web. Imagine um produto que tenha um aplicativo (Android e IOS) e uma aplicação web com os mesmos fluxos de tela. Utilizando o Beagle, rapidamente conseguiríamos criar, alterar layouts e fazer testes A/B em todas as plataformas. Foi pensando nisso que surgiu então a vertente web do Beagle, chamada de Beagle Web e focada em construir uma biblioteca para auxiliar o desenvolvimento Server Driven UI na web.

Como funciona?

De forma bem simplória, criamos a definição de uma view (uma árvore de componentes) que será disponibilizada no formato JSON em uma API no backend. O ideal é criar esse BFF com o próprio Beagle. Se você deseja se aprofundar mais nessa construção, sugiro primeiro seguir nossa documentação oficial que explica como funciona esse processo.

Com o BFF criado, o frontend consumirá essa API para renderizar as views. Cada componente exposto no JSON, é um nó da nossa árvore com atributos, que por sua vez definem como esses componentes serão apresentados. Veja o exemplo abaixo de uma árvore do Beagle:

É importante ressaltarmos dois atributos aqui.

O primeiro é o _beagleComponent_ que informa o tipo do componente, em outras palavras, indica qual componente será renderizado na aplicação. Você pode definir o nome que quiser nesse atributo, no entanto isso deverá ser relacionado em um mapa de componentes. Não se preocupe, falaremos sobre isso em instantes.

Já o segundo atributo é o children que define quais são os filhos de um componente. Bem similar ao HTML, se definirmos, por exemplo, um componente de formulário é provável que ele tenha componentes filhos que serão campos do formulário. Pra ficar mais claro, vamos fazer uma comparação do HTML com nosso JSON.

beagle-tree.json

rendered-tree.html

Podemos relacionar cada nó da nossa árvore a uma tag HTML. Portanto, a ideia do Beagle é manipular a árvore e proporcionar uma forma nativa de renderização dos componentes declarados. Sempre que houver alterações na definição do JSON, estas serão refletidas na nossa view no frontend. Com isso, se desejarmos, por exemplo, acrescentar mais um input no nosso form, será necessário apenas incluir esse nó na árvore do Beagle.

Contexto e Ações

Uma das melhores features criadas pela equipe do Beagle, é a possiblidade de declarar contextos e eventos na API do backend. Isso permite criar comunicação entre componentes, ações de navegação, bindings, submissão de formulários, controle de estado e várias outras funcionalidades importantes em uma aplicação frontend. Para se aprofundar mais nesse conteúdo que é fantástico, você pode checar nosso Beagle Playground. Uma aplicação modelo feita especialmente para você explorar o Beagle.

Abaixo temos um simples exemplo de como declarar na árvore de componentes um contexto e um evento simples de alteração do valor desse contexto.

Devemos ressaltar aqui alguns atributos especiais do Beagle.

• context: este atributo declara um novo contexto do Beagle que terá um id e o value. Ao criar um contexto assim, é possível acessá-lo a expressão especial do Beagle "@{id}" onde o id é exatamente o id do contexto criado.
• _beagleAction_: este outro atributo declara uma ação do beagle. No caso do exemplo acima, declaramos uma ação para alterar o contexto criado "myContext".

Uma observação importante é essa ação "beagle:setContext" é padrão do Beagle e seu comportamento já está implementando na nossa biblioteca. Mas existe também a opção de criar ações customizadas. Para isso o nome da ação deve começar com a palavra-chave "custom:". Você encontrará referências mais completas disso na nossa documentação.

Este é apenas um exemplo do poder do contexto e das ações do Beagle. Para ver mais exemplos, visite nosso playground e documentação.

Agora que você já conhece um pouquinho mais do que é e como funciona o Beagle, no nosso próximo artigo desta série focaremos em dar os primeiros passos com o Beagle Web. Vamos ver como instalar a biblioteca e como configurar o Beagle no seu projeto.