DEV Community

Cover image for Server Driven UI no Flutter?
Rodrigo Castro
Rodrigo Castro

Posted on

13 9 9 9 10

Server Driven UI no Flutter?

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:

    {
    "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

Tela do app

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:

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (6)

Collapse
 
ulop profile image
Alex

What about divkit?
It's now support flutter.

Collapse
 
redrodrigoc profile image
Rodrigo Castro

I didn't know, I'll look at the repository here. Thank you

Collapse
 
fernandoandrade profile image
Fernando Andrade

conteúdo incrivél mano parabains 🔥

Collapse
 
redrodrigoc profile image
Rodrigo Castro

Muito obrigado!!

Collapse
 
adryannekelly profile image
Adryanne Kelly

Ótimo artigo, parabéns !

Collapse
 
redrodrigoc profile image
Rodrigo Castro

Muito obrigado!!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more