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 x Servidor

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

Mobile app

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

Mobile app - híbrido

Mobile app - híbrido

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

ChatBots

ChatBots - Interface para aplicações

ChatBots - lead colector

ChatBots - integra serviços e times

ChatBots - Funcionamento

IoT - Aplicações embarcadas

IoT - Aplicações embarcadas

Servidor

É quem provê algum conteúdo na web.

Aplicação web monolítica

Aplicação web escalável

Scaling up - escalonamento vertical

Scaling out - escalonamento horisontal

Linguagens backend web

API - Application Programming Interface

API First

"Haverá Netflix em qualquer dispositivo que tenha tela!"

Banco de dados

Cache

CDN - Content Delivery Network 

SaaS - Software as a Service

PaaS - Platform as a Service

Aplicação

Dados

IaaS - Infraestucture as a Service

XaaS - Everything as a Service

"X" as a Service

YaaS - You as a Service

Perguntas

vitor@lt.coop.br
linkedin.com/in/vitormattos

Arquitetura de aplicações web

By Vitor Mattos

Arquitetura de aplicações web

Vivemos em um mundo onde praticamente tudo tem alguma relação com a web mas como funcionam estas ferramentas que de alguma forma necessitam de um ecossistema web? Compreenda um pouco mais da arquitetura de aplicações web, desde um simples site até uma aplicação embarcada ou mobile.

  • 1,250

More from Vitor Mattos