Trabalhando em um projeto complexo, seja você um programador experiente ou um calouro, você provavelmente encontrará problemas. Quando você divide seu projeto em vários módulos, surgem problemas, tornando mais difícil rastrear erros e encontrar soluções. Em outras circunstâncias, depurar instâncias individuais pode ser difícil porque você não descobriu a solução adequada para o problema em que está trabalhando.
Também ocorre como um pedaço de código ocasionalmente, o que pode parecer complexo no momento. JavaScript é uma das linguagens baseadas na Web que é extremamente simples de aprender. Basta iniciar o navegador da área de trabalho e navegar até as Ferramentas do desenvolvedor (geralmente F12) e pronto! Você pode então experimentar o JS sem precisar instalar ou executar qualquer software complicado.
Para começar, tudo que você precisa é de um navegador. É maravilhoso ter toda essa simplicidade pronta para uso, mas há ocasiões em que você precisa de mais. Por exemplo, suponha que você queira experimentar uma nova API da Web que descobriu recentemente, mas não deseja iniciar um novo projeto.
Neste post, vamos comparar e contrastar os três playgrounds JS mais populares, CodePen, CodeSandbox e StackBlitz. Vamos começar!
CodePen
As ferramentas de desenvolvimento web front-end estão sempre evoluindo, e os editores de texto são um grande componente das tecnologias mais recentes que simplificam a vida de um desenvolvedor. Além de editores de texto autônomos, como Atom ou Notepad ++, houve uma explosão de editores baseados em navegador nos últimos anos que não exigem instalação de programas e promovem maior colaboração.
CodePen é uma “comunidade online para testar e apresentar trechos de código HTML, CSS e JavaScript criados pelo usuário” que oferece oportunidades fantásticas para aprender a escrever melhor páginas da web de front-end.
O CodePen oferece dois “modos”. A primeira e mais comumente usada é a Caneta. É tão simples quanto clicar em um botão e ser transportado direto para o editor. A partir daí, você pode acessar um painel de visualização, bem como janelas básicas de edição de HTML, CSS e JS.
Não há “sistema de arquivos”, “IntelliSense” ou qualquer outra coisa – apenas realce de sintaxe simples e comandos rápidos como embelezar. Na guia de opções, você pode selecionar um intervalo restrito de pré-processadores para todos os três idiomas (como TypeScript para JS) ou adicionar conexões a fontes externas.
Se você só precisa de algo feito de graça, qualquer um dos editores será suficiente. Eu sugeriria o CodePen para qualquer coisa que não exija muita configuração ou bibliotecas – simplesmente HTML, CSS e JS com pré-processadores opcionais no topo. Se você deseja utilizar o playground para melhorar sua presença nas mídias sociais ou desenvolver um portfólio pessoal, o CodePen é uma opção melhor.
Versão premium
Você tem mais algumas alternativas para selecionar no CodePen. Se você pagar anualmente, poderá obter um dos três planos premium por US$ 12, US$ 19 ou US$ 39 por mês. Você pode criar um número infinito de canetas, postagens e coleções particulares em qualquer uma das três camadas.
Você também receberá o emblema Pro (um impulso social), acesso ao modo de colaboração ao vivo, sem publicidade e muito mais. Existem também certas estratégias específicas da equipe e outras distinções entre níveis. Confira seu quadro de faturamento oficial para mais informações.
Características principais
Além de criar HTML, CSS e JavaScript no CodePen, há mais algumas coisas que o diferenciam.
- A visualização em tempo real do seu código é possível. Não requer compilação.
- Experimentar permite que você aprenda coisas novas.
- Crie pequenos casos de teste para procurar e resolver problemas.
- Exiba seus maravilhosos trabalhos.
- Crie e armazene canetas para uso posterior.
- Experimente o código de outros desenvolvedores e veja-o em ação.
Vantagens
- Para começar, não há custo.
- Recursos de aprendizagem integrados.
- Colabore com outras pessoas e compare projetos para ver onde eles podem ir no futuro.
- A interface do usuário é simples de usar e direta.
Desvantagens
- A biblioteca de código é pequena, o preenchimento automático de código é inadequado. É apenas bom para projetos de uma página e não pode lidar com nada maior.
- No CodePen, você pode criar canetas privadas, mas precisará atualizar para uma associação Pro (US$ 9/mês).
caixa de areia de código
CodeSandbox é um editor de código baseado na web. Ele automatiza a transpiração, o empacotamento e o gerenciamento de dependências para você, permitindo que você crie um novo projeto com um único clique. Depois de criar algo fascinante, você pode compartilhá-lo com outras pessoas simplesmente compartilhando o site.
O editor é compatível com qualquer projeto JavaScript, embora inclua alguns recursos específicos do React, como a opção de salvar o projeto em um template create-react-app.
Qualquer projeto criado no CodeSandbox começa com um modelo. Ele pode estar relacionado a uma biblioteca, estrutura ou tempo de execução específico (incluindo Node.js) ou usar simplesmente tecnologias da Web padrão. Após selecionar um modelo, você é enviado ao editor, onde encontrará todos os arquivos necessários e a janela de visualização já aberta.
Você tem acesso a um “sistema de arquivos” em todos os Sandboxes, o que significa que você pode criar novos arquivos, utilizar módulos (incluindo pacotes NPM) e interagir com ativos estáticos. Há também a oportunidade de modificar os arquivos de configuração específicos do modelo.
Você pode até construir seus próprios modelos para seu caso de uso exclusivo, completo com estrutura de arquivos e dependências, como em um IDE. Como a ferramenta está vinculada ao Github, você pode gerar rapidamente commits e abrir PRs. Você pode implantar seu aplicativo no ZEIT ou Netlify imediatamente.
Equipe CodeSandbox Pro
A CodeSandbox, uma empresa holandesa que permite que os desenvolvedores construam uma sandbox de desenvolvimento de aplicativos da Web baseada em navegador, lançou oficialmente uma plataforma de colaboração que permite que as equipes trabalhem em código na nuvem. O novo produto, Team Pro, é uma solução sem código criada para equipes de produtos completas, desde designers e gerentes até equipes de garantia de qualidade (QA) e muito mais.
Os projetos são fornecidos em uma interface amigável para quem deseja fazer ou aceitar alterações em uma aplicação web, evitando métodos alternativos, como enviar notas e recomendações aos desenvolvedores para executar as alterações, devolvendo-as para discussão e repetindo o processo.
Características principais
- Um editor de código baseado na web e uma ferramenta de protótipo.
- Para uso local, um sandbox pode ser baixado facilmente em um arquivo zip.
- Programação é feito em sandboxes, que podem ser facilmente compartilhadas com colegas de trabalho.
Vantagens
- Uma experiência de usuário aprimorada e maior controle sobre o editor.
- O recurso de visualização ao vivo pode ser modificado e visualizado em uma janela separada.
- O código é formatado automaticamente e inclui uma CLI (codesandbox-cli)
- Suporte para módulos npm avançados.
- Mensagens de erro agradáveis com recomendações.
- Ele melhora a experiência de depuração fornecendo um terminal melhor, visualizador de teste e visualizador de problemas.
Desvantagens
- O consumidor final está exposto a muitas personalizações.
- Arrastar e soltar arquivos de um computador local não funciona corretamente.
- Uma determinada estrutura de pastas deve ser seguida no CodeSandbox.
- A funcionalidade de um sandbox privado está disponível apenas para usuários.
StackBlitz
StackBlitz é um IDE online baseado em Visual Studio Code para aplicativos da web. A plataforma é tão responsiva e adaptável quanto a versão desktop. StackBlitz é um IDE online que vem pré-carregado com Angular e Reagir ferramentas de desenvolvimento.
O Thinkster.io criou esse projeto fantástico para simplificar ao máximo o início do seu projeto Angular ou React sem ter que se preocupar com instalação de dependências ou configurações de compilação. O StackBlitz oferece muitos recursos incríveis e exclusivos que nenhum outro editor de código online possui no momento. Como resultado, vale a pena investigar mais o StackBlitz e descobrir o que esse IDE online tem a oferecer.
O Stackblitz é extremamente comparável ao IDE completo, especialmente se você não pode dizer adeus ao código VS porque a ferramenta é baseada nele. O pacote tem uma variedade de recursos que permitem que você comece e continue criando um aplicativo full-stack.
O programa é desenvolvido pelo Visual Studio, que é bem conhecido entre os desenvolvedores. A edição offline é o destaque do projeto. Para tornar isso possível, a equipe do Stackblitz criou um servidor web no navegador. À medida que você digita, ele instala automaticamente dependências, compila, agrupa e recarrega a quente.
Versão premium
Cadet, Astronaut e Commander estão disponíveis gratuitamente, $ 8/mês e $ 29/mês, respectivamente. O Astronaut and Commander inclui vários recursos, como projetos privados ilimitados, uploads de arquivos ilimitados, convite para canal de folga da equipe principal e assim por diante. Para mais informações, consulte o quadro oficial de cobrança.
Características principais
- Adicionando pacotes NPM ao seu projeto.
- Graças a um novo servidor de desenvolvimento no navegador, você pode editar enquanto estiver offline.
- Um URL de aplicativo hospedado que nos permite acessar (e compartilhar) nosso aplicativo ao vivo a qualquer momento.
- Outros recursos notáveis do Visual Studio Code incluem Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition e outros.
Vantagens
- Recursos do Firebase para implantação.
- O editor é realmente fácil de usar e extremamente rápido.
- Os usuários têm acesso a package.json, index.html e index.js.
- Código-fonte compartilhável que também pode ser incorporado.
- Visualização ao vivo em uma grande seção da página, com a opção de abrir em uma página diferente, se necessário.
- Enquanto estiver offline, editando
- Conclusões inteligentes e Intellisense aprimorado.
- O núcleo do Stackblitz é open source.
Desvantagens
- Você não tem influência sobre o edifício ou o servidor do desenvolvedor porque eles são gerenciados pelo comando create-react-app.
- No React, uma estrutura de pastas fundamental deve ser observada.
- Não é possível formatar o código automaticamente, embora seja possível fazê-lo manualmente.
Conclusão
Hoje em dia, um playground de codificação como os que vimos acima pode ser usado para construir completamente qualquer projeto web. Não há necessidade de instalar IDEs complicados em seu PC quando você pode compilar, depurar, testar e implantar diretamente de seu navegador da web.
Na minha opinião, o StackBlitz seria o melhor entre eles porque é um IDE baseado na web que permite JavaScript, Angular e outros projetos de desenvolvimento imediatamente, sem a necessidade de instalar ambientes de desenvolvimento local como Node.js, npm, ou Angular. Ele fornece a mesma experiência de usar o Visual Studio Code localmente. Na realidade, como o StackBlitz é conduzido pelo Visual Studio Code, ele parece tão rápido e versátil quanto a versão para desktop.
Qual dos CodePen, CodeSandbox e StackBlitz é a sua ferramenta preferida? Deixe-nos saber nos comentários.
Abatyya
Obrigado por este ótimo artigo, uma vez que vi stackblitz.com, eu sei que é isso que eu quero.