Download to read offline
![Week 4
Web components
& Package managers
The future of all web
webcomponents
Webcomponents.dev
Stackblitz.io
Bryan Ollendyke
[at]btopro
Developer Activist](https://image.slidesharecdn.com/lecture4-190918193104/85/Web-components-and-Package-managers-1-320.jpg)
![NEXT WEEK lab:
Purchase reclaim hosting
prior to next week so we
can work on the lab
Looking ahead
Bryan Ollendyke
[at]btopro](https://image.slidesharecdn.com/lecture4-190918193104/85/Web-components-and-Package-managers-8-320.jpg)
![Week 4
Web components
& Package managers
Attack of the memes
webcomponents.org
webcomponents.dev
stackblitz.io
glitch.me
Bryan Ollendyke
[at]btopro
Developer Activist](https://image.slidesharecdn.com/lecture4-190918193104/85/Web-components-and-Package-managers-11-320.jpg)
![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](https://image.slidesharecdn.com/lecture4-190918193104/85/Web-components-and-Package-managers-120-320.jpg)
More Related Content
Similar to Web components and Package managers
Web components and Package managers
- 1. Week 4 Web components &Package managers The future of all web webcomponents Webcomponents.dev Stackblitz.io Bryan Ollendyke [at]btopro Developer Activist
- 2. Slight detours Why Webdevelopment is relevant / the web is important to focus on
- 3.
- 4. Slight detours I justwant to make sure I’m Right here, I’m submitting this On the website WE USED IN CLASS, Right? Why though...?
- 8. NEXT WEEK lab: Purchasereclaim hosting prior to next week so we can work on the lab Looking ahead Bryan Ollendyke [at]btopro
- 9.
- 10.
- 11. Week 4 Web components &Package managers Attack of the memes webcomponents.org webcomponents.dev stackblitz.io glitch.me Bryan Ollendyke [at]btopro Developer Activist
- 16. 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
- 17. Links to pokearound / 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
- 18. Terms / definitionsfor today - Web component - React - Angular - VueJS - LitElement - Front end Framework / Library - NPM / Node - Package Manager Web components & NPM / Package managers
- 19. Terms / definitionsfor 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
- 20. Terms / definitionsfor 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
- 21. 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
- 22.
- 23. 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
- 27.
- 35. “The 2000 yearleap but for the web, happened last year, and no one has realized it yet” - ?
- 36. “The 2000 yearleap but for the web, happened last year, and no one has realized it yet” - btopro reading this right now
- 37. We can allbe BFFs and leverage each other’s efforts without adopting every aspect of each other’s work. Welcome, to Web components.
- 38. What are webcomponents?
- 40.
- 41. Simple button asweb component <my-button link="link.com" title="Name"> </my-button>
- 49. Solving the designsystem problem
- 50. Solving the designsystem problem Whaaa?
- 52. My interface designermakes a simple “button” for us to use
- 53. My interface designermakes a simple “button” for us to use My team has to integrate my designer’s “button” X number of buttons X number of projects
- 54. My interface designermakes 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
- 55. How web componentssolves this..
- 56. Shadow DOM keepsCSS scoped Custom elements makes HTML semantic Both make JS scoping simple WC keeps design intentional WC makes design sustainable WC make web professionals happy!
- 57. Accessibility becomes manageable Maintenancecosts collapses Cost of development collapses Project churn is eliminated All Future projects cost less Each new project expands capabilities WC make web managers happy!
- 63. 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
- 64.
- 65. Who else usesthis?
- 73. Online courses weteach
- 74. Online courses weteach
- 75. Online courses weteach
- 76. Yea, but canBusinesses use this?
- 77.
- 78. @btopro parsing thedata Last 90 days of 2019 ● 85.9% -- Works natively ● 12.6% -- works with polyfills ● = 98.5% -- Will work with web components!
- 79. 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
- 80. We have tosupport IE / Edge! gs.statcounter.com
- 81. mspoweruser.com - Mar24, 2019bgr.com - Dec 6, 2018
- 82. theverge.com - June19, 2019
- 83.
- 84. Windows 7 EOL2020 gs.statcounter.com
- 85.
- 86. So, that’s notIE 11 PC World - Jan 31, 2019
- 87. So, that’s stillyears away Windows IT Pro Blog - Feb 6, 2019
- 88. HAXcms progressive enhancementstrategy 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!)
- 89. Btopro blog post,NOjs or IE6 - 11
- 90. Btopro blog post,Edge (until chromium)
- 91. Btopro blog post,Evergreen, ES6
- 92. My Guess 1year 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
- 93. My Guess 2year 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
- 94. So if yourplanning 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!
- 95.
- 96. This is sustainablemodular design and forever
- 97. We have producedover 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
- 98. Real web componentswe use
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 113. HAXTheWeb.org - modularauthoring experience
- 114. IST 402 –HAXcms the headless CMS
- 115. IST 402 –HAXcms the headless CMS
- 116. YouTube – Webcomponent rendering
- 117. YouTube – JSONend point data
- 118.
- 119. What we’ll donow - 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
- 120. Quick break andthen.. Stackblitz.io webcomponents.dev glitch.me Editing and understanding the transformative nature of web components HTML Stackblitz.io Webcomponents.dev Bryan Ollendyke [at]btopro
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