WebComponents

Descubra o conceito da nova Web

Diego MeloFull Stack Developer - Universidade Tiradentes

O que é?O conceito de Web Components é bem simples, basta imaginar que

tenhamos que reaproveitar um conjunto de camadas comoController e View em algum momento na nossa aplicação e ao invésde duplicarmos as mesmas, as agrupamos em um Component para

possamos reutilizá-lo quando quisermos.

Como são compostos?Eles são compostos por 4 especi�cações, sendo elas:

TemplatesCustom ComponentsShadow DOMImports

TemplatesDe�nem pedaços de código(HTML) que são totalmente inertes à

página até que seu Javascript os ative, ou seja, o template nãoexistirá na página até que você necessite.

<div class="uma-classe"> <h1>Um título</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>

Custom ElementsSão elementos customizados, onde permite-nos criar tags diferentes

dos canônicos como "body", "input" ou "div" e injetar os templatesdentro das mesmas.

<top-menu name="Menu principal"> // código do menu </top-menu>

Shadow DOMÉ onde uma parte do código do seu elemento é encapsulada e

escondida pelo browser, ou seja, não é visível no código normal doDOM, mas que monta todo seu componente “por baixo dos panos”.

ImportsUma vez tendo um trecho de DOM isolado, com estilos e

comportamentos independentes de outros componentes, agoraprecisamos empacotar isso. E para isso servem esses imports quedeclara os arquivos e dependências do componente para que eles

possam ser lidos posteriormente.

Exemplo de componente

<login-form></login-form>

Como setrabalhava antes?

Como se trabalha hoje comWeb Components

Nada mal hein?

Quero usar, maspor ondecomeço?

Webcomponents.org

Polymer

SkateJS

Bosonic

X-tag

AngularJS / Angular 2

Github: Facebook:

Instagram:

Obrigado! ;)github.com/diegomelo182

facebook.com/diego.melo.370@diegomelo182aju