Lightning Talk: Webdev who?

285 visualizações

Publicada em

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.

Publicada em: Internet
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
285
No SlideShare
0
A partir de incorporações
0
Número de incorporações
17
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Lightning Talk: Webdev who?

  1. 1. Lightning talk - Dia do programador Webdev who ? Leandro Nunes leandrof@ciandt.com
  2. 2. Leandro Nunes 2000~ Webdev / AS3 developer (Flash) 2009~ Webdev @ Coca-Cola
  3. 3. Coca-Cola
  4. 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. 5. Motivação
  6. 6. Quem é o Webdev da web atual ?
  7. 7. Web Developer Projetista de interfaces UI engineer Web Designer Designer de Interação
  8. 8. “Menino do HTML”
  9. 9. 2012- ● Layouts estáticos / fluídos ● Poucos navegadores ● Poucas versões ● Poucas resoluções ● Poucos dispositivos ● Limitação técnica = Flash
  10. 10. A internet “cresceu”...
  11. 11. 2012+ ... ● Layouts responsivos ● Diversos navegadores ● Diversas versões ● Diversas resoluções ● Diversos dispositivos ● R.I.P. Flash
  12. 12. O “menino do HTML” também cresceu!
  13. 13. != Telinha bonitinha
  14. 14. Front-end que liga as peças...
  15. 15. … de front com o usuário
  16. 16. “80-90% da performance de um website está no front-end”
  17. 17. http://browserdiet.com/pt/
  18. 18. Front-end engineer
  19. 19. 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/
  20. 20. 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)
  21. 21. 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
  22. 22. Pré-processadores (CSS) ● SASS (.scss, .sass) ● LESS (.less) ● Stylus (.styl)
  23. 23. Automatizador de tarefas ● Grunt http://gruntjs.com/ ● Gulp http://grulpjs.com/ ● Scaffold http://yeoman.io/ ● Live-reload ● Browser-Sync http://www.browsersync.io
  24. 24. Plugins APIs nativas
  25. 25. Funcionalidades nativas ● HTML: <canvas> ● HTML: <video> ● HTML: <picture> ● JS: LocalStorage / SessionStorage ● JS: Geolocation ● JS: WebSocket ● JS: GetUserMedia ● CSS: Transition / Animation
  26. 26. Separando homens de meninos
  27. 27. <web-components> (http://webcomponents.org) ECMAScript 6
  28. 28. “A melhor forma de fazer o trabalho bem feito, é gostando do que fazemos” <3 JS
  29. 29. THANK YOU FOR YOUR TIME!

×