Desenvolvimento web baseado em componentes


No Conexão Kinghost 2016, falei sobre Web Components e o desenvolvimento de aplicações web modernas, focando minha apresentação no Polymer. Componentes para o desenvolvimento web geram vários debates nas comunidades técnicas e dividem opiniões. Através deste artigo faço uma breve análise sobre os cenários de tecnologia que encontramos por aí.

Componentes de Software

O desenvolvimento de um software baseado em ‘componentização’ de elementos e widgets é considerado um ganho para a programação de alto nível. Na verdade, é um epic win, pois com a ‘componentização’ correta, nós conseguimos encapsular funcionalidades específicas para atender um elemento da UI (user interface). Isso o torna independente e de fácil integração, ou seja, cria um componente que possa ser utilizado em qualquer local dentro do software.
Os Web Components são desenvolvidos com as tecnologias HTML, CSS e Javascript e existem algumas ferramentas para auxiliar o processo de criação, como é o caso do Polymer. É importante ressaltar que o Polymer é um framework baseado em tecnologias de Web Components, mas você pode criar componentes sem ele. Podemos dizer que os Web Components são baseados em quatro camadas: Custom Elements, HTML Template, Shadow DOM e HTML Imports.

Custom Elements

Você pode criar seu próprio elemento HTML, com tags personalizadas, sendo um requisito que o nome do elemento contenha um traço e que seu protótipo estenda-se a um HTMLElement. O Polymer possui um catálogo de elementos bem interessante, no qual podemos encontrar vários componentes de calendários, mapas e muitos outros.

toolbar

Exemplo do elemento paper-toolbar.

HTML Template

Os templates HTML são criados por meio da tag <template>, sua funcionalidade é bem semelhantes aos templates que vemos em outros frameworks como mustache ou handlebars. Com este bloco podemos armazenar alguma marcação na página e posteriormente reutilizá-la.

Tudo que estiver dentro da tag <template> não é processado no momento de carregamento da página. Com isso, elementos que realizam algum tipo de requisição, como imagens e vídeos, só terão seu conteúdo exibido após receberem algum tipo de chamada de Javascript para inclusão e renderização dos mesmos.

Chamada Javascript:

Shadow DOM

O Shadow DOM fornece encapsulamento para o JavaScript, CSS e templates em um componente, ou seja, ele nos proporciona uma estrutura independente e que não impactará nos demais elementos dentro da página. Em outras palavras, ele é uma das melhores formas de criarmos widgets.

Shadow DOM deve ser conectado a um elemento já existente, o qual pode ser criado diretamente ou inserido via script. Este elemento pode ser nativo, com tags como <article> ou <p>, ou de forma customizada como <paper-line>.

A instância de Shadow DOM é criada pelo seletor element.createShadowRoot (). Confira um exemplo a seguir:

O exemplo está criando um Shadow DOM na tag <p> e inserindo via script o conteúdo do mesmo.

HTML Imports

Os imports de HTML são o mecanismo de inclusão de componentes. Você pode realizar a incorporação desta forma:

Implementação

Com relação a implementação de Web Components com Polymer, devemos considerar a questão de compatibilidade, pois algumas versões de navegadores ainda não dão suporte a 100% das funcionalidades. A escolha da tecnologia é dependente de perfil de projeto (recursos tecnológicos que os usuários que serão atendidos utilizam e como) e da arquitetura de software que está planejando.

E, pensando em arquitetura, existem outras stacks que podem ser utilizadas e que são bastante interessantes, como Angular e React.

Para quem acompanhou a palestra sobre Web Components no Conexão KingHost e quer  resgatar um pouco do conteúdo que viu por lá, pode conferir o slide da apresentação abaixo:

 

Comentários

comentário(s)