Simplificando Feature Flags com DevCycle

Se você já tentou criar Feature Flags na mão, você sabe o inferno que é. Você tem que pensar em ...

• Alterar feature flags sem precisar de deploys;
• Ter configuração pra diferentes ambientes;
• Dar acesso a quem precisa criar/configurar feature flags;
• Saber se uma feature flag é usada e pode ser deletada;
• Teste A/B, widget de feature flags, grupo de usuários, gereciamento por API, criar e dar manutenção pra solução ...

Então, pra que inventar a roda e não simplesmente usar uma coisa pronta? Ai que entra o DevCycle.

Mas... por que o DevCycle? 😐

Além de eles terem SDKs para a maioria das grandes linguagens e plataformas, e também terem uma API para gerenciar feature flags, eles tem integrações com outros serviços e uma CLI própria. Com esses dois últimos, tu vai poder saber onde suas feature flags estão implementadas e REMOVER AS FEATURE FLAGS COM UM COMANDO.

Essa plataforma tem váááárias outras coisas fodas, mas essas duas últimas foram as que mais me pegaram no coração. Lógico, existem outras paltaformas como LaunchDarkly e Harness que oferecem serviços parecidos ou até melhores que o DevCycle, mas ...

Preço! 💰

DevCycle começa gratuito e escala de acordo com seu negócio. Outras alternativas normalmente não começam gratuitas, e escalam por quantidade de projetos, ou pessoas usando, o que sempre foi muito ruim pra mim. Isso força a gente a entulhar tudo em um projeto, e ter aquela famosa conta compartilhada na empresa. Quem nunca? Risco de segurança? Nada. De boas. Só olha pro lado.

Vamos começar 🏁

1) Crie um projeto React e instale o DevCycle:

# Cria o projeto react-ff
npm create vite@latest react-ff -- --template react

# Entra no projeto
cd react-ff

# Instala o SDK de React do DevCycle
npm i @devcycle/devcycle-react-sdk

# Verifica que o projeto está funcionando
npm run dev

2) Crie um arquivo .env

Na raiz do seu projeto, crie um arquivo .env com um valor temporário. Mais tarde vamos colocar o valor definitivo aqui.

VITE_DVC_SDK_KEY=valor_temporario

3) Adicione uma feature flag ao projeto

No arquivo App.jsx faça as seguintes alterações:

import {
  useVariableValue,
  withDVCProvider
} from "@devcycle/devcycle-react-sdk";

function App() {
  // Busca a variável ainda não criada, usando false como o valor padrão.
  const myFeatureFlag = useVariableValue('my-feature-flag', false);

  return (
    <>
      {/* vai rederizar o falso por enquanto */}
      {myFeatureFlag && <p>My feature flag is on!</p>}
      {!myFeatureFlag && <p>My feature flag is off!</p>}
    </>
  );
}

export default withDVCProvider({
  sdkKey: import.meta.env.VITE_DVC_SDK_KEY
})(App);

4) Configurando o DevCycle e sua feature flag

Registre uma conta no DevCycle. Depois disso, crie uma organização e projeto qualquer (depois você vai poder deletar e recriar a vontade), e uma feature flag do tipo Release com o mesmo nome que usamos antes (my-feature-flag).

Dentro do DevCycle, no menu superior no canto direito, clique no ícone de chave. Você vai ser redirecionado para a página de Keys dos SDK por ambiente. Copie o Client do Development, e substitua valor_temporario no .env por essa sua chave. Se tudo deu certo, você deve ver que a sua feature flag está ativa. Agora você pode voltar pro DevCycle e brincar com ela a vontade.

Nota: Não se esqueça de que você vai precisar fazer essa configuração para os demais ambientes que tiver.

Recapitulando 🔛

Em poucos passos conseguimos ter um projeto com uma feature flag funcionando. Foi menos tempo do que levaríamos pra pensar em como fazer uma solução simples, e ainda é gratuito até seu negócio crescer o suficiente.

Além disso, você vai saber as métricas de uso, poderá saber onde no código está sendo implementado pela plataforma ou pelo CLI, e até fazer uma migração progressiva do sistema que está usando atualmente.

Finalizando 🎉

Espero que esse artigo tenha te ajudado de alguma forma, e nos vemos na próxima \o/