Web Components, A próxima revolução do desenvolvimento web.

71

description

Nesta palestra é abordado conceitos envolvendo Web Components e exemplos práticos. Nela é avaliado todo o poder que este novo padrão trás consigo e também tópicos relacionados a como utilizá-la desde já de forma funcional, cross-browser e multi-plataforma. Sem dúvidas, depois desta apresentação você ficará fascinado por este novo mundo que está surgindo e que não está tão distante da realidade dos desenvolveres atuais.

Transcript of Web Components, A próxima revolução do desenvolvimento web.

Page 1: Web Components, A próxima revolução do desenvolvimento web.
Page 2: Web Components, A próxima revolução do desenvolvimento web.

Beto Muniz

@obetomuniz

Page 3: Web Components, A próxima revolução do desenvolvimento web.

minasdev.org

Page 4: Web Components, A próxima revolução do desenvolvimento web.

webcomponents.org

Page 5: Web Components, A próxima revolução do desenvolvimento web.
Page 6: Web Components, A próxima revolução do desenvolvimento web.
Page 7: Web Components, A próxima revolução do desenvolvimento web.

Web Components

A revolução do desenvolvimento web

Page 8: Web Components, A próxima revolução do desenvolvimento web.

O que é?

Page 9: Web Components, A próxima revolução do desenvolvimento web.

“Web Components é um padrão guarda-chuva que engloba outros padrões.”

- Eu.

Page 10: Web Components, A próxima revolução do desenvolvimento web.
Page 11: Web Components, A próxima revolução do desenvolvimento web.

Componentizar a Web?

Page 12: Web Components, A próxima revolução do desenvolvimento web.

OLD!

Page 13: Web Components, A próxima revolução do desenvolvimento web.
Page 14: Web Components, A próxima revolução do desenvolvimento web.
Page 15: Web Components, A próxima revolução do desenvolvimento web.
Page 16: Web Components, A próxima revolução do desenvolvimento web.

Mas espera aí! Mágico?!

Vamos esquecer os elementos HTML e aprender novos?!

Page 17: Web Components, A próxima revolução do desenvolvimento web.
Page 18: Web Components, A próxima revolução do desenvolvimento web.
Page 19: Web Components, A próxima revolução do desenvolvimento web.

Custom Elements

Cria novos elementos. Extende elementos existentes.

Page 20: Web Components, A próxima revolução do desenvolvimento web.
Page 21: Web Components, A próxima revolução do desenvolvimento web.

TemplatePedaço reutilizável e inerte de DOM, ativado

apenas por Javascript.

Page 22: Web Components, A próxima revolução do desenvolvimento web.
Page 23: Web Components, A próxima revolução do desenvolvimento web.
Page 24: Web Components, A próxima revolução do desenvolvimento web.

Shadow DOM

Encapsulamento do DOM, Comportamento e Estilos

Page 25: Web Components, A próxima revolução do desenvolvimento web.
Page 26: Web Components, A próxima revolução do desenvolvimento web.
Page 27: Web Components, A próxima revolução do desenvolvimento web.

HTML Imports

Empacotamento. Distribuição. Compartilhamento. Reutilização.

Page 28: Web Components, A próxima revolução do desenvolvimento web.

<iframe>

AJAX

ou

Page 29: Web Components, A próxima revolução do desenvolvimento web.
Page 30: Web Components, A próxima revolução do desenvolvimento web.
Page 31: Web Components, A próxima revolução do desenvolvimento web.
Page 32: Web Components, A próxima revolução do desenvolvimento web.
Page 33: Web Components, A próxima revolução do desenvolvimento web.

Quer dizer...quais browser posso trabalhar com isso?

E o ?

Page 34: Web Components, A próxima revolução do desenvolvimento web.

Quer dizer...quais browser posso trabalhar com isso?

Page 35: Web Components, A próxima revolução do desenvolvimento web.

jonrimmer.github.io/are-we-componentized-yet

Page 36: Web Components, A próxima revolução do desenvolvimento web.

Então não posso colocar em produção!

Page 37: Web Components, A próxima revolução do desenvolvimento web.

bosonic.github.io

Page 38: Web Components, A próxima revolução do desenvolvimento web.

x-tags.org

Page 39: Web Components, A próxima revolução do desenvolvimento web.

polymer-project.org

Page 40: Web Components, A próxima revolução do desenvolvimento web.
Page 41: Web Components, A próxima revolução do desenvolvimento web.
Page 42: Web Components, A próxima revolução do desenvolvimento web.
Page 43: Web Components, A próxima revolução do desenvolvimento web.
Page 44: Web Components, A próxima revolução do desenvolvimento web.
Page 45: Web Components, A próxima revolução do desenvolvimento web.

O Material Design

Page 46: Web Components, A próxima revolução do desenvolvimento web.
Page 47: Web Components, A próxima revolução do desenvolvimento web.

#mitos

Page 48: Web Components, A próxima revolução do desenvolvimento web.

Componentizar é algo novo!

Page 49: Web Components, A próxima revolução do desenvolvimento web.
Page 50: Web Components, A próxima revolução do desenvolvimento web.
Page 51: Web Components, A próxima revolução do desenvolvimento web.

Web Components não está pronto para ser colocado em produção

Page 52: Web Components, A próxima revolução do desenvolvimento web.
Page 53: Web Components, A próxima revolução do desenvolvimento web.
Page 54: Web Components, A próxima revolução do desenvolvimento web.
Page 55: Web Components, A próxima revolução do desenvolvimento web.
Page 56: Web Components, A próxima revolução do desenvolvimento web.
Page 57: Web Components, A próxima revolução do desenvolvimento web.
Page 58: Web Components, A próxima revolução do desenvolvimento web.
Page 59: Web Components, A próxima revolução do desenvolvimento web.

SEO e Acessibilidade, vish!

Page 60: Web Components, A próxima revolução do desenvolvimento web.
Page 61: Web Components, A próxima revolução do desenvolvimento web.
Page 62: Web Components, A próxima revolução do desenvolvimento web.

O Angular/Ember atende tudo que esses padrões pregam.

Page 63: Web Components, A próxima revolução do desenvolvimento web.

Não é Interoperável

Page 64: Web Components, A próxima revolução do desenvolvimento web.
Page 65: Web Components, A próxima revolução do desenvolvimento web.

E onde estudar?

Page 66: Web Components, A próxima revolução do desenvolvimento web.

webcomponents.org

Page 67: Web Components, A próxima revolução do desenvolvimento web.

customelements.io

Page 68: Web Components, A próxima revolução do desenvolvimento web.

polymer-project.org

Page 69: Web Components, A próxima revolução do desenvolvimento web.
Page 70: Web Components, A próxima revolução do desenvolvimento web.

O futuro da web já foi inventado, basta começarmos a utilizá-lo.

Page 71: Web Components, A próxima revolução do desenvolvimento web.

DÚVIDAS?