Lightning Talk: Webdev who?

Neste Lightning Talk falei um pouco sobre o antigo cenário da internet, seu crescimento e como isso influenciou as necessidades evolutivas e consequentemente a qualidade do atual desenvolvedor front-end.

Transcript

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!