AEM 6.2 - 使用 Web 组件（聚合物）和 Angular

Question

我正在开发基于 AEM 6.2 的大型门户的 PoC。

到目前为止，我一直在使用以下 AEM 前端方法：

• 使用类别管理的前端资源（脚本和样式）。

• 每种模板的静态类别。

• 标准组件：

  • 基于 JSP 的服务器端渲染，现在是 Sightly (HTL)
  • 模块化 JS（基于功能或页面） - Vanilla JS 和 jQuery
  • 没有前端 MV* 架构，没有框架

• 动态组件或 SPA：

  • 混合渲染：Sightly (HTL) + Handlebars 模板 + AJAX
  • 基于 Vanilla JS + Handlebars 的自定义 MVC（一种方式）
  • 没有框架

对于下一个项目，我们正在开发一个新的前端框架：

• 基于 FE 组件的架构：

  • Clientlib 和设计将按类别处理。
  • 根据页面组件动态管理
  • 每个 AEM 组件都将映射到一个或多个 UI 组件
  • 样式：主题 + 组件样式
  • FE 逻辑：服务 + 组件控制器

• 标准组件：

  • 基于 Sightly (HTL) 的服务器端渲染
  • 基于组件的 JS - Vanilla JS 或 Angular 1.x（组件指令方法）或 Angular 2

• 复杂的组件：

  • 基于 Sightly (HTL) 的服务器端渲染
  • 基于组件的 JS - Angular 1.x（组件指令方法）或 Angular 2
  • 聚合物封装（可选）

• 动态组件：

  • 混合渲染：Sightly (HTL) + Polymer Web Components / Angular 2
  • 双向数据绑定
  • 聚合物封装（可选）
  • 适用于 Google API 的 OOTB 聚合物组件

• SPA：

  • 浏览器渲染：Angular 1.x（组件指令方法）或 Angular 2
  • 双向数据绑定 + Angular 1.x 路由或 Angular 2 路由
  • 聚合物封装（可选）
  • React.js + Flux 被丢弃

我的担忧 - Web 组件：

• 依赖 Node.js 来捆绑（硫化）用于生产的组件（根本不是问题）
• HTML 导入不适用于作者实例，无论是编辑还是预览。检索到 html，但未呈现组件。没有控制台错误。 Polyfills js 已加载。由于组件未注册，其子组件（polymer.html、polymer-micro.html....）未加载
• 让我们定义一个 Web 组件 -> 带有文本和图像的横幅组件
  • /.../components/banner-provider.html（Web 组件提供程序）

<!-- Import element -->
<link rel="import" href="../web-components/banner.html">
<!-- Use element -->
<banner title="${properties.title}" src="${properties.src}"></banner>

• /.../web-components/banner-provider.html（Web 组件定义）

<dom-module id="banner">
    <style>...</style>
    <template>
      ....
    </template>
    <script>
      Polymer({
        is: 'banner',
        properties: {
          title: String,
          src: String
        }
      });
    </script>
  </dom-module>

Web 组件可以托管在 AEM 之外的其他系统中，也许是 Node.js 以与 Polymer CLI（硫化和其他工具）一起使用。

我的担忧 - AEM：

• 缓存和调度器 & SEO -> 延迟加载组件
• 迁移到 HTTP/2

我的担忧 - Angular 2：

• 依赖 Node.js 来使用 Typescript 并捆绑组件
• 它似乎是一个 Web 应用程序框架，而不是一个标准的前端框架
• 成熟..准备好生产了吗？
• 我们想要处理 cms 的前端，我们不想处理 Web 应用程序

..... 你觉得怎么样？ ¿ 您如何在 AEM 上管理您的 SPA？ ¿ 你推荐其他框架或库吗？ .....

非常感谢您的建议。这些用例可扩展到 Liferay、IBM...

提前谢谢你

Answer 1

我已经让 Polymer 在 AEM 6.x 创作环境中工作，但仍在尝试可能的组件架构（尽管我脑子里有一些想法和意见）。

如果您仍然面临您提到的 HTML 导入问题，那么您可能遇到了与我相同的问题。 在我的游乐场项目中，我将 Web 组件添加为二进制数据（我认为是 nt:file 节点），但是当它们从服务器收到请求时，AEM 的 Sling 引擎将自动添加 'Content-Disposition: attachement'强>头。 在我的设置中，正是这个标头阻止了导入工作。

您可以通过 OSGi 配置控制台 (/system/console/configMgr) 配置“Sling Content Disposition Filter”，并将您的 Web 组件的路径添加为例外。

当然，这很快就会变得非常麻烦，所以我创建了一个足够智能的过滤器，可以拦截对我的 Web 组件存储位置的请求，并自动删除标头。

我希望这会有所帮助！

Answer 2

你提供的代码sn-ps至少有两个问题：

1. 根据Web Components spec, Custom Elements #2.3，组件名称必须连字符（例如，x-banner 而不是banner）。
2. data binding syntax 是 [[property]] 或 {{property}}（不是 ${propery}）。

如果您想进一步解决此问题，请提供reproducible example。

---

关于架构问题，我认为它们可能超出了 Stack Overflow 的范围。不过，我会提供我的两分钱：

• 如果要在 Angular1 和 Angular2 之间进行选择，请选择 Angular2，因为它比其前身具有更好的工具和性能（以及其他改进），而且它works well with Polymer。
• 如果您刚开始使用 Angular 和 Polymer，最好一次学习一项技术（start with Polymer，因为它更简单）。