1. 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 - Managing Partner
Joel has over 25 years building business systems of all kinds. He has been a partner at Solution Street since 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

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

3. 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:

4. 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.

5. 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)

6. 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?)

7. 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.

8. 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

9. 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.

10. 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

11. 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.

12. 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.

13. 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

14. 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

15. 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

16. Web Component – Simple Example (User)
lines: 3  includes the component using ES6 Module syntax (part of web components) (#3 ES Modules)
Line 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

17. 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

18. 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)

19. 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

20. 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.

21. 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 -

22. 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.
LitHTML – a library to provide you some extras to make building web components a little easier/nicer and faster
Essentially LitElement+LitHtml looks like Polymer Version 4 (or at least the basis of version 4)

23. 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
$> npm i
Lit-element - polymer base class, it includes lithtml with it
Webcomponents provides polyfills for browsers that don’t support the features natively.

24. 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 – namespace
Lit-element dependency
Github repo noted

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

26. 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 -
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

27. 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.

28. 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

29. Polymer – Lit-Element Example (User)

30. 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": 5.) Publish “npm publish --access public” (You can see my component at:
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.

31. Web Component – Packaging and Sharing (Developer)

32. Web Component – Packaging and Sharing (Developer)

33. Web Component – Packaging and Sharing (Developer & User)

34. 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' ’’ N 93° 9' ’’ W)
Decimal ( )
Map

35. 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

36. 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