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

Transcript

1. uma chance de
   mudar o futuro!
   Componentes nativos
   

   View Slide

2. @TheSweet_Lari
   Gamer,
   future Suicide Girl
   and Front-end Dev
   Larissa Abreu
   @LarissaAbreu larissaabreu.github.io
   

   View Slide

3. Por onde começar?
   

   View Slide

4. View Slide

5. Tecnologias de Base
   

   View Slide

6. View Slide

7. De onde vem?
   W3C (World Wide Web Consorcium)
   

   View Slide

8. Tim Berners-Lee
   Web
   HTML
   Padrões
   

   View Slide

9. Quem faz parte?
   Google
   Apple
   Mozilla
   Microsoft
   

   View Slide

10. Vários working groups
    CSS
    HTML
    API (JS)
    

    View Slide

11. Working groups?
    Membros das empresas
    Membros do próprio W3C
    Especialistas convidados
    

    View Slide

12. Como é a evolução das
    tecnologias de base no
    W3C?
    

    View Slide

13. jQuery -> Query Selector
    Ramda -> Features funcionais*
    * Está em discussão junto ao TC-39 para ser implementado no core
    

    View Slide

14. Pré-processadores -> Custom Properties *
    Frameworks -> Grid layout
    * Variáveis nativas
    

    View Slide

15. Nem tudo são flores
    

    View Slide

16. Como funciona o processo
    atualmente?
    https://www.w3.org/2017/Process-20170301/
    

    View Slide

17. View Slide

18. View Slide

19. https://www.w3.org/Style/CSS/current-work
    

    View Slide

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
    ?
    

    View Slide

21. https://caniuse.com/#feat=css-variables
    

    View Slide

22. Quanto tempo levará
    para o Virtual Dom ser
    nativo?
    

    View Slide

23. View Slide

24. Grande
    problema do
    tempo
    

    View Slide

25. Como resolver?
    Deixando os desenvolvedores criarem features
    nativas sozinhos
    

    View Slide

26. Prototype
    Transpiler
    Polyfill
    

    View Slide

27. Houdini
    * Atualmente no estágio anterior ao First Working Draft, Editor Draft
    

    View Slide

28. Como criar novas tags de
    forma nativa?
    

    View Slide

29. 
    

    View Slide

30. import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
    class Abcdev2018 extends PolymerElement {
    };
    static get template() {
    return html`
    Olá ABC Dev!
    `;
    }
    customElements.define(‘abcdev-2018’, Abcdev2018);
    Custom Elements
    Template
    Shadow DOM
    

    View Slide

31. View Slide

32. View Slide

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

    

    View Slide

34. What is Polymer?
    By Polymer Team
    

    View Slide

35. View Slide

36. Cross Stack?
    

    View Slide

37. View Slide

38. View Slide

39. Custom
    Elements
    Everywhere
    custom-elements-everywhere.com/
    

    View Slide

40. Who?
    

    View Slide

41. +6000 Components
    

    View Slide

42. youtube.com/new
    

    View Slide

43. twitter.com/AJStacy06/status/857628546507968512

    

    View Slide

44. Até onde podemos chegar
    com os componentes
    nativos?
    

    View Slide

45. View Slide

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

    View Slide