Criar elementos dinamicamente em JS é uma boa ideia?

Recentemente eu criei um video dinâmico para diminuir o tempo de playload. Imagine que a página vai carregar, mas o vídeo não. Mas ele está lá, pronto para ser criado. Quando o cliente clica na thumbnail (identica a do YT), o JS cria o elemento. Simples, fácil e bem útil, nesse caso.

https://webdesign.tutsplus.com/pt/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

Mas hoje me deparei com um problema um pouco mais complexo. Precisava carregar um elemento somente no mobile. O meu ambiente nesse caso é em PHP, ou seja, não tenho as facilidades de frameworks JS.

 window.addEventListener("load", sizeOfThings());
    function sizeOfThings() {
        var windowWidth = window.innerWidth;
            var el = aElement;
            var node = document.querySelector('#sidebar-blog');

        windowWidth > 480 ? node.innerHTML = el
            : console.log("false");

Desinformado, eu tentei display: none. Descobri que a propriedade none esconde o elemento, mas o DOM o randeriza assim mesmo. Ou seja, nada últil para o meu propósito.

Procurei um bocado e decidi criar o elemento dinamicamente. Pensei: eu só preciso saber qual é a largura da página, se ela for > 480, eu crio o elemento. E aí eu descobri que o objeto Window tem a propriedade innerWidth. Amo JS.

Funcionou. Mas, por motivos especificos do PHP e tal, eu tive que utilizar esse script inline. Esse é um sistema de conteúdo, portanto a parte sintática é importante. Sem falar que adiciona complexidade ao código. Quando eu quiser fazer isso de novo, vou ter que criar uma nova funcão? Ou passar parâmetro no HTML?

Trabalhe menos, de forma mais inteligente.

A solução

Quando o cliente faz uma requisição, ele envia o user-agent no cabeçalho HTTP. Esse user-agent tem informações sobre o cliente, como o navegador, o sistema operacional e etc. Então eu vou interceptar a requisição, ler o user-agent e randerizar somente se não for mobile. Pera, claro que não! Imagine o tamanho do esforço. Eu amo escrever código do zero, mas esse não era o momento.
Então eu descobri que um abençoado já havia escrito exatamente o que eu precisava. Intercepta a requisição, verifica de onde está vindo e devolve somente o que eu quero. Tem todos os devices listados e etc. Eu amo o open source.

Então, somente o que eu tive que fazer foi instanciar e usar a função isMobile(). Imagine o poder que essa implementação vai me dar daqui para frente.

https://github.com/serbanghita/Mobile-Detect

E, como eu disse no inicio do artigo, o meu objetivo é a performance. E utilizar o PHP foi mais performático que utilizar o JS. Sem falar na parte sintática do código.

 require_once('mobile-detect.php');
 $detect = new Mobile_Detect;

 if ($detect->isMobile() == false ) {
 //your code
 }

Quer trocar uma ideia? https://github.com/portolucas

Comments

[Hacker Gaucho]

uso essa função simples com o mesmo objetivo:

function isAjax(){
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        return true;
    }else{
        return false;
    }
}

ela é bastante útil para aproveitar uma mesma rota para atender a requisições síncronas e assíncronas. como bônus, ao dar um CTRL+U o código fonte é exibido como JSON =)