A web project can be considered divided into two large parts, the backend and the frontend. Since they are separated processes they can be developed in parallel. AEM has included a mechanism to generate a webpack-based frontend development module called ui.frontend in its archetype.
Inside the ui.frontend module, frontend developers can develop their CSS and JS functionalities by creating a local development environment separated from the AEM instance. Once the logic and design are finished, they can export the output of this minified and compiled code (in the case TS or a CSS preprocessors have being used) by webpack to the target clientlib thanks to the aem-clienlib-generator plugin.
In addition, the ui.frontend module is fully compatible with TypeScript, ES6 and ES5, as it owns Javascript linters that helps to improve the code smell. Since its output is in ES5, the developers can write their code being assured that they do not have to support certain legacy features.
Regarding CSS, webpack provides full Sass / Scss compatibility due to the CSS compilation through the webpack.
Nonetheless, using the ui.frontend comes with different disadvantages. For instance, when managing the HTML, there is no way to use sightly in this part of the project, therefore the HTML will only be suitable for the design part.
Typescript compatibility is essential for this module, since this programming language provides advantages and benefits to the javascript code. It is a strongly typed language and it is necessary to type the variable each time that it is instantiated.
Moreover, advanced interfaces can be implemented on this data, defining the structure and type of the object that will work with later and being helped by the development IDEs to autocomplete the code.
In conclusion, thanks to typescript, the developer can convert the JS into a more mature language. In addition to this, it is 100% compatible with the previous JS, therefore it can be incorporated at any stage of the project.
