Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The case for Web components - Drupal4Gov webinar

76 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

The case for Web components - Drupal4Gov webinar

  1. 1. Webinar Series
  2. 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.
  3. 3. Training Day July 23rd!
  4. 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. 5. The case for Web components
  6. 6. Bryan Ollendyke @btopro Drupal dood
  7. 7. Bryan Ollendyke @btopro Web components dood
  8. 8. “The 2000 year leap but for the web, happened last year, and no one has realized it yet” - ?
  9. 9. “The 2000 year leap but for the web, happened last year, and no one has realized it yet” - btopro reading this right now
  10. 10. We can all be BFFs and leverage each other’s efforts without adopting every aspect of each other’s work. Welcome, to Web components.
  11. 11. What are web components?
  12. 12. <div style="background:yellow;"> <a href="link.com" style="color:black;"> Name </a> </div> Simple button example
  13. 13. Simple button as web component <my-button link="link.com" title="Name"> </my-button>
  14. 14. Solving the design system problem
  15. 15. My interface designer makes a simple “button” for us to use
  16. 16. 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
  17. 17. 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
  18. 18. How web components solves this..
  19. 19. 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!
  20. 20. 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!
  21. 21. 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
  22. 22. Across JavaScript libraries custom-elements-everywhere.com
  23. 23. Who else uses this?
  24. 24. Online courses we teach
  25. 25. Online courses we teach
  26. 26. Yea, but can WE use this?
  27. 27. analytics.usa.gov - April
  28. 28. analytics.usa.gov -- Now
  29. 29. @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!
  30. 30. 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
  31. 31. We have to support IE / Edge! gs.statcounter.com
  32. 32. mspoweruser.com - Mar 24, 2019bgr.com - Dec 6, 2018
  33. 33. theverge.com - June 19, 2019
  34. 34. #usetheplatform IE 11
  35. 35. Windows 7 EOL 2020 gs.statcounter.com
  36. 36. analytics.usa.gov
  37. 37. So, that’s not IE 11 PC World - Jan 31, 2019
  38. 38. So, that’s still years away Windows IT Pro Blog - Feb 6, 2019
  39. 39. 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!)
  40. 40. Btopro blog post, NOjs or IE6 - 11
  41. 41. Btopro blog post, Edge (until chromium)
  42. 42. Btopro blog post, Evergreen, ES6
  43. 43. My Guess 1 year from now == NoJS / fallback version (10%) 🔥 Evergreen / ES6 - ES6 web components (90% of traffic)
  44. 44. My Guess 2 year from now == NoJS / fallback version (5%) 🔥 Evergreen / ES6 - ES6 web components (95% of traffic)
  45. 45. 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!
  46. 46. We’ve 100% bought in
  47. 47. This is Drupal Modules.. but for design and forever
  48. 48. 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
  49. 49. Real web components we use
  50. 50. <vaadin-upload>
  51. 51. <grid-plate>
  52. 52. <eco-json-schema>
  53. 53. <code-editor>
  54. 54. <video-player>
  55. 55. <lrn-table>
  56. 56. <multiple-choice>
  57. 57. <rss-items>
  58. 58. <iron-ajax> <paper-button> <simple-modal> <self-check> <wikipedia-query> <lrn-math> <user-action> <simple-colors> <q-r> <license-element> <simple-drawer>
  59. 59. Real project reuse
  60. 60. Haxtheweb.org – UI for web components
  61. 61. HAXTheWeb.org - modular authoring experience
  62. 62. HAXcms – A completely static, decoupled CMS
  63. 63. HAXcms – A completely static, decoupled CMS
  64. 64. HAXcms Flat file structure
  65. 65. Additional resources
  66. 66. https://webcomponents.org/
  67. 67. https://open-wc.org/
  68. 68. https://www.patternfly.org/
  69. 69. https://lit-element.polymer-project.org/
  70. 70. https://github.com/elmsln/WCFactory
  71. 71. FreeTraining opportunity! Drupal Govcon Tuesday July 23rd
  72. 72. Bryan Ollendyke @btopro Coffee addict Questions?

×