{"id":10387,"date":"2016-10-14T14:21:04","date_gmt":"2016-10-14T17:21:04","guid":{"rendered":"https:\/\/king.host\/blog\/?p=10387"},"modified":"2025-05-14T10:04:45","modified_gmt":"2025-05-14T13:04:45","slug":"desenvolvimento-web-baseado-em-componentes","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/desenvolvimento-web-baseado-em-componentes\/","title":{"rendered":"Desenvolvimento web baseado em componentes"},"content":{"rendered":"

No Conex\u00e3o Kinghost 2016, falei sobre Web Components e o desenvolvimento de aplica\u00e7\u00f5es web modernas, focando minha apresenta\u00e7\u00e3o no Polymer. Componentes para o desenvolvimento web geram v\u00e1rios debates nas comunidades t\u00e9cnicas e dividem opini\u00f5es. Atrav\u00e9s deste artigo fa\u00e7o\u00a0uma breve an\u00e1lise sobre os cen\u00e1rios de tecnologia que encontramos por a\u00ed.<\/p><\/blockquote>\n

Componentes de Software<\/h2>\n

O desenvolvimento de um software baseado em ‘componentiza\u00e7\u00e3o’ de elementos e widgets \u00e9 considerado um ganho\u00a0para a programa\u00e7\u00e3o de alto n\u00edvel. Na verdade, \u00e9 um epic win<\/em>, pois com a ‘componentiza\u00e7\u00e3o’ correta, n\u00f3s conseguimos encapsular funcionalidades espec\u00edficas para atender um elemento da UI (user interface). Isso o torna independente e de f\u00e1cil integra\u00e7\u00e3o, ou seja, cria um componente que possa ser utilizado em qualquer local dentro do software.
\nOs Web Components s\u00e3o desenvolvidos com as tecnologias HTML, CSS e Javascript e existem algumas ferramentas para auxiliar o processo de cria\u00e7\u00e3o, como \u00e9 o caso do Polymer. \u00c9 importante ressaltar que o Polymer \u00e9 um framework baseado em tecnologias de Web Components, mas voc\u00ea pode criar componentes sem ele. Podemos dizer que os Web Components s\u00e3o baseados em quatro camadas: Custom Elements, HTML Template, Shadow DOM e HTML Imports.<\/p>\n

Custom Elements<\/h2>\n

Voc\u00ea pode criar seu pr\u00f3prio elemento HTML, com tags personalizadas, sendo um\u00a0requisito que o nome do elemento contenha um tra\u00e7o e que seu prot\u00f3tipo estenda-se a um\u00a0HTMLElement. O Polymer possui um cat\u00e1logo de elementos<\/a> bem interessante, no qual podemos encontrar v\u00e1rios componentes de calend\u00e1rios, mapas e muitos outros.<\/p>\n

\"toolbar\"
Exemplo do elemento paper-toolbar.<\/figcaption><\/figure>\n

HTML Template<\/h3>\n

Os templates HTML s\u00e3o criados por meio da tag <template>, sua funcionalidade \u00e9 bem semelhantes aos templates que vemos em outros frameworks como mustache ou handlebars. Com este bloco podemos armazenar alguma marca\u00e7\u00e3o na p\u00e1gina e posteriormente reutiliz\u00e1-la.<\/p>\n

<template id=\"profile\">\n\u00a0<h1>Hello there!<\/h1>\n\u00a0<p>This content is top secret :)<\/p>\n<\/template><\/pre>\n
Tudo que estiver dentro da tag <template> n\u00e3o \u00e9 processado no momento de carregamento da p\u00e1gina. Com isso, elementos que realizam algum tipo de requisi\u00e7\u00e3o, como imagens e v\u00eddeos, s\u00f3 ter\u00e3o seu conte\u00fado exibido ap\u00f3s receberem algum tipo de chamada de Javascript para inclus\u00e3o e renderiza\u00e7\u00e3o dos mesmos.<\/p>\n
<template id=\"profile\">\n\u00a0<h1>Hello there!<\/h1>\n\u00a0<p>This content is top secret :)<\/p>\n\n\u00a0<img src=\"\" \/>\n<\/template><\/pre>\n
Chamada Javascript:<\/h3>\n
var template = document.querySelector(\"profile\").content();\n\ntemplate.querySelector(\"img\").src = \"fulano.jpg\";\n\ndocument.body.appendChild(t.cloneNode(true));<\/pre>\n
Shadow DOM<\/h3>\n
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\u00e3o impactar\u00e1 nos demais elementos dentro da p\u00e1gina. Em outras palavras, ele \u00e9 uma das melhores formas de criarmos widgets.<\/p>\n
Shadow DOM deve ser conectado a um elemento j\u00e1 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>.<\/p>\n
A inst\u00e2ncia de Shadow DOM \u00e9 criada pelo seletor element.createShadowRoot (). Confira um exemplo a seguir:<\/p>\n
<html>\n\n\u00a0<head><\/head>\n\n\u00a0<body>\n\n\u00a0\u00a0\u00a0<p id=\"hostElement\"><\/p>\n\n\u00a0\u00a0\u00a0<script>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create shadow DOM on the <p> element above\n\n\u00a0\u00a0\u00a0\u00a0\u00a0var shadow = document.querySelector('#hostElement').createShadowRoot();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0shadow.innerHTML = '<p>Here is some new text<\/p>';\n\n\u00a0\u00a0\u00a0<\/script>\n\n\u00a0<\/body>\n\n<\/html><\/pre>\n
O exemplo est\u00e1 criando um Shadow DOM na tag <p> e inserindo via script o conte\u00fado do mesmo.<\/p>\n
HTML Imports<\/h2>\n
Os imports de HTML s\u00e3o o mecanismo de inclus\u00e3o de componentes. Voc\u00ea pode realizar a incorpora\u00e7\u00e3o desta forma:<\/p>\n
<link rel=\"import\" href=\"arquivo.html\"><\/pre>\n
Implementa\u00e7\u00e3o<\/h3>\n
Com rela\u00e7\u00e3o a implementa\u00e7\u00e3o de Web Components com Polymer, devemos considerar a quest\u00e3o de compatibilidade, pois algumas vers\u00f5es de navegadores ainda n\u00e3o d\u00e3o suporte a 100% das funcionalidades. A escolha da tecnologia \u00e9 dependente de perfil de projeto (recursos tecnol\u00f3gicos que os usu\u00e1rios que ser\u00e3o atendidos utilizam e como) e da arquitetura de software que est\u00e1 planejando.<\/p>\n
E, pensando em arquitetura, existem outras stacks que podem ser utilizadas e que s\u00e3o bastante interessantes, como Angular e React.<\/p>\n","protected":false},"excerpt":{"rendered":"
No Conex\u00e3o Kinghost 2016, falei sobre Web Components e o desenvolvimento de aplica\u00e7\u00f5es web modernas, focando minha apresenta\u00e7\u00e3o no Polymer. Componentes para o desenvolvimento web geram v\u00e1rios debates nas comunidades t\u00e9cnicas e dividem opini\u00f5es. Atrav\u00e9s deste artigo fa\u00e7o\u00a0uma breve an\u00e1lise sobre os cen\u00e1rios de tecnologia que encontramos por a\u00ed. Componentes de Software O desenvolvimento de […]<\/p>\n","protected":false},"author":289,"featured_media":10392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[1376],"class_list":["post-10387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/289"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=10387"}],"version-history":[{"count":6,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10387\/revisions"}],"predecessor-version":[{"id":41532,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10387\/revisions\/41532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/10392"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=10387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=10387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=10387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}