Validação no FrontEnd

Opa Santi, tudo bem ?

Então, existem alguns pontos nessa questão, podemos ter algumas rotas públicas que podem ser acessados de qualquer lugar, por exemplo:

• Via Postman / Curl / Imnsonia

Essa a gente já viu que está completamente desassociada do frontend, e podemos passar dados inválidos tranquilamente

E até via navegador, se você abrir o console de desenvolvedor e clicar na aba de Network vai ver que temos acesso a todas requisições que estamos fazendo

Dessa forma podemos inclusive observar a requisição do tipo POST e com botão direito na requisição, por exemplo no Chrome:

• Copy -> Copy as Fetch

No Firefox

• Use as Fetch em Console

E teremos algo parecido com:

fetch("http://localhost:8080/gerenciador/entrada", {
  "headers": {
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    "accept-language": "en,pt-BR;q=0.9,pt;q=0.8,en-US;q=0.7",
    "cache-control": "max-age=0",
    "content-type": "application/x-www-form-urlencoded",
  },
  "referrer": "http://localhost:8080/gerenciador/entrada?acao=LoginForm",
  "referrerPolicy": "no-referrer-when-downgrade",
 --> "body": "login=Leonardo&senha=12345&acao=login", <-----
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

E dessa forma você pode mudar as informações do body que está sendo enviado, e se o seu backend não estiver preparado para validar as informações provavelmente irá inserir dados inválidos, ou alguma coisa pode quebrar a execução do servidor :)

A validação do lado do Frontend nos auxilia muito a evitar requisições desnecessárias (com dados inválidos), e também gera uma usabilidade melhor, dado que muitas vezes pode ser algo instantâneo ( sem delay de comunicação com o servidor), mas para ter uma validação eficiente é preciso que o backend esteja completamente protegido :)

Abraços e Bons Estudos!

Entendi. Então o ideal seria ter essa validação dos dados tanto no front quanto no back ? Porque por exemplo, a Juliana faz a validação do tamanho de caracteres no campo Cliente. Ao meu ver, essa validação pode ser simplesmente associada a algum evento no próprio input validando o tamanho mínimo, mas, mesmo colocando essa validação no front, o ideal é fazer a MESMA validação no back antes de setar no banco ? Seria isso ?

Eu pergunto, porque gera uma certa repetição de código, tem alguma boa prática para evitar uma requisição desnecessária e ao mesmo tempo evitar essa repetição de código ?

Então Santi,

Ao meu ver, essa validação pode ser simplesmente associada a algum evento no próprio input validando o tamanho mínimo

Do mesmo jeito que você está testando a API Rest utilizando o Postman o que impede de um usuário fazer um cadastro utilizando ele, ou o fetch api do próprio navegador?

Ele pode simplesmente fazer:

const dados = {
    name: "umNomeMaiorQue5CaracteresParaOBancoDeDados",
    password: "12345"
}

fetch("http://localhost:8080/cadastro", {
    method: "POST",
    headers: {
        "content-type": "application/json"
    }
    body: JSON.stringify(dados)
    });

E pronto, não tem evento de input, não tem nada que o html ou o frontend possa validar

porque gera uma certa repetição de código, tem alguma boa prática para evitar uma requisição desnecessária e ao mesmo tempo evitar essa repetição de código ?

Então, eu sinceramente não vejo como repetição de código, pois são 2 projetos diferentes, concordo que se você está trabalhando nas duas partes ao mesmo tempo vai ter essa impressão, mas eu percebo como:

• Backend: Se protegendo de qualquer requisição

• Frontend: Trazendo uma usabilidade melhor para o usuário

Se a mesma API fosse servir para requisições feitas pelo celular, provavelmente também faríamos as mesmas validações para evitar também uma má experiência do nosso aplicativo

Normalmente é um "bad smell" quando temos repetição de código dentro da mesma aplicação, neste caso estamos falando de aplicações diferentes

Sinceramente, pode até haver alguma opção para evitar isso, mas acredito que haverá perdas, ou de proteção no backend, ou de usabilidade no front :)

Abraços!

Perfeito sua explicação. Obrigado demaaais! Valeu