Upload
leandro-nunes
View
129
Download
5
Embed Size (px)
DESCRIPTION
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.
Citation preview
Leandro Nunes
2000~ Webdev / AS3 developer (Flash)2009~ Webdev @ Coca-Cola
Coca-Cola
Cenário Coca-Cola
● Projetos complexos
● Nível de segurança altohigh:0 | medium:0 | low:1
● Abrangência nacional e mundial
● Tecnologias e tendências atuais
● Pra ontem !!!
Motivação
Quem é o Webdevda web atual ?
Web Developer
Projetista de interfaces
UI engineer
Web Designer
Designer de Interação
“Menino do HTML”
2012-● Layouts estáticos / fluídos
● Poucos navegadores
● Poucas versões
● Poucas resoluções
● Poucos dispositivos
● Limitação técnica = Flash
A internet “cresceu”...
2012+ ...● Layouts responsivos
● Diversos navegadores
● Diversas versões
● Diversas resoluções
● Diversos dispositivos
● R.I.P. Flash
O “meninodo HTML” também cresceu!
!= Telinha bonitinha
Front-end que liga as peças...
… de front com o usuário
“80-90% da performance de um website está no front-end”
http://browserdiet.com/pt/
Front-end engineer
Frameworks MV*
● AngularJShttps://angularjs.org
● KnockoutJShttp://knockoutjs.com
● BackboneJShttp://backbonejs.org
● EmberJShttp://emberjs.com
● Sencha ExtJShttp://www.sencha.com/products/extjs/
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)
Qualidade de código
● Design patterns
● JavaScript modular
● Testes UnitáriosJasmine - http://jasmine.github.ioQUnit - http://qunitjs.comMocha - http://visionmedia.github.io/mocha
● Testes FuncionaisPhantomJS - http://phantomjs.orgSlimerJS - http://slimerjs.orgCasperJS - http://casperjs.org
Pré-processadores (CSS)
● SASS(.scss, .sass)
● LESS(.less)
● Stylus(.styl)
Automatizador de tarefas
● Grunthttp://gruntjs.com/
● Gulphttp://grulpjs.com/
● Scaffoldhttp://yeoman.io/
● Live-reload
● Browser-Synchttp://www.browsersync.io
Plugins
APIs nativas
Funcionalidades nativas
● HTML: <canvas>
● HTML: <video>
● HTML: <picture>
● JS: LocalStorage / SessionStorage
● JS: Geolocation
● JS: WebSocket
● JS: GetUserMedia
● CSS: Transition / Animation
Separando homens de meninos
<web-components>(http://webcomponents.org)
ECMAScript 6
“A melhor forma de fazer o trabalhobem feito, é gostando do que fazemos”
<3 JS
THANKYOU
FOR YOURTIME!