Seja desenvolvedor front-end no Linux

Linux

Já pensou em trabalhar com front-end usando Linux? Sim, é possível!
Muitos tem consigo esse paradigma de que trabalhar com Linux não é tão produtivo quanto no Windows e que não existem ferramentas suficientes para se desenvolver de maneira ágil, mas eu te pergunto, você já experimentou montar um bom workflow no Linux? Se a resposta for não, me acompanhe e descubra como é fácil.

Nesse post vou citar as ferramentas essenciais e suas alternativas e mostrar passo a passo a instalação de tudo o que você precisa para se tornar um desenvolvedor front-end  no Linux sem deixar nada a desejar para outra plataforma. Temos um grande leque de programas e alternativas que rodam muito melhor no Linux (melhor em questão de fuidez) e te dão muito mais liberdade para trabalhar e abusar do conhecimento. Nós como bons front-ends sabemos tudo o que é preciso para criar um ambiente básico para se desenvolver aplicações web. Todas essas aplicações são necessárias em qualquer que seja a plataforma escolhida pelo o desenvolvedor, seja ela Windows, Mac Os ou Linux. No nosso caso o Linux.

Qual distro do Linux devo usar? Bom, isso vai de cada pessoa. Existem inúmeras distros, as mais utilizadas por terem um bom suporte e uma grande quantidade de aplicativos são Arch LinuxElementary OSFedoraLinux MintUbuntu e Debian. Fique à vontade para escolher a distro de sua preferência. Eu particularmente prefiro o Ubuntu e atualmente estou utilizando a versão 16.04 LTS, uma versão estável e com suporte estendido. Todos os comandos e configurações que passarei neste post servem para Ubuntu e Debian, nada contra as demais distros, mas sugiro que experimente todas quando possível. Então vamos lá!

Aplicações para desenvolver front-end no Linux

Para os que já sabem quais as aplicações necessárias essa parte será indispensável, mas para você que está começando isso será essencial, pois é importante conhecer o que se vai utilizar antes de colocar a mão na massa.

Instalando e configurando

Primeiramente após a instalação do sistema operacional (que no meu caso é o Ubuntu) adicione um repositório para atualização de alguns pacotes do sistema e logo após atualize a inserção desse repositório. Isso pode ser feito com o comando abaixo:

sudo add-apt-repository -y ppa:ondrej/php && sudo apt-get update

Agora que já sabemos tudo o que precisamos e estamos com tudo preparado, vamos pôr a mão na massa e fazer a mágica acontecer. Na sequência teremos o nome da aplicação o comando de instalação e caso necessário a configuração. Para começar abra o terminal (Esse será seu maior aliado no mundo Dev), pressione Ctrl+Alt+t e siga os passos a seguir.

Como estamos agora no terminal, vamos utilizar um editor de textos direto nele. Das opções disponíveis eu escolhi o Vim. Instalá-lo é simples, basta executar o comando abaixo

sudo apt-get install vim

Servidor web Apache

Para que nossas aplicações web rodem corretamente precisaremos de um serviço de tratamento de requisições web. Existem alternativas, mas optaremos pelo apache.

Instalando o Apache

sudo apt-get install apache2

Configurando

Existe uma configuração básica para o apache, para realizá-la abra o arquivo de configuração do apache e logo após siga os próximos passos.

sudo vim /etc/apache2/apache2.conf

Encontre duas linhas como essa abaixo

AllowOverride none

Altere para:

AllowOverride All

Habilite o módulo do apache que permite a sobrescrita de url, esse módulo permite que sua aplicação possa ter mais páginas. Para habilitá-lo execute o seguinte comando:

a2enmod rewrite

Com isto já podemos utilizar o apache, mas antes vamos instalar todos os programas e serviços necessários para que possamos utilizá-lo da melhor maneira possível, utilizando de seus recursos de maneira prática.

Banco de dados Mysql

Mysql um gerenciador de banco de dados baseado na linguagem estruturada SQL (Structured Query Language). O Mysql tem inúmeros módulos para suportar vários tipo de aplicações, seja ela pra web ou desktop, no nosso caso web. Então junto com o Mysql instalaremos os módulos necessários para que ele opere junto com as demais aplicações que utilizaremos para nos tornarmos desenvolvedores front-end no Linux.

Instalando o Mysql

Copie e cole o comando abaixo no seu terminal. Em uma etapa da intalação será solicitada uma senha para o usuário root, que será o administrador de toda a base de dados que for criada futuramente em sua instalação. Lembre-se de guardar bem essa senha, isso é muito importante.

sudo apt-get install mysql-server libapache2-mod-auth-mysql php7.0-mysql

PHP

O PHP é uma linguagem de programação orientada a objetos. É atualmente uma das mais utilizadas por desenvolvedores web no back-end das mais variadas aplicações web. Mas espera ai, não estamos falando em nos tornarmos desenvolvedores front-end? Sim, mas é essencial conhecermos esse lado da web, pois boa parte dos projetos web tem em seu core o PHP. Prosseguindo… Para instalarmos o PHP no Linux basta executar o seguinte comando:

sudo apt-get install php7.0 libapache2-mod-php7.0 php7.0-mcrypt php7.0-mysql php7.0-curl

Com isso temos agora instalado o PHP 7.0 com aluns módulos essênciais

Configurando o PHP

O PHP assim como tudo todos os serviços que instalamos no Linux vêm com boa parte de suas brechas fechadas, mas como vamos utilizar para desenvolver precisamos deixar abertas algumas dessas brechas. Precisaremos saber se estamos escrevendo bem o nosso código, então habilitaremos as mensagens de erro do PHP, essas mensagens são de suma importância para nós desenvolvedores, mas que de maneira alguma pode estar habilitada em produção. Você não vai querer que ninguém saiba o que há de errado em sua aplicação não é mesmo? Então vamos em frente.
Para fazer com que o PHP nos mostre os erros de compilação/interpretação, abriremos o arquivo de configuração do PHP php.ini e alteraremos uma única linha.

Para isso abra o arquivo com o comando abaixo:

vim /etc/php/7.0/apache2/php.ini

Encontre a linha abaixo digitando ? (interrogação) digitando uma parte do texto e pressionando enter, altere o Off para On e salve.

display_errors = Off

Agora que temos toda a base para desenvolver front-end no Linux, vamos fazer valer todas as alterações que fizemos até o momento.

Reinicie o apache com o seguinte comando:

sudo service apache2 restart

ou

sudo /etc/init.d/apache2 restart

A diferença entre os dois é que o segundo comando te dará um retorno mais legível sobre o status do apache.

Agora para finalizar vamos dar as devidas permissões ao diretório padrão de hospedagem do Apache. Para isso basta executar o seguinte comando:

cd /var && sudo chmod 777 -R www

Caso queira testar se tudo deu certo até aqui navegue até o diretório de hospedagem do apache (pode ser via interface gráfica), seguindo o caminho /var/www/html, e crie dentro desse diretório um arquivo php com o nome info.php com o conteúdo <?php phpinfo(); ?>. Logo após vá abra o Google Chrome e insira a url http://localhost/info.php. O resultado deve ser alg assim:

info.php - Resultado

Ferramentas

Cada desenvolvedor tem suas ferramentas preferidas para escrever seus códigos, e gerir suas aplicações, mas quais são as melhores? Bom existem inúmeras discussões sobre esse assunto, mas nunca se chega a nenhuma conclusão, já que cada dev tem suas preferências e monta seu workflow de acordo com ela. Vou passar para vocês todas as ferramentas que utilizo atualmente para desenvolver meus projetos, e junto delas vou passar algumas alternativas, mas darei ênfase apenas nas que utilizo, ok!? Então vamos lá!

IDE

IDE é o ambiente onde você desenvolverá as suas aplicações, seja ela web ou desktop, essa será a ferramenta que você mais utilizará. Eu atualmente utilizo o Sublime, mas existem alternativas como o Atom, Brackets, Light Table entre outros. Ambos são editores de texto especiais, pois contam com uma gama de plugins que podem ser instalados para se tornarem a IDE ideal para cada tipo de linguagem e gosto.

Sublime text 3

O Sublime foi a minha escolha por ser ter uma grande quantidade de plugins, temas e por sua usabilidade. O seu único problema é que ele não é free como os demais.

Instalando o Sublime

O sublime conta com um repositório PPA de onde podemos obter atualizações automáticas, ficando assim sempre com sua última versão e com todas as suas melhorias. instalá-lo é fácil, primeiro adicionaremos o seu repositório à lista de repositórios do Linux, logo após verificaremos as atualizações e depois instalaremos. Esses passos são a descrição dos comandos abaixo respectivamente, então basta executá-los.

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

Configurando o Sublime

Minhas configurações do sublime se encontram neste link em meu Google Drive. Para configurar o seu sublime basta copiar o conteúdo deste do link acima e copiar no arquivo de configurações de usuário do sublime. Esse arquivo está no menu Preferences -> Settings. Os plugins que utilizo estão nesse outro link do meu drive, para instalá-los você deve antes instalar o gerenciador de pacotes do Sublime o Package Control. Para instalar o Package Control abra o console do sublime no menu View –> Show Console, cole o conteúdo do abaixo e pressione a tecla Enter

import urllib.request,os,hashlib;
h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76';
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();
dh = hashlib.sha256(by).hexdigest();
print('Error validating download (got %s instead of %s),
please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Após instalar o package control abra o instalador de pacotes com o atalho ctrl+shift+p e logo em seguida digite Package Control: Install Package. Isso abrira uma lista de plugins disponíveis, então basta instalar um a um na lista que disponibillizei. Caso haja alguma dúvida, seja ela qual for faça um comentário abaixo ou entre em contato comigo, ficarei muito feliz em te ajudar 😀

FTP Filezilla

O FTP é ainda um dos meios mais utilizados para o upload e manutenção de arquivos em servidores, pois você não vai manter uma aplicação em um PC, a não ser que tenha um link dedicado. FTP não é o melhor meio para se trabalhar com manutenção remota de códigos, mas muitos dos atuais servidores ainda não liberam outros meios como o SSH que é a ideal, pois podemos trabalhar com ferramentas de versionamento, mas como este artigo é focado nos iniciantes, vamos voltar ao FTP. Minha indicação é o Filezilla. É claro que a melhor forma de dar manutenção em uma aplicação online não é via FTP, mas infelizmente a maioria das hospedagens, ou pelo o menos as mais utilizadas aqui no Brasil não dão acesso a SSH, então vamos ao recorrer ao FTP.
Para instalá-lo basta seguir os três comandos abaixo, isso mesmo, o método é o mesmo que utilizamos para instalar o Sublime

sudo add-apt-repository ppa:n-muench/programs-ppa
sudo apt-get update
sudo apt-get install filezilla

Configurando o Filezilla

Após instalar o Filezilla é interessante configurar algumas coisinhas como o editor padrão para alguns tipos de arquivo e a quantidade de arquivos transferidos por vez numa fila em processamento. Primeiro vamos escolher o editor padrão para os tipos de arquivos com os quais vamos trabalhar. Para tanto vá ao menu Edit > Preferences. Uma janela de configurações se abrirá, então em seguida vá a Filetype Associations e cole o conteúdo abaixo, substituindo o que já existe. Isso deixará tudo mais fácil.

html /opt/sublime_text/sublime_text
js /opt/sublime_text/sublime_text
php /opt/sublime_text/sublime_text
css /opt/sublime_text/sublime_text
scss /opt/sublime_text/sublime_text
py /opt/sublime_text/sublime_text
txt /opt/sublime_text/sublime_text
. /opt/sublime_text/sublime_text

Agora vamos definir a quantidade de arquivos que será processado por vez numa fila de envio ou recebimento de arquivos. Para isso vamos novamente ao menu Edit > Preferences e logo após na opção Transfers. Nessa opção podemos aumentar o número da opção Maximum simultâneos transfers para no máximo 10 que é o limite. O FTP não é o meio de transferência de arquivos mais rápido e essa configuração irá ajudar um bocado. Lembrando que durante a transferência podem haver alguns erros como o arquivo não ser enviado, mas isso vai depender principalmente da sua conexão. Eu particularmente não tenho problemas com isso, então deixo dessa forma.

Gerenciador de Banco de dados

Utilizamos gerenciadores de bancos de dados para ter fácil acesso à bancos de dados remotos. Minha escolha foi o Navicat. Ele não possui versão oficial para Linux, mas há uma maneira de realizar sua instalação com um pacote .deb (tipo de programas para sistemas baseados no debian).

Instalando o Navicat

Essa versão do Navicat tem uma pequena dependência, o Wine que nada mais é do que um compatibilizador de ambiente do windows no Linux. Não vou me aprofundar nele, pois esse não é o foco do artigo. Para instalar essa dependência vamos adicionar um repositório que contenha esse pacote, atualizá-lo e logo após instalá-lo, para isso basta seguir os comandos abaixo:

sudo add-apt-repository ppa:ubuntu-wine/ppa
sudo apt-get update sudo apt-get install --install-recommends winehq-devel

Agora que já suprimos as dependências vamos baixar o Navicat nesse link que estou disponibilizando e logo após execute o comando abaixo para fazer a instalação.

sudo dpkg -i Navicat.deb

Execute uma vez a aplicação para que os arquivos de configuração tomem o seu devido posto no sistema operacional, um erro ocorrerá, mas não se preocupe, faz parte do processo. Então reinicie o sistema e o Navicat já estará pronto para ser utilizado.

Navegador web

Imagino eu que você já saiba da existência de inúmeros navegadores para acessar conteúdos na web, imagino também que saiba que os navegadores são os principais exibidores das aplicações que nós os desenvolvedores front-end faremos. Opto como a maioria dos front-ends pelo Chrome, que possui inúmeros facilitadores como plugins e ferramentas nativas que nos servem muito bem. Para instalar o Google Chrome no Linux siga os comandos abaixo.

sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

Versionamento de códigos

Se você ainda não trabalha com versionamento, te aconselho a começar ainda hoje, pois esse é um processo utilizado nas maiores empresas de desenvolvimento de qualquer plataforma que seja. Não vou ensinar a utilizá-lo aqui, isso é assunto para um outro post. Para versionar seu código você irá utilizar o git, você pode criar um servidor de versionamento em seu próprio PC ou notebook, mas isso inviabiliza a verdadeira função do Git que é o de versionar projetos com trabalho em equipe. Vamos utilizar o Bitbucket que é uma alternativa ao Github. A grande diferença entre os dois é que o Bitbucket dá a opção de criar projetos privados gratuitamente, mas com limite de tamanho, isso o torna uma ótima opção.
Para iniciar o versionamento de seus projetos, primeiro instale o git em seu PC.

sudo apt-get install git

Te aconselho a aprender a trabalhar com versionamento o quanto antes e pensando nisso fiz um post falando um pouco sobre o assunto e sugerindo um o Bitbucket como serviço para trabalhar com versionamento. Então não espere muito tempo assim que terminar de montar o seu ambiente de desenvolvimento front-end no Linux aprenda o básico de Git e Bitbucket e fique antenado.

Layouts

Um dos grandes pontos fracos de se utilizar o Linux para desenvolver o front-end de aplicações é a parte gráfica. O Linux conta com muitas ferramentas de manipulação de imagens, mas ao meu ver o Photoshop ainda é a melhor das opções. Graças a enorme comunidade de utilizadores e desenvolvedores de soluções para Linux, hoje temos como instalar a última versão disponível do Photoshop no Linux. Para isso siga os passos do grande Dionatan Simioni do blog Diolinux no vídeo abaixo. Aviso que o processo é bastante demorado.

Segue um link para download do Photoshop CC. Caso o Photoshop não esteja executando bem em seu PC, por qualquer motivo que seja você tem uma alternativa interessante, o Project Parfait, criado pela própria Adobe. Se trata de uma espécie de Photoshop online, bem interessante.

Ferramentas e features extras

Terminal Hyperterm

O Hyperterm é um projeto muito interessante desenvolvido com HTML, CSS e Javascript, ainda não o configurei como gostaria, mas se quiser experimentá-lo basta baixar o pacote .deb neste link e instalá-lo como comando abaixo:

sudo dpkg -i hyper-1.0.0.deb

Tema bonitinho para o apache

O Apache é um dos melhores servidores para aplicações web, mas peca um pouco no no estilo da indexação de seu conteúdo, isso não atrapalha em nada na em sua performance, mas podemos melhorar isso com um tema para instalá-lo é fácil, basta baixá-lo neste link. Descompacte o conteúdo e o mova para a raiz do seu servidor local.

Tema padrão apache

cp _h5ai /var/www/html

Agora configure o apache para que ele utilize este tema como o principal indexador. Para isso edite o arquivo de índices do apache

sudo vim /etc/apache2/mods-enabled/dir.conf

Encontre uma linha parecida com essa e deixe como abaixo:

DirectoryIndex index.html index.php

/_h5ai/public/index.php

Agora reinicie o apache e seja feliz.

sudo /etc/init.d/apache2 restart

O resultado é um índice muito mais interessante e com muito mais opções como ordenação e busca, lindão não é!?

Tema para Apache

Conclusão

Você pôde ver que trabalhar front-end no Linux é possível! É claro que a curva de aprendizado pode ser um pouco grande, mas será de grande vália para o seu aprendizado no mundo open source. Ao começar a utilizar Linux você terá uma visão um pouco diferente do que é o mundo dos devs, aprenderá que a comunidade te dará o maior apoio e que assim como você existem inúmeras pessoas que estão começando agora tanto no mundo dev quanto no universo open source. Espero que com esse post eu tenha despertado a mínima curiosidade em você, e que com ele você possa evoluir mais e mais profissionalmente, se tornando um grande dev, conhecedor das possibilidades e vantagens e desvantagens de se tornar um dev no Linux. Aguardo você no próximo post, tenha ótimos estudos. Bye!