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
   

   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