Este documento discute a profissão de engenheiro front-end, incluindo suas responsabilidades, habilidades necessárias e tendências atuais e futuras. Apresenta a evolução das tecnologias front-end ao longo do tempo e discute como a profissão tem se adaptado aos novos desafios trazidos por dispositivos móveis e plataformas diversas. Também destaca a importância das comunidades front-end no Brasil.

1. FRONT END ENGINEERS
passado,
presente
e
futuro

2. I’mDAVIDSON FELLIPE

3. WORKS

5. OUTROS NOMES DA
PROFISSÃO
front end
developer
htmler
web developerimplementador
de interfaces
web
UI engineer

6. http://www.youtube.com/watch?v=lXGDRrkaRgU
I’m a
front end
engineer

7. O QUE FAZ UM
FRONT END
ENGINEER?

8. APTO A SE COMUNICAR
Product Managers
End Users
Engineering Management
User Interface Designers

9. “é o pro!ssional capaz de explorar o
front-end de uma aplicação web não só
como layout, mas como interface móvel,
mutante, interativa, proporcionando,
assim, uma experiência de uso mais rica”
Berg Brandt
Senior Frontend Engineer no Yahoo!

10. QUAL FORMAÇÃO
ADEQUADA PARA
FRONT END
ENGINEER?

11. frontend-br no
Y!
iniciado por um
grupo de devs
de recife
COMO COMEÇOU?

12. COMUNIDADE HOJE
Vários evento na área
+ interação
Projetos de código aberto conhecidos
Pro!ssionais com destaque internacional

13. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.communityjs.org

14. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.communityjs.org

15. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.braziljs.org

16. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.braziljs.com.br

17. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.frontinbh.com.br

18. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.riojs.org/conf

19. ERA UMA VEZ...

20. http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...

21. LAYOUT USANDO
TABLE?

22. ENQUANTO ISSO EM 2000...

23. HTML
CSS
2006...

24. precisa saber
JAVASCRIPT?
2006...

25. ATUALMENTE...

26. + poderosas
+ complexas
+ ambiciosas
2013...

27. www.igvita.com/slides/2012/devtools-tips-and-tricks/
CICLO DE VIDA DE UMA
WEBPAGE

28. ATUALMENTE...
http://httparchive.org/trends.php

29. ATUALMENTE...
http://httparchive.org/trends.php

30. XBROWSER
XDEVICE
XPLATFORM

31. XBROWSER
XDEVICE
XPLATFORM

32. http://ondeviceresearch.com/
USUÁRIOS APENAS
MOBILE

33. Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIA
DOS COMPONENTES
outros - incluem conexões 3G e text rendering
css e js - maior consumo relacionado a transmissão e rendering

34. websites precisam ter exatamente o
mesmo visual em todos os browsers?

36. TECNOLOGIAS

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

38. MULTITASKING...
@flavioribeiro na globo.com

39. SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB

40. DOTFILES

41. DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda

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

43. CONTROLE
DE
VERSÃO

44. https://bitbucket.org/

45. BITBUCKET VS GITHUB
repos privados
ilimitados
preço baseado no
número de
colaboradores
número de
colaboradores ilimitado
preço baseado no
número de repositórios
privados

46. TASK RUNNER

47. http://gruntjs.com/

48. O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript

49. O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watchers para Pré-processadores

50. PRÉ-PROCESSADORES

58. QUALIDADE
DE
CÓDIGO

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

60. CSSLINT
http://csslint.net/

61. TESTES

64. PERFORMANCE

65. performance de frontend?
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

66. PRINCIPAIS CUIDADOS
● Minificar CSS, JavaScript e HTML
● Inline imagens, CSS, e JavaScript
● Cache de assets
● Defer JavaScript
● Concatenar CSS e JavaScript
● Compressão de imagens & resizing

67. YSLOW
http://developer.yahoo.com/yslow/

68. YSLOW, MANTENEDOR?
https://twitter.com/marcelduran
brasileiro
@marcelduran

69. PAGE SPEED
https://developers.google.com/speed/pagespeed/insights

70. +PERFORMANCE?
http://browserdiet.com/pt

71. TEM ATÉ EM CHINÊS...
http://browserdiet.com/zh

72. SPEEDLIMIT
http://mschrag.github.io

73. JSLITMUS
http://mschrag.github.io

74. WEBPAGETEST

75. WEBPAGETEST

76. WEBPAGETEST

77. MAIS TOOLS

78. GRADIENTES?
http://www.colorzilla.com/gradient-editor/

79. GITIFIER
http://psionides.github.io/Gitifier/

80. MICROJS
http://microjs.com/#

81. http://html5boilerplate.com/

82. MAS O QUE
ESTÁ VINDO
POR AÍ?

83. SPDY
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

84. WEB COMPONENTS
http://www.w3.org/TR/2013/WD-components-intro-20130606/

85. POLYMER
http://www.polymer-project.org/

86. SHOW
YOUR
CODE

87. CONTRIBUA
EM
PROJETOS
OPENSOURCE

88. CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing

89. COMO SE MANTER
ATUALIZADO?

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

91. 6 SEMANAS?

92. http://html5weekly.com/

93. http://javascriptweekly.com

94. http://braziljs.org/

95. http://oswaldoacauan.github.io/keep-up-to-date-brazuca/

96. AH...
É MUITA COISA
PARA ESTUDAR...

98. www.fellipe.com/talks
slides disponíveis em...

99. obrigado
CONVESCOTE!
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com/talks