O
Ecossistema
Web
Um review da maior plataforma universal de
desenvolvimento.
@fernahh
Slide 2
Slide 2 text
@fernahh
fernahh.com
Slide 3
Slide 3 text
ContaAzul
contaazul.com/vagas
Slide 4
Slide 4 text
2011
Meu primeiro emprego como desenvolvedor foi
em uma agência de comunicação, onde tinha um
“setor de web”.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
A web como
plataforma
Uma das maneiras mais fáceis de se aprender a
programar.
Slide 7
Slide 7 text
1. Um arquivo HTML
Slide 8
Slide 8 text
1. Um arquivo HTML
2. Um browser
Slide 9
Slide 9 text
1. Um arquivo HTML
2. Um browser
Zero downloads. Zero instalações. Zero
configurações.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
HTML é uma das melhores
linguagens para criar
conteúdo.
É acessível, expressiva
e simples.
Slide 12
Slide 12 text
O CSS, de longe, é uma das
melhores maneiras de criar
layouts ricos.
Slide 13
Slide 13 text
O JavaScript é a linguagem
mais popular do mundo. Nos
permite criar aplicações
ricas de grande valor aos
usuários.
Slide 14
Slide 14 text
Desktop
Celulares
Tablets
Smart TVs
Video games
...
Slide 15
Slide 15 text
O sonho do Java, de
estar em todos os lugares,
foi alcançado pela web.
Slide 16
Slide 16 text
“Se queres
aprender o
futuro, estuda
o passado”
- Confúcio
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
https://home.cern/topics/birth-web
Slide 19
Slide 19 text
Sir Tim Berners-Lee
Criou a web em 1990.
O objetivo? Compartilhar documentos.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Documentos
Grupo de páginas que seguem o
mesmo padrão de comportamento
e estilo.
Slide 23
Slide 23 text
/home
Slide 24
Slide 24 text
/home /products
Slide 25
Slide 25 text
/home /products /product/1
Slide 26
Slide 26 text
Aplicações
Ao invés de várias páginas, é
apenas uma com estados diferentes.
Slide 27
Slide 27 text
/signup
Slide 28
Slide 28 text
/signup /step/1
Slide 29
Slide 29 text
/signup /step/1 /step/2
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
2001
Apesar de ter suporte, a web quase não tinha
imagens. A maioria dos portais tinham apenas
imagens e gifs.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
A era dos plugins
Para assistir um vídeo ou conteúdo interativo na
web, era necessário usar plugins de tecnologias
proprietárias.
Slide 34
Slide 34 text
Adobe Flash
Microsoft Silverlight
Adobe Shockwave Player
Applet Java
RealPlayer
Slide 35
Slide 35 text
WHATWG
Fundado por membros da Apple, Mozilla e Opera,
com objetivo de criar uma nova direção para o
HTML.
Slide 36
Slide 36 text
O HTML5 é mais do que
uma especificação. É um
conjunto de tecnologias
abertas.
Progressive
Enhancement
Novas tecnologias tendem a ser amigáveis com a
web. É possível desenvolver código para browsers
modernos e manter compatibilidade.
Slide 84
Slide 84 text
http://sighjavascript.tumblr.com/
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
“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
Slide 89
Slide 89 text
- dead to history
(archive-org);
- unreliable for search
results;
- ignorable.
https://speakerdeck.com/tomdale/progressive-enhancement-is-dead-long-live-progressive-enhancement
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
A média de conexão de
internet de usuários no
Brasil é ~1.2mb.
Slide 92
Slide 92 text
“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
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/
Slide 96
Slide 96 text
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/
Slide 97
Slide 97 text
Web Apps
Aplicações web que são confiáveis, rápidas e com
uma experiência imersiva.
Slide 98
Slide 98 text
https://eng.uber.com/m-uber/
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
“isso é uma
web app.
pequena e
rápida.”
Slide 101
Slide 101 text
as APIs web
ainda irão
melhorar...
Slide 102
Slide 102 text
Electron
Permite desenvolvermos desktop apps, que são
cross platform com tecnologias web.
Slide 103
Slide 103 text
HTML, CSS e JavaScript
Electron (NodeJS, Chromium)
https://electron.atom.io/
Slide 104
Slide 104 text
HTML, CSS e JavaScript
Electron (NodeJS, Chromium)
SO
https://electron.atom.io/
Slide 105
Slide 105 text
Spotify
Visual Studio Code
Slack
Hyper
Atom
Slide 106
Slide 106 text
React Native
Framework para construir aplicativos nativos com
React.