Qual é a próxima melhor coisa depois de codificar? O editor de código, é claro!
Os editores de código são a segunda razão mais significativa para as inflamações dos programadores (a primeira é a formatação do código).
Para alguns, o Vim é o único editor sensato já criado, enquanto para outros tudo o que não se encaixa no mundo espiralado do Emacs, semelhante ao Inception, só serve para o ridículo. Se você está procurando desesperadamente por atenção, tudo o que você precisa fazer é ir a uma comunidade de programação e iniciar um tópico como “Por que eu acho que o X (escolha qualquer editor de código popular) é péssimo/é o melhor”, pegue um pouco de cerveja e relaxe.
Argumentos, contra-argumentos e insultos continuarão entrando e saindo da discussão a noite toda, e levará muitos meses até que o veneno do fio esfrie.
A pergunta é: por quê?
Claro, os seres humanos conseguem fazer um grande alarde de tudo, mas acho que os editores de código são especiais quando se trata de programadores. Um programador típico gasta quase todo o seu tempo (mais de 98%, se eu fosse apostar) no editor de código de sua escolha. Eles conhecem o editor – seus pontos fortes, fracos, limites, peculiaridades e joias escondidas.
Nada é mais frustrante do que ter que lutar com o editor quando você está escrevendo o código (pense em como é irritante quando você precisa enviar um e-mail longo e urgente em um novo teclado!). Os editores de código reduzem o atrito mental e permitem que você seja mais produtivo, e é por isso que eles são tão importantes e chamam tanta atenção.
Então, qual é o melhor editor de código?
Sinceramente, nem me atrevo a ir lá!
No entanto, se você estiver em Web desenvolvimento, há uma alternativa que eu quero que você pense – editores de código online ! Você também pode chamá-los de editores de código baseados em nuvem.
Não confunda editor de código com um ambiente de desenvolvimento integrado (IDE). Ambos são duas coisas diferentes e, como desenvolvedor, você deve estar familiarizado com eles IDE multilíngue .
Resumindo, são editores que residem inteiramente em um servidor remoto e podem ser acessados por meio do navegador.
Soa estranho, certo?
Eu também me senti assim quando os encontrei 3-4 anos atrás. Por que diabos alguém iria querer entregar tudo para um navegador estúpido?
Ele pode competir com um editor de código instalado nativamente?
Acontece que na maioria dos casos, e especialmente para Web desenvolvimento, a resposta é sim. Agora, embora eu não tenha adotado os editores on-line como meu meio principal, eu os uso cada vez mais em cenários específicos.
Antes de nos aprofundarmos em quais editores de código existem para serem usados, vamos fazer uma pausa e pensar sobre quando os editores de código online podem fazer sentido.
Configuração zero
Não sei sobre você, mas configurar meu editor favorito ao meu gosto em um novo sistema não é algo que eu espero. Plugins, temas, fontes, atalhos, snippets, configurações . . . Há uma lista interminável de coisas que devem ser balanceadas antes que tudo se torne utilizável. É fácil ignorar algo, apenas para ficar irritado mais tarde quando seu fluxo de trabalho for interrompido.
Por outro lado, não há nada a ver com um editor online depois que a primeira configuração é concluída. Compilações oficiais, atualizações, compilações noturnas, plataformas suportadas, arquitetura do sistema, sincronização de FTP, Pipelines de CI/CD – nada disso importa, desde que você tenha um navegador!
Colaboração
Na maioria das vezes, você precisa colaborar com outros desenvolvedores ao resolver problemas ou depurar algo.
O editor de código tradicional não foi desenvolvido para isso — não há espaço para edição, comentário ou realce de código simultâneos, e é um desafio adicionar suporte para isso.
Segurança de dados
Agora, é certo que nenhum projeto hoje está sem controle de versão, o que significa que uma cópia do código existe no repositório o tempo todo. Dito isso, há momentos em que o controle de versão não é suficiente:
- Você se esquece de enviar commits recém-criados e seu laptop pega fogo.
- Você tem outros arquivos importantes e despejos de dados com os quais seu código interage, embora eles não façam parte do aplicativo ativo. O que acontece com eles se o seu laptop pegar fogo?
(Ok, parece que estou obcecado com notebooks pegando fogo, mas você entendeu, né?!)
Aplicação da disciplina
Isso também pode ser contestado no tribunal de direitos do desenvolvedor (se tal coisa existir), mas a verdade é que os desenvolvedores raramente sacrificam seus caprichos pelo bem comum.
Por exemplo, um entusiasta hardcore do Sublime Text sempre abraçará totalmente qualquer um dos excelentes editores do JetBrains e encontrará todas as oportunidades para apontar sua natureza faminta de memória e desempenho mais lento.
O mesmo vale para tabulações versus espaços (ou até tabulações de dois espaços versus tabulações de quatro espaços) — você é ingênuo se pensa que os programadores de sua equipe não se enfrentarão.
Nesses casos, um editor online é uma benção – você decide as configurações dos projetos (até mesmo como o código deve ser formatado) e ele simplesmente se recusará a aceitar o trabalho até que cumpra todos os padrões. Duro para o indivíduo, talvez, mas ótimo para o projeto!
Até agora, estou ficando sem casos de uso, então vamos ver qual opção temos quando se trata de editores de código online, especialmente para Web desenvolvimento.
JSFiddleGenericName
Enquanto JSFiddleGenericName não pode substituir um editor de texto completo, ele faz um ótimo trabalho ao lidar com scripts de front-end únicos.
É tão popular que sites de perguntas e respostas como o StackOverflow já suportam a incorporação de links JSFiddle diretamente em sua plataforma.
Para iniciar as coisas rapidamente, o JSFiddle oferece alguns clichês no início; o que significa que se você deseja obter uma demonstração de, digamos, React, iniciado, tudo o que você precisa fazer é clicar no botão relevante e começar a escrever o código. Depois de clicar em Salvar, o “violino” é salvo e você obtém um URL permanente (confira este violino bobo que criei: https://jsfiddle.net/tuqd76c4/ e observe que você pode fazer suas alterações e pressionar Salvar para criar um novo versão deste URL).
Aqui está o que torna JSFiddle uma plataforma viável para desenvolvimento web front-end:
- Gratuito para usar (sem taxas ocultas ou recursos freemium). O JSFiddle se sustenta por meio de anúncios (pelo menos até o momento), 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 juntos, entrevistas, etc.
- Vários layouts, tamanhos de fonte, temas claros/escuros, etc.
- Formatação de código (arrumação), suporte futuro para linters (CSS e JS) e muito mais.
E agora, soluço, soluço, pelas coisas ruins:
- JSFiddle é um editor puramente front-end. Não há como codificar e executar sua linguagem de back-end favorita.
- Não há conceito de arquivos e pastas aqui (ou uploads, nesse caso). Tudo o que você tem é um único espaço para código, não importa quanto dele exista.
- JSFiddle não pode ser usado para hospedar código em 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 seu ponto ideal e brilha quando você precisa distribuir provas de conceito e colaborar na velocidade da luz. É e continuará sendo uma identidade importante entre os editores online.
CodeSandbox
CodeSandbox pode ser considerado uma versão muito mais poderosa e completa do JSFiddle. Fiel ao seu nome, o CodeSandbox fornece uma experiência completa de editor de código e um ambiente de sandbox para desenvolvimento de front-end.
O CodeSandbox é uma potência real e um produto doce e doce. Eu ficaria sem papel se tentasse listar todas as suas vantagens, mas aqui estão alguns recursos matadores:
- Suporte npm: Sim, você pode adicionar praticamente 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 como achar melhor. O fluxo de trabalho é semelhante ao de um bundler de módulo moderno, então você não precisa configurar (quase) nada.
- Suporte para TypeScript, hot reloading, exportação para GitHub, hospedagem de arquivos estáticos, etc.
- É construído sobre Editor Mônaco a mesma fera que alimenta o favorito VSCode editor. Isso traz recursos poderosos como “Ir para”, “Localizar referências” e a refatoração necessária ao seu alcance!
- Suporte a trechos para emmet
- DevTools integrados, linting, sobreposições de erro, estruturas de teste (Jest), combinações de teclas e muito mais.
- CLI poderosa para importar projetos locais diretamente 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 em Patreon por apenas $ 5 por mês (pague quanto quiser, até $ 50 por mês).
CodeAnywhere
Um problema com a maioria dos editores de código nesta 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 é assim com CodeAnywhere .
No seu ponto mais forte, o CodeAnywhere tem dois recursos que se destacam para mim:
- Imagens de contêiner pré-criadas para mais de 72 linguagens e estruturas de programação. Isso significa que você pode provisionar um novo ambiente de desenvolvimento diretamente do editor! Obviamente, 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 da CodeAnywhere. Quer seu código resida em FTP, plataformas de compartilhamento de arquivos como Dropbox, Amazon S3, ou em plataformas de controle de versão sofisticadas como o GitHub, você pode configurar facilmente o CodeAnywhere para ler e gravar nessa fonte, usando o editor de código exclusivamente para . . . Bem, edição de código.
Mais uma coisa que gostaria de apontar: se você não se sente confortável com o Git quando se trata de visualizar o histórico e as diferenças, o CodeAnywhere pode parecer um suspiro de 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).
Porém, há um pequeno problema com as revisões – a versão gratuita permite que você mantenha apenas uma revisão, enquanto o menor plano pago permite no máximo 20 revisões. De um modo geral, não é um problema, pois você raramente deseja olhar além da última 20ª revisão, mas como a maioria dos programadores tem o hábito de clicar em Salvar algumas vezes por minuto, isso pode se tornar doloroso.
Dito e feito, o CodeAnywhere é uma oferta sólida e agradável para quem deseja migrar para a nuvem e permanecer nela. Como seus poderes vão além do código front-end, na minha opinião, é altamente recomendado!
StackBlitz
Se você gosta principalmente de front-end e não consegue se afastar da interface do VSCode, StackBlitz foi criado apenas para você.
Não vê nada de especial?
Também não o fiz até rolar um pouco para baixo e clicar no botão Angular. Estrondo!
Adivinha só, isso não foi criado deliberadamente para se parecer com o VSCode – é construído no editor do VSCode! Tanto que você pode instalar extensões, pesquisar nas pastas e organizar arquivos da maneira que você esperaria de uma instância normal do VSCode.
Mas, espere, tem mais!
Você pode ou não ter notado que:
- Todos os aplicativos criados no StackBlitz também são implantados automaticamente em seus servidores! Portanto, este aplicativo de brinquedo Angular que acabei de criar é hospedado automaticamente em https://angular-yvyi2j.stackblitz.io/. Provavelmente, o URL ainda está funcionando (carregará lentamente, como seria de esperar quando hospedado gratuitamente)!
- Você pode bifurcar e compartilhar o projeto. Ao compartilhar, você obtém um controle mais preciso sobre o que os outros podem fazer.
- Você pode se conectar a um repositório GitHub e também permitir que o código seja extraído/enviado diretamente de lá. Ou você pode simplesmente baixar o projeto como um arquivo zip da boa e velha maneira.
Mas, espere, tem mais!
Seriamente!
Aqui está a lista de recursos oficiais oferecidos pelo StackBlitz:
- Suporte nativo para Firebase (que é algo que eu pessoalmente não uso, mas ei, é uma benção para aqueles que não querem mergulhar nas profundezas obscuras do back-end)
- Intellisense, pesquisa de projetos
- Recarregamento rápido enquanto você digita
- Importar pacotes npm
- Edite offline quando não estiver conectado!
StackBlitz está cheio de (lindas) surpresas quando se trata de tirar os obstáculos de Web desenvolvimento e implantação. Incorporar o VSCode em seu site não é mais a coisa dos sonhos!
AWS Cloud9
Cloud9 foi indiscutivelmente o primeiro IDE baseado em navegador que ofereceu recursos sérios e adotou a ideia do navegador como um editor mainstream. Não é de admirar que Amazon posteriormente o adquiriu e hoje o Cloud9 faz parte das ofertas da AWS.
Se você estiver remotamente conectado (ou interessado) à plataforma AWS, Cloud9 é onde sua busca por um editor perfeito (ok, quase perfeito) termina.
Vejamos porque:
- Não há custos adicionais para usar o Cloud9. Você pode conectar o Cloud9 a uma instância de computação da AWS existente/nova e pagar apenas por essa instância. Também é possível conectar-se a um servidor de terceiros por SSH – sem nenhuma taxa!
- Suporte de primeira classe para aplicativos AWS Serverless (depuração, etc.)
- Acesso direto ao terminal para AWS de dentro do editor (honestamente, um editor decente, o terminal com guias é o que ainda sinto falta no VSCode)
- Mais de 40 linguagens de programação suportadas (Go, C++, Ruby, Node, Python, PHP, Java… faça a sua escolha)
Os recursos de colaboração no Cloud9 também são desejáveis, permitindo que revisões/entrevistas sejam conduzidas sem problemas.
Outro recurso matador é uma reprodução em estilo de vídeo das alterações feitas em um arquivo, tornando o processo de revisão uma alegria:
Meu conselho?
Se você gosta da AWS, não espere e adquira o Cloud9 agora mesmo. E se você ainda não está na nuvem, mas está pensando em mudar, adote a AWS e integre o Cloud9 em seu fluxo de trabalho. Você não pode tomar uma decisão melhor de qualquer maneira!
GitpodGenericName
GitpodGenericName é uma versão refrescante dos editores de código em nuvem (ou IDEs, se preferir) que visa manter seu código sempre testado e atualizado. Em outras palavras, ele é profundamente integrado ao GitHub e toda vez 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ê adora a experiência do VSCode e deseja algo que suporte todas as principais linguagens e estruturas de back-end/front-end (Django, Rails, Revel, etc.).
theia
Se você é um fã obstinado do SOLID e um arquiteto de software minucioso, o Theia IDE vai agradar seu osso de separação de preocupações. É um IDE de código codificado em TypeScript (cinco pontos para estilo imediatamente!) que possui front-end e back-end perfeitamente separados. O front-end é executado em um navegador, enquanto o back-end pode estar em qualquer lugar — na máquina local ou na nuvem!
Mas isso não é tudo – o front-end pode ser executado como um aplicativo Electron com um ambiente de navegador totalmente funcional e isolado, dando a você a aparência de um aplicativo de desktop nativo, caso deseje.
Espaços de código do GitHub
Espaços de código do GitHub fornece máquinas virtuais de alto desempenho para executar códigos para desenvolver aplicativos da web. Usando o Visual Studio Code que inclui um editor e um ecossistema completo, você achará mais fácil trabalhar no navegador.
Experimente o ambiente de desenvolvimento mais recente para os projetos, juntamente com imagens pré-construídas. Você experimentará 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 os 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 os projetos com docker-compose e contêineres. Além disso, visualize as alterações feitas facilmente no navegador e compartilhe portas públicas e privadas com colegas de equipe. Você também pode editar ou adicionar detalhes ainda mais nerds, como espaços, guias, claro, escuro, embelezar, mais bonito, solarizado, Monokai e muito mais.
Iniciantes que desejam tentar a sorte podem usar GitHub Codespaces gratuitamente com benefícios limitados, mas você terá recursos suficientes para continuar. Se você é uma equipe ou uma empresa, pode começar a usar GitHub Codespaces por 40/usuário/ano.
JetBrainsName
Obtenha ambientes de desenvolvimento de nuvem espacial novos, reproduzíveis, prontos para uso e automatizados em segundos e comece a codificar com JetBrains IDE – Espaço . É a solução única para equipes e projetos de software, assumindo a responsabilidade pelo ciclo de vida de desenvolvimento completo, começando pelos pipelines de CI/CD e hospedando repositórios Git até os pacotes de publicaçã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 um código instantaneamente, sem perder tempo desenvolvendo uma máquina local. Você obterá um IDE completo 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 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 preferido de máquina virtual 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 seu passeio hoje e experimente a beleza desta fera gratuitamente.
CodeTasty
CodeTasty é um IDE de nuvem extensível, inteligente e moderno com muitos recursos adicionais que você vai adorar. Ele ajuda você a escrever um código limpo e legível de forma mais inteligente em tempo real em seu idioma preferido.
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; levante-se e comece a trabalhar nos projetos bem na sua frente.
Você terá a mesma sensação de trabalhar com sua área de trabalho ao editar seus códigos na nuvem enquanto desfruta do mesmo desempenho e velocidade. CodeTasty entende as necessidades de cada desenvolvedor; e, portanto, permite que você instale quantas extensões quiser para aumentar sua produtividade. Além disso, 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 Replit O IDE gratuito, no navegador e colaborativo da que oferece suporte a mais de 50 idiomas sem gastar muito tempo em 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 Google docs. Você pode importar seu código para o GitHub para executar e colaborar com repositórios 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 você estiver pronto com o código, ele será instantaneamente ativado para o mundo. Se você também quiser aprender sobre código, a Replit tem mais de três milhões de tecnólogos, criativos, programadores apaixonados e muito mais. Com 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 plug-ins durante a codificação. A ferramenta também ajuda você a desenvolver seus projetos diretamente do seu navegador.
Inscreva-se em uma conta e comece a codificar agora.
PaizaCloudName
Crie aplicativos da web em seu navegador com PaizaCloudName IDE. É 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. Se você está usando Mac, iPadsistema operacional ou Windows versão, 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 o seu portfólio, como serviços de hospedagem, atualizando 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 com facilidade e eficiência, como se estivesse executando um desktop.
Faça um test drive com o plano gratuito com 2 núcleos e 2 GB de memória. Ou aproveite a vida útil ilimitada do servidor por 9,80/mês e obtenha 1 GB de espaço extra em disco.
Conclusão
Isso cobre mais ou menos todos os IDEs e editores de código existentes até o momento. Deixei de fora dois tipos de ofertas nesta lista: aquelas que são focadas puramente em entrevistas e não têm ambientes completos (exceto nosso amado clássico JSFiddle, é claro) e aqueles que não pareciam oferecer algo substancial e tinham pouco mais que uma página inicial elegante.
Se você precisa de algo leve para o desenvolvimento web, pode explorar estes editores de código .
