Contexto.
O CEL Playground surge em um contexto em que as Expressões CEL passaram a ganhar maior relevância no ecossistema cloud-native, especialmente a partir de 2023, com sua adoção em cenários de validação, segurança e políticas dentro de ambientes Kubernetes.
Meta de alto nível.
Desenvolver um dos primeiros playgrounds do mundo que permitissem a escrita e avaliação de expressões da linguagem CEL diretamente no navegador.
Desafios.
→ Criar um playground visualmente simples e intuitivo para DevOps juniores, sem limitar a flexibilidade necessária para DevOps mais experientes.
→ Priorizar um conjunto enxuto de funcionalidades realmente essenciais, para viabilizar a entrega do projeto dentro de um prazo curto de 4 a 5 semanas.
Resumo da processo.
01
Descoberta
Definição do escopo, objetivos e entendimento do problema.
Roadmap / Benchmarking
02
Ideação
Geração de ideais, esboços de layouts, definição de fluxos.
Wireframe
03
Prototipação
Exploração refinada de layout, color system, imagens, ícones.
Visual / Protótipo Navegável
04
Hand off
Reuniões com o time de engenharia, criação de documentos de apoio.
Documentação / Style Guide
Empresa.
Getup
Período.
≈ 3 semanas
Tipo do projeto.
Code Editor
Setor.
Cloud Native (Kubernetes)
Colaborações de destaque.
UI UX Design
Visual code editor
Objetivos do CEL Playground
Experimentação de expressões CEL em ambiente controlado.
Compartilhamento rápido de expressões.
Durante as primeiras reuniões para definirmos a proposta de valor da solução, ficou muito claro que o ponto central era ser um editor de código que contemplasse as particularidades do CEL.
Por conta dos prazos, a ideia era atacar, de maneira direta, o problema de não haver playgrounds para testar CEL, exigindo experimentações nos próprios ambientes de desenvolvimento, se tornando algo arriscado e demorado.
Baseado nisso, o projeto deveria consistir, basicamente, na soma de um editor de expressões, um editor de inputs e um campo para resultados do teste.
Layout base
PRIMARY COLOR
Playground modes
CEL Expression
Active
Validating Admission Policy
Web Hooks
ICON LIBRARY
Phosphor icons
Output
Total cost:
40
validations[0]
Cost:
12
validations[1]
Cost:
-
variables.replicas
Cost:
28
Além da estrutura que possibilita-se diversos tipos de testes, um dos nossos desafios era criar um ambiente propício para DevOps juniores ou para profissionais que não tivessem familiaridade com esse tipo específico de expressão, por ser algo muito novo. Baseado nisso, tomei algumas decisões, como:
-> No área de expressões: Adicionar em um dropdown vários exemplos em que o usuário pudesse apenas adicionar e rodar.
-> Na área de resultados (Outputs): Adicionar redflags e mensagens de erro caso as expressões estivessem incorretas. Além de informar os custos para realizar cada expressão.
-> No rodapé: Adicionar a versão utilizada, além de ter um botão de documentação que leva diretamente para a documentação oficial da Google no Github.
Examples
Kubernetes
Check image registry
Disallow HostPorts
Require non-root containers
Drop ALL capabilities
Semantic version check for image tags
General
URLs
Regex
Check JWT custom claims
Duration and timestamp
Blank
Output
Total cost:
40
validations[0]
Cost:
12
validations[1]
Cost:
-
failed to compile the Validate Admissin Policy expression: ERROR: :1:1: undeclared reference to 'accoun' (in container '')
variables.replicas
Cost:
28
Para finalizar atendendo todos os objetivos definidos para o CEL Playground, adicionamos um botão de Share, para permitir que os usuários pudessem compartilhar suas expressões de maneira rápida e fácil, sem precisar de login ou credenciais.
https://playcel.undistro.io/?content=H4sIAAA…
Share
Desenvolver o CEL Playground em um curto espaço de tempo foi a todo instante um exercício de priorização. Precisei estruturar ideias rapidamente, definir limites claros de escopo e focar no que realmente faria diferença para o usuário.
Esse projeto reforçou um aprendizado importante: nem sempre a melhor solução é a mais completa. Em muitos casos, atacar diretamente a dor do usuário com uma abordagem simples e objetiva gera mais impacto do que construir uma solução robusta, cheia de recursos e exceções.
© 2026 Arley Gomes. Todos os direitos reservados.