O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

13.168 visualizações

Publicada em

Publicada em: Tecnologia
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×