An introduction to Web Components and Polymer as a path for modernizing Notes applications.

1. An Introduction To
Web Components
Kito Mann
Senior Web Developer
Keith Strickland
Co-Founder
Friday – 9:00 AM

2. Keith Strickland
Co-Founder
keith@redpillnow.com
@keithstric
redpillnow.comwww
Atlanta, Georgia
keithstric.me

3. Kito Mann
Senior Web Developer
kito@redpillnow.com
@kito99
redpillnow.comwww
Richmond, Virginia
kitomann

4. Challenge the way you think about Notes data

5. Change the way you approach your next project

6. Understand the potential of web components

7. UI Components are Everywhere

8. UI Components are Everywhere

9. UI Components are Everywhere
Component models have been popular since the early 90s
• LotusScript/Visual Basic
• Delphi
• PowerBuilder
• WinForms
• Windows Presentation Framework
• ASP.NET
• Swing
• JavaFX
• JavaServer Faces/XPages

10. UI Components are Everywhere
In the browser, component suites and frameworks must
invent their own models
• YUI
• KendoUI
• Bootstrap
• jQuery UI
• Infragistics
• AngularJS
• React

11. Why do We Build Components?
• Reusable UI functionality
– Within a single application
– Across multiple applications
You can focus on the core application functionality

12. Problem: HTML Markup Doesn't Support Components

13. We Work with
Abstractions
Programming model may be componentized, but native
markup is not

14. JSFDataTable
<p:dataTable var="car" value="#{dtPaginatorView.cars}" rows="10”
paginator="true” paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
{RowsPerPageDropdown}”
rowsPerPageTemplate="5,10,15">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>

15. BootstrapDropdwons
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu"
aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-
1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-
1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-
1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-
1" href="#">Separated link</a></li>
</ul>
</div>

16. jQueryUITabs <div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
...
</div>
<div id="tabs-2">
...
</div>
<div id="tabs-3">
...
</div>

17. Web Components
bring a native
component model to
HTML

18. What is a Web Component?

19. WhatisaWeb
Component?
<paper-action-dialog backdrop autoCloseDisabled
layered="false">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<paper-button affirmative autofocus>Tap me to close
</paper-button>
</paper-action-dialog>

20. Works together
Works the same
Works anywhere

22. Demo: Custom Elements

23. CustomElements
<simple-counter class="counter" start="10"/>

24. CustomElements
class SimpleCounter extends HTMLElement {
constructor() {
super();
this.count = 0;
this.timer = null;
this.innerText = "Simple Counter";
}
connectedCallback() {
this.count = Number(this.getAttribute("start")) || 0;
this.start();
};
disconnectedCallback() {
this.stop();
};
attributeChangedCallback(attr, oldVal, newVal) {
if (attr == "start") {
this.count = Number(newVal);
}
}
adoptedCallback() {
console.log("Someone adopted me!", this);
}

25. CustomElements
start() {
var _self = this;
this.timer = setInterval(function() {
_self.count = _self.count + 1;
_self.update(_self.count);
}, 2000);
}
stop() {
clearInterval(this.timer);
this.timer = null;
}
update(counterValue) {
this.innerHTML = counterValue;
}
}
window.customElements.define('simple-counter',
SimpleCounter);

26. HTMLTemplates <template id="template">
<div id="inner-div">
<div>Inside the template, baby!</div>
</div>
</template>
<script>
var templateClone = document.importNode(
document.querySelector("#template").content, true);
var body = document.querySelector("body");
body.appendChild(templateClone);
var templateClone2 = document.importNode(
document.querySelector("#template").content, true);
body.appendChild(templateClone2);
</script>

27. HTML Templates

28. HTMLImports:using
Bootstraptoday <head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.m
in.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.j
s"></script>
<![endif]-->
</head>
<body>
...
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.
2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

29. HTMLImports:
bootstrap.html
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.
js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js"></script>
<script src="js/bootstrap.min.js"></script>

30. HTMLImports:
ImportingBootstrap
<head>
...
<link rel="import" src="imports/bootstrap.html"/>
</head>
<body>
...
</body>

31. Demo: Shadow DOM

32. ShadowDOM
class DeluxeCounter extends SimpleCounter {
constructor() {
super();
this.innerHTML = '';
this.counterDiv = document.createElement('div');
this.counterDiv.innerText = "Deluxe Counter";
var root = this.createShadowRoot();
root.appendChild(this.counterDiv);
var _self = this;
this.onclick = function() {
if (_self.timer == null) {
_self.start();
}
else {
_self.stop();
}
}
}
...
}

33. Browser Support
• Chrome/Android and Opera support everything
• IE doesn't support anything
• All other browsers support HTML Templates
• Shadow DOM and Custom Elements in development for
Firefox and Safari
– "Under consideration" for Edge; likely to be added later
• HTML Imports not supported in other browsers
– "Under consideration" for Edge; not planned in Firefox and
Safari

34. polyfill
[pol-ee-fill] noun
In web development, a polyfill (or polyfiller) is downloadable
code which provides facilities that are not built into a web
browser. It implements technology that a developer expects
the browser to provide natively, providing a more uniform API
landscape. For example, many features of HTML5 are not
supported by versions of Internet Explorer older than version 8
or 9, but can be used by web pages if those pages install a
polyfill. Web shims and HTML5 Shivs are related concepts.
-- Wikipedia

35. Closing the Browser Gap
Browser Support for webcomponents.js

36. Closing the Browser Gap
Browser Support for X-Tag

37. Writing Web Components
Polymer

38. Polymer
• Open source library for building web components
• Simplified programming model
• Two-way data binding
• Declarative event handling
• Behaviors (mixins)
• Property observation
• Extensive set of tools
– Build, testing, designer, etc.
• Used in over 4 million web pages

39. Polymer
• Developed by and used internally by Google
• Used in over 400 Google projects
– Over 1 billion users
– Over 4,000 custom web components
– Examples: Chrome, Play, Fi, YouTube Gaming, and
Translate, Patents
• Heavily promoted
– Polymer Summit
– Polycasts

40. Web Components in the Wild
• Component Suites
– Polymer Element Catalog
– Bosonic
– GE Predix UI
– Strand Web Components
– Vaadin Elements
• Directory
– customelements.io
• Uplabs (inspiration)

41. Polymer Element Catalog
Web components built by Google using Polymer

42. Demos:
Polymer Element Catalog
customelements.io

43. Web Components in the Wild
• Companies
– GE
– Comcast
– Atlassian
– GitHub
– Salesforce
• Non-Google Applications
– USA Today Rio Olympic Site
– simpla.io
– Red Pill DIG

44. Demo: Red Pill DIG