This is the presentation I gave to the Drupal4Gov community on web components in government. Why the time is right to begin looking at them for future adoption, how to get more information, what they've done for our team and process, who's using them, etc. It's a great starting point to browse through and get a sense of who's using them and what the implications are.

1. Webinar Series

2. Who is Drupal4Gov
Drupal4Gov is an open source community for developers with an
interest in making government more open to open source.
We encompass many open source projects but have our
beginnings in the Drupal project.
Members may have experience with any open source project from
licenses to development.

3. Training Day
July 23rd!

4. Drupal GovCon - annually in the summer @NIH
Gov Summit at DrupalCon NA - annually
Global Training Days
Webinar Series - monthly (3rd Thursday at 3pm EST)
Drupal4Gov Offers
@govdrupal
@drupalgovcon
@drupalgovcon

5. The case for
Web components

6. Bryan
Ollendyke
@btopro
Drupal dood

8. Bryan
Ollendyke
@btopro
Web components dood

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

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

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

12. What are web components?

14. <div style="background:yellow;">
<a href="link.com"
style="color:black;">
Name
</a>
</div>
Simple button example

15. Simple button as web component
<my-button
link="link.com"
title="Name">
</my-button>

24. Solving the design system problem

25. My interface designer makes a
simple “button” for us to use

26. My interface designer makes a
simple “button” for us to use
My team has to integrate my
designer’s “button” X number of
buttons X number of projects

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

28. How web components solves this..

29. Shadow DOM keeps CSS scoped
Custom elements makes HTML semantic
Both make JS scoping simple
WC keeps design intentional
WC makes design sustainable
WC make web professionals happy!

30. Accessibility becomes manageable
Maintenance costs collapses
Cost of development collapses
Project churn is eliminated
All Future projects cost less
Each new project expands capabilities
WC make web managers happy!

36. Escape the Drupal design island
● Reuse parts of your Drupal 7 sites in Drupal 8
● Enhance your Drupal 6,7,8 sites safely
● Can be used across CMSs

37. Across JavaScript libraries
custom-elements-everywhere.com

38. Who else uses this?

46. Online courses we teach

47. Online courses we teach

48. Yea, but can WE use this?

49. analytics.usa.gov - April

50. analytics.usa.gov -- Now

51. @btopro parsing the data
Last 90 days of 2019
● 85.9% -- Works natively
● 12.6% -- works with polyfills
● = 98.5% -- Will work with web components!

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

53. We have to support IE / Edge!
gs.statcounter.com

54. mspoweruser.com - Mar 24, 2019bgr.com - Dec 6, 2018

55. theverge.com - June 19,
2019

56. #usetheplatform
IE 11

57. Windows 7 EOL 2020
gs.statcounter.com

58. analytics.usa.gov

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

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

61. HAXcms progressive enhancement strategy
btopro.com/all-screen-rights - All screens have rights
Numbers are MY personal strategy aligned with Government data
== NoJS / fallback version (11.1%)
== ES5 web components + Polyfill (4.3%)
🔥 Modern but old version - ES5 web components + Polyfill (4%, Firefox)
🔥 Evergreen / ES6 - ES6 web components (80.6% of traffic, today!)

62. Btopro blog post, NOjs or IE6 - 11

63. Btopro blog post, Edge (until chromium)

64. Btopro blog post, Evergreen, ES6

65. My Guess 1 year from now
== NoJS / fallback version (10%)
🔥 Evergreen / ES6 - ES6 web components (90% of traffic)

66. My Guess 2 year from now
== NoJS / fallback version (5%)
🔥 Evergreen / ES6 - ES6 web components (95% of traffic)

67. So if your planning a project or starting one..
🔥 Talk about design and development needs across your portfolio
🔥 Look at what current projects could be augmented
🔥 Start small – We started with a single icon, then a button, then a menu
* Be mindful of progressive enhancement
🔥 There’s no reason to not use web components!

68. We’ve 100% bought in

69. This is Drupal Modules.. but for design and forever

70. 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.
They have nothing requiring our projects.
Web
components
By
numbers

71. Real web components we use

72. <vaadin-upload>

73. <grid-plate>

74. <eco-json-schema>

75. <code-editor>

76. <video-player>

77. <lrn-table>

78. <multiple-choice>

79. <rss-items>

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

81. Real project reuse

86. Haxtheweb.org – UI for web components

87. HAXTheWeb.org - modular authoring experience

88. HAXcms – A completely static, decoupled CMS

89. HAXcms – A completely static, decoupled CMS

90. HAXcms
Flat
file
structure

91. Additional resources

92. https://webcomponents.org/

93. https://open-wc.org/

94. https://www.patternfly.org/

95. https://lit-element.polymer-project.org/

96. https://github.com/elmsln/WCFactory

97. FreeTraining opportunity!
Drupal Govcon
Tuesday July 23rd

98. Bryan
Ollendyke
@btopro
Coffee addict
Questions?