Engine XML Web Components

[brunoborgesruiz]

O principio de web components extendido para aplicação em tags xml que tem toda sua implementação em código javascript.

[fczuardi]

Pode dar um exemplo?

[brunoborgesruiz]

Imagine uma tag xml e suas propriedades . Essa tag xml representa um objeto javascript com suas respectivas propriedades. A partir dai a Engine XML Web Components lê o arquivo xml com várias tags xml e instância os objetos javascript.

[zenorocha]

Ainda não consegui visualizar como nem mesmo o porquê isso seria feito, tem como explicar melhor seu caso de uso @brunoborgesruiz?

[brunoborgesruiz]

Meu caso de uso consiste um uma equipe focada em back-end com algum conhecimento em xml e a necessidade de gerar relatórios em diferentes formatos. Para aumentarmos a produtividade em termos de saída de relatórios, e ainda assim usando componentes que estejam dentro dos padrões web (html5), esse projeto faz algum sentido , já que a curva de aprendizagem para uso dos componentes seria bem menor.

[zenorocha]

Como isso se conecta com Web Components? Pode mostrar em forma de código como seria essa ideia?

[zenorocha]

Além disso, que tipo de ajuda especificamente você precisaria para fazer isso acontecer?

[brunoborgesruiz]

O que segue abaixo é um botão em javascript:

var ModeloBotao = function () { "use strict"; this.identificacao = Math.random() * 100; this.texto = ""; this.tipo = ""; this.tamanho = ""; this.icone = ""; this.funcao = ""; };

var VisaoBotao = function () { "use strict"; this.visao = function () { var v = document.createElement('button'), ic = document.createElement('i'); v.appendChild(ic); return v; };

};

var ControladorBotao = function () { "use strict"; this.modelo = new ModeloBotao(); this.visao = new VisaoBotao(); this.implementa = function (modelo) { var v = this.visao.visao();

    v.setAttribute('id', modelo.identificacao);
    v.innerHTML += modelo.texto;
    v.className = modelo.tipo;
    v.className += " " + modelo.tamanho;
    v.children[0].className = modelo.icone;
    v.addEventListener("click", eval(modelo.funcao));
    return v;
};

};

O que segue abaixo é a marcação em xml para o objeto acima:

O que segue abaixo é um "rascunho" de uma Engine XML que fiz para que leia o arquivo xml com a marcação e crie a marcação html com base no objeto javascript:

function carregaXML(arquivo){

var requisicaoXML = new XMLHttpRequest();   
    requisicaoXML.open("GET",arquivo,false);
    requisicaoXML.send();

    return requisicaoXML.responseXML;

}

var leXML = function (retornoDeArquivoXML){ /Cria variável baseada na tag/ eval("tag"+retornoDeArquivoXML.getAttribute('id')+"= new Controlador"+retornoDeArquivoXML.tagName+"()");

    /*Varre todos os atributos da tag corrente*/
    for (var k = 0; k < retornoDeArquivoXML.attributes.length; k++) {

            /*Atribui ao elementos as prorpiedades lidas*/  
            eval("tag"+retornoDeArquivoXML.getAttribute('id')+".modelo."+retornoDeArquivoXML.attributes[k].name+" = '"+
                retornoDeArquivoXML.attributes[k].value+"'");

    };

    /*Atribui as propriedades lidas e atribuitas nos objetos nas tags*/ 
    //eval("tag"+retornoDeArquivoXML.getAttribute('id')+".implementa("+"tag"+retornoDeArquivoXML.getAttribute('id')+".modelo"+")");

    /*Verifica se existe pai*/
    if(retornoDeArquivoXML.parentNode.tagName != undefined){
        eval("tag"+retornoDeArquivoXML.parentNode.getAttribute('id')+".adicionaElemento(" +"tag"+retornoDeArquivoXML.getAttribute('id')+".implementa("+"tag"+retornoDeArquivoXML.getAttribute('id')+".modelo"+")");
    }else{
        eval("document.querySelector('#body').appendChild(tag"+retornoDeArquivoXML.getAttribute('id')+".implementa("+"tag"+retornoDeArquivoXML.getAttribute('id')+".modelo"+"))");
    }

    /*Varre todos os filhos da tag corrente*/
    for (var k = 0; k < retornoDeArquivoXML.childNodes.length; k++) {

        /*Avalia o tipo do filho da tag corrente*/
        if(retornoDeArquivoXML.childNodes[k].nodeType == '1'){
                /*Realiza a varredura da tag corrente*/
                leXML(retornoDeArquivoXML.childNodes[k])
        }
    };

}

[brunoborgesruiz]

A ajuda seria para aprimorar a ideia, a implementação usada e criar os grupos de componentes para o projeto.

[bernardodiasc]

Deixa ver se entendi: a ideia é instanciar componentes dinamicamente baseado nos dados enviados pelo XML. É isso?

[brunoborgesruiz]

Exatamente @bernardodiasc

[fczuardi]

O github comeu seu exemplo de xml, mas se entendi vc quer algo tipo o transform de JSX do react, que transforma tags em html e aplica comportamento definido em javascript, viajei?

[brunoborgesruiz]

Não viajou, mas a ideia seria uma solução para quem não tem familiaridade com o javascript e possa construir toda uma aplicação usando os componentes em xml.

[bernardodiasc]

@brunoborgesruiz voce conhece XSL?

A segunda resposta parece fazer mais ou menos o que voce está querendo http://stackoverflow.com/questions/5722410/how-can-i-use-javascript-to-transform-xml-xslt, da uma conferida fazendo favor. Nesse caso só ficou faltando o controlador do component, mas essa parte é tranquilo uma vez que voce ja puxou o xml transformado em html.

Seu caso de uso é bem específico, me diga se é por esse caminho mesmo ou nada a ver ;)

[keppelen]

@brunoborgesruiz Eu consegui ver bem a ideia, mas pelo que entendi, esse projeto seria para uma ajuda a fim de empresa privada. Ajudando no workflow e/ou demanda para a empresa, eu não consegui ver isso como projeto "globalmente" que ajudaria mais pessoas ou empresas. Acredito que a ideia e não ajudar uma solução especifica para uma empresa.

Se estiver errado, me corrija por favor.

[brunoborgesruiz]

@bernardodiasc acho que você entendeu a ideia sim. A ideia é essa. Qual seria o objetivo do projeto: criar uma engine e um padrão para desenvolvimento dos componentes, que possa atender a qualquer necessidade. Assim a comunidade teria a engine e uma série de componentes prontos para uso. Mas se quisesse fazer uso apenas da engine e criar seus próprios componentes, ele poderia fazer isso.

[brunoborgesruiz]

@keppelen @zenorocha a ideia desse projeto surgiu de uma necessidade de uma empresa sim. Mas podemos nos perguntar quantos na comunidade se deparam com este mesmo problema? E quantos dos nossos colegas desenvolvedores podem sanar esses problemas internamente por meio dessa solução? Não quero desenvolver aqui uma solução específica. Quero ajudar a comunidade com uma solução que possa ser o mais genérica possível. Ser simples para implementar.Ser muito simples para implementar.

[bernardodiasc]

Fiz um projeto onde criei alguns templates de componentes, cada qual com seu schema de dados necessário pra renderizar a marcação HTML. O Javascript de cada era bem simples, algo como:

[].forEach.call(document.querySelectorAll('NOMEDATAG'), function(module){
  /// blah blah blah
});

É um projeto de brincadeira, pra explorar conceitos, https://github.com/bernardodiasc/elements/ (https://github.com/bernardodiasc/elements/blob/gh-pages/HOWTO.md) se quiser conferir e ver se a solução é parecida. Tem XSL + XML e Twig + Json, compila tudo usando Gulp e retorna HTML estático. A diferença que tem aqui é que voce não usa JS pra montar a marcação, voce entrega ela pronta. Vale ressaltar que é um projeto experimento, mal documentado e incompleto. E lembrando que existem soluções melhores que essa. A similaridade do projeto com a sua ideia é mais em relação ao schema de dados. Em XLT isso fica muito mais evidente já que é uma linguagem de transformação, não template.

[bernardodiasc]

Dei uma pesquisa rapida sobre esse assunto, aparentemente existem muitas formas diferentes de fazer isso. Imagino que talvez seu caso de uso te forçe a fazer assim já que voce recebe do backend o XML com as informações que voce precisa pra montar o html e instanciar o objeto.

Porém não acho que trabalhar dessa forma seja mais fácil que em outras alternativas mais comuns, tem muitas libs e microtemplates que podem usar Json pra montar a marcação via Javascript. Com XML, a solução mais natural seria mesmo com XSL, puxando a marcação já montada via Ajax ao invez de montar pelo Javascript e depois instanciar as funções desse elemento.

Uma outra coisa a se considerar é que XML trabalha naturalmente com Mixed Content, voce poderia enviar inclusive a marcação HTML já montada direto pelo XML.

Enfim, a ideia é interessante, mas não sei se é a melhor forma de conseguir os resultados esperados.

[bernardodiasc]

Ah, me foquei mais na parte de montar a marcação pois não acho muito boa ideia gerar javascript automaticamente. Não sei até que ponto isso funciona. Seria legal alguns exemplos.

[bernardodiasc]

@brunoborgesruiz da uma olhada nisso https://github.com/dfilatov/bem-react