Frontend Engineers: Passado, presente e futuro

1.

FRONT END ENGINEERS passado, presente e futuro

2.

I’m DAVIDSON FELLIPE

3.

WORKS

4.

None

5.

OUTROS NOMES DA PROFISSÃO front end developer htmler web developer
implementador de interfaces web UI engineer

6.

http://www.youtube.com/watch?v=lXGDRrkaRgU I’m a front end engineer

7.

O QUE FAZ UM FRONT END ENGINEER?

8.

APTO A SE COMUNICAR Product Managers End Users Engineering Management
User Interface Designers

9.

“é o pro!ssional capaz de explorar o front-end de uma
aplicação web não só como layout, mas como interface móvel, mutante, interativa, proporcionando, assim, uma experiência de uso mais rica” Berg Brandt Senior Frontend Engineer no Yahoo!

10.

QUAL FORMAÇÃO ADEQUADA PARA FRONT END ENGINEER?

11.

frontend-br no Y! iniciado por um grupo de devs de
recife COMO COMEÇOU?

12.

COMUNIDADE HOJE Vários evento na área + interação Projetos de
código aberto conhecidos Pro!ssionais com destaque internacional

13.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.communityjs.org

14.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.communityjs.org

15.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.braziljs.org

16.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.braziljs.com.br

17.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.frontinbh.com.br

18.

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.riojs.org/conf

19.

ERA UMA VEZ...

20.

http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...

21.

LAYOUT USANDO TABLE?

22.

ENQUANTO ISSO EM 2000...

23.

HTML CSS 2006...

24.

precisa saber JAVASCRIPT? 2006...

25.

ATUALMENTE...

26.

+ poderosas + complexas + ambiciosas 2013...

27.

www.igvita.com/slides/2012/devtools-tips-and-tricks/ CICLO DE VIDA DE UMA WEBPAGE

28.

ATUALMENTE... http://httparchive.org/trends.php

29.

ATUALMENTE... http://httparchive.org/trends.php

30.

XBROWSER XDEVICE XPLATFORM

31.

XBROWSER XDEVICE XPLATFORM

32.

http://ondeviceresearch.com/ USUÁRIOS APENAS MOBILE

33.

Who Killed My Battery: Analyzing Mobile Browser Energy Consumption CONSUMO
ENERGIA DOS COMPONENTES outros - incluem conexões 3G e text rendering css e js - maior consumo relacionado a transmissão e rendering

34.

websites precisam ter exatamente o mesmo visual em todos os
browsers?

35.

None

36.

TECNOLOGIAS

37.

https://twitter.com/slicknet/status/292103833327370240

38.

MULTITASKING... @flavioribeiro na globo.com

39.

SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB

40.

DOTFILES

41.

DOTFILES.GITHUB.IO http://dotfiles.github.io/ backup compartilhe aprenda

42.

automatize suas configurações https://github.com/davidsonfellipe/dotfiles

43.

CONTROLE DE VERSÃO

44.

https://bitbucket.org/

45.

BITBUCKET VS GITHUB repos privados ilimitados preço baseado no número
de colaboradores número de colaboradores ilimitado preço baseado no número de repositórios privados

46.

TASK RUNNER

47.

http://gruntjs.com/

48.

O QUE É O GRUNT? É um task runner baseado
em linha de comando para projetos javascript

49.

O QUE É O GRUNT? Testes JS linting Concatenando e
Minificando Otimizando imagens Watchers para Pré-processadores

50.

PRÉ-PROCESSADORES

51.

None

52.

None

53.

None

54.

None

55.

None

56.

None

57.

None

58.

QUALIDADE DE CÓDIGO

59.

JSHINT http://www.jshint.com/

60.

CSSLINT http://csslint.net/

61.

TESTES

62.

None

63.

None

64.

PERFORMANCE

65.

performance de frontend? http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

66.

PRINCIPAIS CUIDADOS • Minificar CSS, JavaScript e HTML • Inline
imagens, CSS, e JavaScript • Cache de assets • Defer JavaScript • Concatenar CSS e JavaScript • Compressão de imagens & resizing

67.

YSLOW http://developer.yahoo.com/yslow/

68.

YSLOW, MANTENEDOR? https://twitter.com/marcelduran brasileiro @marcelduran

69.

PAGE SPEED https://developers.google.com/speed/pagespeed/insights

70.

+PERFORMANCE? http://browserdiet.com/pt

71.

TEM ATÉ EM CHINÊS... http://browserdiet.com/zh

72.

SPEEDLIMIT http://mschrag.github.io

73.

JSLITMUS http://mschrag.github.io

74.

WEBPAGETEST

75.

WEBPAGETEST

76.

WEBPAGETEST

77.

MAIS TOOLS

78.

GRADIENTES? http://www.colorzilla.com/gradient-editor/

79.

GITIFIER http://psionides.github.io/Gitifier/

80.

MICROJS http://microjs.com/#

81.

http://html5boilerplate.com/

82.

MAS O QUE ESTÁ VINDO POR AÍ?

83.

SPDY http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

84.

WEB COMPONENTS http://www.w3.org/TR/2013/WD-components-intro-20130606/

85.

POLYMER http://www.polymer-project.org/

86.

SHOW YOUR CODE

87.

CONTRIBUA EM PROJETOS OPENSOURCE

88.

CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing

89.

COMO SE MANTER ATUALIZADO?

90.

https://twitter.com/slicknet/status/292103833327370240

91.

6 SEMANAS?

92.

http://html5weekly.com/

93.

http://javascriptweekly.com

94.

http://braziljs.org/

95.

http://oswaldoacauan.github.io/keep-up-to-date-brazuca/

96.

AH... É MUITA COISA PARA ESTUDAR...

97.

None

98.

www.fellipe.com/talks slides disponíveis em...

99.

obrigado CONVESCOTE! github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com/talks

100.

None

Frontend Engineers: Passado, presente e futuro

Frontend Engineers: Passado, presente e futuro

Want more?

Transcript