PandaDev - Desenvolvimento Web Animal

October 8, 2014

Melhores Ferramentas para WebDev

editores e IDE's


Imagem de Varios Editores e IDEs

Faaaaala galera, começa aqui e agora uma série de tutoriais sobre as melhores ferramentas pra quem quer desenvolver para Web. Eu falarei superficialmente sobre cada uma das opções e posteriormente farei posts separados falando especificamente de cada ferramenta que uso em meus projetos, espero que gostem e testem estas ferramentas pois com certeza lhes serão úteis assim como estão sendo para mim.

O tema de hoje será algo que é essencial para qualquer WebDev, que é a escolha de uma IDE (Integrated Development Environment) como Eclipse, NetBeans, PHPStorm/WebStorm, ou um Editor de Texto como o Sublime-Text(*---*), Brackets, Atom, Notepad++,Vim, etc. Bom sem mais delongas vamos lá.


Editores ou IDE’s?


Bom, a escolha entre Editor de Texto ou IDE vai depender exclusivamente se você precisará ou não Compilar ou Debuggar sua aplicação, outra característica das IDE’s é abrir navegador automaticamente para que você possa conferir as alterações em seu código, caso não precise destas features nativamente(pois com alguns Plugins os Editores conseguem fazer as mesmas coisas) pode utilizar um Editor de Textos normalmente. Começarei falando sobre as IDE’s mais conhecidas pra WebDev(para PHP ou JavaScript):


IDE’s


1.Eclipse

Link: Download
S.O: Windows, Linux e Mac
Licença: Free

O eclipse é uma ótima IDE, e ele tem uma versão específica para PHP, o Eclipse for PHP Developers link acima, tem vários plugins e recursos que podem ser adicionados a ele além de ótimos temas, e mais uma coisa…..IT’S FREE \o/. As últimas versões do Eclipse tem uma facilidade tremenda pois possibilitam a instalação de plugins dentro do próprio Eclipse, o que facilita muito a vida de quem o utiliza, outra Feature legal do Eclipse é o uso de perspectivas, nelas você pode escolher qual linguagem de programação está trabalhando e o Eclipse organizará seus menus e ferramentas de acordo com a linguagem escolhida. As desvantagens do Eclipse é que por ser uma IDE robusta ele é lento para abrir e pesado, e também sua interface inicial ocupa muito espaço da tela, é claro que isso pode ser personalizado mas seria melhor se viesse mais clean um pouco, visto que muitos Web Developers codificam maior parte do tempo no Notebook.


2.WebStorm/PHPStorm

Link: Download WebStorm
Link: Download PHPStorm
S.O: Windows, Linux e Mac
Licença: Free

Conheço muito pouco destas IDE’s para poder falar abertamente, porém o que tenho lido e ouvido são só elogios até o momento, o que dá pra perceber é que são IDE’s completíssimas e atualizadas com frequência, tem ainda o fato de elas serem Cross Platform(assim como o Eclipse), ou seja rodam em Windows, Linux e Mac. A JetBrains está investindo forte nelas e em meio a tanta dedicação dificilmente sairia algo ruim. A grande desvantagem de ambas é serem pagas, você até pode usar a versão trial por 30 dias, após isso terá que comprar uma licença, lembrando que esta licença é independente do S.O que você utliza.


Editores de Texto


1.Notepad++

Link: Download
S.O: Windows
Licença: Free

O Notepad++ foi o primeiro Editor de Textos que utilizei, me lembro de ter ficado fascinado na época com a leveza deste editor, ele tem auto-complete e pode ficar extremamente poderoso se adicionados os plugins certos. Ele tem opção de personalizar o sintaxe highlight de cada linguagem entre outras funcionalidades muito bacanas. Para projetos simples como sites estáticos ou alguma manutenção rápida, não vejo problema algum em utilizar o Notepad++, porém se precisa criar um projeto maior e precisa de mas agilidade no desenvolvimento fique de olho nas opções que vem a seguir.


2.Brackets

Link: Download
S.O: Windows, Linux e Mac
Licença: Free

O Brackets é o Editor da Adobe… poderia terminar aqui este post mas vou listar algumas peculiaridades deste ótimo Editor. O Bracktes tem alguns recursos que propciam uma facilidade e agilidade tremenda ao desenvolver, alguns exemplos são:

  1. Edição de Stylesheet direto no elemento HTML: Ao clicar em algum seletor em um arquivo HTML, pode-se clicar com o botão direito e selecionar a opção Quick Edit ou ainda o atalho CTRL+E, fazendo isto abrirá abaixo uma caixa de edição referente ao CSS daquele elemento,este recurso é sensacional e dá uma praticidade enorme principalmente quando sua folhas de estilos está demasiadamente grande.

  2. Edição de Cores direto no código CSS: Assim como acontece com o recurso anterior, cada vez que vir um código de cor em seu documento HTML ou CSS, pode-se dar um Quick Edit ou CTRL+E e escolher a cor em um ColorPicker, um recurso também sensacional.

Fora isso o Brackets tem gerenciador de pacotes assim como o Sublime e aceita plugins como o Emmet e vários outros, é sim um baita Editor e caso não queira usá-lo acompanhe de perto. Quanto ao Brackets a única resalva é que por ser recente ainda não há tantos Plugins, Snippets, Temas entre outras coisas, mas não vai visto a popularidade crescente dele.


3.Atom

Link: Repositório no Github
S.O: Windows, Linux e Mac
Licença: Free

Antes de mais nada o Atom é o Editor de Texto do Github, só esta informação já é mais que o suficiente pra ele ser levado a sério, mas não para por ai, ele é Open Source e está disponível no em seu repositório no link acima. O Atom também é Cross Platform, e confesso que até escrever este post não tinha testado ele ainda, e vou te dizer, fiquei vendido com este Editor, ele tem muitas features bacanas assim como o SublimeText, e algumas outras sensacionais que vem por padrão que nem mesmo o Sublime tem, é muito bom e vou continuar testando ele sem sombra de dúvidas. Uma coisa que me chamou muito a atenção e me deixou boqueaberto foi o recurso de Preview de Markdown dele, quem me conhece sabe que sou fissurado em Markdown, e para este recurso utilizando o comando Ctrl+Shift+M ele abre uma coluna ao lado da atual com a visualização em tempo real do seu Markdown *———* it’s beatiful. Por ter utilizado pouco, ainda não consegui definir alguma desvantagem no uso do Atom, mas assim como o Brackets talvez por ser recente ainda não tenha tantos plugins,snippets e afins como o Sublime mas com certeza está no caminho certo. Fique abaixo com um print do Markdown Preview do Atom. Imagem do recurso Markdown Preview do Atom


4.VIM(VI Improved)

Link: Repositório no Github
S.O: Windows, Linux e Mac
Licença: Free

O melhor método para gerar strings aleatórias é colocar um estagiário no Vim e pedir para ele sair.

A frase acima é um clássico e a mais pura verdade, o VIM é um editor de linha de comando e quem é mais Old School adora ele(minha experiência com ele é bem pequena), porém o VIM é um Editor que todo desenvolvedor Web deve conhecer e ao menos saber criar/editar arquivos por ele, pois se um dia precisar manipular arquivos em um servidor via SSH por exemplo, o único Editor acessível geralmente é o VIM ou ainda o VI. Apesar de ser um Editor de linha de comando o VIM tem vários plugins e temas que o deixam sem sombra de dúvidas em pé de igualdade com qualquer outro editor, geralmente aquela galerinha que trampa ali no Vale do Silício utiliza o VIM :p.
Uma característica que pessoalmente eu acho sensacional no VIM e muitas pessoas odeiam, é o fato dele separar por stages a edição de arquivos, por exemplo: Quando você simplesmente abre um arquivo no VIM sudo vim file.php, o que ele faz é abrir ou criar o arquivo em modo de comandos, e para poder inserir algo no arquivo é preciso apertar a tecla “i” do teclado mudando ele para o stage de inserção, isso evita alterações acidentais nos arquivos. Para sair do modo de inserção e voltar para o modo de comandos é só apertar “Esc”, e por fim digitar os comandos “:wq ou :x” para gravar e sair. Para instalar em versões do Linux baseados no Debian basta rodar o comando abaixo:

sudo apt-get install vim -y

Ele vai pedir a senha de root e pronto, seu VIM está instalado, agora é só destrinchá-lo.


5.Sublime-Text *—-*

Link: Sublime Text 2
Link: Sublime Text 3
S.O: Windows, Linux e Mac
Licença: Free com Popup pra Comprar

Enfim chegamos no meu Editor de Textos predileto e o que eu uso em meus projetos, o Sublime Text, como podem conferir acima deixei o link das duas versões 2 e 3, o 3 está em fase Beta mas pode confiar que é bem estável. O Sublime tem n recursos como plugins, snippets, themas e váaaaarias funcionalidades sensacionais tais como:

  • Edição de Múltiplas Linhas;
  • Code Folding(Esconde Blocos de códigos);
  • Sintaxe Highlighter(Colore os códigos de acordo com a linguagem selecionada);
  • Free Distraction Mode(Modo sem ditração para melhorar o foco no desenvolvimento);

E mais uma gama de funcionalidades, porém pra poder utiliza o Sublime por completo, é necessário instalar o Package Control Link aqui.

O Sublime é um dos mais completos Editores da atualidade, há quem discorde e prefira outros, sem grilo, e tem várias funcionalidades do Sublime que os outros Editores citados acima também possuem, o diferencial do Sublime é que ele já tem uma comunidade forte que contribui massivamente criando plugins, snippets, temas e várias outras ferramentas que fazem do Sublime este ícone entre os Editores(Puxei saco bagarai agora).

O Sublime é pago porém pode-se utilizá-lo sem nenhuma restrição por tempo indeterminado, o único porém é uma janelinha chata que fica pulando na sua tela as vezes pedindo pra você comprar a licença, geralmente quando você salva arquivos, mas é só ignorar e utilizar sem moderação hu3hu3hu3.

É isso pessoal, como eu disse no começo post, abordei bem superficialmente cada IDE/Editor, se quiserem saber mais é só procurar a documentação no próprio link que eu deixei de cada um, se tiverem alguma crítica e/ou sugestão não hesitem em deixar um comentário, e comentem pra dizer o que acharam do post para que eu possa ter um norte a seguir e saber no que preciso melhorar, por hoje é só vlw flws \o/.

Ah é, esqueci de dizer, para o próximo post criarei uma vídeo-aula abordando as melhores ferramentas e funcionalidades do Sublime e darei uma pincelada no Brackets e no Atom, fiquem atentos e não esqueçam de compartilhar o post.








comments powered by Disqus