Web Components: Reusable UI Widgets for Streamlined Web Development

1. WEB COMPONENTSCan We Use Them Now?

2. What are Web Components • Web Components are made up of four complementary browser capabilities, Custom Elements, HTML Imports, Shadow DOM and HTML Templates. Together, they can create reusable user interface widgets that encapsulate a behaviour and can be used, as displayed above, by importing the component and placing a custom element in an HTML page.  • Web Components was first introduced in 2011, by the WC3 to streamline web development processes which permit web developers to build complex web applications using custom made elements. • Developers can also produce widgets and custom new tags for web documents and applications. • When interlinked with a style guide, web components can produce a component API (In computer programming, an application programming interface), which allows developers to stop bootlegging snippets of code and instead just use a DOM element.

4. What are Web Components made of? • Custom Elements - APIs (application programming interface) for developing your own HTML elements. These can be your own innovation or extension of the functionality of HTML 5 standard elements. • HTML Templates – This tool allows a new component to demarcated as a template directly. Any parts of HTML markup can be identified inside the template tag. It define sections of DOM within a tag that can remain inactive at page load and can be called later at runtime. • Shadow Dom - Can be used to directly integrate a HTML file into the main document. It creates encapsulation of JavaScript, CSS, and tempting. The web component code remains segmental and separated from the rest of the DOM. • HTML Imports – Used to link to HTML documents through HTML and import into other documents.

5. Custom Elements • The Custom Element lays the foundation for designing and using new types of DOM element. • Custom Elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behaviour added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. • By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

6. HTML Templates The HTML Template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime. • Scripts allow authors to add interactivity to their documents. • Authors are encouraged to use declarative alternatives to scripting where possible, as declarative mechanisms are often more maintainable, and many users disable scripting. • Authors are also encouraged to make their applications degrade gracefully in the absence of scripting support.

7. Shadow Dom The Shadow Dom element specification defines how to use encapsulated style and markup in web components. Shadow DOM is also designed as a tool for building component-based apps. Therefore, it brings solutions for common problems in web development: • Isolated DOM • Scoped CSS • Composition • Simplifies CSS  • Productivity 

8. HTML Imports HTML Imports are a way to include and reuse HTML documents in other HTML documents. It is intended to be the packaging mechanism for web components, but you can also use HTML Imports by itself. • You import an HTML file by using a <link> tag in an HTML document like this:

9. The Problem and The Solution • Problem-Bootlegging Code: “Once they copy that code they are essentially cutting a version which needs to be maintained indefinitely. When they copied the markup for a working component it had an implicit link to a snapshot of the CSS at that point. If you then update the template or refactor the CSS, you need to update all versions of the template scattered around your site.” Ian Feather –Lonely Planet • Solution- The “Holy Grail”- Web Components: Web components solve this problem by defining markup in JavaScript. The author of a component is free to alter markup, CSS, and JavaScript. The consumer of the component can benefit from these upgrades without needing to trawl through a project altering code by hand. Syncing with the latest changes project-wide can be achieved with a terse NPM update via terminal. Only the name of the component and its API need to stay consistent.

10. Benefits of using Web Components • Reusability— Web components are inter-exchangeable within frameworks and they can be used across a multitude of applications. • Platform Independent — They are developed using HTML, CSS, and JavaScript, they can operate on various different browsers. • Easy to Maintain — Web components use a template which is separate to the entire markup which creates low demand on maintenance. • Encapsulation — Shadow DOM prevents style, script, and HTML markup of the component to be affected by the external document. • Reliability — Widgets can be built more reliably rather than just being coded in HTML and JavaScript which can lead to cross-references and errors in the rendered layout.

11. Can we use Web Components now? • Web components have become a central concept for many front-end developers. They feature web components in their development workflow. • Code sharing is much easier and can be managed and updated with a code manager. • Web Components can offer a robust model for architecting and scaling complex applications. • Current frameworks such as React, Angular, Vue, and Dojo have further made way for web components to be forefront of development, keeping them as core objectives in their architecture.

12. <twitter-button> Web Component wrapper for Twitter’s Button using Polymer. Install the component using Bower: $ bower install twitter-button –save Import Web Components' polyfill: <script src="bower_components/webcomponentsjs/webcomponents.js"></script> Import Custom Element: <link rel="import" href="bower_components/twitter-button/dist/twitter-button.html"> Start using it! <twitter-button></twitter-button>

13. Widgets Sourced at: https://www.twilio.com/blog/2016/06/getting-started-with-web-components-building-a-video-chat-widget.html

14. The Common Component Libraries Web components are straight forward to use. They can be accessed from web component libraries. You just pick a component and import it into your project. The most used libraries are: • Google Polymer – The most popular open source with over 6000 members on Slack and thousands of web components. programme Reusable HTML can be created and they also incorporate the use to of Google Analytics, Google Calendar and Google APIs. (£Free) • X-TAG Mozilla – is an open source library is courtesy of Mozilla and supported by Microsoft. It incorporates the W3C standard Web Components family of APIs to provide a feature-rich interface for faster component development. (£Free) • Bosonic– compatible with older browsers like Internet Explorer 9. (£Free) • Stencil is an opensource compiler that generates standards-compliant web components. (£Free)

15. Other Component Libraries • Skate.Jsis a library built on top of the W3C web component specs that enables you to write functional and performant web components with a very small footprint. Skate is inherently cross-framework compatible. For example, it works seamlessly with - and complements - React and other frameworks. • Hybrids is a UI library for creating web components with simple and functional API. The library uses plain objects and pure functions for defining custom elements, which allow very flexible composition. It provides built-in cache mechanism, template engine based on tagged template literals, and integration with developer tools.

16. Polymer is an open-source JavaScript library for building web applications using polymer Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles. • LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html.

18. X-Tag was originally developed at Mozilla, now supported by devs at Microsoft. X-Tag is an open source JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for component development. It only requires Custom Elements API support to operate. In the absence of the native Custom Elements APIs, X-Tag uses the same polyfill Google's Polymer framework relies on. You can view our package options in the Builds section.

20. A curated library of reusable Custom elements at an atomic level. Carefully crafted with web standards and accessibility in mind, these custom HTML elements cover the web developer everyday needs. • A lightweight platform -Built on top of the web components polyfill library, Bosonic provides a very thin layer of syntactic sugar that eases the burden of working with Web Components primitives. • A future-proof solution - With Web Component standards being implemented progressively in modern browsers, our elements' already good performance will get even better.

21. The magical, reusable web component compiler. Stencil combines the best concepts of the most popular frontend frameworks and generates 100% standards-based Web Components that run in any modern browser. Built by the Ionic Framework team

22. Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

23. Browser Support for Web Components 2018 Browser support for Web Components as on June 2018. Source: WebComponents.org 2018a.

24. Web Component Statistics 2017 published 2018 https://dev.to/binhbbbb/web-components-statistics-in2017-2ecf

25. Web Component Statistics 2017 published 2018 https://dev.to/binhbbbb/web-components-statistics-in2017-2ecf

26. Web Component Statistics 2017 published 2018 https://dev.to/binhbbbb/web-components-statistics-in2017-2ecf

27. References https://www.tutorialsteacher.com/webapi/what-is-web-api (accessed on 12 February 2019). https://hacks.mozilla.org/2018/11/the-power-of-web-components/ (accessed on 12 February 2019). HTML Templates – http://www.w3.org/TR/html-templates/ (accessed on 12 February 2019). Shadow DOM – http://www.w3.org/TR/shadow-dom/ (accessed on 12 February 2019). Custom Elements – http://www.w3.org/TR/custom-elements/ (accessed on 12 February 2019). HTML Imports – http://www.w3.org/TR/html-imports/ (accessed on 12 February 2019). Twitter Button - https://github.com/social-elements/twitter-button (accessed on 12 February 2019). https://www.sitepen.com/blog/web-components-in-2018 (accessed on 12 February 2019). Statistics https://dev.to/binhbbbb/web-components-statistics-in2017-2ecf (accessed on 18 February 2019). What is Polymer https://hackernoon.com/getting-started-with-google-polymer-6e57f5a05906 (accessed on 18 February 2019).

28. References https://medium.com/inkoniq-blog/uncomplicate-the-web-using-web-components- 4d5f7edaac05 (accessed on 18 February 2019). Polymer Project https://www.polymer-project.org (accessed on 18 February 2019). Uncomplicate Web Components https://medium.com/inkoniq-blog/uncomplicate-the-web-using-web-components-4d5f7edaac05 (accessed on 18 February 2019). Styling Web Components Using A Shared Style Sheet https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/ (accessed on 18 February 2019). Web Components in 2018 https://www.sitepen.com/blog/web-components-in-2018/ (accessed on 18 February 2019). A Guide to Web Components https://css-tricks.com/modular-future-web-components/ (accessed on 18 February 2019). X-Tag Modzillahttps://x-tag.github.io (accessed on 18 February 2019). Stencil https://stenciljs.com (accessed on 18 February 2019). Bosonic http://bosonic.github.io (accessed on 18 February 2019).

29. References Web Component Browser Support 2018 https://blog.ionicframework.com/october-2018-a-big-month-for-web-components/(accessed on 18 February 2019). The Holy Grail Of Reusable Components https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/ (accessed on 18 February 2019). Bower https://bower.io (accessed on 18 February 2019). Widgtshttps://www.webcomponents.org/element/eiwos/eiwos-widgets (accessed on 18 February 2019). Video Widget Web Component https://www.twilio.com/blog/2016/06/getting-started-with-web-components-building-a-video-chat-widget.html (accessed on 18 February 2019).

30. THANKS! Any questions? 😉 You can find me on Twitter at: @Yellowf86836123 Or as7915e@gre.ac.uk