Introduction to Web Components and Polymer Solution Street, based in Northern Virginia's high-tech corridor, is an information technology consultancy that helps private, government, and non-profit organizations achieve their business goals through the design and rapid deployment of web applications. Solution Street employees are experts in building large, highly scalable and well-performing custom software applications using Python, PHP, JavaScript, Ruby on Rails, J2EE, and .NET technologies. Joel Nylund - @jnylund - Managing Partner Joel has over 25 years building business systems of all kinds. He has been a partner at Solution Street since 2008. Before joining Solution Street he founded 2 startups DemandMart, a small business marketing tool and KeepUp, an online reminder service where he developed a passion for Ruby on Rails. Before that he was an Architect and Engineering Director at VeriSign. Joel loves all aspects of software development, including management, design, coding, debugging and testing. Joel has his B.S. & M.S. in Information Systems from George Mason University. Welcome, I am one of the 2 managing partners at Solution Street, a software consulting company based here in Herndon VA, we build custom software for our mostly commercial customer base and are always looking for great software engineers, so if you are looking please stop by our table. I have been developing software for over 25 years and today I am here to talk to you about Web Components & Polymer

Presentation agenda Introduction The Dream! Web Component Intro & Example Polymer Intro & Example Build Something Cool Our agenda for today

Software Engineering and the Component Dream The idea that software should be componentized - built from prefabricated components - first became prominent with Douglas McIlroy's address at the NATO conference on software engineering in Garmisch, Germany, 1968, titled Mass Produced Software Components. Since then, we have been trying really hard at components:

Software components are parts of a system or application. Components are a means of breaking the complexity of software into manageable parts. Each component hides the complexity of its implementation behind an interface. Components can be swapped in and out like the interchangeable parts of a machine.

Attempt to realize the “Component” dream using web technologies HTML Web Components Attempt to realize the “Component” dream using web technologies HTML CSS JavaScript Following Standards and implemented natively across all Web Browsers. What got me excited about the idea of Web Components is the build once and then anyone can reuse it, regardless of which framework they use. (or if they use no-framework at all)

Web Components - History Introduced in 2011 Got super hot in 2012 Polymer released in 2013 Now in 2018, pretty good browser support across the board (time for them to get hot again?)

Web Components are based on four main specifications: 01 Custom Elements The Custom Elements Specification lays the foundation for designing and using new types of DOM elements. <my-component> </my-component> 02 Shadow DOM The Shadow DOM Specification defines how to use encapsulated style and markup in web components. The ES Module Specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. <script type="module" src="CustomerWelcome.js"></script> 03 ES Modules 04 HTML Template The HTML Template Specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime. <template> </template> True story: This changed while I was preparing this presentation over the last month.

Current Web Component Browser Support (11/18) Full support for all major browsers except edge (4.34% of browsers), but they are working on it

Web Components – Developer/User & Sharing Web Component Developer – Creates web components that others can use Web Component User – Uses web components that others develop Most Component Developers are also Users webcomponents.org – Website where you can go and find reusable web components. You can also go here to share your component. We will go through an example of how to do this later.

Web Component – Simple Example (Developer) Let’s define a simple component that shows a welcome message the first time you come to the page, and then a counter for each time you come back. Define a Class that extends “HTMLElement” (Spec #1) Export this class as a ES6 Module (export) (Spec #3) Spec #1 – custom element spec Spec #2 - Shadow dom Spec #3 – ES Modules Spec #4 – HTML Templates

Web Component – Simple Example (Developer) line 4 - shadow dom (spec #2 & #4 respectively) html template Creating a method on my class to return the template and shadowDom Using template literal to store the template in a string that has variable substitution, welcome message function call is injected into the string. We can put both function calls as well as properties in here Also note the slot welcome description which is a way we can allow the users to customize text within our component.

Web Component – Simple Example (Developer) The logic in my constructor checks a local storage variable to see if the customer has been here and if not sets one for the next time This is how I can attach the template literal we just showed to the document, I need to define a template tag, and then set the guts of that using innerHTML, and then attach it as a shadow dom.

Web Component – Simple Example (Developer) Give your component a name that can be used by the “User” <customer-welcome> </customer-welcome> We need to exposer our class CustomerWelcome as a html tag

Web Component – Simple Example (Developer) Lifecycle Hooks that allow you to know when your component is connected and disconnected from the DOM line 20 - connectedCallback (fired when component is activated (lets come back to this

Web Component – Simple Example (Developer) Our component logic as a method (used by the call within the template literal) Helper function that shows the message based on local storage set in the constructor

Web Component – Simple Example (User) lines: 3  includes the component using ES6 Module syntax (part of web components) (#3 ES Modules) Line 10 - include the component in the html for rendering Put the PHP to show this is a php page Put the paragraph outside of the component to demonstrate how shadow dom styles work

Web Component – Simple Example (User) NOT Styled by Shadow DOM Core Component Logic Slot - Styled by Shadow DOM Lets look at the rendered page in the browser

Web Component – Simple Example (User) NOT Styled by Shadow DOM Core Component Logic Slot -Styled by Shadow DOM After a page refresh (note the counter)

Web Component – Simple Example (User) Slot –Allows you to customize the Component as a “User” Now we can customize the component as a user, by adding a element with a slot name and some text, this injects this text into the component. There are other ways a user can customize a component we will go over later. This completes our walk through of a simple web component built with no library or framework, just native browser apis

Polymer Project - Introduction A project & library meant to help developers write web components across all browsers before web components are ready for prime time A library that evolved into a full framework to compete with React, Angular, Vue etc. A library that now and found its way back to its roots, not trying to be a full framework, but some lite weight building blocks you could use + something like Redux to build apps with Now that we have a general web component intro, lets talk about the Polymer project, some folks assume you need Polymer to build webcomponents, this is not true, it is just one option (the most popular) of a library to use to build webcomponents.

Polymer History Looking at the history, 1.x and 2.x and 3.x seemed to be building toward a React like clone for the most part….I think sometime in the middle of implementing version 3, the polymer team realized they were off charter. Right after releasing version 3, they sort of said, hey, we are going another direction, use our PWA toolkit and use lit-element and lit-html…. So you have a choice: Use polymer 3, its kind of like a full framework like React…includes wrappers to all the materialized components (paper button, paper input etc) Ues lit-element, it’s a very basic extension of HTMLElement Credit - https://github.com/Tanbouz

Polymer – Lit-Element & Lit-HTML LitElement – a base class to use instead of HTMLElement to provide you some extras including LitHTML templating and lifecycle hooks. https://github.com/Polymer/lit-element LitHTML – a library to provide you some extras to make building web components a little easier/nicer and faster https://github.com/Polymer/lit-html Essentially LitElement+LitHtml looks like Polymer Version 4 (or at least the basis of version 4)

Polymer – Lit-Element Example (Developer) Lets build the same simple component using LitElement & LitHTML To get started with Polymer, it is pretty simple: $> mkdir customerwelcome $> cd customerwelcome $> npm init $> npm i @polymer/lit-element $> npm i -D @webcomponents/webcomponentsjs Lit-element - polymer base class, it includes lithtml with it Webcomponents provides polyfills for browsers that don’t support the features natively.

Polymer – Lit-Element Example (Developer) Now that we have an npm package, we need to setup the package.json file (this will also help us package our component later) Note: ORG – @solutionstreet – namespace Lit-element dependency Github repo noted

Polymer – Lit-Element Example (Developer) Defining the class is similar: Import the LitElement class Class that extends “LitElement (instead of HTMLElement)

Polymer – Lit-Element Example (Developer) Line 39 - We don’t need the <template> any more We have hand html ` function that does the work for us, no need for kludgy innerHTML  This is a template tag function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals It allows the function implemented by lit-html parse the literal and return what it wants, in this case it wraps the template tag and does some other magic. Putting this insider of the render method that is one of the methods you need to override when using litelement

Polymer – Lit-Element Example (Developer) Better lifecycle methods provided by LitElement So little better and more detailed lifecycle hooks provided by lit-element So that is it, very similar to what we did before without a library.

Polymer – Lit-Element Example (User) We use the Lit-Element the same way we use the regular element, from HTML, we just reference the JavaScript module and use the HTML template For development, we can use Polymer Command Line tool “polymer serve” which runs a simple web browser so we can test our component out

Polymer – Lit-Element Example (User)

Web Component – Packaging and Sharing (Developer) So now that we have a web component, how do we share it with others? First thing is you need to create an npm package (we already did) 1.) add License file 2.) add README.md 3.) I recommend creating an org (ours is solutionstreet) 4.) In your package.json use the org in the name like this -   "name": "@solutionstreet/customerwelcomebadge" 5.) Publish “npm publish --access public” (You can see my component at: https://www.npmjs.com/~jnylund Then just go to webcomponents.org and: Click Publish put in npm component name. If you go to webcomponents.org and search : SolutionStreet (you can see my component) *Note, you don’t need to publish components to use them, you could have a local NPM repo. https://www.npmjs.com/~jnylund

Web Component – Packaging and Sharing (Developer)

Web Component – Packaging and Sharing (Developer)

Web Component – Packaging and Sharing (Developer & User)

Let’s build a more complex Web Component In this Demo I would like to show you: How to customize a component from outside of it How a component can return a value/event to its caller How we can make use of other components within a component Lets build a Lat/Long Chooser An ideal lat/long chooser has 3 options: Deg/min/seconds (38° 9' 43.9416’’ N 93° 9' 50.6268’’ W) Decimal (38.162206 -93.164063) Map

Summary – Web Components Web Components are Super Cool! Standards Based Fast (Native Browser implemented) No Framework Needed, just HTML/JS/CSS Current Browsers now support web components pretty well You can use webcomponents and frameworks fairly well together

Summary – Polymer Project/Library Tools and libraries to help you build projects with web components A bit of a mess in its current and historical state (1.0, 2.0, 3.0 and beyond (lit-element/lit-html), documentation is confusing Do we need Polymer? Read more on the roadmap - here