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

12,121 views

Published on

Published in: Technology
31 Comments
146 Likes
Statistics
Notes
No Downloads
Views
Total views
12,121
On SlideShare
0
From Embeds
0
Number of Embeds
213
Actions
Shares
0
Downloads
376
Comments
31
Likes
146
Embeds 0
No embeds

No notes for slide

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

  1. 1. A(R)EVOLUÇÃODOFRONT-END
  2. 2. MARLOSCARMOGERENTEDEOPERAÇÕESDIGITAISNARCCOMUNICAÇÃO#SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS
  3. 3. marlos@gmail.comtwitter.com/marloscarmofacebook.com/marloscarmogithub.com/marloscarmo
  4. 4. Há15anosatrásnão“existia”adisciplinadefront-end...
  5. 5. Ouvocêera:
  6. 6. Ouvocêera:webmaster
  7. 7. Ouvocêera:webmaster ou
  8. 8. Ouvocêera:webmaster webdesignerou
  9. 9. Nofinaldascontaseraquaseamesmacoisaeoqueosdiferenciavaera...
  10. 10. webmasterfaziasitescomfundopreto
  11. 11. webdesignerfaziasitescomfundobranco
  12. 12. Em1998ossiteserampraticamentetodosestáticoseoseditoresWYSIWYGreinavam.
  13. 13. FrontPage
  14. 14. Dreamweaver
  15. 15. Nãoexistianenhumapreocupaçãocomocódigoesuamanutenção.“Desenhou”ositenoFrontPageerodounoIE.#pronto
  16. 16. Oscódigosficavam“umabeleza”.ImaginemtodooHTML,oCSSeoJavaScriptnomesmoarquivo.
  17. 17. AartedoCTRL+C/Ctrl+Vprevalecia.Existiamdiretórioscomváriostiposdemenus,gifsanimados,DHTMLs,Appletsetudomais.Erasócopiarecolarnoseucódigo.
  18. 18. Comopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHP
  19. 19. webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHPmeninodoHTMLComopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.
  20. 20. Osprogramadoresqueseespecializavamseguiamocaminhodoback-end,poisláestavatodaamagia.“Você,meninodoHTML,umdiaseráumprogramadorback-end”(masenquantoissorecorteestas42telasaquiparahoje)
  21. 21. IssosetornoumaisforteaindacomapopularizaçãodoFlash.Ossitesnãoprecisavamtermuitoconteúdo,desdequetivessemumaanimaçãodeabertura.
  22. 22. Enosdiasdehojeacoisamudoumuito.OmeninodoHTMLagoratematénome:FRONT-ENDENGINEER
  23. 23. EotrabalhoficacadavezmaisCOMPLEXO
  24. 24. Antes,oJavaScriptquenãoeralevadoasérioeeraconsideradoumaTOYLANGUAGE
  25. 25. Atualmenteestásetornandoumalinguagemcadavezmaisuniversal.
  26. 26. ETCBROWSER WEB APPSMOBILE APPS DESKTOP APPSSERVIDOR
  27. 27. Eumbomprofissionaldefront-endtemqueentenderbemdasseguintesdisciplinas...
  28. 28. SEGURANÇATESTESACESSIBILIDADESUPORTE MULTI-BROWSERSSUPORTE MULTI-DEVICESSUPORTE MULTI-TELASPERFORMANCECONHECIMENTOS DE SERVERSEO
  29. 29. ALGUNSPASSOSPARAUMBOMFRONT-END
  30. 30. NãouseIE
  31. 31. #prontoAjudaracomunidadetambémésuperimportante.
  32. 32. EscolhaumbomEDITOR
  33. 33. SublimeTexthttp://www.sublimetext.com/
  34. 34. VIMhttp://www.vim.org/
  35. 35. NÃOREIVENTEARODAUseasmelhorespráticas
  36. 36. HTML5Boilerplatehttp://html5boilerplate.com/
  37. 37. HTML5Boilerplate
  38. 38. HTMLEmailBoilerplatehttp://htmlemailboilerplate.com/
  39. 39. HTMLEmailBoilerplate
  40. 40. TwitterBootstraphttp://twitter.github.io/bootstrap/
  41. 41. TwitterBootstrap
  42. 42. USEFRAMEWORKS(commoderação)
  43. 43. AngularJShttp://angularjs.org
  44. 44. Backbone.JShttp://backbonejs.org/
  45. 45. Emberhttp://emberjs.com/
  46. 46. Meteorhttp://meteor.com/
  47. 47. 7PRINCÍPIOSdoMeteor
  48. 48. DataonthewireNuncatrafegueHTML.Envieainformaçãoedeixeoclientedecidircomoapresentá-la.1
  49. 49. OneLanguageEscrevaJavaScriptnofrontenoback-end.Reutilizeseuscódigos.2
  50. 50. DatabaseEverywhereUseamesmaAPIparaacessarseubancodedadosnoclientenoserver.3
  51. 51. LatencyCompensationSimulalatênciazerocomobancodedadosnoservidor.4
  52. 52. FullStackReactivityFaçarealtimeporpadrão.Todasascamadas,dobancoaotemplate,devemserorientadasaoseventosdeinterface.5
  53. 53. EmbracetheEcosystemMeteoréopensourceeintegra,aoinvésdesubstituir,ferramentaseframeworksexistentes.6
  54. 54. SimplicityEqualsProductivityAmelhormaneiradefazeralgoparecersimplesétorná-lorealmentesimples.BuscamosissoatravésdeumaAPIcleaneextremamentesfácil.7
  55. 55. AUTOMATIZEseusscripts
  56. 56. http://coffeescript.org/
  57. 57. http://sass-lang.com/
  58. 58. variáveishttp://sass-lang.com/
  59. 59. variáveisexpressõeshttp://sass-lang.com/
  60. 60. variáveisexpressõesherançahttp://sass-lang.com/
  61. 61. códigodinâmicohttp://lesscss.org/
  62. 62. EMMET.IOhttp://www.emmet.io/
  63. 63. http://jade-lang.com/
  64. 64. http://www.jshint.com/
  65. 65. ENXUGUEaomá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. PreparebemseuAMBIENTE
  70. 70. Yeomanconsisteemumconjuntodeferramentasvoltadasparacriarrapidamenteumnovoprojetowebegerenciá-loduranteoprocesso.http://yeoman.io/
  71. 71. Fazumscaffolddaestruturadoseuprojeto.$yo webapp
  72. 72. Fazumscaffolddaestruturadoseuprojeto.$yo webapp
  73. 73. ElevaipassarumJSHintnocódigo,compilararquivosCoffeeScripteSASS,utilizaror.jsparacompilareotimizarmódulosAMD,juntareminificararquivos.csse.js,comprimirasimagensutilizandooOptiPNGpara.pngeJPEGtran-turbopara.jpeg,vairodarostestesutilizandoPhantomJSeutilizaroConfess.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,adicionaeatualizaocomponentedeformaautomatizada.$bower install jquery$bower update jquery
  77. 77. ExistealgumasoutrasopçõesaoYEOMANBrunch CodeKitLiveReload
  78. 78. OGOOGLEquerlereentenderseusite
  79. 79. http://www.woorank.com/Woorank
  80. 80. http://www.seomoz.org/toolsSEOMOZTools
  81. 81. www.slideshare.net/fabioricotta/seo-para-frontend-beagajsDicas-MestreSEO
  82. 82. TESTEsuaaplicação
  83. 83. http://www.youtube.com/watch?v=5z6eFve4TxIQUnit
  84. 84. DEPLOY!esqueçaoftp
  85. 85. CAPISTRANOhttp://capify.orgRSYNChttp://rsync.samba.org/FABRIChttp://docs.fabfile.org/en/1.6/
  86. 86. defineoambientededesenvolvimentocodeby@ruyadorno
  87. 87. defineoambientedeproduçãocodeby@ruyadorno
  88. 88. configuraoprojetonoambienteescolhidocodeby@ruyadorno
  89. 89. atualizaoprojetonoambienteescolhidocodeby@ruyadorno
  90. 90. $fab dev updateatualizaroprojetonoambientededesenvolvimento
  91. 91. $fab dev updateatualizaroprojetonoambientededesenvolvimento$fab prod updateatualizaroprojetonoambientedeprodução
  92. 92. ParticipeativamentedaCOMUNIDADE
  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

×