Categories
Personal Programming Web Development

Seamless frontend and backend integration

It has been a while since I wrote my last post. So, before going to bed I just want to write things that is bothering me this time.

I’ve been busy working on things and try to learn something new as much as possible without compromising my time with my wife.

Early this morning, I was thinking again about if there is a way to integrate frontend to backend without huge blockages. Think about it as frontend will create their pages and interactions without worrying about backend. And then backend will do the business logics without thinking about frontend. And once we put them together with a middleware program/service then it will just work with less coding and configuration. I know this sounds crazy but for some developers who always in this situation would agree.

On top of my head, maybe there is way to do less logic coding and instead leverage more on declaring things. This idea falls to a declarative programming. As you practice this style, you know what will be your expected result but you don’t know how to do it yet. It will be ideal that you know things will end this way without exerting too much effort on building the logic first.

There might be tools out there (that I still need to find) that have already implemented this. I’ll dig more and hopefully I can find anything. Or if not, then I’ll try to create one. Hopefully! 😀 Please do drop some comments if you have any idea about this. Thanks!

Categories
Personal Programming Web Development

Who comes first? Testing or Development

While riding the train today, I stumbled with this programming article. I always think about how to become a better programmer at the same time write less and effective codes.

I still remember during my college days, one of my professor friend thought me of how to be a better programmer. He told me that I should write my code first while in my mind I assume that things will work. This will help me speed up and write quality codes. It became my principle since then.

This principle is still effective. I am able to see things without even writing a single code because I trained myself to see it. But things have changed already in programming nowadays.

Today, I appreciate how important the practice test-driven development (TDD). I can’t believe that I’ve just discovered it although it exists a long time ago. By this we can catch possible known problems that we’ll encounter in our system or API.

We all have different practices and it solves our problems. But adapting other practices makes you better and effective. I am excited to change my practice now and be more efficient on my next coding.

Categories
AEM Java Programming Web Development

AEM Sightly’s nightmare

I’ve been working on Sightly templates which they are calling HTL (HTML Template Language). I’ve discovered some hacks/techniques on how to manipulate variables. So, I thought I’m already used to it.

I have worked on one component which I duplicated from my working component. I know it is going to work but actually something happened. I didn’t know why it is happening that frustrates me.

The data-sly-list is showing my the list keys instead of values. I kept changing my Java Use-API to think that something is wrong with my collection.

Actually nothing is wrong with my implementation. It was actually because of the double quotes (“”) that my editor is doing. Every time I write double quote it closes it with another one. If you are rushing, you will not be able to notice this in your HTML codes.

<!-- The double quote below will give you problem -->
<div class="class-name"">
    <p>Some text here</p>
</div>

<!--/* This code will always print your list keys */-->
<!--/* Instead of giving you the list and loop it as normal */-->
<sly data-sly-list="${javaUseAPI.listItems}">
    ${itemList.index}
</sly>

I’m using Visual Studio Code as my editor. They have added auto-completion for quotes on their latest updates. To disable it, you need to do the settings below.

{
     "editor.autoClosingBrackets": false
}

I know auto-completion in your code helps developer a lot. It just happened that it caused me some trouble and frustrate me a little bit. It is a good thing to remember that not all auto-completion are helpful. Sometimes it has some disadvantages and we need to take note of it.

Categories
AEM Java Programming

AJAX request and response on AEM

Another working day just passed again and before my it ends I wanted to share with you my experience about the AJAX response when using servlet in Java before I forget about it.

So, I’ve been working on this servlet that validates form field after user key in their information. And also saving information to the Java JCR storage. It is not really that simple to write a servlet in Java especially when you are not familiar with object-oriented programming (OOP). And I hope that things that I’ll discuss below will help you a bit (it is not about OOP).

Below are the things that I have encountered when building my servlet.

Make an AJAX request

Coding is more fun when you don’t need to wait for the page to load to get the data that you need. And that is when AJAX request comes in. I worked on different way to do my request to check either through the header  or query variable.Using the code below you can get the x-requested-with header post variable.

HttpServletRequest request; // from doPost() parameters
String headerRequestedWith = request.getHeader("x-requested-with");

if ("XMLHttpRequest".equals(headerRequestedWith) ) {
    // code here...
}

Alternatively, you can do it through query string. This is more straight forward and easy to work on.

// Using jQuery ajax call
$.ajax({
    url: '/servlet/path/here',
    type: 'POST',
    data: $('form').serialize() + 'ajax=1'
    ...
});

Return a JSON data format

After doing the AJAX call, we need to return some data to be used in the page. Printing out JSON data format is really useful and easy to manage. You can do two ways here by doing it through echoing string or using pre-defined Java library.

Normal string:

PrintWriter out = response.getWriter(); out.println("{\"response\":\"success\",\"message\":\"Your text here\"}");

Or using Gson:

Gson gson = new Gson(); 
Map<String, String> jsonMap = new HashMap<String, String>(); jsonMap.put("response", "success"); 
jsonMap.put("message", "Your text here"); 
String jsonText = gson.toJson(jsonMap); 
out.println(jsonText); 
out.flush();

Make sure to add things such as below in order to make your response acceptable by the request.

response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");

Make it works on dispatcher/publisher server

In AEM, there are few things that need to be considered when doing AJAX call and that is by going through The Dispatcher Security Checklist. Once you already managed to do the things that you need then you are good to go.

After doing so many tests, I have noticed that on dispatcher/publisher server, it is showing this weird numbers before and after your JSON response text as shown below.

0027
{"variable":"Message here"}
0

At first, I’ve suspected that it is a text count but it is not. This response will always break your request as it is not a valid JSON data format anymore.

What I did is that I added an additional header when printing out the data. I just need to make sure that when throwing my response it should provide the content length so AEM will not try to check it and insert the numbers. Here is the code:

String jsonText = gson.toJson(jsonMap); response.setContentLength(jsonText.length());
out = response.getWriter();
out.print(jsonText);
out.flush();

So, the important thing that I have learned here is that I need to understand more how the CMS really works on this kind of situation. And dig in their documentation more. They might provide it somewhere but somehow I have discovered it myself.

That’s it for now. I hope you guys learn something new from me. Don’t forget to ask me anything if you have queries about this post.

Categories
AEM Java Programming

Adobe Experience Manager (AEM)

I’ve been working on Adobe Experience Manager (AEM) previously known as Communique5 (CQ5) for quite a while now. At first when I started learning it, I thought it is going to be difficult for me to understand it but I was wrong. This enterprise CMS is awesome and has so many things that you can do.

I have used two versions of it which are CQ5 and AEM6. There are huge difference in terms of data management, user management, security, etc. But for me, the whole experience were somehow the same. I haven’t fully understand the whole updates actually. 🙂

From traditional JSP and JSTL development, AEM introduced their own templating engine called Sightly. Although you cannot just drop both JSP and JSTL development as you might still need it for some of your work, Sightly on the other hand produced shorter and cleaner coding. It is also suitable to developers who uses only HTML/JS/CSS and doesn’t know much on doing Java/JSP/JSTL. I’ve been using it with Java Use-API.

This is just a start of my experience with this incredible web CMS. I hope you guys will keep in touch with me and don’t hesitate to ask me things. I’ll find ways to help you.