In the project which was ended long before, worked as a front-end developer, I faced the challenge that I needed to develop a suitable workflow for front-end development in AEM context. Besides the three well-known mundane front-end technologies – HTML, CSS and JavaScript, I managed to get another two good helpers – AngularJS and LESS, which were really great tools and contributed a lot to the final success of the project.
AngularJS
What is it?
Well, you can visit its website: https://angularjs.org/
Why use it?
In AEM context, basically what developers do is creating all kinds of ‘controls’ which package the appearance and functionalities inside. That means every control may have its own HTML makeup, CSS styles and JS code. As a result, there is obviously an intrinsic requirement for front-end developers that the code should be modularized.
There are a large number of solutions for front-end modularization. However, in my mind, as a rookie in this area, the most important criteria for selecting is – Popularity. If a technology is popular, then we can confirm two things: 1) the documentation won’t be too bad; 2) there are a large number of masters in the local and online communities, from whom we can ask for help when we are in trouble.
Tips
There’re many knowledge points in AngularJS, but we don’t need to know everything if our goal is just modularization. In that case, we just need to pay attention to a few things:
- Controller. Very basic concept.
- Data-binding. This is necessary because we want to let controls have data abstraction and encapsulation.
- Directive. We need to separate HTML markup for a controller from the whole page, and use customized tag to embed it. This is done by directive. Also, I believe this is one of the most wonderful feature of Angular.
In our case, we didn’t touch any topic at all, such as routing, service, and the inside process of compile, link and digest. All of them are very valuable topics to learn, of course, but since most of our team members are junior, being able to avoid involving too much unfamiliar knowledge was certainly very positive to make sure we could do current job well.
Learning Resources
Besides the official documentation, I found two MOOC (what is MOOC?) courses are very good:
Both of them cover a lot of useful skills.
LESS
What is it?
Well, you can visit its website: http://LESScss.org/
Why use it?
The major jobs of LESS are achieving two things: CSS modularization and dynamic theme.
LESS is easy, intuitive and helpful. Conceptually, it’s just a CSS preprocessor which is very easy to understand. Practically, to use it in page, what we need to do is just changing the CSS file’s extension from CSS to LESS, and adding a script reference to its compiler. Syntactically, a very good feature of LESS is its compatibility with raw CSS, which means if you don’t know how to write code in LESS, you can just leave it as CSS.
In our project, the most valuable reward LESS offered was the ability to dynamically change the CSS theme of a page, it was quite challenging to achieve it in raw CSS, however in LESS, it’s a piece of cake. Details will be cover in the following section.
Tips
Merge all the styles into a single file
This also can be done in other ways, for example, build tools like Grunt or Gulp. But utilizing the build-in @import directive in LESS is more or less an intuitive way and easy to modify.
In our project, we imported LESS files for pages and components into a single style.less. In development stage, we linked this file directly into pages, so that we could modify and simply refresh the page to see the result, which I believe was the most comfortable way of coding; in release version of the pages, we replaced the .less file with a compiled .css (using task in Grunt script), so it would not impact the performance of the page.
Achieve dynamic theme changing
In a user’s perspective, dynamically changing theme means you can change a theme (e.g. from ‘theme-orange’ to ‘theme-red’) by simply change the class name on ‘body’ element.
This is done by mix-in feature of LESS. We have this mix-in:
| .theme-selector-comp(@selector, @theme-orange, @theme-red: @theme-orange, @theme-white: @theme-orange) {
@{selector}: @theme-orange;
body.theme-red & { @{selector}: @theme-red; }
body.theme-white & { @{selector}: @theme-white; }
} |
In this code, you can see we defined three themes, ‘theme-orange’, ‘theme-red’ and ‘theme-white’.
In LESS code, you can use the mix-in this way:
| .globalHeaderCompStyle .region_selected {
//background .theme-selector-comp(background, orange, red, white); } |
Here the code means in ‘theme-orange’ it gives the elements (selected by this selector) an orange background, in ‘theme-red’ it gives a red one, and in ‘theme-white’ it gives a white one. The order of these themes is defined by the order of parameters in the mixed-in definition. Apparently, this syntax is extremely intuitive, and even a beginner can take up this task without difficulties.
Conclusion
It’s really a great journey to beat down all the major obstacles, and finally developed a successful product for clients. It’s even more amazing that we ourselves could learn some knowledge, pick some new skills and step forward to become better programmer. My team members and I now can add these two skills to our personal arsenal, we felt confident and proud, not only because the exciting success in our project, but also the future usage promising in new coming AEM projects.
