Web Components: The Future of Web Applications

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?