Lecture 11 - Web components
0 likes100 views
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.
![Week 11
Web components
& Package managers
The future of all development
webcomponents
Bryan Ollendyke
[at]btopro
Developer Activist](https://image.slidesharecdn.com/lecture11-webcomponents-200324020207/85/Lecture-11-Web-components-1-320.jpg)
Lecture 11 - Web components
- 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
- 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
- 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
- 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>
- 84. <code-editor>
- 85. <video-player>
- 86. <lrn-table>
- 88. <rss-items>
- 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