O que vem logo depois da codificação? Um editor de código, evidentemente!
Editores de código são o segundo maior motivo para debates acalorados entre programadores (o primeiro é a formatação do código).
Alguns defendem que o Vim é o único editor com lógica já criado, enquanto outros desconsideram qualquer coisa que não se encaixe no universo intrincado do Emacs, considerando-a digna de desprezo. Se o seu objetivo é atrair atenção, basta iniciar uma discussão em qualquer comunidade de programação com um tema como “Por que acho que o X (escolha um editor popular) é ruim/o melhor”. Prepare uma bebida e relaxe.
Argumentos, contra-argumentos e insultos fluirão noite adentro, e levará meses para que a discussão perca sua intensidade.
Mas por quê?
É natural que as pessoas se apeguem a muitos temas, mas os editores de código têm um significado especial para os programadores. Um programador comum passa a maior parte do tempo (mais de 98%, arriscaria dizer) no editor de sua escolha. Eles conhecem o editor em detalhes: suas qualidades, defeitos, limites, peculiaridades e funcionalidades escondidas.
Nada é mais incômodo do que ter que lidar com o editor enquanto se escreve código (pense na frustração de ter que escrever um e-mail longo e urgente em um teclado desconhecido!). Editores de código reduzem o atrito mental e aumentam a produtividade, por isso são tão valorizados.
Então, qual é o melhor editor de código?
Sinceramente, não me atrevo a abordar essa questão! 😀 😀
Contudo, se você trabalha com desenvolvimento web, existe uma alternativa que gostaria que você considerasse: editores de código online! Também conhecidos como editores de código baseados na nuvem.
Não confunda editor de código com um ambiente de desenvolvimento integrado (IDE). São duas coisas distintas, e como desenvolvedor, você deve estar familiarizado com esses IDEs multilíngues.
Simplificando, são editores que residem em um servidor remoto e são acessados via navegador.
Parece estranho, não é?
Eu também estranhei quando os descobri há 3 ou 4 anos. Por que alguém desejaria depender totalmente de um navegador?
Será que pode competir com um editor de código instalado localmente?
Acontece que, em muitos casos, especialmente para desenvolvimento web, a resposta é sim. Embora eu não tenha adotado editores online como meu principal recurso, tenho os usado cada vez mais em cenários específicos.
Antes de explorar quais editores de código online estão disponíveis, vamos analisar quando esses editores podem fazer sentido.
Configuração Zero
Não sei quanto a você, mas configurar meu editor preferido em um novo sistema não é algo que eu espere com ansiedade. Plugins, temas, fontes, atalhos, snippets, configurações… Existe uma longa lista de ajustes necessários antes de tornar tudo utilizável. É fácil negligenciar algo e se irritar depois, quando o fluxo de trabalho é interrompido.
Em contrapartida, não há nada a fazer com um editor online após a primeira configuração. Versões oficiais, atualizações, versões noturnas, plataformas compatíveis, arquitetura do sistema, sincronização FTP, pipelines de CI/CD – nada disso importa desde que você tenha um navegador!
Colaboração
Geralmente, é necessário colaborar com outros desenvolvedores para resolver problemas ou depurar algo.
O editor de código tradicional não foi projetado para isso – não há espaço para edição simultânea, comentários ou destaques, e é difícil adicionar suporte para essas funcionalidades.
Segurança dos Dados
É verdade que nenhum projeto atual está livre do controle de versão, o que significa que uma cópia do código existe no repositório o tempo todo. No entanto, há situações em que o controle de versão não é suficiente:
- Você se esquece de salvar commits recentes e seu notebook pega fogo.
- Você tem outros arquivos importantes e dados que seu código utiliza, embora não façam parte do aplicativo ativo. O que acontece com eles se seu notebook pegar fogo?
(Ok, talvez eu esteja obcecado com notebooks em chamas, mas você entendeu a ideia, certo?!)
Aplicação da Disciplina
Esta afirmação pode ser contestada no tribunal dos direitos dos desenvolvedores (se tal coisa existisse), mas a realidade é que os desenvolvedores raramente sacrificam seus gostos pessoais pelo bem comum.
Por exemplo, um fã incondicional do Sublime Text nunca aceitará totalmente nenhum dos excelentes editores do JetBrains, encontrando qualquer oportunidade para criticar seu consumo excessivo de memória e desempenho mais lento.
O mesmo se aplica a tabulações versus espaços (ou mesmo tabulações de dois espaços versus quatro espaços) – é ilusão pensar que os programadores da sua equipe não vão entrar em conflito.
Nesses casos, um editor online é uma solução ideal – você define as configurações dos projetos (inclusive a formatação do código) e ele simplesmente se recusa a aceitar o trabalho até que todos os padrões sejam atendidos. Talvez seja difícil para o indivíduo, mas ótimo para o projeto!
Já estou ficando sem exemplos, então vamos analisar as opções disponíveis em termos de editores de código online, especialmente para desenvolvimento web.
JSFiddle
Embora o JSFiddle não seja um substituto para um editor de texto completo, ele funciona muito bem com scripts front-end únicos.
Ele é tão popular que sites de perguntas e respostas como o StackOverflow já suportam a incorporação de links do JSFiddle diretamente em sua plataforma.
Para começar rapidamente, o JSFiddle oferece alguns exemplos iniciais; ou seja, se você quiser criar uma demonstração, digamos, em React, tudo o que precisa fazer é clicar no botão apropriado e começar a escrever o código. Depois de clicar em Salvar, o “fiddle” é salvo, você obtém um URL permanente (confira este fiddle que eu criei: https://jsfiddle.net/tuqd76c4/ e observe que você pode fazer alterações e clicar em Salvar para criar uma nova versão deste URL).
O que torna o JSFiddle uma plataforma adequada para desenvolvimento web front-end:
- Uso gratuito (sem taxas ocultas ou recursos freemium). O JSFiddle se sustenta por meio de anúncios (pelo menos por enquanto), e você pode ver um anúncio da Adobe no canto inferior esquerdo da captura de tela acima.
- Recursos de colaboração de código – ideais para construir conceitos em conjunto, entrevistas, etc.
- Vários layouts, tamanhos de fonte, temas claros/escuros, etc.
- Formatação de código (organização), suporte futuro para linters (CSS e JS) e muito mais.
E agora, suspire, suspire, vamos às desvantagens:
- O JSFiddle é um editor puramente front-end. Não há como codificar e executar sua linguagem de back-end favorita.
- Não existe conceito de arquivos e pastas (ou uploads). O que você tem é um único espaço para código, não importa o volume.
- O JSFiddle não pode ser usado para hospedar código no seu servidor. O código tem que estar no JSFiddle e é público o tempo todo.
- Não há como construir um pipeline de CI/CD, usar o Git, etc.
Dito isso, o JSFiddle tem o seu nicho e se destaca quando você precisa distribuir provas de conceito e colaborar rapidamente. É, e continuará sendo, um dos principais editores online.
CodeSandbox
O CodeSandbox pode ser considerado uma versão muito mais poderosa e completa do JSFiddle. Fazendo jus ao seu nome, o CodeSandbox oferece uma experiência completa de editor de código e um ambiente sandbox para desenvolvimento front-end.
O CodeSandbox é realmente poderoso e um produto excelente. Eu ficaria sem espaço se tentasse listar todas as suas vantagens, mas aqui estão alguns recursos notáveis:
- Suporte Npm: Sim, você pode adicionar quase qualquer pacote disponível no npm.
- Arquivos, pastas, módulos: você pode dividir seu código em vários arquivos, adicionar/remover imagens da pasta pública e construir/importar módulos da maneira que achar melhor. O fluxo de trabalho é semelhante a um empacotador de módulos moderno, então você não precisa configurar quase nada.
- Suporte para TypeScript, recarregamento a quente, exportação do GitHub, hospedagem de arquivos estáticos, etc.
- É baseado no editor Monaco, a mesma ferramenta que impulsiona o popular editor VS Code. Isso oferece recursos poderosos como “Go To”, “Find References” e refatoração ao seu alcance!
- Suporte de trechos para Emmet
- DevTools integrados, linting, sobreposições de erros, estruturas de teste (Jest), atalhos de teclado e muito mais.
- CLI poderosa para importar diretamente projetos locais para o CodeSandbox.
Embora a versão gratuita do CodeSandbox não suporte código privado, você pode obter esse recurso (e aumentar os limites de tamanho em geral) ajudando-os no Patreon por apenas US$ 5 por mês (pague o quanto quiser, até US$ 50 por mês).
CodeAnywhere
Um problema com a maioria dos editores de código desta lista (pelo menos até agora) é que eles esperam que você mantenha o código em seus servidores o tempo todo ou exigem que você sincronize o código por meio da linha de comando regularmente.
Não é o caso do CodeAnywhere.
O ponto forte do CodeAnywhere reside em dois recursos que se destacam para mim:
- Imagens de contêiner pré-construídas para mais de 72 linguagens e estruturas de programação. Isso significa que você pode provisionar um novo ambiente de desenvolvimento diretamente do editor! Naturalmente, o código é hospedado automaticamente no contêiner recém-criado e os arquivos são servidos diretamente de lá.
- Conecte-se a qualquer coisa. Sim, literalmente qualquer coisa. Você não é obrigado a armazenar seu código nos servidores do CodeAnywhere. Se o seu código reside em FTP, plataformas de compartilhamento de arquivos como Dropbox, Amazon S3 ou em plataformas de controle de versão sofisticadas como GitHub, você pode configurar facilmente o CodeAnywhere para ler e gravar nessa fonte, usando o editor de código exclusivamente para… edição de código. 😛
Outro ponto que gostaria de mencionar: se você não se sente confortável com o Git quando se trata de visualizar histórico e diferenças, o CodeAnywhere pode parecer um alívio. O editor usa seu sistema diff para comparar arquivos, o que permite comparar dois arquivos em quaisquer duas revisões (uma revisão é criada toda vez que você salva um arquivo).
No entanto, existe uma pequena desvantagem com as revisões – a versão gratuita permite manter apenas uma revisão, enquanto o menor plano pago permite no máximo 20 revisões. Em geral, isso não é um problema, já que raramente é necessário olhar além da 20ª revisão, mas como a maioria dos programadores tem o hábito de clicar em Salvar algumas vezes por minuto, isso pode ser incômodo.
Em suma, o CodeAnywhere é uma opção sólida e interessante para quem deseja migrar para a nuvem e permanecer nela. 🙂 Como suas funcionalidades vão além do código front-end, em minha opinião, é altamente recomendado!
StackBlitz
Se você trabalha principalmente com front-end e é um fã da interface do VSCode, o StackBlitz foi feito para você.
Não vê nada de especial?
Eu também não, até rolar um pouco para baixo e clicar no botão Angular. Uau!
Adivinhe, não é uma imitação do VSCode – é baseado no editor VSCode! Tanto que você pode instalar extensões, pesquisar em pastas e organizar arquivos da mesma forma que faria em uma instância normal do VSCode.
Mas, espere, tem mais!
Você pode ter notado ou não que:
- Todos os aplicativos criados no StackBlitz também são implantados automaticamente em seus servidores! Portanto, este aplicativo Angular que acabei de criar está hospedado automaticamente em https://angular-yvyi2j.stackblitz.io/. Provavelmente, o URL ainda estará funcionando (mas carregará lentamente, como esperado para um serviço gratuito)!
- Você pode bifurcar e compartilhar o projeto. Ao compartilhar, você tem mais controle sobre o que os outros podem fazer.
- Você pode se conectar a um repositório do GitHub e também permitir que o código seja puxado/enviado diretamente de lá. Ou você pode simplesmente baixar o projeto como um arquivo zip, à moda antiga.
Mas, espere, tem mais!
É sério! 😀
Aqui está a lista oficial de recursos oferecidos pelo StackBlitz:
- Suporte nativo para Firebase (algo que eu pessoalmente não uso, mas uma bênção para quem não quer se aprofundar no back-end)
- Intellisense, Pesquisa de Projetos
- Recarregamento a quente enquanto você digita
- Importar pacotes npm
- Edite offline quando não estiver conectado!
O StackBlitz está repleto de surpresas (agradáveis) quando se trata de eliminar obstáculos do desenvolvimento e implantação web. Incorporar o VSCode no seu site não é mais um sonho!
AWS Cloud9
O Cloud9 foi possivelmente o primeiro IDE baseado em navegador a oferecer recursos relevantes e a tornar a ideia do navegador como editor mainstream. Não é à toa que a Amazon o adquiriu posteriormente, e hoje o Cloud9 faz parte das ofertas da AWS.
Se você tiver alguma ligação (ou interesse) com a plataforma AWS, o Cloud9 é onde sua busca por um editor perfeito (ok, quase perfeito) termina.
Vejamos porquê:
- Não há custos adicionais pelo uso do Cloud9. Você pode conectar o Cloud9 a uma instância de computação nova/existente da AWS e paga apenas por essa instância. Também é possível conectar-se a um servidor de terceiros via SSH – sem custo adicional! 🙂
- Suporte de primeira classe para aplicativos AWS Serverless (depuração, etc.)
- Acesso direto ao terminal da AWS a partir do editor (sinceramente, um editor decente, o terminal com guias é algo que ainda sinto falta no VSCode)
- Mais de 40 linguagens de programação suportadas (Go, C++, Ruby, Node, Python, PHP, Java… escolha a sua)
Os recursos de colaboração do Cloud9 também são desejáveis, permitindo a condução de revisões/entrevistas sem problemas.
Outro recurso interessante é uma reprodução em estilo de vídeo das alterações feitas em um arquivo, tornando o processo de revisão agradável:
Meu conselho?
Se você gosta da AWS, não espere e use o Cloud9 imediatamente. E se ainda não está na nuvem, mas está considerando a migração, adote a AWS e integre o Cloud9 ao seu fluxo de trabalho. Você não poderia fazer uma escolha melhor!
Gitpod
O Gitpod é uma versão avançada dos editores de código na nuvem (ou IDEs, se preferir) que visa manter seu código sempre testado e atualizado. Em outras palavras, ele está totalmente integrado ao GitHub e, sempre que você adiciona código, ele executa seus testes e pipelines de CI/CD para garantir que o código esteja sempre com 100% de integridade.
Vale a pena conferir se você gosta da experiência do VSCode e quer algo que suporte todas as principais linguagens e estruturas back-end/front-end (Django, Rails, Revel, você escolhe).
Theia
Se você é um fã obstinado do SOLID e um arquiteto de software exigente, o Theia IDE agradará seu senso de separação de interesses. É um IDE de código desenvolvido em TypeScript (cinco pontos para o estilo!) que possui um front-end e um back-end perfeitamente separados. O front-end é executado em um navegador, enquanto o back-end pode estar em qualquer lugar – máquina local ou na nuvem!
Mas não é só isso – o front-end pode ser executado como um aplicativo Electron com um ambiente de navegador isolado e totalmente funcional, oferecendo a aparência de um aplicativo de desktop nativo, se desejar.
GitHub Codespaces
O GitHub Codespaces fornece máquinas virtuais de alto desempenho para executar código e desenvolver aplicativos web. Com o uso do Visual Studio Code, que inclui um editor e um ecossistema completo, você achará mais fácil trabalhar no navegador.
Experimente o mais recente ambiente de desenvolvimento para seus projetos, com imagens pré-criadas. Você terá baixa latência em várias regiões, dimensionando suas VMs para até 64 GB de RAM e 32 núcleos. Comece a codificar com ambientes padronizados, especificações de hardware, configurações do editor, extensões e requisitos de tempo de execução.
Você pode isolar as dependências entre projetos com docker-compose e contêineres. Além disso, visualize facilmente as alterações feitas no navegador e compartilhe portas públicas e privadas com colegas de equipe. Você também pode editar ou adicionar detalhes como espaços, tabulações, claro, escuro, embelezar, formatar, solarizar, Monokai e muito mais.
Iniciantes que desejam tentar a sorte podem usar o GitHub Codespaces gratuitamente com benefícios limitados, mas terão recursos suficientes para começar. Se você tem uma equipe ou empresa, pode começar a usar o GitHub Codespaces por US$ 40 por usuário/ano.
JetBrains
Obtenha ambientes de desenvolvimento de nuvem totalmente novos, reproduzíveis, prontos para uso e automatizados em segundos, e comece a codificar com o JetBrains IDE – Space. É a solução completa para projetos e equipes de software, que assume a responsabilidade pelo ciclo de vida de desenvolvimento completo, desde pipelines de CI/CD e hospedagem de repositórios Git até pacotes de publicação.
O Space é a máquina virtual dedicada com o contêiner do Docker. Você pode instalar todas as bibliotecas e ferramentas essenciais necessárias no projeto. Simplifique e acelere a experiência de integração compartilhando e reproduzindo os espaços de trabalho de codificação sempre que desejar.
Permita que os recém-chegados comecem a desenvolver o código instantaneamente sem perder tempo desenvolvendo uma máquina local. Você terá um IDE completo e pronto para uso sempre que precisar começar a escrever o código, depurar e executá-lo em segundos para testar a saída. A JetBrains oferece uma plataforma centralizada para gerenciar os ambientes de desenvolvimento.
Tudo o que você faz e todos os recursos que você usa são rastreados em um único lugar. Você também pode integrar os recursos no pipeline de desenvolvimento com bastante facilidade. De acordo com o seu projeto, você pode escolher o tipo de Máquina Virtual preferido para se adequar ao tamanho do projeto. O Space economizará seus recursos hibernando o espaço de trabalho de codificação para que você possa começar a trabalhar no mesmo após o intervalo.
Comece sua jornada hoje e experimente a qualidade desta ferramenta gratuitamente.
CodeTasty
O CodeTasty é um IDE de nuvem extensível, inteligente e moderno, com muitos recursos adicionais que você vai adorar. Ele ajuda você a escrever código limpo e legível de forma mais inteligente em tempo real, no idioma de sua preferência.
Obtenha o editor de código para ter uma experiência tranquila com compilação integrada, conclusão de código, ferramentas de detecção de erros e muito mais. Não se preocupe com a configuração; comece a trabalhar nos projetos diretamente.
Você terá a mesma sensação de trabalhar com seu computador ao editar seus códigos na nuvem, desfrutando do mesmo desempenho e velocidade. O CodeTasty entende as necessidades de cada desenvolvedor; portanto, ele permite que você instale quantas extensões desejar para aumentar sua produtividade. Além disso, ele suporta mais de 40 idiomas e centenas de linhas de código em um arquivo.
Experimente o CodeTasty gratuitamente para obter um espaço de trabalho sandbox, 2 espaços de trabalho FTP/SSH, colaboração, opção de terminal e 2 colaboradores. Você também pode começar com um plano pago de $4/mês e ter a chance de revisar seus códigos antes de executar.
Replit
Aprenda, escreva e crie código com o IDE gratuito, no navegador e colaborativo Replit, que suporta mais de 50 idiomas sem perder tempo com configurações. Você pode começar a codificar em seu idioma em qualquer dispositivo, sistema operacional e plataforma.
Convide seus colegas de equipe, colegas ou amigos para editar o código no estilo do Google Docs. Você pode importar seu código para o GitHub para executar e colaborar com repositórios do GitHub sem configurações. Se você está familiarizado com C++, Python, CSS ou HTML, você pode escrever o código e editá-lo em uma única plataforma.
Além disso, no momento em que seu código estiver pronto, ele será transmitido ao mundo instantaneamente. Se você também quiser aprender sobre código, o Replit tem mais de três milhões de tecnólogos, criativos, programadores apaixonados e muito mais. Com a colaboração em tempo real com suas equipes, sua equipe será mais produtiva. Além disso, você pode criar aplicativos, bots, etc., com a ajuda de plugins durante a codificação. A ferramenta também ajuda você a desenvolver seus projetos diretamente do seu navegador.
Inscreva-se para uma conta e comece a codificar agora.
PaizaCloud
Crie aplicativos web em seu navegador com o IDE PaizaCloud. É um ambiente de desenvolvimento web para Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress e muito mais.
O PaizaCloud permite que você escreva seus códigos perfeitamente sem se preocupar em configurar o ambiente. Basta abrir o navegador e seu ambiente estará pronto em três segundos. Esteja você usando a versão Mac, iPad, OS ou Windows, você pode operar o mesmo ambiente em todos os navegadores.
Além disso, você pode usar shells do Linux para configurar ambientes de desenvolvimento baseados na web com mais facilidade e flexibilidade. Você também pode publicar os serviços ideais para seu portfólio, como serviços de hospedagem, fazendo um upgrade para o plano básico.
Execute comandos, gerencie arquivos, edite códigos e muito mais no próprio navegador. O PaizaCloud elimina a necessidade de adicionar comandos como vim, ssh, etc., para editar arquivos ou fazer login. Em vez disso, você pode operar os servidores de maneira fácil e eficiente como se estivesse executando um desktop.
Faça um teste com o plano gratuito com 2 núcleos e 2 GB de memória. Ou aproveite a vida útil ilimitada do servidor com US$ 9,80/mês e obtenha um espaço extra em disco de 1 GB.
Conclusão
Este artigo cobre a maioria dos IDEs e editores de código disponíveis no momento. Deixei de fora dois tipos de ofertas desta lista: aquelas que são focadas puramente em entrevistas e não têm ambientes completos (exceto nosso amado clássico JSFiddle, é claro) e aquelas que não pareciam oferecer algo substancial e tinham pouco mais do que uma página inicial elegante.
Se você precisar de algo leve para desenvolvimento web, pode explorar esses editores de código.