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

O Ecossistema Web

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.

fernahh

September 21, 2017
Tweet

More Decks by fernahh

Other Decks in Technology

Transcript

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

    de comunicação, onde tinha um “setor de web”.
  2. 1. Um arquivo HTML 2. Um browser Zero downloads. Zero

    instalações. Zero configurações.
  3. O JavaScript é a linguagem mais popular do mundo. Nos

    permite criar aplicações ricas de grande valor aos usuários.
  4. 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
  5. 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.
  6. 2001 Apesar de ter suporte, a web quase não tinha

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

    interativo na web, era necessário usar plugins de tecnologias proprietárias.
  8. WHATWG Fundado por membros da Apple, Mozilla e Opera, com

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

    conjunto de tecnologias abertas.
  10. “O maior erro que cometemos como empresa foi apostar no

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

    para contornar problemas deste protocolo.
  12. Surgimento do NodeJS Além de levar o JavaScript para o

    servidor, permitiu desenvolvedores criarem ferramentas melhores.
  13. HTTP/2 Depois de 16 anos, saiu a nova versão do

    protocolo HTTP, com importantes mudanças para a web.
  14. 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>...
  15. 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>...
  16. ❖ Priorização de recursos ❖ Escolhemos o que o usuário

    verá primeiro #3 Priorização de requests
  17. “Escreva programas que façam apenas uma coisa mas que façam

    bem feito.” https://pt.wikipedia.org/wiki/Filosofia_Unix
  18. Aplicações web são complexas Aplicar conceitos e técnicas de engenharia

    de software faz todo sentido, afinal, buscamos construir produtos escaláveis.
  19. Débitos técnicos Uma forma de medir e argumentar para o

    negócio quanto seu codebase está ruim.
  20. Progressive Enhancement Novas tecnologias tendem a ser amigáveis com a

    web. É possível desenvolver código para browsers modernos e manter compatibilidade.
  21. “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
  22. - dead to history (archive-org); - unreliable for search results;

    - ignorable. https://speakerdeck.com/tomdale/progressive-enhancement-is-dead-long-live-progressive-enhancement
  23. “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
  24. 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/
  25. 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/