The document discusses the benefits of using web components for projects. Web components allow for reusable code snippets called custom elements that can be used across different sites and frameworks. They keep CSS and JavaScript encapsulated and make code maintenance easier. While older browsers don't support web components natively, polyfills allow them to work on most browsers. The author argues that within a few years the vast majority of traffic will be from modern browsers that support web components natively. They recommend starting to use web components now on new and existing projects to take advantage of their benefits.

1. The case for
Web components

2. The case for
Web components
in Government

3. The case for
Web components
in any project

4. The case for
Web components
And never looking back

5. Bryan
Ollendyke
@btopro
Web components dood

7. What are web components?

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

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

13. Solving design system problems

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

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

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

17. What web components solve

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

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

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

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

27. Who else uses this?

32. Online courses we teach

33. Online courses we teach

34. Yea, but can WE use this?

35. analytics.usa.gov

36. @btopro parsing the data
Last 90 days of 2019
● 84.6% -- Works natively
● 12.3% -- works with polyfills
● = 96.9% -- Will work with web components!

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

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

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

40. #usetheplatform
IE 11

41. Windows 7 EOL 2020
gs.statcounter.com

42. analytics.usa.gov

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

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

45. 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!)

46. Btopro blog post, NOjs or IE6 - 11

47. Btopro blog post, Edge (until chromium)

48. Btopro blog post, Evergreen, ES6

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

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

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

52. Hey that blog sure looked nice...

53. It’s entirely built out of web components

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

55. Real project reuse

56. This is the identical system to my blog

57. HAXTheWeb.org - modular authoring experience

58. This site is built in HAXcms, all structure via a UI

59. Bryan Ollendyke
@btopro
College of Arts and Architecture
Office of Digital Learning
Michael Potter
@hey__mp
Eberly College of Science
Office of Digital Learning
Training after lunch

60. Additional opportunities
Tuesday
11:00am | Room 204 | Level 2
Creating a library agnostic approach to
sustainable Web Component development
Wednesday
4:00pm | Room 617 | Level 6
Make web development fun again, with web components!
Thursday
9:00am | BoF 1 | Exhibit Hall | Level 4
Web components BoF