Server Driven UI no Flutter?
Tags: braziliandevs, flutter, dart, programming
Published: 2024-05-29 11:04:15


O **Server Driven UI** (SDUI) no Flutter surge como um **game-changer** no cenário do desenvolvimento de aplicativos. Ao transferir a lógica da interface para o servidor, abre-se um universo de possibilidades para criar interfaces mais dinâmicas, personalizadas e eficientes. Imagine um app que se adapta em tempo real às suas necessidades, sem a necessidade de constantes atualizações. É isso e muito mais que o SDUI no Flutter oferece!

> **game-changer** se refere a um “divisor de águas”, ou seja, algo que revoluciona e muda completamente um determinado mercado ou situação.

### O que é Server Driven UI?
Em contraste com a abordagem tradicional, onde a interface do usuário (UI) é definida no cliente (aplicativo móvel), o SDUI transfere a responsabilidade para o servidor. Isso significa que o servidor gera e envia a estrutura da UI para o aplicativo, que a renderiza na tela do dispositivo. Essa inversão de controle traz diversos benefícios:

#### Maior Agilidade e Flexibilidade:

- **Desenvolvimento e testes mais rápidos**: Alterações na UI podem ser implementadas no servidor e propagadas instantaneamente para todos os usuários, sem a necessidade de atualizações de aplicativos.

- **Experiência do usuário aprimorada**: A UI pode ser personalizada em tempo real, de acordo com o perfil e contexto de cada usuário.

- **Redução de custos de desenvolvimento**: O código da UI é centralizado no servidor, diminuindo a duplicação de esforços e otimizando o processo de desenvolvimento.

Mas nem tudo são flores...

#### Desafios e Considerações:

1. Implementação
    - **Arquitetura robusta**: O servidor precisa ter capacidade de processar e enviar as informações da UI de forma eficiente, especialmente para um grande número de usuários simultâneos.
    - **Comunicação confiável**: A comunicação entre o servidor e o aplicativo deve ser segura e resiliente a falhas de rede.
    - **Segurança de dados**: É crucial implementar medidas de segurança rigorosas para proteger os dados dos usuários e evitar acessos não autorizados.

2. Experiência do usuário
    - **Latência**: A latência na comunicação entre o servidor e o aplicativo pode afetar a fluidez da UI.
    - **Conectividade**: O SDUI depende de uma conexão de internet estável para funcionar corretamente.
    - **Acessibilidade**: É importante garantir que a UI gerada pelo servidor seja acessível a todos os usuários, incluindo aqueles com deficiências.

#### Exemplos de Bibliotecas SDUI para Flutter:

- Mirai
- server_driven_ui 

#### Exemplo utilizando o Mirai:

- **Servidor**:
    ```json
    {
  "type": "scaffold",
  "appBar": {
    "type": "appBar",
    "title": {"type": "text", "data": "Cards"}
  },
  "body": {
    "type": "column",
    "mainAxisAlignment": "start",
    "crossAxisAlignment": "center",
    "children": [
      {"type": "sizedBox", "height": 12},
      {
        "type": "card",
        "elevation": 20,
        "borderOnForeground": true,
        "margin": {"top": 20, "bottom": 20, "right": 20, "left": 20},
        "child": {
          "type": "listTile",
          "leading": {
            "type": "image",
            "src": "https://avatars.githubusercontent.com/u/31713982?v=4",
            "width": 50,
            "height": 50
          },
          "title": {
            "type": "padding",
            "padding": {"top": 10},
            "child": {
              "type": "text",
              "data": "Rodrigo Castro",
              "align": "center",
              "style": {"fontSize": 21}
            }
          },
          "subtitle": {
            "type": "padding",
            "padding": {"top": 10, "bottom": 10},
            "child": {
              "type": "text",
              "data":
                  "Desenvolvedor de Software com foco em Laravel e Flutter. (Open to Work)",
              "align": "center",
              "style": {"fontSize": 12}
            }
          }
        }
      }
    ]
  }
  ```


- **Flutter**:
    
![Exemplo no flutter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkvkaz9aggmei4dw0rji.png)


![Tela do app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b54w11gcvmq2q4ivztx.png)
#### Conclusão:

O SDUI no Flutter se apresenta como uma ferramenta poderosa para impulsionar a inovação e criar experiências de usuário excepcionais. Ao abraçar essa abordagem com cautela e planejamento estratégico, os desenvolvedores terão a oportunidade de revolucionar o cenário de desenvolvimento de aplicativos.

#### Para se aprofundar no assunto:

- [Artigo "Server Driven UI with Mirai in Flutter"](https://robertocsd.medium.com/unraveling-sdui-a-deep-dive-into-server-driven-user-interfaces-using-mirai-in-flutter-e99cd3c81abe)
- [Vídeo "Flutter Server Driven UI é possível? Descubra neste vídeo!"](https://m.youtube.com/watch?v=sWIS18Njr3I)
- [Pacote "server_driven_ui" no Pub.dev](https://pub.dev/packages/server_driven_ui)
- [Pacote "mirai" no Pub.dev](https://pub.dev/packages/mirai)