Uma versão um pouco mais leve e sem referências a tecnologias de backend, apresentando para a galera de frontend os principais conceitos de APIs RESTful e algumas ferramentas úteis para o dia-a-dia. Para ver os slides com comentários descritivos, acesse: https://docs.google.com/presentation/d/1fcvYVSXVsgGsnjTJZHBxVig8d0iVOENcuPvfkfnuG4M/edit?usp=sharing

1. REST-fuuuu
RESTful e a polícia do HTTP

2. Igor Santos who?
- Desenvolvedor PHP desde os 16 (~10 anos)
- Trabalho com APIs REST: ~3 anos
- Desenvolvedor React: ~1 ano
- Já mexi com Ruby, mas...
- Já brinquei com C e Python mas…
- Já me diverti com Ember mas…
Atualmente, sou Freelancer remoto Full-stack na
We’re hiring! Talk to me ;)

3. Remoto.
MESMO.

4. RESTful

5. RESTful……who?
REpresentational
State
Transfer
-ful: completo, pleno
Normalmente (sempre?) baseado em HTTP(S)

6. RESTful……who?
Martin Fowler & Leonard Richardson, 2010: Steps toward the glory of REST

7. RESTful……who?
Martin Fowler & Leonard Richardson, 2010: Steps toward the glory of REST
Zoeira
REST de verdade

8. #0: O pântano do POX*
✓ Comunicação sobre o HTTP
✗ HTTP = protocolo facilitador de rede, somente
✗ Verbos HTTP? GETPOST all the things!
*POX: Plain Old XML

9. #0: O pântano do POX* *POX: Plain Old XML

10. #0: O pântano do POX* *POX: Plain Old XML
POST /api/
<listEvents date="2016-10-22"/>
----------------------------------------
HTTP/1.1 200 OK
<eventsList>
<event id="10">
<dates begin="2016-10-22">
<topics>
<topic>HTTP</topic>
<topic>REST</topic>
</topics>
[...]

11. #0: O pântano do POJ* *POJ: Pure and Old JSON
POST /api/?method=events.list
{ date: "2015-10-22" }
----------------------------------------
HTTP/1.1 200 OK
[
{
"id": 10,
"start": "2015-10-22",
"topics": [ "PHP", "REST" ],
"speakers": [
{
...

12. #1: Resources!
✓ Comunicação sobre o HTTP
✓ URIs indicam o recurso desejado
✓ Recursos HTTP simplificados, para dividir os requests
✗ Verbos HTTP? GETPOST all the things!
AKA entidades

13. #1: Resources RPC!
POST /api/events
{ "method": "list", date: "2015-10-22" }
----------------------------------------
HTTP/1.1 200 OK
[
{
"id": 10,
"start": "2015-10-22",
"topics": [ "HTTP", "REST" ],
"speakers": [
{
...

14. #1: Resources RPC!
POST /api/events/search
{ date: "2015-10-22" }
----------------------------------------
HTTP/1.1 200 OK
[
{
"id": 10,
"start": "2015-10-22",
"topics": [ "PHP", "REST" ],
"speakers": [
{
...

15. #2: Eu chamo API, tu chamas API...
✓ Comunicação sobre o HTTP
✓ URIs indicam o recurso desejado
✓ Recursos HTTP dividem os requests
✓ Verbos HTTP dividem as operações

16. #2: Eu chamo API, tu chamas API...
Subníveis de uso dos Verbos HTTP
GET POST PUT DELETE
Básico Consultas
Criação
Edição
Remoção
X X
POST /clientes/buscar
GET /clientes

17. #2: Eu chamo API, tu chamas API...
Subníveis de uso dos Verbos HTTP
GET POST PUT DELETE
Básico Consultas
Criação
Edição
Remoção
X X
Quase lá Consultas
Criação
Edição
X Remoção
POST /clientes/apagar/2
DELETE /clientes/2

18. #2: Eu chamo API, tu chamas API...
Subníveis de uso dos Verbos HTTP
GET POST PUT DELETE
Básico Consultas
Criação
Edição
Remoção
X X
Quase lá Consultas
Criação
Edição
X Remoção
RESTful-ish Consultas Criação Edição Remoção
POST /clientes/edit/27
PUT /clientes/27

19. #2: Eu chamo API, tu chamas API...
Subníveis de uso dos Verbos HTTP
GET POST PUT DELETE PATCH
Básico Consultas
Criação
Edição
Remoção
X X X
Quase lá Consultas
Criação
Edição
X Remoção X
RESTful-ish Consultas Criação Edição Remoção X
RESTful-ish
bônus
Consultas Criação Edição Remoção
Edição
parcial

20. #2: Eu chamo API, tu chamas API...
Subníveis de uso dos Verbos HTTP
GET POST PUT DELETE PATCH
Básico Consultas
Criação
Edição
Remoção
X X X
Quase lá Consultas
Criação
Edição
X Remoção X
RESTful-ish Consultas Criação Edição Remoção X
RESTful-ish
bônus
Consultas Criação Edição Remoção
Edição
parcial
RESTful-ish
bônus plus
Além dos verbos certos,
usa os códigos HTTP e headers corretos

21. #2: Eu chamo API, tu chamas API...
GET /api/events?date=2016-10-22
----------------------------------------
HTTP/1.1 200 OK
[
{
"id": 10,
"start": "2016-10-22",
"topics": [ "HTTP", "REST" ],
"speakers": [
{
...

22. #2: Eu chamo API, tu chamas API...
POST /api/events
{ "start": "2016-10-22", ... }
----------------------------------------
HTTP/1.1 201 Created
[
{
"id": 10,
"start": "2016-10-22",
"topics": [ "HTTP", "REST" ],
"speakers": [
{
...

23. #2: Eu chamo API, tu chamas API...
DELETE /api/events/10
----------------------------------------
HTTP/1.1 204 No Content

24. #2.5: RESTful-ish
1. Códigos HTTP
- 200: OK, tá aqui o que você pediu
- 201: Criei, olha aqui o que eu fiz
- 204: Funcionou, mas não tenho mais nada pra te dizer
- 400: erro genérico do usuário
- 401: OW, quem é você?
- 403: OW, sei quem é você mas isso aqui não é pro teu bico
- 404: tem nada disso aqui não
- 405: verbo incorreto
- 406: não consigo gerar no formato que você quer
- 422: sabe nem escreve direito, mano
- 500: CORRÃO PARA AS MONTANHAS
- 501: não sei fazer isso não

25. Árvore de
decisão
de códigos HTTP

27. #2.5: RESTful-ish
Stateless, formats, versioning...

28. #2.5: RESTful-ish
2. Stateful
- HTTP = stateless
- Stateless <> sessão

29. #2.5: RESTful-ish
2. Stateful
- HTTP = stateless
- Stateless <> sessão
- API <3 sessão
- API + HTTP + sessão =
- HTTP Auth: autentica o usuário inicialmente
- HTTP Cookie - re-identifica o usuário, tornando
desnecessário re-autenticar a cada novo request

30. #2.5: RESTful-ish
2. Stateful
- HTTP = stateless
- Stateless <> sessão
- API <3 sessão
- API + HTTP + sessão =
- HTTP Cookie: inseguro no geral
- HTTP Auth: autentica o usuário inicialmente
- JSON Web Token: mantém o estado do lado do
cliente de modo seguro, livrando o servidor disso

31. #2.5: RESTful-ish
3. Formatos de resposta
- Método A: header HTTP Accept: text/xml
- Método B: extensão na URI: /events.json
- O correto: aceitar os dois métodos, e responder
em XML e JSON
- O mais comum: um dos dois métodos - ou nenhum,
e responder em JSON (mais leve de implementar e
interpretar)

32. #2.5: RESTful-ish
4. Versionamento da API
- Método A: incluído na URL
- Método B: header HTTP customizado
- Método C: incluído no header Accept
- O correto: nenhum
- O mais comum: na URL - mais fácil de implementar dos
dois lados e associa diretamente o método, o resource e
a resposta à disponibilidade destes na API

33. #2.5: RESTful-ish
4. Versionamento da API
- Método A: incluído na URL
- Método B: header HTTP customizado
- Método C: incluído no header Accept
- O correto: nenhum
- O mais comum: na URL - mais fácil de implementar dos
dois lados e associa diretamente o método, o resource e
a resposta à disponibilidade destes na API

34. #3: HATEOAS
Hypermedia
As
The
Engine
Of
Application
State

35. #3: HATEOAS
Links definem como se mover
dentro da API.
Em teoria, permitiria aplicações
automatizadas, consumidoras
de APIs.

36. #3: HATEOAS
Links definem como se mover
dentro da API.
Na prática, pode ser usado para
automatizar certas atividades
numa aplicação.

37. #3: HATEOAS
JSON API Spec
- Uma especificação de verdade para APIs!

38. #3: HATEOAS
JSON API Spec
- Uma especificação de verdade para APIs!
- Bem completa, complexa mas bem poderosa
- Dá pra fazer um monte de coisas com ela
- Muito legal <3

39. #3: HATEOAS
JSON API Spec
- Uma especificação de verdade para APIs!
- Bem completa, complexa mas bem poderosa
- Paginação e navegação entre recursos
- Requisição de recursos relacionados no mesmo payload
- Meta informações sobre o request
- Formato definido entre requests de uma única ou múltiplas
entradas, dados de identificação
e atributos, relacionamentos, etc

40. Testes?
Quer avaliar se a
API tá funcionando
como devia?
Postman
for the rescue!
Ou Apiary .

41. Não tem
backend?
Tá sozinho nessa?
Firebase
for the rescue!

42. Não tem
backend?
Tá sozinho nessa?
Firebase,
Deployd,
Parse Server,
etc.

43. Se perdeu?
Tá faltando
documentação?
Swagger,
API Blueprint,
Apiary, RAML,
Postman,
etc.

44. We’re hiring @
Do you speak English?
Do you feel you’re great at what you do?
Looking for good clients, great pay, an awesome team and freedom?

45. That’s all,
folks!
- Richardson’s API Maturity Model
- API versioning discussion
- HTTP Headers spec
- HTTP Verbs: Wikipedia / Spec
- JSON API spec
- Postman
- Toptal Engineering Blog
*.com/igorsantos07
*.com/igorsantos07
*.comigorsantos.com.br
*freelancer.igorsantos.com.br
toptal.igorsantos.com.br

46. That’s all,
folks!
Peço desculpas por todas as piadas
e trocadilhos ruins usados nesta
palestra. Carlos Alberto de Nóbrega
não esteve envolvido com a
mesma.
*.com/igorsantos07
*.com/igorsantos07
*.comigorsantos.com.br
*freelancer.igorsantos.com.br
toptal.igorsantos.com.br