Web Components: The Future of Web Applications

Web Components: The Future of Web Applications

Talk at Google I/O Extended Lagos

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

June 17, 2017
Tweet

Transcript

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

    Extended Lagos
  2. Hello! • Ire Aderinokun • Frontend Developer and User Interface

    Designer • Google Expert in Web Technologies • Writer, bitsofco.de • Software Developer at eyeo
  3. Building Applications on the Web is Hard

  4. None
  5. Android <android.support.design.widget. BottomNavigationView />

  6. iOS UITabBar UITabBarController

  7. Web

  8. This is because the Web is an open platform

  9. Building Blocks of the Web

  10. Early Websites

  11. Websites Today

  12. But Web Technologies are getting better

  13. The Solution is Web Components!

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

    that let you create your own HTML elements
  15. <bottom-navigation> <floating-action-button> <ire-aderinokun> <caniuse-embed> <inlinetweetjs> <meme-generator> <inlinetweetjs> <bitsofcode>

  16. Encapsulated & Reusable

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

  18. None
  19. What is the Polymer Project?

  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.”
  21. The Polymer Project is a look into the future of

    web development
  22. None
  23. 1. Polymer Library

  24. The Polymer Library is a Javascript Library that helps you

    create custom reusable HTML elements, and use them to build performant, maintainable apps
  25. Why use the Polymer Library?

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

    APIs Polymer CLI
  27. 2. Elements

  28. None
  29. None
  30. None
  31. None
  32. 3. PRPL

  33. None
  34. 4. App Toolbox

  35. Polymer App Toolbox is a collection of components, tools and

    templates for building Progressive Web Apps with Polymer
  36. 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
  37. 5. Tooling

  38. Polymer CLI

  39. Commands • polymer init • polymer serve • polymer lint

    • polymer test • polymer build • polymer analyze
  40. polymer init

  41. What can you actually do with Web Components?

  42. <caniuse-embed>

  43. None
  44. cheese.polymer-project.org

  45. None
  46. None
  47. How do Web Components work?

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

    Custom Elements
  49. Custom Elements • An API for creating your own HTML

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

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

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

    files • <link rel=“import” href=“component.html”>
  53. None
  54. None
  55. A Simple Native Web Component

  56. None
  57. Custom Elements API

  58. Base HTMLElement Class

  59. Shadow DOM

  60. Content

  61. None
  62. None
  63. How do Polymer Components Work?

  64. None
  65. Import Polymer Library

  66. Custom Elements API

  67. HTML Template

  68. Data Binding

  69. None
  70. Let’s Build a Web Component!

  71. <meme-maker>

  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
  73. Diving Deeper

  74. www.Polymer-Project.org

  75. None
  76. None
  77. Thank you! Any Questions?