ToolingAumentando a produtividade no desenvolvimento front-end para web

Eu

Herson Leite

Desenvolvedor de Software

Twitter: hersonls

Email: hersonls@gmail.com

Projetos

● Devitz● PUG-MA● Hacker Clube

O que é Tooling?

É o termo utilizado para o uso de ferramentas ( tools ) para a automatização/execução de tarefas.

E como tooling pode aumentar a produtividade?

Uma construtora consegue executar suas tarefas sem boas ferramentas?

O mesmo acontece para o desenvolvimento para web!

O que são tools no

desenvolvimento para web?

● Editores● Task runner● Package manager● Scripts● Virtualização● Cloud-based tools● Linters● Pré-processadores● Compiladores● Comandos unix

Conhecendo alguns deles:● Editores● Package manager● Live code● Tasks● Task runner

Editores

Atom

● Linters● Snippets● Code format● Color picker● Autocomplete● Git

Editores - Atom - Linter

color-picker

Editores - Atom - Snippets

color-picker

Editores - Atom - Autocomplete

color-picker

Editores - Atom - Color Picker

color-picker

pigments

Editores - Atom - Code format

atom-beautify

Sem código formatado Código formatado

Editores - Atom - Máquina do tempo Git

atom-beautify

Package manager

Processo de configuração de um plugin jQuery:

1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar estilos5. Copiar Javascript6. Copiar imagens7. Copiar fonts8. Adicionar paths de estilos no HTML9. Adicionar paths de scripts no HTML

1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar para diretório de libs5. Adicionar paths de estilos no HTML6. Adicionar paths de scripts no HTML

Processo 1 Processo 2

Package manager ( gerenciador de pacotes ) é um utilitário que busca pacotes de plugins/bibliotecas/frameworks em um determinado repositório, faz o download, e configura uma nova instalação em um projeto.

Package managers para web

● npm● bower

Bower

Processo de configuração de um plugin jQuery com bower:

1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar estilos5. Copiar Javascript6. Copiar imagens7. Copiar fonts8. Adicionar paths de estilos no HTML9. Adicionar paths de scripts no HTML

1. $ bower install bootstrap42. Adicionar paths de estilos no HTML3. Adicionar paths de scripts no HTML

Processo sem bower Processo com bower

Live code

É a visualização em "tempo-real" das modificações realizadas no projeto.

Browser-Sync

● Instala e roda em qualquer lugar● Gratuito● Fácil de integrar com task runners● Network Throttle● Interação síncrona ( Qualquer

interação é espelhada em todos os navegadores )

● Sincronização de arquivos● Histórico de URL

Browser-Sync

Tasks ( tarefas )

São comandos ou sequência de comando que são executados para atingir um determinado objetivo.

Tasks ( tarefas ) ● Inserção automática de pacotes instalados no projeto

● Conversão de SASS/LESS para CSS● Autoprefixer de estilos CSS● Compressão de estilos● Conversão de ES5/CoffeeScript/TypeScript

para Javascript● Compressão de javascripts● Compressão de imagens● Compressão de HTML● Criação de build de projetos● Browser-Sync

Task Runners

Gulp e Grunt

Tasks sem a utilização task runner

Tasks com a utilização de task runner

São ótimas ferramentas mas nem tudo é perfeito

Contras da utilização de task runners

● Sintaxe própria● Dependência de criadores de plugins

○ Adiciona uma camada extra de abstração

● Frustração na hora de fazer debugging○ É o utilitário que está quebrado?○ É o plugin do grunt que está quebrado?○ É minha configuração que está quebrada?○ Eu estou usando uma versão incompatível do plugin?

● Documentação de plugins fracas

O que fazer?

NPM Scripts

NPM Scripts

NPM Scripts

Porque não utilizar bash script ao invés de NPM Scripts?

PrósNPM Scripts

● Hooks● Argumentos● Variáveis de configurações● Piping● Encadeamento● Scripts centralizados em um único arquivo● Descentralizar comandos quando complicados● Módulos para executar todos os comando

sequenciais ou paralelamente● Watcher

Fim