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 Slide

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

    View Slide

  3. Building Applications on
    the Web is Hard

    View Slide

  4. View Slide

  5. Android
    BottomNavigationView />

    View Slide

  6. iOS
    UITabBar
    UITabBarController

    View Slide

  7. Web

    View Slide

  8. This is because the
    Web is an open platform

    View Slide

  9. Building Blocks of the Web

    View Slide

  10. Early Websites

    View Slide

  11. Websites Today

    View Slide

  12. But Web Technologies
    are getting better

    View Slide

  13. The Solution is
    Web Components!

    View Slide

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

    View Slide









  15. View Slide

  16. Encapsulated &
    Reusable

    View Slide

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

    View Slide

  18. View Slide

  19. What is the
    Polymer Project?

    View Slide

  20. – 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 Slide

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

    View Slide

  22. View Slide

  23. 1. Polymer Library

    View Slide

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

    View Slide

  25. Why use the Polymer Library?

    View Slide

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

    View Slide

  27. 2. Elements

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. 3. PRPL

    View Slide

  33. View Slide

  34. 4. App Toolbox

    View Slide

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

    View Slide

  36. 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 Slide

  37. 5. Tooling

    View Slide

  38. Polymer CLI

    View Slide

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

    View Slide

  40. polymer init

    View Slide

  41. What can you actually do
    with Web Components?

    View Slide


  42. View Slide

  43. View Slide

  44. cheese.polymer-project.org

    View Slide

  45. View Slide

  46. View Slide

  47. How do Web
    Components work?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. View Slide

  54. View Slide

  55. A Simple
    Native Web Component

    View Slide

  56. View Slide

  57. Custom Elements API

    View Slide

  58. Base HTMLElement Class

    View Slide

  59. Shadow DOM

    View Slide

  60. Content

    View Slide

  61. View Slide

  62. View Slide

  63. How do Polymer
    Components Work?

    View Slide

  64. View Slide

  65. Import Polymer Library

    View Slide

  66. Custom Elements API

    View Slide

  67. HTML Template

    View Slide

  68. Data Binding

    View Slide

  69. View Slide

  70. Let’s Build a
    Web Component!

    View Slide


  71. View Slide

  72. 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 Slide

  73. Diving Deeper

    View Slide

  74. www.Polymer-Project.org

    View Slide

  75. View Slide

  76. View Slide

  77. Thank you!
    Any Questions?

    View Slide