Introdução

Programadores e engenheiros de software passam uma proporção significativa de seu tempo usando IDEs e editores de texto para escrever código. A maioria dos IDEs e editores de texto, como VS Code, Sublime Text e Notepad++, são aplicativos de desktop. No entanto, também existem vários editores online que você pode usar para construir, testar, prototipar e apresentar projetos simples de hobby, especialmente em desenvolvimento web.

Este artigo irá apresentar alguns dos mais populares editores e IDEs online gratuitos, como CodeSandbox, Codepen, JSFiddle, StackBlitz, Glitch e Repl.it. Você pode usar alguns desses IDEs e editores de texto online para construir aplicativos front-end simples, enquanto outros, como o Glitch, são para aplicativos front-end e full-stack.

A escolha do seu IDE online depende principalmente se você deseja construir um aplicativo front-end, back-end ou full-stack. Vamos explorar as vantagens e desvantagens desses IDEs e editores de texto.

Vale ressaltar que este artigo irá explorar as principais características dos editores e IDEs online mais populares. Não vamos identificar qual editor é o melhor. Também vamos nos esforçar para explorar os pontos fortes e fracos de cada editor para que você possa escolher aquele que atenda às suas necessidades.

Passos que vamos cobrir:

• Configurando um projeto para demonstração
• Principais editores e IDEs online gratuitos com planos gratuitos para projetos de hobby
• Comparando os principais editores e IDEs online.

Configurando um projeto para demonstração

É possível importar um projeto do seu computador local ou de um serviço de hospedagem Git, como o GitHub, para alguns editores de texto ou IDEs online. Portanto, nesta seção, criaremos uma aplicação básica usando o framework refine. Usaremos essa aplicação para ilustração.

O refine é um framework baseado em React para desenvolvimento de aplicativos web. É útil ao desenvolver aplicativos CRUD intensivos em dados, como painéis de administração e dashboards. Siga os passos abaixo para configurar uma aplicação simples do refine usando o superplate.

Como criar uma aplicação do refine

A maneira mais fácil de começar a usar o Refine é configurando uma aplicação usando o superplate. Execute o comando abaixo no terminal.

npx superplate-cli example-project --project refine-react

Se você executar com sucesso o comando acima, será criado um projeto refine-react no diretório example-project. Você deve responder às solicitações da linha de comando. Você também pode escolher as opções padrão durante todo o processo, se desejar.

Após criar com sucesso o projeto Refine, navegue até o diretório do projeto example-project usando o comando abaixo.

cd example-project

Para ter certeza de que o projeto que você criou está funcionando, use o comando abaixo para iniciar o servidor de desenvolvimento.

npm run dev

O comando acima irá iniciar o servidor de desenvolvimento em localhost. Você pode hospedar o projeto no GitHub para importá-lo para alguns dos editores online que exploraremos nas seções abaixo.

Os principais editores e IDEs online com planos gratuitos para projetos de hobby

Nesta seção, exploraremos os editores e IDEs online mais populares com planos gratuitos generosos. O foco estará mais em editores e IDEs como Codepen, CodeSandbox, StackBlitz e JSFiddle, principalmente para construir projetos front-end, mas também exploraremos outros como Repl.it e Glitch.

Destacaremos os prós e contras dos editores de texto online e IDEs.

Codepen

CodePen é um dos editores de texto online mais populares para construir, testar, mostrar e descobrir projetos simples de front-end construídos usando HTML, CSS e JavaScript. Vários desenvolvedores o utilizam para compartilhar projetos divertidos de front-end. Portanto, você pode usar alguns dos projetos do Codepen para inspiração e aprender com os diferentes desenvolvedores e designers web front-end.

Para começar a usar o Codepen, cadastre-se usando seu e-mail, conta do Facebook, Twitter ou GitHub. Depois de fazer o login, digite seu código HTML, CSS e JavaScript nos respectivos painéis. O Codepen atualizará automaticamente a pré-visualização. Você também pode alterar o comportamento padrão nas configurações.

Prós de usar o Codepen

• Ele oferece planos gratuitos generosos, suficientes para projetos simples de hobby
• Tem excelente documentação
• É possível incorporar pens em postagens de blog e documentação
• Tem serviços de hospedagem de ativos, embora sejam apenas para planos pagos
• Ele suporta vários modelos HTML e pré-processadores CSS
• Suporta linguagens de programação como JavaScript, TypeScript, CoffeeScript e LiveScript
• Possui suporte integrado para o transpilador Babel
• Recursos incorporados para destaque de sintaxe e formatação de código
• Suporte integrado para auto-completar código
• Você pode usar pacotes JavaScript via Skypack CDN

Desvantagens de usar o Codepen:

• Não é possível importar projetos de provedores Git como GitHub, GitLab e BitBucket.
• Não é possível enviar um projeto do seu computador local para o Codepen como com o CodeSandbox.
• Não é possível interagir com o Codepen a partir da linha de comando como com o CodeSandbox.

StackBlitz

O StackBlitz é outra IDE online voltada para o desenvolvimento web. Ele utiliza WebContainers. Além de suportar projetos estáticos construídos com HTML, CSS e JavaScript, o StackBlitz também suporta a maioria dos populares frameworks JavaScript e Node.

Além disso, é possível iniciar um novo projeto conectando um repositório do GitHub ou enviando um projeto do seu computador. O StackBlitz também possui vários modelos de projetos para ajudar a iniciar rapidamente. Você pode usar o StackBlitz para criar aplicativos front-end, back-end e full-stack.

Para começar a usar o StackBlitz, faça login usando sua conta do GitHub. Você pode criar um projeto rapidamente usando um dos modelos disponíveis. Abaixo, na seção a seguir, importaremos o projeto de exemplo de um repositório do GitHub.

Como abrir um repositório do GitHub no StackBlitz?

Em vez de usar os projetos iniciantes para criar um novo projeto no StackBlitz, você pode importar um repositório do GitHub. Siga os passos abaixo para importar o projeto de exemplo que criamos anteriormente.

Como abrir um repositório público do GitHub no StackBlitz?

Você pode abrir um repositório público do GitHub no StackBlitz adicionando o nome de usuário do GitHub e o nome do repositório da seguinte forma:

https://www.stackblitz.com/github/{GITHUB_USERNAME}/{REPOSITORY_NAME}/{BRANCH|TAG|COMMIT}

Você também pode especificar o script no seu arquivo package.json que o StackBlitz usará para configurar o servidor de desenvolvimento como uma string de consulta. No exemplo abaixo, o StackBlitz usará o script dev.

https://www.stackblitz.com/github/refinedev/refine/tree/master/examples/tutorial-antd?view=preview&theme=dark&codemirror=1

Prós de usar o StackBlitz

• O StackBlitz tem um plano gratuito generoso
• Ele suporta projetos front-end e back-end
• Ele tem suporte para populares frameworks front-end e back-end
• Ele tem uma excelente documentação
• Boa comunidade de suporte
• É possível lançar um projeto do GitHub
• Você pode executar projetos StackBlitz offline
• É rápido

Contras de usar o StackBlitz

• Nem todos os navegadores da web suportam completamente o WebContainers. Você pode encontrar alguns erros se pretender incorporar projetos StackBlitz em documentação ou postagens de blog.

CodeSandbox

O CodeSandbox é outro editor online para construir aplicativos web front-end e full-stack. É útil para prototipagem rápida, exibição e experimentação de novas ideias e projetos. Você também pode incorporar um sandbox em postagens de blog, documentação e READMEs de projetos do GitHub.

Assim como o StackBlitz, o CodeSandbox possui vários modelos iniciais para escolher ao lançar um novo sandbox. Ele suporta os frameworks front-end mais populares como React, Vue, Gatsby e Next.

Para começar a usar o CodeSandbox, você pode fazer login usando sua conta do GitHub, Google ou Apple. Você pode criar um novo sandbox usando um dos modelos iniciais integrados ou criar um sandbox importando um projeto do seu computador local ou de um repositório do GitHub.

Como enviar um projeto do computador local para o CodeSandbox?

O CodeSandbox possui uma ferramenta de linha de comando para enviar um projeto do seu computador local para o CodeSandbox. Siga as etapas abaixo para usá-la para implantar o projeto de exemplo que você criou acima.

Instale a ferramenta de linha de comando do CodeSandbox

Para enviar um sandbox usando um projeto em sua máquina local, instale a ferramenta de linha de comando do CodeSandbox executando o comando abaixo no terminal.

npm install --global codesandbox

O comando acima irá instalar a ferramenta de linha de comando do CodeSandbox globalmente. Para verificar se a instalação foi bem-sucedida, execute o comando abaixo no terminal. Ele deve exibir a versão da ferramenta de linha de comando do CodeSandbox.

codesandbox -V

Faça login em sua conta do CodeSandbox a partir da linha de comando

Após instalar a ferramenta de linha de comando conforme descrito na etapa anterior, faça login em sua conta do CodeSandbox usando a ferramenta de linha de comando codesandbox. Execute o comando abaixo no terminal.

codesandbox login

Você precisa responder aos prompts de comando após executar o comando acima. A ferramenta de linha de comando abrirá o seu navegador padrão. Após fazer login, o CodeSandbox irá gerar um token de autenticação. Você usará o token gerado para fazer login no CodeSandbox a partir da linha de comando.

Fazer upload do projeto da máquina local para o CodeSandbox

Após instalar com sucesso a ferramenta de linha de comando e fazer login no CodeSandbox como descrito nas seções anteriores, use o comando abaixo para enviar o diretório atual para um sandbox. Se você quiser implantar um diretório diferente, substitua ./ pelo caminho para o diretório.

codesandbox deploy ./

Como importar um repositório do GitHub para o CodeSandbox?

Em vez de importar um projeto para o CodeSandbox a partir de sua máquina local, também é possível importar um repositório do GitHub. Nos passos abaixo, importaremos o projeto de exemplo Refine que criamos para o CodeSandbox a partir do GitHub. Crie uma conta no GitHub se ainda não tiver. Você também deve hospedar o projeto de exemplo em um repositório do GitHub antes de seguir os passos abaixo.

Faça login na sua conta do CodeSandbox no navegador

Você deve primeiro fazer login na sua conta do CodeSandbox. Como apontado acima, você pode fazer login no CodeSandbox usando sua conta do GitHub, Google ou Apple.

Conceda acesso do CodeSandbox à sua conta do GitHub

Após fazer login na sua conta do CodeSandbox, conceda acesso do CodeSandbox à sua conta do GitHub. Clique no botão com três pontos no canto superior direito. No menu suspenso, clique em Preferências e depois em Integrações. Depois disso, faça login na sua conta do GitHub.

Importe seu repositório do GitHub

Após conectar com sucesso sua conta do GitHub conforme descrito acima, você pode importar seu repositório do GitHub clicando no botão "Criar" no canto superior direito. Depois disso, selecione a opção "Importar do GitHub". O CodeSandbox solicitará a URL do repositório do GitHub. Insira a URL do repositório do GitHub e clique no botão "Importar".

Após concluir os passos acima, o CodeSandbox clonará o repositório Git e criará um sandbox para você.

Como abrir um repositório do GitHub no CodeSandbox

O processo de importar um repositório do GitHub para o CodeSandbox descrito acima requer que você faça login e conceda acesso ao CodeSandbox à sua conta do GitHub. Você também pode abrir qualquer repositório público do GitHub no CodeSandbox e fazer um fork dele. Gere a URL do seu sandbox navegando para esta página e colando a URL do seu repositório do GitHub no campo de entrada. Use a URL do sandbox para abrir o repositório do GitHub no CodeSandbox.

Vantagens de usar o CodeSandbox:

• Ele oferece um plano gratuito generoso;
• Boa documentação;
• Possui modelos de partida integrados para a maioria dos frameworks front-end populares;
• Integração com o GitHub;
• Você pode importar um projeto para o CodeSandbox a partir da máquina local usando a ferramenta de linha de comando codesandbox;
• É possível incorporar sandboxes em postagens de blog, documentação e READMEs de projetos do GitHub;
• Você pode instalar e usar pacotes NPM;
• Completamento de código e destaque de sintaxe integrados.

Desvantagens de usar o CodeSandbox:

• Não suporta frameworks do lado do servidor, como o Express.

JsFiddle

O JsFiddle é um editor online e playground de código simples para desenvolvedores e designers front-end. Você pode usá-lo para hospedar demos simples de projetos para seus produtos e serviços e compartilhar trechos de código. Além disso, é possível incorporar seus trechos de código hospedados no JsFiddle em postagens de blog, documentação e READMEs do GitHub.

O JsFiddle é muito semelhante ao Codepen. Você pode usá-lo para trabalhar com HTML, CSS e JavaScript. Ele também suporta alguns dos frameworks front-end mais populares, como React, Vue e Preact. Não é necessário fazer login para começar a usar o JsFiddle. Navegue até a página inicial do JsFiddle para abrir o editor imediatamente.

Você pode criar um projeto usando um dos modelos integrados ou trabalhar com a configuração padrão, que consiste em HTML, CSS e JavaScript Vanilla.

Vantagens de usar o JSFiddle:

• Ele possui um plano gratuito generoso;
• Tem boa documentação;
• É excelente para compartilhar trechos de código curtos;
• É possível usar bibliotecas via CDN;
• É possível incorporar trechos de código em postagens de blog, documentação e READMEs do GitHub;
• Completamento de código integrado.

Desvantagens de usar o JSFiddle:

• Adequado apenas para aplicativos front-end simples;
• Não possui uma ferramenta de linha de comando para interagir com sua conta, como o CodeSandbox;
• Não é possível importar projetos do GitHub para o JSFiddle.

Repl.it IDE

O IDE Repl.it é um ambiente de desenvolvimento integrado colaborativo baseado em navegador. Ele suporta várias linguagens de programação e ambientes de execução, como Node, Python, C, Java e R. Portanto, você pode usar o IDE Repl.it para criar aplicativos front-end, back-end e full-stack.

Como a maioria dos outros editores online, o Repl.it possui vários modelos iniciantes para ajudá-lo a começar rapidamente. No entanto, você também pode importar um projeto existente de um repositório do GitHub. Para começar a usar o Repl.it, crie uma conta usando seu endereço de e-mail ou faça login com sua conta do Google, GitHub, Apple ou Facebook.

Além de ser um IDE online, o Repl.it também possui uma comunidade online vibrante da qual você pode obter ajuda e inspiração.

Como importar um projeto do GitHub para o Repl.it

Nesta seção, você aprenderá a importar um projeto do GitHub para o IDE Repl.it. Os passos abaixo assumem que você está hospedando o projeto de exemplo que criamos no início deste artigo em um repositório do GitHub.

Faça login na sua conta do Repl.it

Embora qualquer pessoa possa visualizar um Repl público, é necessário ter uma conta do Repl.it para criar um. Conforme mencionado acima, você pode criar uma conta do Repl.it usando seu e-mail ou fazer login usando sua conta do Google, GitHub, Apple ou Facebook.

Criar um novo Repl

Na sua conta do Repl, crie um novo Repl clicando no botão "Criar" no painel esquerdo ou no canto superior direito. Você pode criar um Repl a partir de um modelo existente ou importar um projeto do GitHub. Clique no botão "Importar do GitHub".

Ao importar um projeto do GitHub, esteja ciente das limitações de recursos do Repl.it se você estiver no plano gratuito. Você pode precisar fazer upgrade para um plano pago para projetos grandes.

Prós de usar o Repl.it

• Plano gratuito generoso
• Suporte ativo da comunidade
• Boa documentação
• Suporta várias linguagens de programação e ambientes de execução
• Oferece integração com o GitHub
• Possibilidade de fazer upload de arquivos e pastas do seu computador local
• Também é uma plataforma de aprendizado
• Oferece um banco de dados simples do Repl para armazenar dados
• Possibilidade de incorporar um Repl em um post de blog, documentação ou README do GitHub

Contras de usar o Repl.it

• Não há uma ferramenta de linha de comando para interagir com o Repl.it a partir do terminal.

Glitch

O Glitch é outro editor online que você pode usar para desenvolvimento web front-end, back-end e full-stack. Ao contrário do Repl.it, que suporta várias linguagens de programação e ambientes de execução, o Glitch suporta o ambiente de execução Node e as linguagens front-end como HTML, CSS e JavaScript. Para começar a usar o Glitch, crie uma conta usando seu endereço de e-mail, GitHub ou conta do Google.

Você pode usar o Glitch para prototipar, compartilhar e apresentar projetos da web. Como a maioria dos editores online que destaquei acima, o Glitch tem vários modelos iniciantes que você pode usar para começar um novo projeto ou importar um repositório do GitHub.

Selecione a opção "Importar do GitHub" ao criar um novo projeto. Insira a URL completa do repositório do GitHub. O Glitch irá clonar o repositório e criar um novo projeto para você.

Pros de usar o Glitch:

• Tem um plano gratuito generoso
• Boa comunidade de suporte
• Boa documentação
• Suporta aplicativos front-end, back-end e full-stack com Node
• Possui um recurso integrado para implementar um banco de dados simples com SQLite
• É possível fazer o deploy do Glitch para a plataforma de aplicativos da Digital Ocean
• É possível incorporar o projeto Glitch em uma postagem de blog, documentação ou README do GitHub

Contras de usar o Glitch:

• O Glitch é apenas para construir aplicativos front-end, back-end e full-stack com Node. Não suporta outras linguagens ou ambientes de execução.
• Você não pode interagir com sua conta Glitch a partir da linha de comando como no CodeSandbox.
• Para o plano gratuito, o projeto entra em modo de hibernação após um período de inatividade. O Repl.it não tem esse comportamento.
• O plano gratuito tem um limite de 1000 horas de projeto por mês.

Conclusão

Se você é um programador, engenheiro de software ou desenvolvedor, editores online e IDEs são úteis para prototipar, experimentar, compartilhar e colaborar em projetos pequenos. Como explicado acima, existem vários editores online.

Esses editores incluem StackBlitz, Codepen, CodeSandbox, JSFiddle, Glitch e Repl.it IDE. Cada editor online tem seus pontos fortes e fracos. Codepen e JSFiddle são adequados para projetos pequenos de front-end construídos com HTML, CSS e JavaScript.

Por outro lado, você pode usar CodeSandbox ou StackBlitz para projetos grandes de front-end e Glitch ou Repl.it para aplicativos back-end ou full-stack. Entre os editores online descritos acima, o CodeSandbox é o mais flexível ao criar projetos.