Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

September 22, 2018
Tweet

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