#evolverocks

Introduction to AEM Front End Development ABHISHEK DWEVEDI

August 31st, 2016

2#evolverocks

I n t roduct ion to AEM Front End Deve lopment

1 | Coding Options in AEM2 | HTL vs JSP3 | JavaScript vs Java4 | Sightly and Sling Models

3#evolverocks

Coding Options in Adobe Experience Manager Specifically Creating Components

Server-sideH T L

4#evolverocks

What is a Component? A Component is…

modular units which realize specific functionality to present your content on your website

re-usable developed as self-contained units within one folder of the repository

AEM ships with MANY components. Extend those components rather than building your own

5#evolverocks

Coding Options for Creating Components• HTL• HTL + JavaScript• HTL + Java• JSP• JSP + Java

7#evolverocks

HTL VS JSP HTL is secure by default: cross-site scripting injection is taken care of JSP require developers to explicitly add protection

HTL front-end developers in a familiar HTML5 environment. JSP really is Java

HTL provides standardized framework that help enforces the MVC approach JSP can follow that model but takes discipline through the use of JSTL

9#evolverocks

JavaScript or Java Java or Javascript?

Use Java for heavy lifting Use JavaScript for lighter loads

Actually…best thing (when it is an option): No Script! Use the built-in Global Objects

#evolverocks

THANK YOU!