Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018

Transcript

1. uma chance de mudar o futuro! Componentes nativos
2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu @LarissaAbreu larissaabreu.github.io
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. <abcdev-2018>
30. import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'; class Abcdev2018 extends PolymerElement { }; static get template() { return html` <h1>Olá ABC Dev!</h1> `; } customElements.define(‘abcdev-2018’, Abcdev2018); 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. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io