AEM 6.2 - Working with Web Components (Polymer) & Angular

Question

I'm working on a PoC of a large scale portal based on AEM 6.2.

Until this moment I've worked with the following AEM Frontend approaches:

Frontend Resources (scripts and styles) managed with categories.
Static categories for each kind of template.
Standard components:
- Server side rendering based on JSPs, now Sightly (HTL)
- Modular JS (Feature or page based) - Vanilla JS and jQuery
- No Frontend MV* Architecture, no frameworks
Dynamic components or SPAs:
- Hybrid rendering: Sightly (HTL) + Handlebars templates + AJAX
- Custom MVC based on Vanilla JS + Handlebars (One way)
- No frameworks

For the next projects we are working on a new Frontend framework:

FE Component based architecture:
- Clientlibs and designs will be handled with categories.
- Managed Dynamically based on page components
- Each AEM Component will be mapped to one or several UI Components
- Styles: Theme + component styles
- FE logic: Services + component controllers
Standard components:
- Server side rendering based on Sightly (HTL)
- Component based JS - Vanilla JS or or Angular 1.x (Component directive approach) or Angular 2
Complex components:
- Server side rendering based on Sightly (HTL)
- Component based JS - Angular 1.x (Component directive approach) or Angular 2
- Encapsulation with Polymer (Optional)
Dynamic components:
- Hybrid rendering: Sightly (HTL) + Polymer Web Components / Angular 2
- Two way data binding
- Encapsulation with Polymer (Optional)
- OOTB Polymer Components for Google APIs
SPAs:
- Browser rendering: Angular 1.x (Component directive approach) or Angular 2
- Two way data binding + Angular 1.x Routing or Angular 2 Routing
- Encapsulation with Polymer (Optional)
- React.js + Flux is discarded

My concerns - Web Components:

Dependency on Node.js to bundle (vulcanize) the components for production (Not a problem at all)
HTML Imports are not working on Author instance, both Edit or Preview. The html is retrieved but the component is not rendered. No console errors. Polyfills js are loaded. As the component is not registered, its children (polymer.html, polymer-micro.html....) are no loaded
Let's define a Web Component -> banner component with a text and an image
- /.../components/banner-provider.html (Web Component Provider)

<!-- 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 Component Definition)

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

The web components can be hosted in other system, out of AEM, maybe Node.js to work with Polymer CLI (vulcanization and other tools).

My concerns - AEM:

Cache and dispatcher & SEO -> lazy loading components
Moving to HTTP/2

My concerns - Angular 2:

Dependency on Node.js to work with Typescript and bundle the components
It seems to be an web application framework more than a standard frontend framework
Maturity.. ready for production?
We want to deal with the front-end of a cms, we don´t want to handle a web application

..... ¿What do you think? ¿How did you manage your SPAs on AEM? ¿Do you recommend another framework or library? .....

I would really appreciate your advise. These use cases are extendible to Liferay, IBM...

Thank you in advance

did you find a resolution to the HTML import links not rendering on AEM author instance? I'm experiencing the same with AEM6.2 and polymer HTML import links, however it is only affecting Chrome (on author&publish), works fine in FireFox and Safari — Mark Horman
I faced this problem in Chrome on both author & publish. I thought it was an AEM problem, due to a library conflict or a problem with Author iframes . Next week I will continue checking it. Did you find a resolution? I will try to render a Polymer Component in a clean page without any payload to test if there is any kind of conclict with AEM dependencies (cq.widgets, granite...) — Carlos López

tony19 tony19 · Accepted Answer · 2016-10-16T18:52:49

There are at least two problems with the code snippets you provided:

The component name must be hyphenated (e.g., x-banner instead of banner) per the Web Components spec, Custom Elements #2.3.
The data binding syntax is [[property]] or {{property}} (not ${propery}).

Please provide a reproducible example if you'd like to troubleshoot this further.

Regarding the architectural questions, I think they might be beyond the scope of Stack Overflow. I'll offer my two cents though:

Given the choice between Angular1 and Angular2, pick Angular2 because it has better tooling and performance (among other improvements) than its predecessor, and it works well with Polymer.
If you're just starting out with Angular and Polymer, it's probably a good idea to learn one tech at a time (start with Polymer, as it's simpler).

AEM 6.2 - Working with Web Components (Polymer) & Angular

2 Answers