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?

4. None

5. Tecnologias de Base

6. None

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/

17. None
18. None

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?

23. None

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
31. None

32. 2013

33. youtube.com/watch?v=7Q0-E_rZ_Cc&t


34. What is Polymer? By Polymer Team

35. None

36. Cross Stack?

37. None
38. None

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?

45. None

46. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io