Week 4
Web components
& Package managers
The future of all web
webcomponents
Webcomponents.dev
Stackblitz.io
Bryan Ollendyke
[at]btopro
Developer Activist
Slight detours
Why Web development is relevant /
the web is important to focus on
blog.udacity.com/2014/11/front-end-web-developers-what-youll_12.html
Slight detours
I just want to make sure I’m
Right here, I’m submitting this
On the website
WE USED IN CLASS, Right?
Why though...?
NEXT WEEK lab:
Purchase reclaim hosting
prior to next week so we
can work on the lab
Looking ahead
Bryan Ollendyke
[at]btopro
reclaimhosting.com
reclaimhosting.com
Week 4
Web components
& Package managers
Attack of the memes
webcomponents.org
webcomponents.dev
stackblitz.io
glitch.me
Bryan Ollendyke
[at]btopro
Developer Activist
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
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
Terms / definitions for today
- Web component
- React
- Angular
- VueJS
- LitElement
- Front end Framework / Library
- NPM / Node
- Package Manager
Web components
&
NPM / Package
managers
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
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
Who’s using 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
Web components
&
NPM / Package
managers
Google Chrome analytics
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
https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/
“The 2000 year leap but for the web,
happened last year, and no one has
realized it yet”
- ?
“The 2000 year leap but for the web,
happened last year, and no one has
realized it yet”
- btopro
reading this right now
We can all be BFFs and leverage each
other’s efforts without adopting every
aspect of each other’s work.
Welcome, to Web components.
What are web components?
<div style="background:yellow;">
<a href="link.com"
style="color:black;">
Name
</a>
</div>
Simple button example
Simple button as web component
<my-button
link="link.com"
title="Name">
</my-button>
Solving the design system problem
Solving the design system problem
Whaaa?
My interface designer makes a
simple “button” for us to use
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 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
How web components solves this..
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!
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!
Escape the template / design traps
● Many CMSs have different template languages
● Different design languages
● This is a massive waste of time and effort
● Ultimately all to just get HTML on the page
Across JavaScript libraries
custom-elements-everywhere.com
Who else uses this?
Online courses we teach
Online courses we teach
Online courses we teach
Yea, but can Businesses use this?
analytics.usa.gov (Govs, slow) -- June
@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!
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
We have to support IE / Edge!
gs.statcounter.com
mspoweruser.com - Mar 24, 2019bgr.com - Dec 6, 2018
theverge.com - June 19,
2019
#usetheplatform
IE 11
Windows 7 EOL 2020
gs.statcounter.com
analytics.usa.gov
So, that’s not IE 11
PC World - Jan 31, 2019
So, that’s still years away
Windows IT Pro Blog - Feb 6, 2019
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!)
Btopro blog post, NOjs or IE6 - 11
Btopro blog post, Edge (until chromium)
Btopro blog post, Evergreen, ES6
My Guess 1 year from now
== NoJS / fallback version (10%)
🔥 Evergreen / ES6 - ES6 web components (90% of traffic)
- Some of you graduate here, if it’s a company with web properties these are
huge implications cost and workforce hiring wise
My Guess 2 year from now
== NoJS / fallback version (5%)
🔥 Evergreen / ES6 - ES6 web components (95% of traffic)
- Some of you graduate here, if it’s a company with web properties these are
huge implications cost and workforce hiring wise
So if your planning a project or starting one..
🔥 Talk about design and development needs across corporate 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!
We’ve 100% bought in
This is sustainable modular design and forever
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
Real web components we use
<vaadin-upload>
<grid-plate>
<simple-fields-form>
<code-editor>
<video-player>
<lrn-table>
<multiple-choice>
<rss-items>
<iron-ajax>
<paper-button>
<simple-modal>
<self-check>
<wikipedia-query>
<lrn-math>
<user-action>
<simple-colors>
<q-r>
<license-element>
<simple-drawer>
Real project reuse
HAXTheWeb.org - modular authoring experience
IST 402 – HAXcms the headless CMS
IST 402 – HAXcms the headless CMS
YouTube – Web component rendering
YouTube – JSON end point data
“Headless”????
https://www.youtube.com/watch?v=U5_H9cD17gA
What we’ll do now
- Checkout Web components on
www.webcomponents.org
- If you liked codepen... It’s spreading
- Play with a stackblitz example
- Play with a webcomponents.dev example
- Play with a glitch.com example
Web components
Quick break and then..
Stackblitz.io
webcomponents.dev
glitch.me
Editing and understanding
the transformative nature
of web components
HTML
Stackblitz.io
Webcomponents.dev
Bryan Ollendyke
[at]btopro

Web components and Package managers

Editor's Notes

  • #3 Icon created by Creative Stall from the Noun Project
  • #4 Icon created by Creative Stall from the Noun Project
  • #5 Icon created by Creative Stall from the Noun Project
  • #6 Icon created by Creative Stall from the Noun Project
  • #7 Icon created by Creative Stall from the Noun Project
  • #8 Icon created by Creative Stall from the Noun Project
  • #13 Icon created by Creative Stall from the Noun Project
  • #14 Icon created by Creative Stall from the Noun Project
  • #15 Icon created by Creative Stall from the Noun Project
  • #16 Icon created by Creative Stall from the Noun Project
  • #23 Icon created by Creative Stall from the Noun Project
  • #29 Icon created by Creative Stall from the Noun Project
  • #30 Icon created by Creative Stall from the Noun Project
  • #31 Icon created by Creative Stall from the Noun Project
  • #32 Icon created by Creative Stall from the Noun Project
  • #33 Icon created by Creative Stall from the Noun Project
  • #34 Icon created by Creative Stall from the Noun Project
  • #35 Icon created by Creative Stall from the Noun Project
  • #43 Icon created by Creative Stall from the Noun Project
  • #74 Originally we would have made the link this way
  • #75 Originally we would have made the link this way
  • #76 Originally we would have made the link this way
  • #78 The Custom Elements specification lays the foundation for designing and using new types of DOM elements. The shadow DOM specification defines how to use encapsulated style and markup in web components. The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
  • #79 The Custom Elements specification lays the foundation for designing and using new types of DOM elements. The shadow DOM specification defines how to use encapsulated style and markup in web components. The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
  • #80 The Custom Elements specification lays the foundation for designing and using new types of DOM elements. The shadow DOM specification defines how to use encapsulated style and markup in web components. The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
  • #86 The Custom Elements specification lays the foundation for designing and using new types of DOM elements. The shadow DOM specification defines how to use encapsulated style and markup in web components. The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
  • #95 Google w/ YouTube, Comcast w/ xfinity. Duration of the roll out involves planning and banking on when it’s time to jump
  • #100 Icon created by Creative Stall from the Noun Project
  • #101 Icon created by Creative Stall from the Noun Project
  • #102 Icon created by Creative Stall from the Noun Project
  • #103 Icon created by Creative Stall from the Noun Project
  • #104 Icon created by Creative Stall from the Noun Project
  • #105 Icon created by Creative Stall from the Noun Project
  • #106 Icon created by Creative Stall from the Noun Project
  • #107 Icon created by Creative Stall from the Noun Project
  • #108 Icon created by Creative Stall from the Noun Project
  • #114 Originally we would have made the link this way
  • #115 Originally we would have made the link this way
  • #116 Originally we would have made the link this way
  • #117 Originally we would have made the link this way
  • #118 Originally we would have made the link this way
  • #119 Originally we would have made the link this way