Turbinando seu workflow para o desenvolvimento de webapps

A área de desenvolvimento front-end é cheia de grandes desafios, sejam eles voltados para mobile, web ou desktop. Sendo assim quais frameworks, ferramentas e bibliotecas são relevantes? e quanto a performance? Venha conhecer dicas de como encarar seu dia-a-dia, amando seu workflow.

Transcript

1. TURBINANDO SEU WORKFLOW PARA O DESENVOLVIMENTO DE WEBAPPS por davidson fellipe www.fellipe.com http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
2. I’m DAVIDSON FELLIPE
3. WORKS
5. ESCOLHAS... http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg
6. ERA UMA VEZ...
7. http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
8. LAYOUT USANDO TABLE?
9. ENQUANTO ISSO EM 2000...
10. HTML CSS 2006...
11. precisa saber JAVASCRIPT? 2006...
12. ATUALMENTE...
13. + poderosas + complexas + ambiciosas 2013...
14. www.igvita.com/slides/2012/devtools-tips-and-tricks/ CICLO DE VIDA DE UMA WEBPAGE
15. ATUALMENTE... http://httparchive.org/trends.php
16. ATUALMENTE... http://httparchive.org/trends.php
17. XBROWSER XDEVICE XPLATFORM
18. XBROWSER XDEVICE XPLATFORM
19. http://ondeviceresearch.com/ USUÁRIOS APENAS MOBILE
20. 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
21. websites precisam ter exatamente o mesmo visual em todos os browsers?
23. COMO MELHORAR MEU WORKFLOW DIANTE DESSES DESAFIOS?
24. TECNOLOGIAS
25. MULTITASKING... @flavioribeiro na globo.com
26. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
27. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
28. https://twitter.com/slicknet/status/292103833327370240
29. EDITORES
30. VIM http://www.vim.org/
31. SUBLIME http://www.sublimetext.com/
32. SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE
33. BRACKETS http://brackets.io/
34. DOTFILES
35. DOTFILES.GITHUB.IO http://dotfiles.github.io/ backup compartilhe aprenda
36. automatize suas configurações https://github.com/davidsonfellipe/dotfiles
37. CONTROLE DE VERSÃO
38. git trabalhar com repositórios entender branches pull request code review CONTROLE DE VERSÃO
39. https://bitbucket.org/
40. https://github.com/
41. 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
42. TASK RUNNER
43. http://gruntjs.com/
44. O QUE É O GRUNT? É um task runner baseado em linha de comando para projetos javascript
45. O QUE É O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pré-processadores
46. Por que usar o GRUNT? Facil de usar Grande número de plugins Imensa comunidade Open source
47. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli
48. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }
49. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
50. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima versão no seu folder Adiciona ao package.json
51. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
52. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
53. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
54. PRÉ-PROCESSADORES
62. http://usablica.github.io/front-end-frameworks/compare.html
63. QUALIDADE DE CÓDIGO
64. JSHINT http://www.jshint.com/
65. CSSLINT http://csslint.net/
66. TESTES
69. PERFORMANCE
70. http://www.akamai.com/stateoftheinternet/
71. http://www.akamai.com/stateoftheinternet/ SÓ QUE NÃO!!!!!
72. performance de frontend? http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
73. PRINCIPAIS CUIDADOS • Minificar CSS, JavaScript e HTML • Inline images, CSS, e JavaScript • Cache de assets • Defer JavaScript • Concatenar CSS e JavaScript • Compressão de imagens & resizing
74. YSLOW http://developer.yahoo.com/yslow/
75. YSLOW, MANTENEDOR? https://twitter.com/marcelduran brasileiro @marcelduran
76. PAGE SPEED https://developers.google.com/speed/pagespeed/insights
77. +PERFORMANCE? http://browserdiet.com/pt
78. TEM ATÉ EM CHINÊS... http://browserdiet.com/zh
79. SPEEDLIMIT http://mschrag.github.io
80. JSLITMUS http://mschrag.github.io
81. WEBPAGETEST
82. WEBPAGETEST
83. WEBPAGETEST
84. MAIS TOOLS
85. GRADIENTES? http://www.colorzilla.com/gradient-editor/
86. GITIFIER http://psionides.github.io/Gitifier/
87. MICROJS http://microjs.com/#
88. http://html5boilerplate.com/
89. BUSQUE SEU WORKFLOW
90. MAS...
91. NUNCA EXISTIRÁ WORKFLOW DEFINITIVO!!!
92. LEMBRE-SE DAS 6 SEMANAS...
93. MAS O QUE ESTÁ VINDO POR AÍ?
94. SPDY http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
95. WEB COMPONENTS http://www.w3.org/TR/2013/WD-components-intro-20130606/
96. POLYMER http://www.polymer-project.org/
97. SHOW YOUR CODE
98. CONTRIBUA EM PROJETOS OPENSOURCE
99. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing
100. COMO SE MANTER ATUALIZADO?
101. https://twitter.com/slicknet/status/292103833327370240
102. 6 SEMANAS?
103. http://html5weekly.com/
104. http://javascriptweekly.com
105. http://braziljs.org/
106. AH... É MUITA COISA PARA ESTUDAR...
108. O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU WORKFLOW
109. ELE APENAS VAI TE DEIXA MAIS FELIZ
110. www.fellipe.com/talks slides disponíveis em...
111. OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com