Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O Ecossistema Web

188900fc4ed166ff159a9b74aa38a9bd?s=47 fernahh
September 21, 2017

O Ecossistema Web

A web se tornou a principal plataforma para desenvolvermos software com experiências ricas aos usuários. Mas como chegamos até aqui e quais os rumos que as tecnologias desse ecossistema irão tomar? Nessa palestra vamos abordar a história e o futuro de diversos problemas, desafios, técnicas e ferramentas que elevaram e elevam a experiência de usuários e desenvolvedores que usam a web como plataforma de desenvolvimento de software.

188900fc4ed166ff159a9b74aa38a9bd?s=128

fernahh

September 21, 2017
Tweet

Transcript

  1. O Ecossistema Web Um review da maior plataforma universal de

    desenvolvimento. @fernahh
  2. @fernahh fernahh.com

  3. ContaAzul contaazul.com/vagas

  4. 2011 Meu primeiro emprego como desenvolvedor foi em uma agência

    de comunicação, onde tinha um “setor de web”.
  5. None
  6. A web como plataforma Uma das maneiras mais fáceis de

    se aprender a programar.
  7. 1. Um arquivo HTML

  8. 1. Um arquivo HTML 2. Um browser

  9. 1. Um arquivo HTML 2. Um browser Zero downloads. Zero

    instalações. Zero configurações.
  10. None
  11. HTML é uma das melhores linguagens para criar conteúdo. É

    acessível, expressiva e simples.
  12. O CSS, de longe, é uma das melhores maneiras de

    criar layouts ricos.
  13. O JavaScript é a linguagem mais popular do mundo. Nos

    permite criar aplicações ricas de grande valor aos usuários.
  14. Desktop Celulares Tablets Smart TVs Video games ...

  15. O sonho do Java, de estar em todos os lugares,

    foi alcançado pela web.
  16. “Se queres aprender o futuro, estuda o passado” - Confúcio

  17. None
  18. https://home.cern/topics/birth-web

  19. Sir Tim Berners-Lee Criou a web em 1990. O objetivo?

    Compartilhar documentos.
  20. None
  21. A cada 2 dias, em 2010, nós criamos a mesma

    quantidade de informação criada até 2003! https://techcrunch.com/2010/08/04/schmidt-data
  22. Documentos Grupo de páginas que seguem o mesmo padrão de

    comportamento e estilo.
  23. /home

  24. /home /products

  25. /home /products /product/1

  26. Aplicações Ao invés de várias páginas, é apenas uma com

    estados diferentes.
  27. /signup

  28. /signup /step/1

  29. /signup /step/1 /step/2

  30. 1993, 1994 e 1995 Surgimento do CSS e JavaScript. Porém,

    as tecnologias web nasceram sem especificação. Cada browser tinha a sua implementação do HTML.
  31. 2001 Apesar de ter suporte, a web quase não tinha

    imagens. A maioria dos portais tinham apenas imagens e gifs.
  32. None
  33. A era dos plugins Para assistir um vídeo ou conteúdo

    interativo na web, era necessário usar plugins de tecnologias proprietárias.
  34. Adobe Flash Microsoft Silverlight Adobe Shockwave Player Applet Java RealPlayer

  35. WHATWG Fundado por membros da Apple, Mozilla e Opera, com

    objetivo de criar uma nova direção para o HTML.
  36. O HTML5 é mais do que uma especificação. É um

    conjunto de tecnologias abertas.
  37. Semântica Storage <audio> <video> Geolocation ...

  38. 100 75 50 25 0 - Javascript - Flash -

    Silverslight - Applet
  39. “O maior erro que cometemos como empresa foi apostar no

    HTML5 ao invés de tecnologias nativas.” - Mark Zuckerberg, 2012
  40. HTTP Muitos dos approaches criados e usados na web, são

    para contornar problemas deste protocolo.
  41. Inicia uma conexão TCP GET /foo.html Processa Fecha a conexão.

  42. http://bit.ly/19uEIk0

  43. None
  44. uma request! só 2KB!

  45. ❖ 252 requests ❖ 2.5mb de transferência

  46. “640k são mais que suficientes para qualquer um”

  47. Inicia uma conexão GET /foo.html Fecha a conexão. GET /bar.css

  48. Múltiplos hosts No HTTP 1.1, podemos abrir de 4 a

    8 conexões por origem.
  49. Surgimento do NodeJS Além de levar o JavaScript para o

    servidor, permitiu desenvolvedores criarem ferramentas melhores.
  50. script-x.js script-y.js script-z.js

  51. script-x.js script-y.js script-z.js

  52. script-x.js script-y.js script-z.js script.min.js

  53. HTTP/2 Depois de 16 anos, saiu a nova versão do

    protocolo HTTP, com importantes mudanças para a web.
  54. ❖ GZIP é padrão obrigatório. ❖ Headers são binários e

    comprimidos #1 Compressão automática
  55. HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive

    Status: 200 OK X-UA-Compatible: IE=Edge,chrome=1 ETag: "4618f5c69dfa0ee8cb492830482c0bbe" Cache-Control: max-age=0, private, must-revalidate Set-Cookie: _fernahh_session=BAh7B0kiD3Nlc3Npb25f…. Date: Sat, 21 Mar 2015 19:23:51 GMT Server: nginx/1.6.0 + Phusion Passenger 4.0.42 <!DOCTYPE html>...
  56. 0010101010101010101 01010101 010101010100 0101010101 01010101101 010101010 ?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0 ?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?

    _?*f0?{{?un,1?T?.?[mŚ?T?%??????????0
  57. 0010101010101010101 01010101 010101010100 0101010101 01010101101 010101010 ?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0 ?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?

    _?*f0?{{?un,1?T?.?[mŚ?T?%??????????0 Binário GZIP
  58. ?T?%.?JI?;1?R,1?T JI?;1?R,1?T ?,%JI?;1?R,1?T 1?R,1?T???m, ;T?un,1?TU ?R,1??R,1?m1R ?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0 ?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?

    _?*f0?{{?un,1?T?.?[mŚ?T?%??????????0 HPACK GZIP
  59. ????????????????? ?????????? ???????????????? ??????????? ?????????? ????????????? ????????????????????????????????????? ???????????????????????????????????????? ?????????????????????????????????????? Ah

    sim, temos HTTPS!
  60. 0010101010101010101 01010101 010101010100 0101010101 01010101101 010101010 ?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0 ?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?

    _?*f0?{{?un,1?T?.?[mŚ?T?%??????????0 HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Status: 200 OK X-UA-Compatible: IE=Edge,chrome=1 ETag: "4618f5c69dfa0ee8cb492830482c0bbe" Cache-Control: max-age=0, private, must-revalidate Set-Cookie: _fernahh_session=BAh7B0kiD3Nlc3Npb25f…. Date: Sat, 21 Mar 2015 19:23:51 GMT Server: nginx/1.6.0 + Phusion Passenger 4.0.42 <!DOCTYPE html>...
  61. ❖ Requisições e respostas paralelas ❖ Mais de uma requisição

    por conexão #2 Multiplexing
  62. Inicia uma conexão Fecha a conexão.

  63. ❖ Priorização de recursos ❖ Escolhemos o que o usuário

    verá primeiro #3 Priorização de requests
  64. 1º GET /index.html 3º GET /main.js 2º GET /main.css A

    prioridade do CSS é maior!
  65. ❖ O servidor poderá enviar recursos #4 Server Push

  66. 1º GET /index.html main.js main.css index.html

  67. Guerra de frameworks Uma enxurrada de frameworks e bibliotecas surgiram

    para ajudar desenvolvedores web.
  68. https://twitter.com/sstephenson/status/730039913052176384

  69. Encontrar a solução para seu problema num mar de tecnologias

    é uma habilidade.
  70. #1 Conheça muito bem os requisitos e problemas que você

    quer resolver antes de começar.
  71. Tecnologias surgem de forma rápida, mas empresas as adotam lentamente.

  72. #2 Aposte em arquiteturas plugáveis e modulares.

  73. “Escreva programas que façam apenas uma coisa mas que façam

    bem feito.” https://pt.wikipedia.org/wiki/Filosofia_Unix
  74. #3 Acompanhe as comunidades. Elas servem como um termômetro de

    tecnologias.
  75. Requisitos de aplicações web mudam com frequência. Esteja preparado.

  76. meetup.com/changelog

  77. Aplicações web são complexas Aplicar conceitos e técnicas de engenharia

    de software faz todo sentido, afinal, buscamos construir produtos escaláveis.
  78. #4 Deixe o código melhor do que quando você pegou.

  79. Refactoring Também é papel do desenvolvedor alertar quando refactoring é

    necessário.
  80. Débitos técnicos Uma forma de medir e argumentar para o

    negócio quanto seu codebase está ruim.
  81. Testes São imprescindíveis em projetos que precisam crescer.

  82. https://www.slideshare.net/jeancarloemer/como-encarar-o-desenvolvimento-frontend

  83. Progressive Enhancement Novas tecnologias tendem a ser amigáveis com a

    web. É possível desenvolver código para browsers modernos e manter compatibilidade.
  84. http://sighjavascript.tumblr.com/

  85. None
  86. None
  87. None
  88. “Em 10 anos, nada do que você construiu hoje que

    depende de JS para mostrar o conteúdo, estará disponível e arquivado na web” https://speakerdeck.com/tomdale/progressive-enhancement-is-dead-long-live-progressive-enhancement
  89. - dead to history (archive-org); - unreliable for search results;

    - ignorable. https://speakerdeck.com/tomdale/progressive-enhancement-is-dead-long-live-progressive-enhancement
  90. None
  91. A média de conexão de internet de usuários no Brasil

    é ~1.2mb.
  92. “Server rendering is not about SEO, it’s about performance. Consider

    the additional roundtrips to get scripts, styles, and subsequent API requests.” https://rauchg.com/2014/7-principles-of-rich-web-applications
  93. https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-b5 ad7cf7a447

  94. https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-b5 ad7cf7a447

  95. Progressive Web Apps (PWA) Aplicações web que são confiáveis, rápidas

    e com uma experiência imersiva. https://developers.google.com/web/progressive-web-apps/
  96. Progressive Web Apps (PWA) Aplicações web que são confiáveis, rápidas

    e com uma experiência imersiva. https://developers.google.com/web/progressive-web-apps/
  97. Web Apps Aplicações web que são confiáveis, rápidas e com

    uma experiência imersiva.
  98. https://eng.uber.com/m-uber/

  99. None
  100. “isso é uma web app. pequena e rápida.”

  101. as APIs web ainda irão melhorar...

  102. Electron Permite desenvolvermos desktop apps, que são cross platform com

    tecnologias web.
  103. HTML, CSS e JavaScript Electron (NodeJS, Chromium) https://electron.atom.io/

  104. HTML, CSS e JavaScript Electron (NodeJS, Chromium) SO https://electron.atom.io/

  105. Spotify Visual Studio Code Slack Hyper Atom

  106. React Native Framework para construir aplicativos nativos com React.

  107. React Components React Native Bridge Native Code https://facebook.github.io/react-native/

  108. Facebook AirBnb Instagram Skype Walmart

  109. Faça parte dessa revolução. Aposte na web!

  110. obrigado! @fernahh fernahh.com