Create components with a .js file or Java class model.

[kennyhank]

Hi guys I need some help with this:

I'm seeing that sometimes the people create components with a .js file to store all the properties of their widgets, for example:

use(function() {
        var CONST = {
            PROP_TITLE: "heading",
            PROP_PAGE_TITLE: "jcr:title"
        };
        var title = {};
        title.CONST= CONST;
        return title;
});

And sometimes this was made with a model Java class for example:

//XComponent.java
@Model(adaptables = Resource.class)
 public class XComponent {
     private XComponentModel model;
 
     public XComponent(Resource resource) {
         if(resource == null) return;
         this.model = resource.adaptTo(XComponentModel.class);
     }
 
     public XComponentModel getModel() {
         return this.model;
     }
 }
//XComponentModel.java
 @Model(adaptables = Resource.class)
 public class XComponentModel {
     @Inject
     public String heading;
 
     @Inject @Optional
     public String jcr:title;
 }

What do you think about this? The effort made in Java is really necessary? Which will be more performant? (simple or complex components)

Thanks in advance

[smacdonald2008]

In AEM if you want to write components - the preferred way is HTL (used to be Sightly). Using Java on the backend, you can perform a lot of tasks. For example, you can use Java to invoke a 3rd party Restful service that uses Java HTTP classes. 

Java can handle the model of the component and the front end can display the data in the view. 

We have many AEM HTL articles that show you how to work with HTL. Here are some: 

Creating an AEM HTML Template Language component that uses the WCMUsePojo class

Additional AEM HTL Articles

Creating an AEM Headline component

Creating an AEM movie component

Developing HTML Template Language Components that search for AEM Content Tags

Creating a HTML Template Language component that uses the AEM QueryBuilder API

Creating a HTML Template Language and Sling Model DOM parser component

Creating an AEM HTML Template Language component that uses a Multifield

Creating an AEM HTML Template Language Component that displays data from a SOAP Web Service

Creating an AEM HTML Template Language Component that posts data using AJAX

Creating an AEM HTL component that uses JavaScript

Ask the AEM Community Experts Sessions on HTL (used to be known as Sightly)

Jan 2015 HTL Session (Introduction to HTL)

March 2016 HTL Session (Advanced component development)

Hope this helps....

[smacdonald2008]

And if you are interested in Sling Models -- see: 

Working with Sling Models in Adobe Experience Manager 6.2

Slign Models lets you map JCR nodes to Java data members. 

[kennyhank]

Thanks for your quick response, I can see a lot of changes, I need read all these links, so in fact Sightly is called HTL now?

[Feike_Visser1]

In your example I don't see the point of the XComponent class.

And in both cases I would start with directly using values in the component, like:

${properties.jcr:title}

Only if need to write logic, write code. Otherwise leave it in the component I would say.

[kennyhank]

On the example I only write the js or Java part, in both cases I use html with Sightly calling the properties. Also it is a simple component as example in order to know more about creating components. Thanks

[smacdonald2008 · Accepted solution]

Yes - as Feike points out - you can access alot of global objects in HTL code without writing Java code. Here is a list of Global objects you can access in HTML code without writing Java:

https://docs.adobe.com/docs/en/htl/docs/global-objects.html

So if you needs are simply to access and display Global objects - you can access without writing Java. Otherwise - the links about show you how to use Java to create more powerful components. 

[edubey]

Here are few point from my side....

1. As long as you have to read only properties and use them directly on page: No need to create .js or java file, those can be directly used.

2. Try to avoid create .js file (which uses Javascript Use API) since it internally converts to java and then execute ...so it might be slower

3. If you have any business logic to be executed based on authored data... extending WCMUsePojo will be very helpful

I hope it helps and make it clear...

[kennyhank]

Thanks very much guys, all your points are well received, thanks for sharing your knowledge. I think that depend of the complexity of the component, because I don't see necessary the big effort with code on Java with simple components, but as smacdonald said in order to create more powerful components make sense use Java. Thanks to all again.