seo Question posted in
Some basic information to get you started with this can be found here.

AEM 6.2 – Working with Web Components (Polymer) & Angular – SEO

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

Tags:

2

Answers


  1. 0

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

    1. The component name must be hyphenated (e.g., x-banner instead of banner) per the Web Components spec, Custom Elements #2.3.
    2. 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).
    Login or Signup to reply.
  2. 0

    I have gotten Polymer to work on a AEM 6.x author environment, but still experimenting with a possible component architecture (though I have got some ideas and opinions in my head).

    If you are still facing the HTML import issue you mentioned, then you might be having the same issue I had.
    In my playground project I have added the web components as binary data (nt:file nodes I think), but when they get requested from the server, AEM’s Sling engine will automatically add a ‘Content-Disposition: attachement’ header.
    In my setup, it was this header that was braking the imports from working.

    You can configure the “Sling Content Disposition Filter” through the OSGi configuration console (/system/console/configMgr), and add the paths for your web components as exceptions.

    Of course, this quickly becomes very cumbersome, so I created a Filter that is intelligent enough to intercept requests to where my web components are stored, and will remove the header automatically.

    I hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search