O documento apresenta o papel atual de um desenvolvedor front-end, descrevendo como as tecnologias e responsabilidades evoluíram desde 2012. O desenvolvedor front-end agora é responsável por criar interfaces responsivas que funcionam em diversos dispositivos e navegadores usando frameworks como AngularJS e padrões como testes automatizados e pré-processadores de CSS. O documento também lista diversas ferramentas e tecnologias atuais usadas por desenvolvedores front-end.

1. Lightning talk - Dia do programador
Webdev who ?
Leandro Nunes
leandrof@ciandt.com

2. Leandro Nunes
2000~ Webdev / AS3 developer (Flash)
2009~ Webdev @ Coca-Cola

3. Coca-Cola

4. Cenário Coca-Cola
● Projetos complexos
● Nível de segurança alto
high:0 | medium:0 | low:1
● Abrangência nacional e mundial
● Tecnologias e tendências atuais
● Pra ontem !!!

5. Motivação

6. Quem é o
Webdev
da web
atual ?

7. Web Developer
Projetista de
interfaces
UI engineer
Web Designer
Designer de
Interação

8. “Menino do HTML”

9. 2012-
● Layouts estáticos / fluídos
● Poucos navegadores
● Poucas versões
● Poucas resoluções
● Poucos dispositivos
● Limitação técnica = Flash

10. A internet “cresceu”...

11. 2012+ ...
● Layouts responsivos
● Diversos navegadores
● Diversas versões
● Diversas resoluções
● Diversos dispositivos
● R.I.P. Flash

12. O “menino
do HTML”
também
cresceu!

13. != Telinha bonitinha

14. Front-end que liga as peças...

15. … de front com o usuário

16. “80-90% da performance de um
website está no front-end”

19. http://browserdiet.com/pt/

21. Front-end engineer

22. Frameworks MV*
● AngularJS
https://angularjs.org
● KnockoutJS
http://knockoutjs.com
● BackboneJS
http://backbonejs.org
● EmberJS
http://emberjs.com
● Sencha ExtJS
http://www.sencha.com/products/extjs/

23. Qualidade de código
● JSHint
(Validador de código JavaScript)
● CSSLint
(Validador de código CSS)
● Controle de dependências
(Bower)
● SEO / Semântica / Acessibilidade
(Search Engine Optimization)
● Performance
(PageSpeed, YSlow, WebPagetest)

24. Qualidade de código
● Design patterns
● JavaScript modular
● Testes Unitários
Jasmine - http://jasmine.github.io
QUnit - http://qunitjs.com
Mocha - http://visionmedia.github.io/mocha
● Testes Funcionais
PhantomJS - http://phantomjs.org
SlimerJS - http://slimerjs.org
CasperJS - http://casperjs.org

25. Pré-processadores (CSS)
● SASS
(.scss, .sass)
● LESS
(.less)
● Stylus
(.styl)

26. Automatizador de tarefas
● Grunt
http://gruntjs.com/
● Gulp
http://grulpjs.com/
● Scaffold
http://yeoman.io/
● Live-reload
● Browser-Sync
http://www.browsersync.io

27. Plugins
APIs nativas

28. Funcionalidades nativas
● HTML: <canvas>
● HTML: <video>
● HTML: <picture>
● JS: LocalStorage / SessionStorage
● JS: Geolocation
● JS: WebSocket
● JS: GetUserMedia
● CSS: Transition / Animation

29. Separando homens de meninos

30. <web-components>
(http://webcomponents.org)
ECMAScript 6

32. “A melhor forma de fazer o trabalho
bem feito, é gostando do que fazemos”
<3 JS

33. THANK
YOU
FOR YOUR
TIME!