Web Components: The Future of Web Applications

Talk at Google I/O Extended Lagos

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
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!
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
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
32. 3. PRPL
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>
44. cheese.polymer-project.org
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”>
55. A Simple Native Web Component
57. Custom Elements API
58. Base HTMLElement Class
59. Shadow DOM
60. Content
63. How do Polymer Components Work?
65. Import Polymer Library
66. Custom Elements API
67. HTML Template
68. Data Binding
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
77. Thank you! Any Questions?