9

Estou terminando de construir um site em PHP com a arquitetura MVC, o próximo passo é integrar o aplicativo (que só tenho a interface) com o núcleo(controller) site, para buscar informações do banco de dados. Isso será feito com Ajax porque o aplicativo é hibrido, em HTML, com o Intel XDK.

Quero saber qual a melhor maneira de transportar esses dados:

  • Enviando Ajax para o site e retornando um JSON, assim manipulando o array para usar no aplicativo.

  • Enviando Ajax para o site e nele montando uma string com código HTML e retornando-a para o aplicativo usar esse HTML na sua interface.

Vejo a segunda opção melhor por causa da minha maior familiaridade com PHP, mas qual das duas opções requisita menos a velocidade da internet do aparelho e compromete menos o desempenho do app? Sei que é uma pergunta teoria e corre o risco de ser negativada, mas na minha visão é uma pergunta válida, e não baseada em opiniões já que deriva de desempenho e não do que acha melhor.

3
  • Pelo pouco que conheço a vantagem do [JSON] é sua Leitura humana e sua facilidade de escrita sem tantas tags como no [XML] por exemplo. Em termos de benchmarking lembre-se que o [JSON] você terá que construir todos os elementos, usar algo como o [Mustache] e provavelmente o request do usuário será mais dinâmico, Poderá demorar um pouco mais enquanto que no HTML a demora seria só memo tratar os elementos um a um, o consumo será maior. Não tive muito tempo de pesquisar e estudar a cerca disso então não manjo muito do assunto, mas espero ter ajudado um pouco. Commented 8/06/2016 às 12:14
  • JSON facilita o lado do front e back side, porque ele transporta uma lista de objetos, que pode ser interpretado pelas tags atribuidas, facilitando a leitura para javascript e para controler.
    – HudsonPH
    Commented 8/06/2016 às 19:39
  • Dá um exemplo do HTML que você tem em mente utilizar. Commented 15/06/2016 às 11:51

5 Respostas 5

12

Cara,

vou me abster das comparações entre JSON e XML e manter o foco no que você perguntou.

Você colocou assim:

Quero saber qual a melhor maneira de transportar esses dados:

  • Enviando Ajax para o site e retornando um JSON, assim manipulando o array para usar no aplicativo.
  • Enviando Ajax para o site e nele montando uma string com código HTML e retornando-a para o aplicativo usar esse HTML na sua interface.

E para mim na sua própria pergunta você já ofereceu a resposta.

Quero saber qual a melhor maneira de transportar esses dados.

Na minha pouca experiência, acredito que quando se faz uma requisição ajax o que você está buscando do servidor são dados e nada mais do que isso.

Não acho que o retorno de código HTML seja uma boa prática por alguns motivos:

  • Normalmente polui o código do backend com infinitas tags HTML sendo concatenadas
  • Você impede que aquela url ajax seja utilizada em outras partes do seu projeto, pois nem todo mundo que precisa daqueles dados, precisa daquele HTML.

Enfim, escolheria retornar somente os dados para o seu frontend e tratar todo o HTML que você precisar por lá mesmo.

Além disso encontrei essa pequena discussão no StackOverflow. Acho melhor você dar uma olhada e tirar as suas próprias conclusões.

9

Não reinvente da roda, use JSON!

Existem diversos formatos a serem utilizados para o transporte de dados, mas no meu entendimento o JSON é o melhor formato atualmente por estar sendo bastante utilizado, ou seja, as linguagens de programação estão adaptadas as conversões:

  • Objeto para JSON
  • JSON para Objeto

E também por ser um formato mais compacto que o XML.

Com uma String você teria que primeiro criar um padrão qualquer que só você entenderia ou quem tivesse o seu código-fonte para analisar, diferente do JSON que (como tido anteriormente) já está "massificado".

Exemplo

Em uma classe "Proprietário" você teria de criar uma função para transformar os dados em JSON e também teria que ter um método para transformar o JSON em uma instância de um Proprietário. Com o JSON esse métodos provavelmente já devem existir nativamente ou através de um código de terceiros.

JSON VS XML

class Proprietario { id, nome }

Json

"proprietario":{"id":1,"nome":"Victor"}

XML

<proprietario>
    <id>1</id>
    <nome>victor</nome>
</proprietario>

Perceba que o tamanho do JSON mesmo em uma escala tão pequena é bem menor, imagine em uma lista com 1000 proprietários.

Conclusão

Não adianta reinventar a roda não utilizando algo que funciona e já esta amplamente testado.

4

Enviando Ajax para o site e retornando um JSON, assim manipulando o array para usar no aplicativo.

Nesse caso, o código JavaScript necessário vai ser muito maior, já que contém a lógica para exibir os dados.

Isso significa que você vai ter que carregar mais JavaScript antes de exibir os dados.

Mas isso pode se pagar ao longo do tempo se os dados forem carregados várias vezes sem recarregar a página, já que a quantidade de dados transmitidas é menor por requisição.

Essa abordagem tende a apresentar melhor performance, mas também maior complexidade e logo sua base de código pode se tornar um caos a não ser que você e os demais integrantes da equipe sejam desenvolvedores disciplinados e escrevam JavaScript modular (AMD, ES 6).

Enviando Ajax para o site e nele montando uma string com código HTML e retornando-a para o aplicativo usar esse HTML na sua interface.

O JavaScript tende a ser muito mais simples e conciso, porém a quantidade de dados transmitidos por requisição é muito maior.

Trocando em miúdos, o site carrega mais rápido, mas a cada nova atualização assíncrona ele vai consumir um pouco mais de banda e processamento no servidor.

Outro problema dessa abordagem é que pode ser complexo manter trechos da página separados da página principal que ora são renderizados dentro do contexto da página, ora de forma independente. Sem uma boa organização e um bom motor de renderização isso tende a gerar código espaguete ou duplicado.

Normalmente polui o código do backend com infinitas tags HTML sendo concatenadas

Não necessariamente. Em PHP você pode ter trechos de templates que podem ser renderizados de forma independente ou em conjunto com a página. Alguns frameworks permitem você criar componentes ou widgets que funcionam dessa forma.

Você impede que aquela url ajax seja utilizada em outras partes do seu projeto, pois nem todo mundo que precisa daqueles dados, precisa daquele HTML.

Renderizar HTML definitivamente acopla o serviço com a sua página, mas nada impede de você manter serviços públicos em JSON e privados em HTML separadamente.

Pela minha experiência, os consumidores de dados de sistemas terceiros geralmente tem uma visão diferente dos dados. Não é sempre o caso, mas tentar manter uma única API para uso interno e externo pode ser uma dor de cabeça muito maior, já que você fica engessado pelo contrato da API que não pode quebrar para os sistemas externos.

Enfim, escolheria retornar somente os dados para o seu frontend e tratar todo o HTML que você precisar por lá mesmo.

De um ponto de vista arquitetural esta é forma mais sofisticada, a tendência atual e preferência da grande maioria dos desenvolvedores front end, por possibilitar:

  • Melhor separação de conceitos: não divide a lógica de renderização entre cliente e servidor, mas concentra no cliente
  • Flexibilidade: permite a evolução do front end independente das APIs ou serviços do back end.

Finalmente, se você estiver mesmo preocupado com desempenho, considere usar um protocolo mais compacto que JSON, tal como o Protobuf do Google. Veja algumas vantagens aqui e uma implementação em PHP aqui.

3
  • 1
    Muito bem explicado cara.
    – Rubico
    Commented 20/06/2016 às 12:54
  • 1
    Vale dizer que o Protocol Buffer é um retorno ao passado, e isso me agrada. Os formatos binários, como IFF e seus derivados eram bem comuns há alguns anos atrás. não deixavam de ser simples de se usar e bem compactos. Depois o pessoal começou a querer fazer formatos pra máquina ler que fossem legíveis para humanos, chegando até o trambolho do XML (que apesar de até ter seu nicho, acabou virando moda). Aí finalmente começaram a perceber que é um luxo "caro" e desnecessário, e estão voltando a empacotar o que é de máquina, para a máquina ler. Quanto à resposta, agregou valor à discussão. +1
    – Largato
    Commented 21/06/2016 às 4:21
  • @Bacco Não tinha pensando por esse ângulo ainda - sobre o retorno ao passado, mas é a mais pura verdade. Um formato legível para humanos é agradável para o desenvolvedor, mas poucos param para calcular o preço disso.
    – utluiz
    Commented 21/06/2016 às 4:33
4
+50

A melhor forma de transportar esses dados é através de JSON, ele é utilizado em vários distribuidores de serviço através de REST (Representational State Transfer). Antigamente utilizava-se o XML para isso.

Há alguns motivos para você não enviar os dados em HTML, dentre eles:

  1. O arquivo enviado ficará com muitas informações inúteis;
  2. Você precisará capinar informação dentro dele, e uma mudança no layout da página pode comprometer a sua aplicação;
  3. Você não vai encontrar muita coisa na internet sobre esse método seu;
  4. Só vai funcionar para você porque não seguirá um padrão, dependendo do conteúdo HTML

Alguns motivos para usar o JSON: 1. JSON é o padrão adotado por grandes empresas para envio e recebimento de dados entre aplicações. O Facebook, o twitter e o próprio Google o utilizam; 2. Ele é mais leve que o XML pois não possui tags enormes e isso te fará poupar banda, caso sua aplicação seja pela internet e tempo; 3. Você pode seguir o padrão REST através do protocolo HTTP e disponibilizar serviços para terceiros futuramente, caso seja o caso. 4. Há conversores de JSON para Objeto e de Objeto para JSON em diversas linguages 5. Se você precisar fazer manutenção no seu site, seus serviços disponibilizados em JSON não estarão comprometidos e sua aplicação continuará rodando normalmente, ou seja, independe do site em HTML.

HTML VS JSON VS XML

Vejo a segunda opção melhor por causa da minha maior familiaridade com PHP, mas qual das duas opções requisita menos a velocidade da internet do aparelho e compromete menos o desempenho do app?

O tempo de download da informação será maior e o desempenho do app ficará reduzido caso você opte por HTML, uma vez que o JSON apresenta uma arquitetura simples. Somente para ilustrar melhor segue um exemplo relacionado ao usuário:

Em JSON:

{"nome":"Anderson"}

Em HTML:

<html>
<title>Dados do usuário</title>
<body>
<div id="container">
<h1>Dados do usuário</h1>
<div class="algumacoisa">
<p>Nome do usuário:<span id="nomedousuario">Anderson</span></p>
</div>
</div>
</body>
</html>

Em XML:

<nomedousuario>Anderson</nomedousuario>

O tamanho dos arquivos como se pode ver é muito diferente, enquanto o JSON é simples e só tem as informações relevantes, o HTML tem um monte de informações inúteis (para o app) e a dificuldade de tratamento para conseguir a informação desejada será muito maior e o XML apresenta tags que deixam o arquivo bem maior que o JSON. Você pode utilizar JSON e XML, priorizando o JSON, mas não utilize o HTML puro como se fosse um serviço porque ele é muito pesado para exercer essa função.

Conclusão

Recomendo:

  1. Utilize Orientação a Objeto
  2. Utilize a arquitetura REST com JSON e/ou XML, os dois podem conviver numa mesma aplicação e sem muita dificuldade;
  3. Leia um pouco mais sobre os protocolos HTTP para entender melhor o que acontece por baixo dos panos;

Em resumo: siga padrões existentes.

Espero ter ajudado e me coloco a disposição.

Abraço!


Aqui estão alguns links que podem te ajudar:

Introdução ao REST

Como criar um web service básico com PHP - Página em inglês

Trabalhando com JSON em PHP

4
  • 1
    Só um detalhe, ao retornar com html nunca se usa uma pagina inteira, desde a tag html etc, e sim parte do código, como um parágrafo, um botão ou um thumbnail.
    – Leonardo
    Commented 14/06/2016 às 13:10
  • @lvcs vc fala em utilizar html, como arquivo texto e não como html mesmo? Caso sim, não teria o básico para ser html de verdade. Expliquei com base no mínimo para se considerar uma HTML, mas posteriormente se pode pegar uma parte da página (botão, div, parágrafo etc), mas sem deixar de ter tags básicas do html. Commented 14/06/2016 às 13:19
  • Não, quando uso é quase igual l seu exemplo, mas no caso so retornaria a tag p, e nao todo o código de uma página, retornaria a tag p e com jquery acrescentaria esse retorno como html de uma div específica.
    – Leonardo
    Commented 14/06/2016 às 13:27
  • Mas o jquery, por exemplo faz uma leitura em back é de toda a página para poder extrair parte dela. Já fiz isso em projetos antigos através de ajax. Commented 14/06/2016 às 13:42
2

" ... Quero saber qual a melhor maneira de transportar esses dados: ..."

Para mim não ficou muito claro se a sua dúvida é para enviar algo para o servidor ou se é para receber de volta do servidor ("Enviando Ajax para o site").

Imagino que seja quando recebe informações do servidor via JSON. Mas vou postar aqui um pedaço do meu código que uso sempre para situações envolvendo JSON tanto para enviar para o PHP, quanto para receber do servidor para ser tratado em JS.

Como muitos já discutiram acima, não reivente a roda, use JSON. Mas essa abordagem usa uma solução mista, afinal transforma o JSON numa string, para melhorar a performance durante o processo de transferência.

//Aqui é o seu código PHP (seuSErvidor.php).
//Recuperando as informações enviadas do Javascript para o php, FrontENd=>BackEnd.

$ObjEvn=$_POST["ObjEvn"];//valor = btn_Login
$dataJsToPHP=$_POST["dataJsToPHP"];//valor do input "#txt_EmailLogin"
$eviarQQCoisa=$_POST["eviarQQCoisa"];//Valor 123

//NOTA: Não é aconselhado recuperar valores enviados de JS sem um tratamento prévio. Geralmente eu faço as validações no lado javascript.

//aqui vc pode direcionar o seu fluxo(processo). Pode ser uma página admin, por exemplo que vai gerenciar todos direcionamentos como um controler.
if($ObjEvn=="btn_Login"){
    //Código para testar login de usuário .... depois crie sua array $arrToJSON para ser enviada para javascript.
}
elseif($ObjEvn=="btn_DeleteUsuario"){
    //Código para deletar usuário .... depois crie sua array $arrToJSON para ser enviada para javascript.
}
elseif($ObjEvn=="btn_QualquerAcao"){
    //Código para outras ações  .... depois crie sua array $arrToJSON para ser enviada para javascript.
}



//Depois de fazer suas consultas no banco de dados, vc pode enviar os dados     para uma array php. Note que vc pode criar quantos índices vc quiser e colocar o que quiser dentro da array, incluisive código HTML, com javascript embutido. Funciona perfeitamente para mim. Eu carrego páginas inteiras utilizando essa técnica.
        //Crie sua array  
        $arrToJSON = array(
          "dataPHPtoJs"=>"algumDado de quaqluer formato",
          "htmlToPHP"=>"<div class=\".class1\">algum código html aqui</div>"    
        );  
        //Nota: a depender do tamanho da informação que vc quer guardar em "htmlToPHP" talvez precise usar um código para escapar espaços e carateres especiais. Vou colocar a função logo abaixo.

        //Essa função pega a array e transforma numa representação JSON - string. http://php.net/manual/en/function.json-encode.php

        return json_encode(array($arrToJSON));




    //No seu lado javascript ou "SITE" como vc disse. O evento foi iniciado pelo elemento "#idElement". Pode ser um click ou qualquer outra coisa. Vc vai mandar algo para o PHP (o codigo acima) e vai receber a $arrToJSON (que agora é uma string) no processo return

    $(document).on("event", "#idElement", function(){
        //Veja que aqui vc tbm está enviando para o PHP o objeto
         var dt={ 
                  ObjEvn:"btn_Login",
                  dataJsToPHP: $("#txt_EmailLogin").val(),
                  eviarQQCoisa: 123
                };

        //Ajax      
         var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
                                url: "seuSErvidor.php",
                                type: "POST",
                                data: dt,
                                dataType: "json"
                            });

        //Então quando requisição AJAX estiver terminada, vc acabou de receber do seu PHP uma string que vai ser tratada aqui em javascript

            request.done(function(dataset){
                for (var index in dataset){ 
                     dataPHPtoJsJS=dataset[index].dataPHPtoJs;//Aqui é o index da array que vc usou no php.
                     htmlToJS=dataset[index].htmlToPHP;
                 }

                 //Aqui vc pode usar o que recebeu do PHP e modificar as sua página de acordo com o recebido. POde carregar htmls interios, inclusive.

                 if(dataPHPtoJsJS){
                    $( "#idseuElemento1" ).removeClass( "class1" );
                    $( "#idseuElemento2" ).html( htmlToJS );
                 }


         }); 

        //Ajax Fail 
            request.fail(function(jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            }); 
    }

//Função para filtrar espaços (ou minimizar) javascript ou HTML


function html_rows_Event_Details() {

$str =<<<eof
  <tr class='evntdet'>
      <td colspan='4' style='background-color:#00BABF ;  padding: 10px;  text-align: center;'>
          Something
      </td>
  </tr>
eof;



$re = "/(?:\\s*([<>])\\s*|(\\s)\\s*)/im"; 
$subst = "$1$2"; 

return  preg_replace($re, $subst, $str);

}

Fonte: Link.

1
  • Com os dois casos que citei na pergunta esta claro que são os dados de retorno, já que os que envio sempre são por Ajax independente da forma, a variável nos dois casos são o retorno.
    – Leonardo
    Commented 14/06/2016 às 12:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .