The case for Web components - Drupal4Gov webinar
•Download as PPTX, PDF•
0 likes•149 views
This is the presentation I gave to the Drupal4Gov community on web components in government. Why the time is right to begin looking at them for future adoption, how to get more information, what they've done for our team and process, who's using them, etc. It's a great starting point to browse through and get a sense of who's using them and what the implications are.
Report
Share
The case for Web components - Drupal4Gov webinar
- 2. Who is Drupal4Gov Drupal4Gov is an open source community for developers with an interest in making government more open to open source. We encompass many open source projects but have our beginnings in the Drupal project. Members may have experience with any open source project from licenses to development.
- 4. Drupal GovCon - annually in the summer @NIH Gov Summit at DrupalCon NA - annually Global Training Days Webinar Series - monthly (3rd Thursday at 3pm EST) Drupal4Gov Offers @govdrupal @drupalgovcon @drupalgovcon
- 5. The case for Web components
- 9. “The 2000 year leap but for the web, happened last year, and no one has realized it yet” - ?
- 10. “The 2000 year leap but for the web, happened last year, and no one has realized it yet” - btopro reading this right now
- 11. We can all be BFFs and leverage each other’s efforts without adopting every aspect of each other’s work. Welcome, to Web components.
- 12. What are web components?
- 14. <div style="background:yellow;"> <a href="link.com" style="color:black;"> Name </a> </div> Simple button example
- 15. Simple button as web component <my-button link="link.com" title="Name"> </my-button>
- 24. Solving the design system problem
- 25. My interface designer makes a simple “button” for us to use
- 26. 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
- 27. 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
- 28. How web components solves this..
- 29. 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!
- 30. 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!
- 36. 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
- 38. Who else uses this?
- 46. Online courses we teach
- 47. Online courses we teach
- 48. Yea, but can WE use this?
- 51. @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!
- 52. 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
- 53. We have to support IE / Edge! gs.statcounter.com
- 54. mspoweruser.com - Mar 24, 2019bgr.com - Dec 6, 2018
- 55. theverge.com - June 19, 2019
- 57. Windows 7 EOL 2020 gs.statcounter.com
- 59. So, that’s not IE 11 PC World - Jan 31, 2019
- 60. So, that’s still years away Windows IT Pro Blog - Feb 6, 2019
- 61. 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!)
- 62. Btopro blog post, NOjs or IE6 - 11
- 63. Btopro blog post, Edge (until chromium)
- 64. Btopro blog post, Evergreen, ES6
- 65. My Guess 1 year from now == NoJS / fallback version (10%) 🔥 Evergreen / ES6 - ES6 web components (90% of traffic)
- 66. My Guess 2 year from now == NoJS / fallback version (5%) 🔥 Evergreen / ES6 - ES6 web components (95% of traffic)
- 67. 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!
- 68. We’ve 100% bought in
- 69. This is Drupal Modules.. but for design and forever
- 70. 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
- 71. Real web components we use
- 72. <vaadin-upload>
- 73. <grid-plate>
- 75. <code-editor>
- 76. <video-player>
- 77. <lrn-table>
- 79. <rss-items>
- 86. Haxtheweb.org – UI for web components
- 87. HAXTheWeb.org - modular authoring experience
- 88. HAXcms – A completely static, decoupled CMS
- 89. HAXcms – A completely static, decoupled CMS
- 97. FreeTraining opportunity! Drupal Govcon Tuesday July 23rd
Editor's Notes
- Icon created by Creative Stall from the Noun Project
- Originally we would have made the link this way
- Originally we would have made the link this way
- 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.
- 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.
- 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.
- 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.
- 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.
- Google w/ YouTube, Comcast w/ xfinity. Duration of the roll out involves planning and banking on when it’s time to jump
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Icon created by Creative Stall from the Noun Project
- Originally we would have made the link this way
- Originally we would have made the link this way
- Originally we would have made the link this way
- Originally we would have made the link this way