There are some fairly major differences between Magento 1 and Magento 2. Magento 2 provides major updates on its previous version after some hard work to create the best solutions to old issues such as performance and security. The updates can be illustrated by the following list:
- Caching: There’s a built-in Full Page Cache (FPC) on the Community Edition and Varnish support for improved performance.
- Extensions and Themes: Magento 2 is more organized and extensible now. The extensions and themes have your own files of code and layout.
- File structure: More organized directories and structures inside the Model ViewController (MVC) proposal.
- Performance: Improved performance and scalability.
- Security: Enhancements in security with the adoption of good software development practices (design patterns) and SHA-256 password hashing included.
- User Experience (UX): Besides the frontend changes, the Magento 2 admin area is now more user-friendly with substantial positive changes such as the new admin area structure and management.
Magento 2, compared with Magento 1.9, shows some changes, but more than that, there is an improvement in the system’s behavior and processes. The code is more organized; it separates the Magento framework’s native extensions, providing a powerful environment for modularization and solution development:
The main changes in the structure of Magento 2 are as follows:
- The skin directory does not exist anymore. All the files of a module or theme are stored in its specific scope.
- The native modules and themes of Magento 2 installation are in the vendor directory.
- The pub directory contains all the CSS and PHTML files precompiled.
- The composer.json file manages the project dependencies.
In Magento 1, the theme system works by rendering the layout files (PHTML) from the app/design/frontend/MyTheme directory and by rendering the CSS, JS, and Image files from the skin/frontend/MyTheme directory. However, in Magento 2, all the layout and CSS files are in the same directory, Theme.
The themes of Magento 2 are located in the app/design/frontend/<Vendor>/ directory.
This location differs with built-in themes, such as the Luma theme, which is located in vendor/magento/theme-frontend-luma. The different themes are stored in separate directories:
Each Vendor can have one or more themes attached to it, so you can develop different themes inside the same Vendor.
The theme structure of Magento 2 is illustrated as follows:
How Magento 2’s theme structure works is quite simple to understand: each <Vendor>_<Module> corresponds a specific module or functionality of your theme. For example, Magento_Customer has specific CSS and HTML files to handle the customer module of the Magento vendor. Magento handles a significant number of modules. So, I strongly suggest you navigate to the vendor/magento/theme-frontend-luma folder to see the available modules for the default theme.
In the structure of Magento 2, we have three main files that manage the themes’ behavior:
- composer.json: Describes the dependencies and meta information
- registration.php: Registers your theme in the system
- theme.xml: Declares the theme in the system and is used by the Magento system to recognize the theme
All the theme files, inside the structure explained in the previous section, can be divided into Static View Files and Dynamic View Files. The Static View Files are not processed by the server (images, fonts, js) and the Dynamic View Files are processed by the server before delivering the content to the user (template and layout files).
Static files generally are published in the following folders: