Lightning talk - Dia do programador

Webdev who ?

Leandro Nunesleandrof@ciandt.com

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!