Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house). As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them. Talk structure: What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility Examples of who has adopted them and what they doing with them Community resources like polymer slack, webcomponents, and open-wc.org Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio How teams can leverage web components across projects Where Drupal 6,7,8,9 fit into the future with web components Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!

1. Future
proofing
design work
with Web
components
GovCon 2019
HAXTheWeb.org
Bryan Ollendyke
[at]btopro
Developer Activist

2. Experimentation platform that allows us to
envision and communicate what a NGDLE could
look like.
The most successful applications from
ELMS:LN are a course content management
system and a [art] studio instruction
management system.
ELMS:LN

5. My interface designer makes a
simple “button” for me to use

6. My interface designer makes a
simple “button” for me to use
I have to integrate my designer’s
“button” X number of buttons X
number of projects

7. My interface designer makes a
simple “button” for us to use
I have to integrate my designer’s
“button” X number of buttons X
number of projects
...My “team” will screw this up

8. So,... Pattern lab,.. Didn’t solve this?

9. No cause my drupal css and js be
like..

10. No cause my drupal css and js be
like..

11. ”I just wanted to make
drupal look the right
way and I can’t”
Our prev designer

12. The CMS “template”
cake..

13. The CMS “template”
cake..
is a lie

14. 2017 – 20xx
Future proof

15. “The 2000 year leap but for the web,
happened last year, and no one has
realized it yet”
- ?

16. “The 2000 year leap but for the web,
happened last year, and no one has
realized it yet”
- btopro

17. “The 2000 year leap but for the web,
happened last year, and no one has
realized it yet”
- btopro
reading this right now

18. We can all be BFFs and leverage each
other’s efforts without adopting every
aspect of each other’s work.
Welcome, to Web components.

19. The new
normal.
Web
Components

20. Wait, what are web components?

21. Web Components - meta specification
● Custom, reusable, encapsulated HTML tags
● For use in web pages and web apps
● They work in modern browsers
● They can be used with any JavaScript library or
framework
webcomponents.or

22. Web Components - meta specification
1. HTML Template <template>
2. Custom Elements <brand-new-tag></brand-new-
tag>
3. ES Modules <script type=”module”>
4. Shadow DOM <slot>
webcomponents.or

24. hello-world EITMLIF
(explain it to me like I’m five)

25. <div style="background:yellow;">
<a href="link.com"
style="color:black;">
Name
</a>
</div>
Example: Old Skool button

26. Web component button
<my-button
link="link.com"
title="Name">
</my-button>

27. Web component button
<my-button
link="link.com"
title="Name">
</my-button>

28. Web component button

29. But can I use these?

30. BC I NEED IE / Edge!
gs.statcounter.com

31. Windows 7 EOL 2020
gs.statcounter.com

32. So, that’s not IE 11
PC World - Jan 31, 2019

33. So, that’s still years away
Windows IT Pro Blog - Feb 6, 2019

34. <trident-death year=“2020”>
mspoweruser.com - Mar 24, 2019bgr.com - Dec 6, 2018

36. Global traffic stats - gs.statcounter.com
February 2019 (browserstack.com + physical devices)
● 🔥 Confirmed working -- 98.26%
● 🤗 Should work / unconfirmed -- 99.64%
● 🤗 Numbers are without a progressive enhancement
strategy
● Let’s talk Edge / IE

37. Analytics.usa.gov traffic data
July 2019
● 🔥 No polyfill, native -- 89.1%
● 🤗 Works with Polyfills -- 96.3%
● ?? “unknown browser” -- 2.9%
● 🤗 == 99.2% traffic; let’s say 98% gets web components
● Use progressive enhancement to pick up the last 2%
then!

38. HAXcms progressive enhancement strategy
All screens have rights! btopro.com/all-screen-rights
== NoJS == ~3% global traffic
ES5 web components + Polyfill == ~3% global traffic
Modern but old version – ES6 web components + Polyfill
~9%
Evergreen / ES6 web components – Native, fast, ~85%Haxtheweb.org

39. Who’s using this?

47. Sample code

55. Where can I get help

56. Community resources
Open-wc.org
open community resource
webcomponents.org
open community resource, google started
polymer-project.org
google
custom-elements-everywhere.com
testbed for WC spec against many libraries

57. Community resources

58. Community resources

59. So I can just use what I make then?

60. npm init @open-wc
npm start
npm run build

61. elmsln / wcfactory

62. This is a Drupal event so...Where’s
that?

63. Web components -> Drupal workflow
● Create – elements in local, isolated development
● Publish - to NPM / github as stand alone
● Build - compile to hit IE11 and up
● Integrate – directly into theme or via module
○ html.html.twig referencing polyfill / build
● Implement - Leverage components throughout Drupal
○ In other templates, body field, panels, etc

64. Twig templates
<my-button
link="{{ link|escape }}"
title="{{ name|escape }}">
<a href="{{ link|escape }}">
{{ name|escape }}
</a>
</my-button>

65. First : Theme templates
<my-button
link="<?php print $link;?>"
title="<?php print $name;?>">
<a href="<?php print $link;?>">
<?php print $name;?>
</a>
</my-button>
Even really old ones..

66. Live Example

67. Teach ”Drupal” about web
components

68. Teach ”Drupal” about web
components

69. Teach ”Drupal” about web
components
html.html.twig or html.php.tpl

70. We are kept separate by fictional walls
The web is the platform, stop letting
Drupal-isms own your site design!
Smash
Complacency
Drupal 6,7,8
WordPress
Joomla
GravCMS
All of it
Warner Bros

71. We have produced over 384 reusable web
components.
Of these, 331 are general purpose.
We have more available elements than anyone
I can find record of, including Google.
They are used by ELMS:LN, HAXcms, and in
the wider open web in any project. Any..
They have nothing requiring our projects.
Web
components
By
numbers

72. - Can share across projects
- Works across FE libraries / CMSs
- Complements Twig / Pattern Lab
- Not a Drupal-ism
Seuss Enterprises
Reuse anywhere
Even outside of
[gasp]
Drupal

73. - Can share across projects
- Works across FE libraries / CMSs
- Complements Twig / Pattern Lab
- Not a Drupal-ism
- Get off the island
Seuss Enterprises
Reuse anywhere
Even outside of
[gasp]
Drupal

74. - Can share across projects
- Works across FE libraries / CMSs
- Complements Twig / Pattern Lab
- Not a Drupal-ism
- Get off the island
- Get off the island
Seuss Enterprises
Reuse anywhere
Even outside of
[gasp]
Drupal

75. - Can share across projects
- Works across FE libraries / CMSs
- Complements Twig / Pattern Lab
- Not a Drupal-ism
- Get off the island
- Get off the island
- Get off the island
Seuss Enterprises
Reuse anywhere
Even outside of
[gasp]
Drupal

76. Disney / Marvel
“I once had strings but now..”

77. So w/o strings I can build what
exactly...

78. Get ready

79. <vaadin-upload>

80. <grid-plate>

81. <simple-fields>

82. <code-editor>

83. <video-player>

84. <lrn-table>

85. <multiple-choice>

86. <rss-items>

87. <iron-ajax>
<paper-button>
<simple-modal>
<self-check>
<wikipedia-query>
<lrn-math>
<user-action>
<simple-colors>
<q-r>
<license-element>
<simple-drawer>

88. <h-a-x>

89. Where
We
Work
With
Enough
Coffee
Anywhere
That
Loads
JavaScript

90. Where
We
Work
With
Enough
Coffee
Anywhere
That
Loads
JavaScript
Oh and now...

91. W00T!

92. HAX
HAXeditor

93. - 1 line to integrate <h-a-x>
+ 1 line reference <script type=“module”>
- Block editor in context
- Search remote sources in place
- HAX produced content will work without HAX
- Can edit legacy HTML
- A11y baked into platform and elements
- We eliminate many a11y issue in web dev
H.A.X.
Features

94. - Drupal 7 / 8 module
- WordPress plugin
- GravCMS plugin
- BackdropCMS module
- Beaker Browser (Dweb browser)
- Anything that saves body blobs of HTML
And of course...
- HAXcms
In the future (and past)
- HAXcms for Desktop
H.A.X.
Integrations

95. The last
“CMS”
HAXcms

96. <haxcms-site-builder>

97. Github.com
elmsln/HAXcms

98. HAXcms
Changing
The
game
for
“static site”
generators

99. H.A.X.
Demo
HAXTheWeb.org
Warner Bros

100. From Many, Many.
Bryan
Ollendyke
[at]btopro