Componentes nativos: uma chance de mudar o futuro!

Assim como o jQuery trouxe funcionalidades que foram adotadas pelo JS e os pré-processadores fizeram a mesma coisa com o CSS hoje temos em nossas mãos a chance de criar elementos HTML (nativos) e definir os padrões que serão seguidos no futuro.

Nessa talk falei um pouco sobre como podemos contribuir para o futuro da nossa comunidade através de web components.

Transcript

1. uma chance de mudar o futuro! Componentes nativos
2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu @LarissaAbreu
3. Por onde começar?
5. Tecnologias de Base
7. De onde vem? W3C (World Wide Web Consorcium)
8. Tim Berners-Lee Web HTML Padrões
9. Quem faz parte? Google Apple Mozilla Microsoft
10. Vários working groups CSS HTML API (JS)
11. Working groups? Membros das empresas Membros do próprio W3C Especialistas convidados
12. Como é a evolução das tecnologias de base no W3C?
13. jQuery -> Query Selector Ramda -> Features funcionais* * Está em discussão junto ao TC-39 para ser implementado no core
14. Pré-processadores -> Custom Properties * Frameworks -> Grid layout * Variáveis nativas
15. Nem tudo são flores
16. Como funciona o processo atualmente? https://www.w3.org/2017/Process-20170301/
19. https://www.w3.org/Style/CSS/current-work
20. https://www.w3.org/standards/history/css-variables - https://www.w3.org/TR/css-variables-1/ Custom properties 2012 2013 2015 2018 (First Working Draft) (Working Draft) (Candidate Recomendation) CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1 ?
21. https://caniuse.com/#feat=css-variables
22. Quanto tempo levará para o Virtual Dom ser nativo?
24. Grande problema do tempo
25. Como resolver? Deixando os desenvolvedores criarem features nativas sozinhos
26. Prototype Transpiler Polyfill
27. Houdini * Atualmente no estágio anterior ao First Working Draft, Editor Draft
28. Como criar novas tags de forma nativa?
29. <front-in-vale>
30. import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'; class FrontInVale extends PolymerElement { }; static get template() { return html` <h1>Olá Front in Vale</h1> `; } customElements.define(‘front-in-vale', FrontInVale); Custom Elements Template Shadow DOM
33. youtube.com/watch?v=7Q0-E_rZ_Cc&t

34. What is Polymer? By Polymer Team
36. Cross Stack?
39. Custom Elements Everywhere custom-elements-everywhere.com/
40. Who?
41. +6000 Components
42. youtube.com/new
43. twitter.com/AJStacy06/status/857628546507968512

44. Até onde podemos chegar com os componentes nativos?
46. Links e Referências - bit.ly/polymer2 - bit.ly/desmistificando-polymer3 - bit.ly/polymer3-02-slot - bit.ly/polymer3-03-definindo-propriedades - bit.ly/polymer3-01-hello-world - www.polymer-project.org/
47. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu