Baixar para ler offline
Carregado porJefferson Moura
Web Components
O documento apresenta uma introdução aos Web Components, destacando suas principais vantagens: modularidade, encapsulamento e reusabilidade. Explica os principais conceitos por trás dos Web Components, incluindo templates, custom elements e shadow DOM. Fornece exemplos de como criar elementos personalizados e como eles funcionam.
Web Components
- 1.
- 2.
- 3. Por que usar? • Modularidade • Encapsulamento • Reusabilidade
- 4.
- 7.
- 9.
- 10.
- 11.
- 12. O que são? Ondeelesvivem? Oquecomem? • Templates • Custom-Elements • Shadow DOM • Imports
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. HTML4( 1997) HTML5( 2008) Web Components(2010) Polymer( 2013)
- 19.
- 20. Criando um customelement
- 21.
- 22.
- 23.
- 25.
- 29.
- 30.
- 31.
- 32.
- 33. Explicando melhor os elementos Elementosde estrutura <core-ajax> <core-xhr> <core-localstorage> <core-animation> <core-animation-keyframes> <core animation-prop> <core-scarffold> <code-toolbar> Elementos de dados Elementos de animação
- 34.
- 35.
- 36. Agora um comconteúdo
- 39.
- 40.
Notas do Editor
- #3 Olá pessoal, Meu nome é Jefferson Moura, e hoje eu vou falar sobre Web Components
- #4 Por que devemos usar web components ? Por causa de 3 fatores que vão mudar sua vida. Primeira delas, Modularidade. Á segunda, é o Encapsulamento. E a Terceira é a reusabilidade
- #5 O que é modularidade ? Imagine várias peças de Lego, azuis, brancas, vermelhas. E agora pense que cada peça dessa é um bloco de código. Quando você une essas peças elas passam a fazer parte de um grupo de peças que no final pode criar algo como isso.
- #7 Ou Isso. Só depende do que a sua aplicação precisa.
- #8 Encapsulamento. É uma das coisas que eu mais gosto, ele impede que o seu código sofra interferencias de outra parte do código ou de código de terceiros. O que é um plugin ? Nada mais é do que Blocos de Código CSS, JavaScript e HTML, que você copia e cola no seu projeto, é muito comum esses códigos estarem separados, E o que pode ocorrer facilmente é esse código receber a interferencia de outro código. Uma coisa muito comum de acontecer, seu chefe te pede para você colocar um carousel no site, ai você vai lá no google pega um plugin e adiciona no seu projeto e depois torçe pra ele rodar. E quando roda o sentiment é tipo isso.
- #10 Então voltando ao Código, Você pode perceber a interferencia se simplemente dopar uma classe CSS, como eu fiz nesse exemplo. Você pode ver que o CSS obedece as regras do ultimo que foi declarado. Se esse meu exemplo parece besta, imagine isso num grande projeto.
- #11 A reusabilidade, é algo que já existe a muito tempo na programação, não só na web mas também nas outras plataformas. O metodo Don’t Repeat Yourself é utilizado nas maiores empresas do mundo. A reusabilidade é uma consequencia da junção da Modularização e do encapsulamento. Quando as duas são utlizadas juntas seu código praticamente se blinda contra infrações externas e acaba se tornando reutilizavel para outros lugares do código.
- #12 Ok, então vamos agora falar sobre o Web Components. Web components na verdade são uma arvore de especificações que juntas a formam.
- #13 Ele é divido em quatro especificações Templates Custom Elements Shadow DOM E Imports
- #14 Os templates são pedaços interetes de código no qual você monta o DOM do seu componente Eles ficam ativos até que o javascript ative esse pedaço
- #15 Esse é um exemplo de como funciona um template, e como é chamado, Percebam que há uma div vazia. e que também há uma tag template. Na Tag Template, eu coloquei uma imagem e um span, só pra ilustrar. Então, chemei o JavaScript para importe o código.
- #16 Esse é o resultado do codigo, perceba que o no DOM o template é ignorado, e que agora a div que estava vazia passa a ter o conteudo de template, e que as alterações pedidas foram feitas, e o mais importante, além de ignorar o conteúdo de template, o HTML ainda escondeu ele num document-fragment.
- #17 Imports, são um recurso muito importante, eles definem os elementos que são empacotados e adicionados como um recurso. Na verdade os imports estão implementados a algum tempo no HTML5, mas só agora que eles foram incorporados a uma solução.
- #18 Custom Elements são a cereja na ponta do bolo dos Web Components, Eles são elementos de DOM criados pelo desenvolvedor para utilizar um DOM especifico que irá ser repetir durante a sua aplicação.
- #19 E como isso funciona ? O Conceito de Custom-Elements é algo que foi implementado no HTML5, Todos sabem que o HTML5 Foi uma revolução Na web por causa da sua semântica e também por causa das suas novas tags, O que pouca gente sabe é que essas novas tags só existem por causa de uma classe Chamada Custom-Elements que foi adicionada ao HTML5, Ela é capaz extender ações e eventos de elementos HTML para outros e também criar do Zero. Se essa classe não tivesse sido implementada, Não teríamos hoje uma Tag Nav, Ou Header e a semântica do HTML praticamente não existiria. Isso Foi em 2008, Em 2010, durante uma inspeção pelo código os programadores da W3C encontraram a classe ai surgiu as primeiras especificações do Web Components
- #20 Quando a gente olha pra traz e vê como a web evoluiu, nota uma coisa, Que nós crescemos muito desde o inicio pra cá, Saimo de uma simples página cheio de textos, para uma plataforma universal de desenvolvimento, que faz de praticamente Tudo um pouco. Isso tudo só foi possivel por que a web teve que criar novas especificações, novos métodos de desenvolvimento emfim se atualizar como um todo. E foi em uma dessas atualizações que surgiu esse novo método ainda mais prático de desenvolvimento Sim. Mas como que eu crio isso ?
- #21 Para criar você precisa adicionar o comando registerElement, com o nome dele e passar os parâmetros de configuração, No meu caso eu disse que o meu elemento vai extender um botão, Nesse momento eu dei ao meu elemento o poder de receber cliques e todos os eventos de um botão normal.
- #22 Alguém sabe o que é um um campo de input comum ? É um campo onde a gente adiciona textos, pra o formulário. Mas a pergunta é. Você sabe como é que é um input por dentro ?
- #23 Ele é assim, Se nós habilitamos o shadow DOM no Chrome, podemos ver que o input nada mais é do que uma DIV Isso acontece o mesmo na tag Video
- #24 Tudo o que há dentro das tags está encapsulado, e nenhum agente externo pode alterar. O Shadow DOM não só esconde o código do inspector, como também pode proibir ações externas contra essa tag, Se você adiciona um CSS a uma serie de elemento e posteriormente coloca esses elementos numa shadow DOM. Caso o CSS não esteja com o código no shadow DOM, ele não vai surtir efeito sobre o código. Do mesmo jeito funciona com o CSS.
- #25 Eu gosto de comparar o Web Components com o Capitão Planeta, Quando aquelas crianças juntavam os aneis eles aparecia o Capitão Planeta. Da mesma Forma é o Web Components, Quando você junta todas os quatro pilares, você concegue um Sistema muito estável e reutilizavel Imagine as possibilidades, Você pode extender um input e criar um Input que checa se o CEP é valido, ou um que checa se o CPF é valido Ou extende a tag video e põe pra que o source dela seja a web cam Como fez meu amigo Eduardo Lundgren.
- #27 Ok, Agora vamos para a segunda estrela do show. O polymer ele é um polifill criado em 2013 pela google para os web components. Mas por que ela criou ? Por dois fatores.
- #30 Num mundo perfeito, poderiamos criar componentes sem nenhum tipo de restrição, Mas a vida e principalmente a Microsoft e a Apple, gostam de nos frustrar perante tais escolhas, O IE, agora foi descontinuado e eu espero que a Microsoft adicione ao edge suporte nativo a web components E o Safari, Não sei dizer por que. Então, continuando, Pra que que a Google criou o polymer? Ela viu essa falha da matrix e resolveu no ajudar, Porem o que acreditavamos ser um Steve Rogers Magrelo se tornou um Poderoso Capitão America E hoje o polymer é um bem mais do que um polyfill.
- #31 O polymer é dividido em 4 partes dele e uma nativa. Como assim ? Ele primeiramente checa se seu navegador tem suporte nativo ao web components, se tem ele vai criar a seu componente, se não ele vai passer para a camada superior. Ela se chama Fundation, que é o mais óbvil possivel, é a fundação do polymer nela tem shadow DOM, imports, e as especificações do web components e também tem outras especificações que pode te ajudar no desenvolvimento. Tudo isso ta contido dentro do platform.js Se subir-mos mais uma camada, tem o Core, que é o polymer rodando em cima do platform, extendendo suas funções. Ao subir mais, nós chegamos aos Elements. Ela é a maior camada, isso por que o Polymer tem um lema que é.
- #32 Tudo no polymer é um elemento, Você pode controlar qualquer coisa a apartir de um elemento
- #33 Eles são separados em 2 tipos, Nos temos os elementos visuais E os não visuais. Mas o que seria um elemento não visual ? Esquecendo o CSS por um momento Imagine uma header, se você coloca uma header sozinha, sem nada como children dela, ela não aparece no seu browser. A partir do momento em que adicionamos um elemento visual, como um H1, ou um P Ele passa a mostrar texto contido nesses elementos mas mesmo assim você não vê o header. Mas no polymer eles vão alem disso, Com o polymer, você pode extender funções do Javascripts e ter elementos para quase tudo. E no ultimo nivel temos a nossa aplicação, que são os elementos que nós criamos.
- #34 O polymer leva o fato de tudo ser um elemento tão a sério que acabou criando um zilhão de elementos para facilitar sua vida Nos elementos não visuais temos os que criam scarfold, Temos o de toolbar, entre outros, Ele chega tão a fundo nisso que já cria elementos que fazem requisições ajax, faz Xhr, e podem até salvar strings no navegador com o localstorage Indo ainda mais distante temos os elementos de animação, e vai além. É uma infinidade de elementos que podemos usar para fazer nossas elementos.
- #35 Chegamos então nos elementos visuais, o que são ? Eles são elementos de UI, que você pode utlizar, e eles tem o design do Material Design da Google. Uma coisa que vocês jámais devem dizer é que o Polymer é o Material Design. Por que não é.
- #36 E assim nós criamos, um elemento com o polymer. Ele tem um elemento que cria os elementos.
- #38 Ok, Vamos falar agora sobre o Polymer 1.0 Ele foi anunciado hoje na IO de mountain view, e eu simplesmente maravilhado. Só houve um pequeno problema.
- #39 Eles quebraram a compatibilidade com a versão 0.5.
- #40 Mas algumas coisas ficaram melhores. Agora nós temos um diretório de elementos, e que você adiciona de acordo com o que a sua aplicação precisa.