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

Web Components: The Future of Web Applications

Web Components: The Future of Web Applications

Talk at Google I/O Extended Lagos

Ire Aderinokun

June 17, 2017
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. Web Components:
    The Future of Web Applications
    Ire Aderinokun
    I/O Extended Lagos

    View full-size slide

  2. Hello!
    • Ire Aderinokun
    • Frontend Developer and
    User Interface Designer
    • Google Expert in Web
    Technologies
    • Writer, bitsofco.de
    • Software Developer at eyeo

    View full-size slide

  3. Building Applications on
    the Web is Hard

    View full-size slide

  4. Android
    BottomNavigationView />

    View full-size slide

  5. iOS
    UITabBar
    UITabBarController

    View full-size slide

  6. This is because the
    Web is an open platform

    View full-size slide

  7. Building Blocks of the Web

    View full-size slide

  8. Early Websites

    View full-size slide

  9. Websites Today

    View full-size slide

  10. But Web Technologies
    are getting better

    View full-size slide

  11. The Solution is
    Web Components!

    View full-size slide

  12. Web Components are a set of
    new web platform features that
    let you create your own HTML
    elements

    View full-size slide

  13. Encapsulated &
    Reusable

    View full-size slide

  14. 1B+ mobile devices natively
    support Web Components,
    right now!

    View full-size slide

  15. What is the
    Polymer Project?

    View full-size slide

  16. – The Polymer Team
    “Our mission is to make life better for users
    and developers, by helping developers unlock
    the web platform’s full potential and by
    spurring the web platform to evolve and
    improve.”

    View full-size slide

  17. The Polymer Project is a
    look into the future of
    web development

    View full-size slide

  18. 1. Polymer Library

    View full-size slide

  19. The Polymer Library is a Javascript
    Library that helps you create custom
    reusable HTML elements, and use them
    to build performant, maintainable apps

    View full-size slide

  20. Why use the Polymer Library?

    View full-size slide

  21. Polymer 2.0 !
    Improved Interoperability
    Data System Improvements
    Uses Native APIs
    Polymer CLI

    View full-size slide

  22. 4. App Toolbox

    View full-size slide

  23. Polymer App Toolbox is a collection
    of components, tools and
    templates for building Progressive
    Web Apps with Polymer

    View full-size slide

  24. Features
    • Component-based architecture using Polymer
    • Routing using the elements
    • Offline caching using Service Workers
    • Build tooling to support delivery over HTTP/1 or
    HTTP/2

    View full-size slide

  25. Commands
    • polymer init
    • polymer serve
    • polymer lint
    • polymer test
    • polymer build
    • polymer analyze

    View full-size slide

  26. polymer init

    View full-size slide

  27. What can you actually do
    with Web Components?

    View full-size slide

  28. cheese.polymer-project.org

    View full-size slide

  29. How do Web
    Components work?

    View full-size slide

  30. 4 Key Web
    Technologies
    HTML Imports Shadow DOM
    HTML Templates
    Custom Elements

    View full-size slide

  31. Custom Elements
    • An API for creating your own HTML elements by
    creating a Class that extends from
    HTMLElement
    • customElements.define()

    View full-size slide

  32. HTML Templates
    • A mechanism for defining content that can be
    stored for subsequent use in a document

    View full-size slide

  33. Shadow DOM
    • A mechanism for encapsulating a DOM and CSS,
    so that they can remain separate from the main
    document
    • document.body.attachShadow()

    View full-size slide

  34. HTML Imports
    • A way to package and share HTML files

    View full-size slide

  35. A Simple
    Native Web Component

    View full-size slide

  36. Custom Elements API

    View full-size slide

  37. Base HTMLElement Class

    View full-size slide

  38. How do Polymer
    Components Work?

    View full-size slide

  39. Import Polymer Library

    View full-size slide

  40. Custom Elements API

    View full-size slide

  41. HTML Template

    View full-size slide

  42. Data Binding

    View full-size slide

  43. Let’s Build a
    Web Component!

    View full-size slide

  44. Join In!
    1. Install Polymer CLI
    • npm install -g polymer-cli
    2. Create project directory
    • mkdir meme-maker && cd meme-maker
    3. Create a new Polymer project
    • polymer init
    4. or Clone the final repository
    • bit.ly/meme-maker-polymer

    View full-size slide

  45. Diving Deeper

    View full-size slide

  46. www.Polymer-Project.org

    View full-size slide

  47. Thank you!
    Any Questions?

    View full-size slide