Successfully reported this slideshow.

A (r)evolução do front-end

149

Share

Upcoming SlideShare
Futura
Futura
Loading in …3
×
1 of 110
1 of 110

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

A (r)evolução do front-end

  1. 1. A(R)EVOLUÇÃODO FRONT-END
  2. 2. MARLOSCARMO GERENTEDEOPERAÇÕESDIGITAIS NARCCOMUNICAÇÃO #SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS
  3. 3. marlos@gmail.com twitter.com/marloscarmo facebook.com/marloscarmo github.com/marloscarmo
  4. 4. Há15anosatrásnão“existia”a disciplinadefront-end...
  5. 5. Ouvocêera:
  6. 6. Ouvocêera: webmaster
  7. 7. Ouvocêera: webmaster ou
  8. 8. Ouvocêera: webmaster webdesignerou
  9. 9. Nofinaldascontaseraquaseamesma coisaeoqueosdiferenciavaera...
  10. 10. webmaster faziasitescomfundo preto
  11. 11. webdesigner faziasitescomfundo branco
  12. 12. Em1998ossiteserampraticamente todosestáticoseoseditores WYSIWYGreinavam.
  13. 13. FrontPage
  14. 14. Dreamweaver
  15. 15. Nãoexistianenhumapreocupação comocódigoesuamanutenção. “Desenhou”ositenoFrontPagee rodounoIE.#pronto
  16. 16. Oscódigosficavam“umabeleza”. ImaginemtodooHTML,oCSSeo JavaScriptnomesmoarquivo.
  17. 17. AartedoCTRL+C/Ctrl+Vprevalecia. Existiamdiretórioscomváriostiposdemenus, gifsanimados,DHTMLs,Appletsetudomais. Erasócopiarecolarnoseucódigo.
  18. 18. Comopassardotempoadivisãodos cargosfoiaumentandojuntocoma popularizaçãodastecnologias. webdesigner webdeveloper webwriter programadorASP programadorPHP
  19. 19. webdesigner webdeveloper webwriter programadorASP programadorPHP meninodoHTML Comopassardotempoadivisãodos cargosfoiaumentandojuntocoma popularizaçãodastecnologias.
  20. 20. Osprogramadoresquese especializavamseguiamocaminhodo back-end,poisláestavatodaamagia. “Você,meninodoHTML,umdiaserá umprogramadorback-end” (masenquantoissorecorteestas42telasaquiparahoje)
  21. 21. Issosetornoumaisforteaindacoma popularizaçãodoFlash. Ossitesnãoprecisavamtermuito conteúdo,desdequetivessemuma animaçãodeabertura.
  22. 22. Enosdiasdehojeacoisamudoumuito. OmeninodoHTMLagoratematénome: FRONT-ENDENGINEER
  23. 23. Eotrabalhoficacadavezmais COMPLEXO
  24. 24. Antes,oJavaScriptquenãoera levadoasérioeeraconsideradouma TOYLANGUAGE
  25. 25. Atualmenteestásetornandouma linguagemcadavezmaisuniversal.
  26. 26. ETC BROWSER WEB APPS MOBILE APPS DESKTOP APPS SERVIDOR
  27. 27. Eumbomprofissionaldefront- endtemqueentenderbemdas seguintesdisciplinas...
  28. 28. SEGURANÇA TESTES ACESSIBILIDADE SUPORTE MULTI-BROWSERS SUPORTE MULTI-DEVICES SUPORTE MULTI-TELAS PERFORMANCE CONHECIMENTOS DE SERVER SEO
  29. 29. ALGUNSPASSOSPARAUMBOM FRONT-END
  30. 30. NãouseIE
  31. 31. #pronto Ajudaracomunidadetambémé superimportante.
  32. 32. Escolhaumbom EDITOR
  33. 33. SublimeText http://www.sublimetext.com/
  34. 34. VIM http://www.vim.org/
  35. 35. NÃOREIVENTEARODA Useasmelhorespráticas
  36. 36. HTML5Boilerplate http://html5boilerplate.com/
  37. 37. HTML5Boilerplate
  38. 38. HTMLEmailBoilerplate http://htmlemailboilerplate.com/
  39. 39. HTMLEmailBoilerplate
  40. 40. TwitterBootstrap http://twitter.github.io/bootstrap/
  41. 41. TwitterBootstrap
  42. 42. USEFRAMEWORKS (commoderação)
  43. 43. AngularJS http://angularjs.org
  44. 44. Backbone.JS http://backbonejs.org/
  45. 45. Ember http://emberjs.com/
  46. 46. Meteor http://meteor.com/
  47. 47. 7PRINCÍPIOS doMeteor
  48. 48. Dataonthewire NuncatrafegueHTML. Envieainformaçãoedeixeo clientedecidircomoapresentá-la. 1
  49. 49. OneLanguage EscrevaJavaScriptnofronteno back-end. Reutilizeseuscódigos. 2
  50. 50. DatabaseEverywhere UseamesmaAPIparaacessar seubancodedadosnocliente noserver. 3
  51. 51. LatencyCompensation Simulalatênciazerocomo bancodedadosnoservidor.4
  52. 52. FullStackReactivity Façarealtimeporpadrão. Todasascamadas,dobancoao template,devemserorientadasaos eventosdeinterface. 5
  53. 53. EmbracetheEcosystem Meteoréopensourceeintegra,ao invésdesubstituir,ferramentase frameworksexistentes. 6
  54. 54. SimplicityEqualsProductivity Amelhormaneiradefazeralgo parecersimplesétorná-lorealmente simples.Buscamosissoatravésde umaAPIcleaneextremamentesfácil. 7
  55. 55. AUTOMATIZE seusscripts
  56. 56. http://coffeescript.org/
  57. 57. http://sass-lang.com/
  58. 58. variáveis http://sass-lang.com/
  59. 59. variáveis expressões http://sass-lang.com/
  60. 60. variáveis expressões herança http://sass-lang.com/
  61. 61. códigodinâmico http://lesscss.org/
  62. 62. EMMET.IO http://www.emmet.io/
  63. 63. http://jade-lang.com/
  64. 64. http://www.jshint.com/
  65. 65. ENXUGUE aomáximoseusite
  66. 66. http://yslow.org/
  67. 67. https://developers.google.com/speed/pagespeed/?hl=pt-BR
  68. 68. http://browserdiet.com/pt/ Comoperderpesonobrowser?
  69. 69. Preparebemseu AMBIENTE
  70. 70. Yeomanconsisteemumconjuntodeferramentas voltadasparacriarrapidamenteumnovoprojeto webegerenciá-loduranteoprocesso. http://yeoman.io/
  71. 71. Fazumscaffoldda estruturadoseuprojeto. $yo webapp
  72. 72. Fazumscaffoldda estruturadoseuprojeto. $yo webapp
  73. 73. ElevaipassarumJSHintnocódigo,compilararquivos CoffeeScripteSASS,utilizaror.jsparacompilareotimizar módulosAMD,juntareminificararquivos.csse.js,comprimiras imagensutilizandooOptiPNGpara.pngeJPEGtran-turbo para.jpeg,vairodarostestesutilizandoPhantomJSeutilizaro Confess.jsparacriaroarquivodecachedaaplicação.
  74. 74. $grunt server // cria um servidor e altera em tempo real $grunt test // roda os testes da sua aplicação $grunt build // monta sua aplicação para produção
  75. 75. $grunt server // cria um servidor e altera em tempo real $grunt test // roda os testes da sua aplicação $grunt build // monta sua aplicação para produção
  76. 76. Gerenciadependênciasdoseuprojeto.Baixa,adiciona eatualizaocomponentedeformaautomatizada. $bower install jquery $bower update jquery
  77. 77. ExistealgumasoutrasopçõesaoYEOMAN Brunch CodeKit LiveReload
  78. 78. OGOOGLEquerlereentenderseusite
  79. 79. http://www.woorank.com/ Woorank
  80. 80. http://www.seomoz.org/tools SEOMOZTools
  81. 81. www.slideshare.net/fabioricotta/seo-para-frontend-beagajs Dicas-MestreSEO
  82. 82. TESTEsuaaplicação
  83. 83. http://www.youtube.com/watch?v=5z6eFve4TxI QUnit
  84. 84. DEPLOY!esqueçaoftp
  85. 85. CAPISTRANO http://capify.org RSYNC http://rsync.samba.org/ FABRIC http://docs.fabfile.org/en/1.6/
  86. 86. defineoambientede desenvolvimento codeby@ruyadorno
  87. 87. defineoambientede produção codeby@ruyadorno
  88. 88. configuraoprojetono ambienteescolhido codeby@ruyadorno
  89. 89. atualizaoprojetono ambienteescolhido codeby@ruyadorno
  90. 90. $fab dev update atualizaroprojetonoambientededesenvolvimento
  91. 91. $fab dev update atualizaroprojetonoambientededesenvolvimento $fab prod update atualizaroprojetonoambientedeprodução
  92. 92. Participeativamenteda COMUNIDADE
  93. 93. http://braziljs.org/ BrazilJS
  94. 94. http://www.facebook.com/groups/beagajs/ BeagaJS
  95. 95. http://zofe.com.br/ ZOFE
  96. 96. OBRIGADO @marloscarmo

×