This document discusses web components and package managers. It provides an overview of popular front-end frameworks and libraries from the past like React, Angular, and VueJS. It explains that web components will replace other forms of web development by providing a standard way for code to be reusable while maintaining compatibility. Package managers like NPM are important tools that developers widely use to manage dependencies. The document advocates that web components create a foundation for significant leaps in development capabilities by solving problems around design systems, templates, and libraries.

1. Week 11
Web components
& Package managers
The future of all development
webcomponents
Bryan Ollendyke
[at]btopro
Developer Activist

6. Today’s Topic / What you'll learn about
- What some front end development libraries
of the past are
- Why these are popular popular
- Who uses these / invented them / history
- What packages managers are
- Why web components will replace all other
forms of web development
- What is a ”Headless” application in
industry?
Web
components
&
NPM /
Package
managers

7. Links to poke around / great sources
- https://www.webcomponents.org
- https://open-wc.org
- https://haxtheweb.org
- https://www.polymer-project.org/
- https://dev.to/
- https://glitch.com/
- https://stackblitz.com/
- https://webcomponents.dev/
Web
components
&
NPM /
Package
managers

8. Terms / definitions for today
- Web component - reusable, custom HTML tag
- React – Facebook front end framework
- Angular – Google front end framework
- VueJS – FOSS front end library
- LitElement – Web component library
- Front end Framework
JavaScript development method,
opinionated, sometimes large
- Front end Library
JavaScript development helper, small, lite
Web
components
&
NPM /
Package
managers

9. Terms / definitions for today
- Package Manager – “a collection of software tools
that automates the process of installing, upgrading,
configuring, and removing computer programs for a
computer's operating system in a consistent
manner.”
- Source: Wikipedia
- NPM - Node Package Manager, a JavaScript
package manager that like GitHub, is not
open source but is popularized based on
ease of use.
- node - a specific form of JavaScript that
can be run on servers to power web
applications
Web
components
&
NPM /
Package
managers

10. Who’s using these (Web components)
- Growing in numbers but still a lot less then the other
libraries and frameworks out there Emergence side of
an Emerging Technologies course
- Amazon and Apple music players on web both use
web components
- Adobe, Google, ING Bank, Apple, Microsoft investing
in web components
Web
components
&
NPM /
Package
managers

11. Google Chrome analytics

12. Who’s uses these
- Web components - Relatively... Not a lot
of people but that’s because this is very
much on the Emergence side of an
Emerging Technologies course
- Package Managers – Most developers who
are worth their weight in code
Package management used to build ALL
web / servers used today by Sys Admins
PHP / Go / Node users have diff PMs
Front end developers use PMs too
Web
components
&
NPM /
Package
managers

16. https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/

18. package.json

27. “In 2019 the web created the foundation for what
will be looked back on as a 2000 year leap forward
in development capabilities.”
- ?

28. “In 2019 the web created the foundation for what
will be looked back on as a 2000 year leap forward
in development capabilities.”
- btopro
reading right now “in class”

29. And it’s because we finally have a standard way of
adopting everyone’s complex code but without the
complexity of dependencies breaking compatibility
Welcome, to Web components.

30. What are web components?

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

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

34. HTML Template

35. Custom Element

36. Custom Element - life cycle

37. Shadow DOM - optional

38. Shadow DOM

39. JS Module

40. <div style="background:yellow;">
<a href="${this.link}"
style="color:black;">
${this.title}
</a>
</div>
Simple button example

43. Solving the design system
problem

44. Solving the design system
problem
Whaaa?

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

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

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

50. How web components solves
this..

51. Shadow DOM keeps CSS scoped
a:hover {
color: var(--web-win-color, red);
}
Custom elements make designs
reusable while still being scoped!
<web-win size=”epic”></web-win>

53. Escape CMS / design traps
● Different template languages
● Different design / JS libraries
● This is a massive waste of time and effort
● Ultimately all to just get HTML on the page

54. Online courses we teach

55. Online courses we teach

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

61. Who else uses this?

69. Online courses we teach

70. Browser support

71. @btopro parsing the data
Last 90 days of 2020
● 93.96% -- works native
● 5.41% -- with polyfills (slow JS to fill gaps)
● > 99.8% -- work with web components!

72. Windows 7 EOL 2020
gs.statcounter.com

73. Progressive enhancement
btopro.com/all-screen-rights - All screens have rights
Numbers are MY personal strategy in the HAXcms platform
== NoJS / fallback version
== ES5 web components + large Polyfill
🔥 Modernish but dated version - ES6 web components + small Polyfill
🔥 Evergreen (click in browser to upgrade) - ES8 web components

74. Btopro blog post, NOjs or IE6 - 11

75. Btopro blog post, Edge (pre-chromium)

76. Btopro blog post, Modern web ES6+

77. We’ve 100% bought in

78. This is sustainable modular design and forever

79. We have produced over 400 reusable web
components.
Of these, ~350 are general purpose.
We have more public elements than anyone I can
find record of, including Google.
They are used by ELMS:LN, HAXcms, on other PSU
sites, at NARA, and in the wider open web.
They have nothing requiring our projects.
Web
components
By
numbers

80. Real web components we use

81. <vaadin-upload>

82. <grid-plate>

83. <simple-fields-form>

84. <code-editor>

85. <video-player>

86. <lrn-table>

87. <multiple-choice>

88. <rss-items>

89. <iron-ajax>
<paper-button>
<simple-modal> <h-a-x>
<self-check>
<wikipedia-query>
<lrn-math>
<user-action>
<editable-table>
<q-r>
<license-element>
<simple-drawer>

90. Real project reuse

95. HAXTheWeb from last week

96. IST 402 – HAXcms the headless CMS

97. IST 402 – HAXcms the headless CMS

98. YouTube – Web component rendering

99. YouTube – JSON end point data

100. This is the future of web dev
But, what is “web” anymore?

101. Desktop apps + web components

102. Android / iOS + web components

103. PWA - web site as web app

104. What we’ll do now
- Checkout Web components on
www.webcomponents.org
- Play with stackblitz.com
- Play with glitch.com
- write pseudo-code with Try LitElement site
Web
components