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

A magia dos componentes nativos

A magia dos componentes nativos

Larissa Abreu

January 31, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. `
    E a magia
    dos componentes
    nativos

    View full-size slide

  2. `
    @TheSweet_Lari
    Gamer,
    future Suicide Girl
    and Front-end Dev
    Larissa Abreu
    @LarissaAbreu
    [complete aqui]
    Nem eu!

    View full-size slide

  3. Antes
    Comunidade

    View full-size slide

  4. Components?
    In FrontEnd

    View full-size slide

  5. Web Components?

    View full-size slide

  6. index.html









    Native!

    View full-size slide

  7. How?
    W3C specifications

    View full-size slide



  8. Custom Elements
    Shadow DOM
    Imports
    Template

    View full-size slide

  9. What is Polymer?
    By Polyme Team

    View full-size slide

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


    View full-size slide

  11. December 2013
    Web Components Hype
    ? ? ? ?

    View full-size slide

  12. After?
    Why didn't I know?

    View full-size slide

  13. November 2014
    Polymer 0.5
    Experiments
    ? ? ? ?

    View full-size slide

  14. caniuse.com/#feat=template

    View full-size slide

  15. May 2015
    Polymer 1.0
    Ready to production
    ?

    View full-size slide

  16. Shadow DOM v0
    Custom Elements v0
    The
    Problems

    View full-size slide

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


    View full-size slide

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


    View full-size slide

  19. How to solve?
    Improving the platform

    View full-size slide

  20. Shadow DOM v1
    Custom Elements v1

    View full-size slide

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


    View full-size slide

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


    View full-size slide

  23. May 2017
    Polymer 2.0
    Do less magic
    ?
    ES6
    Class
    Hybrid
    Mode

    View full-size slide

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


    View full-size slide

  25. How to solve?
    Look at the platform

    View full-size slide

  26. ES Modules
    import myComponent from ‘./my-component.js'
    jakearchibald.com/2017/es-modules-in-browsers

    View full-size slide

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


    View full-size slide

  28. Last problem!
    Management dependencies

    View full-size slide

  29. Back to 2013
    VS
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community

    View full-size slide

  30. github.com/bower/bower/issues/2298

    View full-size slide

  31. Today
    VS
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community

    View full-size slide

  32. Polymer 3.0
    Preview
    ES

    View full-size slide

  33. Final support?
    https://www.webcomponents.org/

    View full-size slide

  34. Why Polymer?

    View full-size slide

  35. Cross Stack?

    View full-size slide

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

    View full-size slide

  37. +6000 Components

    View full-size slide

  38. youtube.com/new

    View full-size slide

  39. twitter.com/AJStacy06/status/857628546507968512


    View full-size slide

  40. #UseThePlatform

    View full-size slide

  41. Thanks!
    #UseThePlatform

    View full-size slide