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

Web Components: a chance to create the future

Web Components: a chance to create the future

April 30, 2014 @ SFHTML5

Zeno Rocha

April 30, 2014
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. Web Components
    Create the future
    a chance to

    View Slide

  2. @zenorocha

    View Slide

  3. I’m from Brazil

    View Slide

  4. Share!
    Create!
    Learn!

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. But there was no
    starter-kit =/

    View Slide

  9. View Slide

  10. github.com/webcomponents/polymer-boilerplate

    View Slide


  11. View Slide

  12. github.com/webcomponents/x-tag-boilerplate

    View Slide

  13. View Slide

  14. github.com/webcomponents/element-boilerplate

    View Slide

  15. What’s
    included?
    We encourage a series of
    best practices like setting
    up a live demo,
    documenting your API,
    maintaining a changelog

    for release purposes, and
    sharing it in a package
    manager.
    Lifecycle
    Grunt
    tasks
    Bower
    config

    View Slide

  16. View Slide

  17. github.com/webcomponents/generator-element

    View Slide

  18. Share!
    Create!
    Learn!

    View Slide

  19. So people started to
    create elements

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. We needed a place to
    show these elements

    View Slide

  24. Bernard
    De Luna
    Djalma
    Araújo
    Eduardo
    Lundgren
    Got some friends together…

    View Slide

  25. customelements.io

    View Slide

  26. CustomElements.io
    13%
    24%
    14%
    + 170 elements
    + 100,000 pageviews
    North
    America
    South
    America
    Southern/
    Western
    Europe
    Eastern/
    Northern
    Europe
    13%

    View Slide

  27. How to add

    an element there?

    View Slide

  28. bower.json

    View Slide

  29. Share!
    Create!
    Learn!


    View Slide

  30. What’s the
    main reference

    to learn Web
    Components?

    View Slide

  31. Addy Osmani

    View Slide

  32. And a bunch of awesome people…
    Alex
    Komoroske
    Briza
    Bueno
    Daniel
    Buchner
    Eric
    Bidelman
    Bernard
    De Luna
    Soledad
    Penadés
    Rob
    Dodson
    Eduardo
    Lundgren
    Sindre
    Sorhus
    Pascal
    Precht
    Bruce
    Lawson
    Mathias
    Bynens

    View Slide

  33. View Slide

  34. webcomponents.github.io

    View Slide

  35. Highlight great

    articles & talks
    Gather best practices
    Introduce useful
    tools and resources
    Discuss API
    implementations

    View Slide

  36. Share!
    Create!
    Learn!

    ✔ ✔

    View Slide

  37. The best way to predict
    the future is to create it.

    View Slide

  38. Thank you!
    zenorocha.com
    bit.ly/wc-mailing
    Zeno Rocha
    #webcomponents
    @webcomponents
    +WebComponents

    View Slide

  39. Stickers \o/

    View Slide