Simplificando Feature Flags com DevCycle
Tags: react, javascript, featureflags, devcycle
Published: 2023-07-10 15:26:45

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 ...

<img width="100%" style="width:100%" src="https://media.giphy.com/media/xUPGcjUQcWclgK94ti/giphy-downsized-large.gif" />

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? :neutral_face:
Além de eles terem [SDKs para a maioria das grandes linguagens e plataformas](https://devcycle.com/features/sdk), e também terem uma [API para gerenciar feature flags](https://devcycle.com/features/management-api), eles tem integrações com outros serviços e uma [CLI própria](https://docs.devcycle.com/tools-and-integrations/cli/). Com esses dois últimos, tu vai poder saber onde suas feature flags estão implementadas e **[REMOVER AS FEATURE FLAGS COM UM COMANDO](https://docs.devcycle.com/tools-and-integrations/cli/docs/cleanup)**.

![Pessoa positivamente surpresa e batendo palmas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8m3djckq1bvakupblya.gif)

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](https://launchdarkly.com/) e [Harness](https://www.harness.io/) que oferecem serviços parecidos ou até melhores que o DevCycle, mas ...

![Meme do "eu quero é ó... preço"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6eruqepaopnvybvnhpw.gif)

### Preço! :moneybag:
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 :checkered_flag:
### 1) Crie um projeto React e instale o DevCycle:
```bash
# 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.
```env
VITE_DVC_SDK_KEY=valor_temporario
```

### 3) Adicione uma feature flag ao projeto
No arquivo `App.jsx` faça as seguintes alterações:
```jsx
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](https://auth.devcycle.com/u/login). 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 :on:
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 :tada:
Espero que esse artigo tenha te ajudado de  alguma forma, e nos vemos na próxima \o/