O documento discute como ferramentas (tooling) podem aumentar a produtividade no desenvolvimento front-end para web. Algumas ferramentas mencionadas incluem editores como o Atom, gerenciadores de pacotes como o npm e bower, e task runners como o Gulp e Grunt para automatizar tarefas. Embora task runners sejam úteis, eles também podem apresentar desvantagens como dependência de plugins e complexidade na depuração. NPM Scripts são apresentados como uma alternativa mais simples para executar tarefas.

1. Tooling
Aumentando a produtividade no desenvolvimento front-end para web

2. Eu
Herson Leite
Desenvolvedor de Software
Twitter: hersonls
Email: hersonls@gmail.com

3. Projetos
● Devitz
● PUG-MA
● Hacker Clube

4. O que é Tooling?

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

6. E como tooling pode aumentar a
produtividade?

7. Uma construtora
consegue executar
suas tarefas sem
boas ferramentas?

8. O mesmo acontece para o
desenvolvimento para web!

9. 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

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

11. Editores

12. Atom
● Linters
● Snippets
● Code format
● Color picker
● Autocomplete
● Git

13. Editores - Atom - Linter
color-picker

14. Editores - Atom - Snippets
color-picker

15. Editores - Atom - Autocomplete
color-picker

16. Editores - Atom - Color Picker
color-picker
pigments

17. Editores - Atom - Code format
atom-beautify
Sem código formatado Código formatado

18. Editores - Atom - Máquina do tempo Git
atom-beautify

19. Package manager

20. Processo de configuração de
um plugin jQuery:
1. Ir ao site do plugin
2. Baixar arquivo comprimido
3. Descompactar
4. Copiar estilos
5. Copiar Javascript
6. Copiar imagens
7. Copiar fonts
8. Adicionar paths de estilos no HTML
9. Adicionar paths de scripts no HTML
1. Ir ao site do plugin
2. Baixar arquivo comprimido
3. Descompactar
4. Copiar para diretório de libs
5. Adicionar paths de estilos no HTML
6. Adicionar paths de scripts no HTML
Processo 1 Processo 2

21. 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.

22. Package managers para web
● npm
● bower

23. Bower

24. Processo de configuração de
um plugin jQuery com bower:
1. Ir ao site do plugin
2. Baixar arquivo comprimido
3. Descompactar
4. Copiar estilos
5. Copiar Javascript
6. Copiar imagens
7. Copiar fonts
8. Adicionar paths de estilos no HTML
9. Adicionar paths de scripts no HTML
1. $ bower install bootstrap4
2. Adicionar paths de estilos no HTML
3. Adicionar paths de scripts no HTML
Processo sem bower Processo com bower

25. Live code

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

27. 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

28. Browser-Sync

29. Tasks ( tarefas )

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

31. 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

32. Task Runners

33. Gulp e Grunt

34. Tasks sem a utilização task runner

35. Tasks com a utilização de task runner

36. São ótimas ferramentas mas
nem tudo é perfeito

37. 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

38. O que fazer?

39. NPM Scripts

40. NPM Scripts

41. NPM Scripts

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

43. Prós
NPM 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

44. Fim