Book Image

Mastering Adobe Commerce Frontend

By : Jakub Winkler
Book Image

Mastering Adobe Commerce Frontend

By: Jakub Winkler

Overview of this book

Navigating the frontend realm of the Adobe Commerce platform can often feel like a labyrinth, given its multifaceted systems and intricate layering. This book demystifies Adobe Commerce frontend development, guiding you through its paths with clarity and precision. You'll learn how to set up your local environment, paving the way for a smooth development experience and navigate the platform's theming ecosystem, exploring layout XML systems and the power of templates. As you progress through the book, you'll leverage an array of JavaScript libraries and frameworks that Adobe Commerce boasts of, with special emphasis on RequireJS, jQuery, Knockout.JS, and UI Components. Additionally, you'll gain an understanding of the intricacies of Adobe Commerce CMS, explore frontend-related configurations in the admin panel, and unlock the secrets of frontend optimization. Practical exercises provided in the book will enable you to create top-notch Adobe Commerce sites that are functional, optimized, user-centric, and a step ahead in the ever-evolving frontend landscape.
Table of Contents (18 chapters)

ESLint – JavaScript coding standards

Adobe Commerce comes equipped with a set of coding standards essential for developers. Following these standards is critical to ensuring that the code not only integrates flawlessly with the platform but is clean and readable. AC comes with coding standards both for backend and frontend developers.

Magento coding standards can be installed using composer:

composer require magento/magento-coding-standard

AC uses ESLint to ensure coding standards. ESLint is a collaborative tool developed by the developer community. It acts as a guardian for our JavaScript code, ensuring it adheres to specified rules, thereby enhancing its quality and maintainability. It helps us follow rules so our JavaScript code looks good and works well. ESLint is like a helper that checks our JS code for mistakes and helps us fix them to make our code better. When we set up ESLint in our IDE, it’s like having a smart assistant that points out errors and suggests...