A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. title: A new release of Basic Web Components based on plain JavaScript component mixins
  2. url: https://component.kitchen/blog/posts/a-new-release-of-basic-web-components-based-on-plain-javascript-component-mixins
  3. hash_url: 3647ff17fdec1f87799f7a1282fa5c92
  4. <p>
  5. As discussed in this blog over the past few months, we've been plotting a
  6. strategy for creating web components using a library of plain JavaScript
  7. mixins instead of a monolithic component framework. We've just published a
  8. new 0.7 release of the
  9. <a href="https://github.com/basic-web-components/basic-web-components">basic-web-components</a>
  10. project that represents a transition to this mixin strategy. So far, this
  11. approach appears to be working well, and meeting our expectations.
  12. </p>
  13. <p>
  14. What's changed?
  15. </p>
  16. <ol>
  17. <li>
  18. <strong>We've begun rewriting all our components in ES6.</strong>
  19. So far, we've rewritten the
  20. <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-autosize-textarea">basic-autosize-textarea</a>,
  21. <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-carousel">basic-carousel</a>, and
  22. <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-list-box">basic-list-box</a>
  23. components in ES6. We transpile the ES6 source to ES5 using Babel.
  24. Developers wanting to incorporate the components into ES6 applications can
  25. consume the original source, while devs working in ES5 can still easily
  26. incorporate these components into their applications.
  27. </li>
  28. <li>
  29. <strong>We have restructured the way we distribute these components to use
  30. npm 3 instead of Bower.</strong>
  31. The primary basic-web-components repository is now a monorepo: a single
  32. repository used to manage multiple packages separately registered with npm.
  33. This is much, much easier for us to maintain than our prior arrangement, in
  34. which Bower had forced us to maintain a constellation of separate
  35. repositories for our Bower packages. Using npm for web component
  36. distribution will likely bring its own challenges, but we're confident the
  37. much larger npm community will address those issues over time.
  38. </li>
  39. <li>
  40. <strong>Because we are just using JavaScript now, component files can be included
  41. with regular script tags instead of HTML Imports.</strong>
  42. That erases any concerns about cross-browser support for HTML Imports, and
  43. generally simplifies including these web components in an existing
  44. application build process. For example, instead of requiring use of a
  45. specialized tool like Vulcanize, developers can incorporate Basic Web
  46. Components into their applications using more popular tools like Browserify
  47. and WebPack.
  48. </li>
  49. <li>
  50. <strong>We are now offering a library of web component JavaScript mixins.</strong>
  51. See this
  52. <a href="https://component.kitchen/blog/posts/building-web-components-from-a-loose-framework-of-mixins">blog post</a>
  53. for some background on that strategy. Mixins
  54. <a href="https://component.kitchen/blog/posts/implementing-web-component-mixins-as-functions">take the form of functions</a>
  55. that can be applied to any component class without requiring a common
  56. runtime or framework. These mixins are collected in a new package,
  57. <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-component-mixins">basic-component-mixins</a>.
  58. See that package for details, including documentation our initial set of 25
  59. web component mixins. We believe this arrangement will make it much easier
  60. for people to adopt key features of the Basic Web Components in their own
  61. components.
  62. </li>
  63. </ol>
  64. <p>
  65. As we first noted when we first looked at
  66. <a href="https://component.kitchen/blog/posts/an-evaluation-of-polymer-micro-as-a-minimal-web-component-framework">using polymer-micro instead of full Polymer</a>,
  67. there are some distinct downsides to moving away from full Polymer:
  68. </p>
  69. <ul>
  70. <li>
  71. We can no longer use Polymer's Shady DOM to emulate Shadow DOM on older
  72. browsers, so anyone targeting browsers other than Google Chrome must include
  73. the full webcomponents.js polyfill. However, all four browser vendors are
  74. racing to implement native Shadow DOM v1, and it seems likely we will see
  75. all of them deliver native supoprt later this year. While using the full
  76. polyfill incurs a performance penalty today, we are very happy to be writing
  77. code that is squarely aimed at the future.
  78. </li>
  79. <li>
  80. We are left for the time being without a simple way to let developers style
  81. our components. Polymer provided a plausible styling solution, although it's
  82. based on CSS Variables (not in all browsers yet), and relies on proprietary
  83. extensions to CSS Variables (non-standard; unlikely to appear in any browser
  84. soon). So styling remains an issue for us — but then again, it's currently
  85. an unsolved problem for web components generally.
  86. </li>
  87. </ul>
  88. <p>
  89. Overall, for our project, we think the advantages of writing in plain
  90. JavaScript outweight any disadvantages. We're very happy to be able to write
  91. highly functional web components without having to use a monolithic framework
  92. and an accompanying required runtime. And so far, our mixin strategy is
  93. letting us maintain an elegant factoring of our component code, while avoiding
  94. the limitations of a single-inheritance class hierarchy.
  95. </p>
  96. <p>
  97. That said, we think frameworks are certainly an appropriate tool for many
  98. teams. For certain projects, we enjoy working in frameworks such as Polymer
  99. and React. One of the tremendous advantages of web components is that they're
  100. a <em>standard</em>. That lets us write our components in the way that makes
  101. most sense for us, while still allowing anyone to incorporate those components
  102. into applications written in other ways. In particular, Polymer remains the
  103. most active web component framework, so interop with Polymer is a critical
  104. feature for all our components. As a simple demonstration, we've posted a
  105. <a href="https://github.com/basic-web-components/carousel-with-tabs">carousel-with-tabs</a>
  106. example showing use of our basic-carousel component with Polymer's
  107. paper-tabs component.
  108. </p>