Web组件、边界控制实体（BCE）和使用redux的单向数据流所有主要浏览器都支持网络组件（https://canius

所有主要浏览器都支持网络组件（https://caniuse.com/custom-elementsv1），因此不需要任何额外的垫片或polyfills。自定义元素与现代JavaScript版本（ES 6以上）相结合，已经提供了类似于Java的 "外观和感觉"。


class JavaDev extends HTMLElement {
    connectedCallback() {
        const message = "Web Components"
        this.innerHTML = `Hello, ${message}`;
    }
    }
    customElements.define('java-dev',JavaDev);

然而，"vanilla "Web组件的方法需要完全重新渲染整个元素，在更复杂的应用中会导致性能变慢。因为我们正在设置一个原始字符串，其中也可能包含用户输入和从服务器获取的数据，所以上述方法也有安全风险。值得庆幸的是，JavaScript提供了一种声明函数 "标签模板"（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates）的方法，它处理原始字符串，可以实现更快或更安全的渲染。

一个有标签的模板函数接收带有所有 "绑定 "的整个字符串，这允许实现额外的语法糖。lit-html是这种实现的一个例子，它优化了渲染，转义了JavaScript代码，并增加了方便的事件处理程序的附件。


const template = html`
<button @click="${_ => this.newBookmark()}">new bookmark</button>
`;

Vanilla Web Components与普通的lit-html模板 "功能 "相结合，已经让人觉得是一个精简而高效的JavaScript框架。有了lit-html，你已经可以用于小型的Web应用了。有许多相互作用的组件的应用程序将需要一个状态管理解决方案。如果没有一个中央 "调解器"（https://en.wikipedia.org/wiki/Mediator_pattern），各个自定义元素将不得不直接相互沟通。

Redux（https://redux.js.org）是 "调解器 "模式的一个精简（单文件）实现。它是一个中央单子，管理整个应用程序的状态，并通知所有听众的变化。 Redux库的使用可能会导致大量的模板，但它与lit-html和Web Components的整合很好。Web Components与lit-html、redux和一些约定俗成的东西结合在一起，对于更复杂的、交互式的应用来说，是很有成效的，而且规模很大。

边界控制实体 "是最古老的架构模式之一（https://en.wikipedia.org/wiki/Entity-control-boundary），类似于MVC，甚至还提供了所有流行的设计和草图工具中的图标。装备了BCE，你就不必为命名规则争论不休，可以方便地忽略 "帕金森琐碎法则"（https://en.wikipedia.org/wiki/Law_of_triviality），而将注意力放在语义上。

一个复杂的应用程序被划分为功能性的、以基本概念命名的特征驱动的文件夹。每个这样的文件夹最多包括以下目录。

*边界：*包含用自定义元素（"网络组件"）实现的视图。自定义元素对用户输入做出反应，并将提取的相关数据转发给 "控件"。所有的视图都在监听redux存储的变化，并且在任何状态突变时都会被重新渲染。
*控件：*是可视化视图和redux "存储 "之间的粘合剂。一个控制包包含实现业务逻辑和后端通信的函数。控件是异步的，"fire-and-forget "函数，处理用户输入，调用外部服务，并将数据作为 "redux动作 "分配给存储。
*实体：*实体文件夹包含改变状态的还原器。任何状态的改变都会导致所有监听器的通知。维护对象列表、过滤或改变状态是驻留在 "实体 "包中的函数的典型职责。

将vanilla Web Components与lit-html和redux结合起来有以下好处。

你可以不用学习任何额外的框架就开始使用Web Components。Web组件是内置在浏览器中的，它们有很好的文档，很稳定，而且不会改变。迁移或升级是没有必要的--你只需要学习一次就可以了，而且永远不会迁移。
lit-html和redux是小的实用工具，有几个替代品。
BCE有一个清晰而一致的结构，可以为大型前台进行扩展。
Web Components、lit-html和redux工具包的组合导致代码与React相似，而不涉及任何框架。
必要的工具是最小的。不需要transpilations、构建工具或捆绑。只建议使用一个简单的具有热重载功能的Web服务器，例如browsersync.io。

标准的API，例如Web Components，已经被嵌入到浏览器中了。因此，使用一个JavaScript框架需要一个重要的附加值来取代已经存在的API。随着时间的推移，JavaScript框架变得越来越不重要了。即使在今天，你也可以用一种低魔的方法来实现复杂的网络应用。SpaceX的工程师已经认识到网络组件、CSS和JavaScript的富有成效的组合。"我们是SpaceX的软件团队，问我们什么都行！"

请看下面的快速启动程序，只要"git clone && go."github.com/adambien/bc…

请看BCE quickstarter的操作。