DevSecOps

2 jul, 2014

Brackets – o editor para web que faz jus ao seu propósito

Publicidade

Logo que fui convidado para fazer este review, me foi sugerido que escrevesse sobre o, até então desconhecido para mim, editor Brackets. Honestamente, por usar o Vim desde que me lembro como desenvolvedor, essa euforia recente por editores como Atom.io, Sublime text etc., me cansa. Mas também entendo a necessidade dos desenvolvedores por uma ferramenta que seja rica em recursos, mas simples e leve o suficiente para ser utilizada no dia a dia.

Primeira impressão

Se você já usou alguma vez o Sublime Text, então provavelmente terá a mesma primeira impressão que a minha: a interface de usuário é praticamente igual. O tema padrão do Brackets é mais suave que o padrão do Sublime, mas os elementos visuais são dispostos de uma forma tão semelhante, que quase dá para dizer que é um clone. O editor também abre ridiculamente rápido. Mais rápido, inclusive, que a versão do Vim com interface gráfica – gVim.

ri

Uma análise mais profunda

Ao fazer uma análise sobre alguma coisa, tenho o cuidado de procurar antes saber qual o propósito disso.

“Brackets is an open source code editor for web designers and front end developers”.

O editor Brackets deixa muito claro seu propósito, mas, mais importante, o cumpre com maestria. A mágica desse editor e, certamente, o motivo para o desenvolvedor front end dar-lhe uma chance, é o recurso Live Preview. Ao ativar o recurso, uma aba no navegador Google Chrome é aberta. A partir de então, cada caractere modificado, elemento adicionado ou removido na marcação, valor modificado de propriedades CSS, cada simples edição, reflete instantaneamente no navegador.

Chega a ser divertido ver as coisas acontecendo no navegador, enquanto vamos editando o código. Por utilizar Node.js, o Live Preview é instantâneo, sem refreshes. Isso permite, por exemplo, que ao selecionar um parágrafo no editor, o mesmo parágrafo seja destacado no navegador.

ri01

Prós

  • É open-source – o Brackets é lançado sob licença MIT. Esse foi, pelo menos para mim que não conhecia o editor, o principal motivo que me fez instalá-lo;
  • É rápido – muito rápido. Excelente para desenvolvimento front-end, desde pequenas coisas até grandes projetos;
  • Tem o recurso de Live Preview – por utilizar o próprio navegador para exibir o resultado do desenvolvimento on-the-fly, temos uma visualização real do que está acontecendo;
  • É fácil – a interface é simples e intuitiva. Tem opção para vários idiomas, incluindo o português brasileiro;
  • É extensível – o editor pode receber novos recursos através da adição de extensões. Além disso, o repositório de extensões é grande o suficiente para cobrir soluções para diversas situações pelas quais outros desenvolvedores já passaram;
  • Integração com Theseus – o desenvolvimento, a análise de código e a depuração de Javascript ficam fáceis com o a integração com Theseus. De fato, não é surpresa um editor que utiliza Node.js como infra ter uma boa integração para depuração JavaScript;

ri02

  • É multiplataforma – possui pacotes pré-compilados para Windows, Mac e Linux. Apesar de o pacote para Linux ser Debian, a característica open source do editor permite que terceiros empacotem para outras distros, como o Fedora;
  • Gerenciador de projetos – o gerenciador de pastas funciona como um gerenciador de projetos. Um recurso que falta no Sublime text, mas que foi bem implementado no Brackets. Não é preciso levantar várias instâncias do editor, basta selecionar o projeto em que vamos trabalhar. Além disso, o editor se lembra dos arquivos abertos na última vez que o projeto foi trabalhado, trazendo essa seleção automaticamente;

ri03

  • Construído com tecnologia web – a ferramenta não é apenas focada em web, é construída com tecnologia web. Exatamente por isso, ela pode ser modificada utilizando apenas marcação, CSS e JavaScript;

ri04

Contras

  • É fundamental uma resolução alta para o Live Preview – a grande vantagem do Live Preview é poder colocar o editor lado a lado com a janela do navegador. No meu caso, com 1920x1080px, a experiência foi excelente. Mas, em resoluções menores, a experiência do Live Preview pode ser prejudicada.

Conclusão

Brackets é um projeto open source da Adobe, lançado sob licença MIT, que nasceu para ser guiado e desenvolvido pela e para a comunidade de desenvolvedores. É um editor com foco em web e leva isso muito a sério. Tanto é que a própria ferramenta utiliza de tecnologias web, tanto em sua interface quanto em sua infraestrutura.

É fácil, leve e pode ter novos recursos adicionados através de extensões próprias ou de terceiros, que podem ser desenvolvidas utilizando HTML, JavaScript e CSS. Só o fato de ser open source com licença MIT já justifica sua instalação para, pelo menos, dar uma chance. Mas o Live Preview é a cereja do bolo, que faz do Brackets um dos melhores editores para web com que tive contato até agora.

***

Artigo publicado originalmente na Revista iMasters: http://issuu.com/imasters/docs/revista_imasters__10_-_maio_2014