你的前端框架要被 Web 组件取代了(16)

示例 2：material-webcomponents我使用自定义元素实现了 Google 的 Material Design，也放到了Github上。
这个库还展示了 CSS自定义属性的强大功能。
那么，我应该抛弃我的框架吗？一如既往，这取决于你的具体情况。
当下的前端框架有着数据绑定、状态管理和相当标准化的代码库等功能提供的附加价值。问题是你的应用是否真的需要它们。
如果你需要问自己，你的应用程序是否真的需要像 Redux 这样的状态管理，你可能其实并不需要它。当你真的用到它的时候再考虑也不迟。
你可能会觉得数据绑定很好用，但对于非原始值（如数组和对象）来说，原生 Web Components 已允许你直接设置属性。可以在属性上设置原始值，并且可以通过 attributeChangedCallback 观察对这些属性的更改。
虽然这种方式很有用，但与在 React 和 Angular 中执行此操作的声明方式相比，它只是更新 DOM 的一小部分就很麻烦了。这些框架允许定义包含在更改时更新的表达式的视图。
虽然有一个提议要扩展<template>元素以允许它实例化并使用数据更新，但原生 Web Components 仍未提供此类功能：
<template id="example"> <h1>{{title}}</h1> <p>{{text}}</p></template> const template = document.querySelector('#example');const instance = template.createInstance({title: 'The title', text: 'Hello world'});shadowRoot.appendChild(instance.content); //updateinstance.update({title: 'A new title', text: 'Hi there'});
当下能提供有效 DOM 更新的库是lit-html。
前端框架的另一个经常被提到的好处是，它们提供了一个标准的代码库，团队中的每位新人从一开始就很熟悉它。虽然我认可这一点，但我也觉得这种好处非常有限。
我使用 Angular、React 和 Polymer 开发了各种项目，尽管它们的确存在相似性，但就算使用相同的框架，这些代码库仍然存在很大差异。明确定义的工作方式和样式指南更有助于你维持代码库的一致性，仅仅使用框架是不够的。框架也带来了额外的复杂性，应该问问自己这是否真的值得。