Arquitetura de aplicações web

Vitor Mattos

Fotografem, comentem, twittem!

@VitorMattosRJ

Quem sou eu?

Desenvolvedor PHP desde 2003
Amante de opensource
Evangelista PHP
PHP Zend Certified Engineer ( ZEND024235 )
PHPRio ( https://telegram.me/phprio )
Redes sociais: ( VitorMattos ou VitorMattosRJ )

Cronograma

Arquitetura e componentes da plataforma Web
Cliente, servidor e protocolo Web
Visão geral de aplicações client-side e server-side

Resultados a alcançar

Descrever as principais características e componentes da arquitetura de uma aplicação web.
Diferenciar as principais tecnologias web e saber quando, onde e porque são usadas.

Tim Berners-Lee

Idealizador da rede mundial de computadores: web

CERN

Laboratório Europeu para Física de Partículas

Aqui nasceu a web

Primeiro servidor web

Internet hoje

Localização geográfica de pessoas no Facebook e conexão entre elas (2014)

Internet hoje

Densidade de fotógrafos no Panoramio

C M

FUNCI NA

?

Requests
for
COMMENTS

Linguagem de comunicação na web

TCP / IP

127.0.0.1

172.16.0.9

192.168.0.15

IP = endereço,
TCP = vias que pegamos para chegar até o endereço desejado.

Hypertext Transfer Protocol

HTTP://

Title Text

A especificação, elaborada pelo W3C, o define como:

HTTP é um protocolo de nível de aplicação para sistemas de hipermídia, colaborativos e distribuídos. É um protocolo genérico, sem estado e orientado a objetos que pode ser usado para diversas tarefas, tais como servidores de nomes e sistemas de gerenciamento de objetos distribuídos, através da extensão de seus métodos de requisição [RFC2068].

Requisição HTTP

HTTP Request

Resposta HTTP

HTTP Request

HTTP Response

Requisição HTTP - diagrama

Métodos / Verbos HTTP

Status code

Grupos	Significado
1xx	Informational responses
2xx	Success
3xx	Redirection
4xx	Client errors (client side)
5xx	Server errors (server side)

HTTPS

De forma simples, HTTP seguro. Isto quer dizer que o conteúdo do envelope vai criptografado.

FTP - File Transfer Protocol

SMTP - Simple Mail Transfer Protocol

DNS - Domain Name System

URL - Uniform Resource Locator

URL - estrutura

O esquema é o protocolo. Poderá ser HTTP, HTTPS, FTP, etc.
O domínio é o endereço da máquina: designa o servidor que disponibiliza o documento ou recurso solicitado.
A porta é o ponto lógico no qual se pode executar a conexão com o servidor. (opcional)
O caminho especifica o local (geralmente num sistema de arquivos) onde se encontra o recurso, dentro do servidor.
A query_string é um conjunto de um ou mais pares "pergunta-resposta" ou "parâmetro-argumento" (como por exemplo nome=fulano , em que nome pode ser, por exemplo, uma variável, e fulano é o valor (argumento) atribuído a nome) É uma string enviada ao servidor para que seja possível filtrar ou mesmo criar o recurso. (opcional)
O fragmento é uma parte ou posição específica dentro do recurso. (opcional)

esquema :// domínio : porta /caminho/ recurso ? query_string # fragmento

Cliente

É quem consome serviços. O consumidor. Características:

Inicia pedidos para servidores;
Espera por respostas;
Receber respostas;
Conecta-se a um pequeno número de servidores de uma só vez ;
Utiliza recursos da rede.

No lado do cliente encontramos diversas personas que vamos ver um pouco mais sobre cada uma delas agora.

Browser

HTML - HyperText Markup Language

HTML - Exemplo

Teremos:

Um texto em negrito

Um texto <strong>em negrito</strong>

Teremos:

Lyseon Tech

<a href="http://lt.coop.br/">Lyseon Tech</a>

CSS - cascading style sheets

CSS - exemplo

body
{
    font-family: Arial, Verdana, sans-serif;
    background-color: #FFF;
    margin: 5px 10px ;
}

JavaScript

Mobile app

Plataforma	Linguagens nativas
Android	Java, Kotlin
iOS	Objective C, Swift
Windows Phone	C#

Mobile app - híbrido

Nativo, híbrido, PWA ou website?

Recurso	Website	PWA	Nativo / Híbrido
Indexável mecanismos de busca	Sim	Sim	Não
Atualizações rápidas e on-demand	Sim	Sim	Não
Precisa baixar para instalar	Não	Não	Sim
Precisa baixar em apps store	Não	Não	Sim
Notificações locais	Não	Sim	Sim
Notificações Push	Não	Sim	Sim
Usar quando estiver offline	Não	Sim	Sim
Implementa Design Responsivo	Sim	Sim	Sim