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. Hello! • Ire Aderinokun • Frontend Developer and User Interface

    Designer • Google Expert in Web Technologies • Writer, bitsofco.de • Software Developer at eyeo
  2. Web

  3. Web Components are a set of new web platform features

    that let you create your own HTML elements
  4. – 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.”
  5. The Polymer Library is a Javascript Library that helps you

    create custom reusable HTML elements, and use them to build performant, maintainable apps
  6. Polymer App Toolbox is a collection of components, tools and

    templates for building Progressive Web Apps with Polymer
  7. Features • Component-based architecture using Polymer • Routing using the

    <app-route> elements • Offline caching using Service Workers • Build tooling to support delivery over HTTP/1 or HTTP/2
  8. Commands • polymer init • polymer serve • polymer lint

    • polymer test • polymer build • polymer analyze
  9. Custom Elements • An API for creating your own HTML

    elements by creating a Class that extends from HTMLElement • customElements.define()
  10. HTML Templates • A mechanism for defining content that can

    be stored for subsequent use in a document • <template></template>
  11. Shadow DOM • A mechanism for encapsulating a DOM and

    CSS, so that they can remain separate from the main document • document.body.attachShadow()
  12. HTML Imports • A way to package and share HTML

    files • <link rel=“import” href=“component.html”>
  13. 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