Modern Frontend

Fala galera!! Neste artigo instruo como preparar um ambiente nice, pra desenvolvimento frontend (e por que não backend em Node?), com as devidas ferramentas que se você ainda não usa atualmente, irão melhorar a sua produtividade, e qualidade de código.

Daí, fica sussa trabalhar:

EDITOR

Vamos começar do básico, primeiro, como editor de código indico o Sublime Text 3. Sim o 3, pois a 2 versão não dá mais suporte pra alguns dos plugins mais modernos do sublime.

  • Sublime é um editor super leve, com suporte a n packages (é como chamamos os plugins dele).
  • Tem suporte a Windows, Mac, e Linux. Baixe no site oficial neste link.

Depois de instalado, você com certeza deve instalar o Package Control, que é o gerenciador de packages dele. Siga as instruções ‘simple’ neste link. Após instalar e reiniciar o sublime, você consegue com o comando command + P (ou ctrl + P, no windows), abrir o Package Control. Grave este comando você irá usar toda a vida. Com o Package Control aberto, você consegue escrever ‘partes’ de uma instrução, e ele lhe lista os comandos que a regex encontra.

Por exemplo, para instalar um package, abra o Package Control (ctrl/command + P), e digite ‘inst’, e você verá comandos como ‘install package’. Inclusive, clique nesta opção, e aguarde um tempo, o Sublime irá listar packages, e daí você digita parte do package que você deseja. Lhe indico veemente a instalar estes packages:

  • Sidebar Enhancements (Adiciona mais opções à sidebar do Sublime)
  • Emmet (melhor produtividade, com atalhos, para fazer html, css, jade)
  • Matherial Theme (é um tema bonitão, seguindo Material Design, e com suporte a retina displays)
  • Jade (syntax highlight caso você venha a usar Jade ao invés de HTML’s)
  • Sass, Less (syntax highlight para preprocessadores CSS)
  • GitGutter (mostra os diffs quando esta trabalhando num repo GIT)

Nos links acima, você encontra mais infos sobre cada um, enjoy!!

Prompt de Comando / Bash

A seguir, e no seu dia a dia, você precisará usar n ferramentas, que serão usáveis através de um prompt de comando. O Windows tem um prompt horrível, indico usar um prompt Unix. No Mac, e Linux, você pode usar o Terminal, ou instalar um iTerm. Independente disso, indico também mudar o bash, eu costumo usar o oh my z-shell, ou simplesmente zsh. Se estiver no linux, ou mac, abra o Terminal, e instale o zsh, e instale via curl, ou wget, instruções neste link.

Este é meu terminal com zsh instalado:

Ahh, nem preciso falar, mas ao instalar o zsh, abra uma nova aba, ou uma nova janela, e verá o mesmo layout, rs.

Já no Windows, não temos um prompt Unix legal, mas graças a galera do Git, temos uma ferramenta que tenta simular um prompt unix, é o Git Bash. Baixe o Git, neste link e ele já virá além do Git, o Git Bash.

Instalado, ou preparado um prompt decente, vamos instalar as ferramentas, que serão usadas constantemente.

Node, e NPM

O Node, é ferramenta, que faz o seguinte, interpreta Javascript, usando o V8 do Google (mesmo interpretador do Google Chrome, que é rápido c@@!#), e passa estes dados pros módulos em C++, resultando numa ferramenta em Javascript que tem acesso full ao hardware e SO, graças ao C++.

O Node vem com um gerenciador de pacotes, chamado NPM, e é pelo NPM, que iremos instalar as demais ferramentas no dia a dia. Primeiro, para instalar o Node (e já vem com NPM), baixe no site oficial. Indico a versão 4 ou superior, pois é compatível com as novidades do Ecma Script 6 (definição do Javascript).

Instalado o Node, em seu prompt, você consegue checar se está tudo instalado com o seguinte comando:

Se retornar a versão, está ok. Ah, pra testar o npm, mesma coisa:

Não se preocupe se você está com uma versão 2.x do NPM, eu estou testando NPM 3, que está em Beta atualmente. Indico que você use uma versão estável a princípio.

Instalado e tudo certo com o Node e NPM, iremos instalar algumas ferramentas, pelo npm. O comando para isto é

npm i --global NOME_DO_MODULO

Indico você a instalar:

  • Gulp (automatizador de tarefas).
  • BrowserSync (Dá reload e injeta css na página automaticamente ao salvar os arquivos, além de subir um server, pra testar seu projeto em n devices/browsers ao mesmo tempo)
  • Yeoman (Oferece generators para criar o scaffolding de um determinado tipo de projeto)
  • generator-bitch (é meu generator para Yeoman, para criar uma aplicação em MEAN (Mongo, Express, Angular, Node), não necessariamente todo o Stack, você seleciona o que exatamente quer. E é todo automatizado com Gulp, experimente, e se curtir, da um star no repositório, e/ou forks são super bem vindos.
  • nodemon (da watch num processo do node, restartando o processo ao salvar algum arquivo .js).

Você consegue instalar todos estes módulos de uma vez com o seguinte comando:

npm i -g gulp browser-sync yo generator-bitch nodemon

Lembrando que o -g, ou — global, é pra instalar o módulo na máquina, ficando disponível via terminal, em qualquer diretório.

Por exemplo, para pegar um projeto em html, css, e/ou javascript, e subir um server no browser-sync, instantaneamente, você pode rodar o seguinte comando:

cd path/to/diretorio
browser-sync start --server --port 4000 --files '*.html, *.css, *.js'

É bem simples, pode parecer muitas ferramentas a princípio, mas depois que se conhece cada uma delas bem, percebe-se a simplicidade, e o ganho que estas irão lhe dar no dia-a-dia, tanto em produtividade, como na qualidade de seu código

Esqueci alguma coisa, comentem aqui, please, e republico o artigo.

Good job!!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.