Este documento fornece uma introdução sobre o que é desenvolvimento front-end, incluindo as principais tecnologias (HTML, CSS e JavaScript), boas práticas de organização de código e projetos, ferramentas, e como se manter atualizado na área.

1. GUIA DO
FRONT-END
DAS
GALÁXIAS
Davidson Fellipe v4

2. Front in Cuiabá 2015
Frontend Carioca 2014
Rupy Natal 2014
Front in Aracaju 2014
me
apresentada em

3. HTML ~ 2001
senior front-end engineer
globo.com ~ 2010
mais em fellipe.com
me

10. marvin,
Quer ser
front-end

11. ELE ERA
CURIOSO…

12. curiosidade
É um importante combustível
para aprender mais, testar coisas
novas, e lidar com o tentativa e
erro.

13. FRONTEND DEVELOPER
UI ENGINEER
WEB DEVELOPER
PROJETISTA DE INTERFACES
FRONTEND ENGINEER

14. FRONT-END UNICORN
FRONT-END UX NINJA
FRONT-END NINJA

15. MAS O QUÊ
FAZ UM?

16. HTML

17. html
começando do fazer de qualquer
jeito
ao código com sua devida
semântica

18. CSS

19. css
começando do remover
sublinhado de links
até sua relevância para
apresentar visual, animações e
interações e responsividade

20. JAVASCRIPT

21. javascript
da validação de formulários
até ferramenta de grande
relevância para melhoria da
experiência do usuário

22. diferentes navegadores
diferentes versões
diferentes resoluções
diferentes dispositivos
integração

23. começou
a seguir
referências…

24. GRANDES GRINGOS DA ÁREA
@leaverou
@paul_irish
@codepo8
@souders
@slicknet
@stoyanstefanov
@stubbornella
@addyosmani
@rauchg
@sindresorhus
@cowboy
@mathias
@valueof
@rmurphey

25. @zenorocha
@marcelduran
@maujor
@bergbrandt
@fabiomcosta
@eduardolundgren
@jaydson
@almirfilho
@leobalter
@millermedeiros
@caio_gondim
@felipenmoura
NOMES brazucas DA ÁREA
@sergio_caelum
@jcemer

26. O QUE PRECISO
APRENDER?

27. HTML, CSS, JAVASCRIPT, FEATURE DETECTION,
REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP,
CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES,
SVG, CANVAS, LOCALSTORAGE,
WEBCOMPONENTS, WEBSOCKETS,
SHADOW DOM, FERRAMENTAS PARA DEBUG,
SISTEMAS DE GRIDS, SCHEMA.ORG, SEO...
GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC,
TESTES, ANALISADORES DE QUALIDADE DE
CÓDIGO, TASK RUNNERS, PERFORMANCE...
E PORQUE NÃO?

28. HTTP://I1-
NEWS.SOFTPE

29. https://twitter.com/slicknet/status/292103833327370240

30. COMO POR
EM PRÁTICA?

31. ESCOLHENDO UM
EDITOR

36. CRIO UM PADRÃO?

37. BUSCO POR UM
PADRÃO?

40. http://html5boilerplate.com/

41. O que aprendo?
Boa organização de arquivos
Estrutura do HTML, CSS e JS
Projetos em constante evolução

42. GRANDES
PROBLEMAS

43. http://cubic-bezier.com/#.17,.67,.83,.67

44. COMO
ORGANIZAR
MEU PROJETO?

45. definindo uma estrutura

46. padrões
ponto e vírgula;
espaços vs tabulações
aspas simples vs aspas duplas
nomenclaturas para functions, Object
Literal, conditional statement...

47. https://github.com/rwaldron/idiomatic.js/

48. https://github.com/airbnb/javascript

49. COMO
ORGANIZAR
MEU CSS?

50. css nãããããããão

51. CSS
VS
PRÉ-PROCESSADOR

52. vantagens
produtividade
facilidade de trabalhar
com módulos e variáveis
uso de mixins e placeholders

57. PÉSSIMAS PRÁTICAS
COM CSS, PODEM SER
PIORADAS COM
PRÉ-PROCESSADORES

58. fazendo o mal com css
.bisavo {
.avo {
.pai {
#wtf {
color: #f60;
}
}
}
}
.bisavo .avo .pai #wtf {
color: #f60;
}
SCSS CSS

59. http://csslint.net/

60. COMO
ORGANIZAR
MEU JS?

61. APRENDA
ALGORITMOS!!!

62. http://eloquentjavascript.net/

63. https://github.com/braziljs/eloquente-javascript
também em português

64. HTTP://I1-
NEWS.SOFTPE
<3

65. NÃO DESPREZE OS
CUSTOS DO LADO
FRONT-END!

66. MUITAS VEZES
OS CUSTOS PODEM
SER MAIS ALTOS QUE
OS DO BACK-END!

67. aprenda
Design Patterns
Inheritance
Prototype e Promises
Memoize, Throttle e Debounce
Detalhes do JSLint
Escopo de variáveis

68. http://www.jshint.com/
JSHINT

69. ESQUEÇA
FTP COM GUI

70. ESQUEÇA
SVN

71. git, mercurial…
TRABALHAR COM REPOS
ENTENDER BRANCHES, TAGS
PULL REQUEST
ISSUES

72. https://github.com/

73. https://bitbucket.org/

74. COMO GERENCIO
MEU TEMPO?

75. https://trello.com/

76. http://www.yast.com/

77. https://wakatime.com/

78. https://www.rescuetime.com

79. COMO
MANTENHO
MEU PROJETO?

80. http://jasmine.github.io/

81. http://qunitjs.com/

82. http://visionmedia.github.io/mocha/

83. INTEGRAÇÃO
CONTÍNUA

85. processo de deploy

86. TASK
RUNNERS

88. MAKE
ANT
RAKE
CAKE
GULP
GRUNT
SHELL
JAVA
RUBY
COFFEE
JS
JS

89. $ make grunt-config
MAKEFILE
grunt-config:
@echo '✖ installing node'; brew install node;
@echo '✖ installing grunt'; sudo npm install -g grunt-cli;
@sudo npm i --save-dev
make

90. tasks
testes
pré-processadores
js/css lint
criar sprites
concatenação
otimização de imagens

91. task
compass:prod
MAKEFILE
grunt.initConfig({
compass: {
dev: { /* ... */ },
prod: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: 'src/img',
generatedImagesDir: 'build/img',
outputStyle: 'compressed',
noLineComments: true
}}}}); js

92. https://github.com/vigetlabs/grunt-complexity

93. executando
$ grunt compass:dev
$ grunt compass:prod

94. https://github.com/davidsonfellipe/grunt-workflow

95. http://bower.io/

96. http://yeoman.io/

97. automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles

98. PERFORMANCE

99. Qual impacto da
performance?
baixas conversões
baixo engajamento
altas taxas de rejeição

100. https://github.com/davidsonfellipe/awesome-wpo

101. http://browserdiet.com/pt

102. https://github.com/davidsonfellipe/keepfast/

103. OTIMIZAR A
EXPERIÊNCIA
DO USUÁRIO

105. QI
de 30 bilhões de
vezes superior ao
de um ser humano

106. COMO SE MANTER
ATUALIZADO?

107. http://braziljs.org/

108. http://web-design-weekly.com/

109. http://html5weekly.com/

110. http://javascriptweekly.com

113. Aprenda com o
tempo
código limpo
testes
preocupação com
manutenibilidade e
extensibilidade

115. fellipe.com/talks
github.com/davidsonfellipe
twitter.com/davidsonfellipe
obrigado pelos peixes