Magento 2 Themes: Frontend development with high standards
Posted by mhussy 3 years, 5 months ago to Technology
Last week my colleague Matthias reported on his impressions of Magento 2 modules as a backend developer. The new shop system also brings some changes to front-end developers. Working with the Magento 2 themes makes new demands. Since it is already foreseeable that there will be a few minor adjustments up to version 2.1 in order to smooth a few processes, these changes do not have to be final. The current status:
The structure - new directory structure
What immediately catches the eye when you start Magento 2 are the differences in the directory structure. If the template and layout files were previously managed under the app/design and the stylesheets under the skin, all files are now in a Magento 2 Themes folder and are subdivided into modules. It takes a bit of getting used to, but it makes work easier to have everything in one place - especially with complex shop front ends that include a large number of different layout elements. This is also advantageous and clearer for specially developed modules.
Blank and LUMA: the new Magento 2 themes
Magento 2 comes with two themes. A blank theme that is already responsive and is perfectly suitable as a basis for further customizing. And the LUMA theme, an excellent example of a custom theme based on the blank. The basic idea is to continue to use the properties of the blank theme productively as a parent. When developing your own Magento 2 themes, it is worth taking a look at the structure of LUMA. Together with LUMA, Magento also provides some demo data, e.g. B. Teasers for the start page or widget instances and other content elements that give a good impression of the possibilities of a custom theme.
Inheritance of themes in the Magento 2 frontend
The fallback principle is implemented somewhat differently than in Magento 1, but it is basically similar to it. The basis is the templates of the Magento standard modules. The Magento 2 blank theme forms the standard shop with all basic styles on this basis. Building on this, any number of Magento 2 themes, including responsive ones, can be created. The dependencies between the parent and child themes can be easily defined using a configuration file.
The layout in Magento 2
Magento 2 also restructures the layout. From now on there are two types of layout elements: the familiar blocks and the new containers. Containers are placeholders for the content. They only serve to arrange the blocks and do not contain any logic. In practice, this means that you no longer define the navigation as such in a specific page area, but assign the navigation to a container that contains the positioning and styles.
The layout can still be adapted via direct interventions within the templates. However, it makes more sense to use the layout XML files for configuration. Magento 2 offers a lot more options than its predecessor, so there is rarely a reason to overwrite templates. On the one hand, this reduces the risk of conflicts and increases stability, and on the other hand, a Magento e-commerce platform remains upgradeable despite extensive adjustments.
Modularity and reusability
Magento gains significantly in modularity with the introduction of the Magento UI Library. A wide variety of front-end elements and functions (e.g. fonts, tables, buttons, ratings, navigation, etc.) are predefined and styled in the Magento UI Library. The elements are then not styled in the custom theme, but a large part of the design can be easily configured using variables in the Magento UI library. This also helps to make overwriting the Magento core code obsolete and to ensure the upgradeability of the system. In addition, the reusability of styles is improved if the library is used as intended and further developed with your own content elements.
In addition, Javascript is now used in conjunction with RequireJS in the Magento 2 frontend. RequireJS takes over the loading of the individual modules of the Javascript applications. The special thing about it: RequireJS loads only the "required" scripts when opening a page - instead of simply all of them - which significantly shortens the page structure.
Instead of installing the required script individually at each point and assigning the necessary libraries or even integrating everything everywhere, the required modules are referenced in the code via RequireJS, which simplifies work and streamlines the code.
The Magento 2 frontend improves performance
Due to the modular structure, Magento 2 gets by with significantly fewer core overwrites and CSS declarations and it is now easier than before to include only the specific required components in the CSS file. This keeps it slim and loads faster.
The consistent implementation of the Mobile-First principle in Magento benefits the performance on mobile devices:
The structure provides that the styles-m.css, i.e. the stylesheet for the mobile layout, is loaded first. The additional styles from the styles-l.css (l = large) are only loaded if the device is not a mobile device.
In order to utilize this performance potential, the development team must first deal intensively with the more complex front-end architecture.
Google is also happy about mobile-first and responsive.
Benefit: Magento 2 promotes and demands professionalism
Inevitably, the wheat from the chaff will be separated here: The Magento 2 frontend is more complex in its structure and options than in Magento 1. If you have to deviate from the standard themes, excellent results can no longer be achieved with a little tinkering and goodwill.
Magento 2 requires a very structured working method and extensive know-how from front-end developers at the latest when customizing, in order to keep the effort for a consistently user-centered design within an attractive framework. This can only be achieved with a clear separation between backend and frontend development. With tools like the Task Runner Grunt, this work is made easier again.
In return, you get a system with which adjustments to the front end can be implemented extremely precisely, conflict-free, and thus quickly, which promises short loading times and is easy to upgrade.
The structure - new directory structure
What immediately catches the eye when you start Magento 2 are the differences in the directory structure. If the template and layout files were previously managed under the app/design and the stylesheets under the skin, all files are now in a Magento 2 Themes folder and are subdivided into modules. It takes a bit of getting used to, but it makes work easier to have everything in one place - especially with complex shop front ends that include a large number of different layout elements. This is also advantageous and clearer for specially developed modules.
Blank and LUMA: the new Magento 2 themes
Magento 2 comes with two themes. A blank theme that is already responsive and is perfectly suitable as a basis for further customizing. And the LUMA theme, an excellent example of a custom theme based on the blank. The basic idea is to continue to use the properties of the blank theme productively as a parent. When developing your own Magento 2 themes, it is worth taking a look at the structure of LUMA. Together with LUMA, Magento also provides some demo data, e.g. B. Teasers for the start page or widget instances and other content elements that give a good impression of the possibilities of a custom theme.
Inheritance of themes in the Magento 2 frontend
The fallback principle is implemented somewhat differently than in Magento 1, but it is basically similar to it. The basis is the templates of the Magento standard modules. The Magento 2 blank theme forms the standard shop with all basic styles on this basis. Building on this, any number of Magento 2 themes, including responsive ones, can be created. The dependencies between the parent and child themes can be easily defined using a configuration file.
The layout in Magento 2
Magento 2 also restructures the layout. From now on there are two types of layout elements: the familiar blocks and the new containers. Containers are placeholders for the content. They only serve to arrange the blocks and do not contain any logic. In practice, this means that you no longer define the navigation as such in a specific page area, but assign the navigation to a container that contains the positioning and styles.
The layout can still be adapted via direct interventions within the templates. However, it makes more sense to use the layout XML files for configuration. Magento 2 offers a lot more options than its predecessor, so there is rarely a reason to overwrite templates. On the one hand, this reduces the risk of conflicts and increases stability, and on the other hand, a Magento e-commerce platform remains upgradeable despite extensive adjustments.
Modularity and reusability
Magento gains significantly in modularity with the introduction of the Magento UI Library. A wide variety of front-end elements and functions (e.g. fonts, tables, buttons, ratings, navigation, etc.) are predefined and styled in the Magento UI Library. The elements are then not styled in the custom theme, but a large part of the design can be easily configured using variables in the Magento UI library. This also helps to make overwriting the Magento core code obsolete and to ensure the upgradeability of the system. In addition, the reusability of styles is improved if the library is used as intended and further developed with your own content elements.
In addition, Javascript is now used in conjunction with RequireJS in the Magento 2 frontend. RequireJS takes over the loading of the individual modules of the Javascript applications. The special thing about it: RequireJS loads only the "required" scripts when opening a page - instead of simply all of them - which significantly shortens the page structure.
Instead of installing the required script individually at each point and assigning the necessary libraries or even integrating everything everywhere, the required modules are referenced in the code via RequireJS, which simplifies work and streamlines the code.
The Magento 2 frontend improves performance
Due to the modular structure, Magento 2 gets by with significantly fewer core overwrites and CSS declarations and it is now easier than before to include only the specific required components in the CSS file. This keeps it slim and loads faster.
The consistent implementation of the Mobile-First principle in Magento benefits the performance on mobile devices:
The structure provides that the styles-m.css, i.e. the stylesheet for the mobile layout, is loaded first. The additional styles from the styles-l.css (l = large) are only loaded if the device is not a mobile device.
In order to utilize this performance potential, the development team must first deal intensively with the more complex front-end architecture.
Google is also happy about mobile-first and responsive.
Benefit: Magento 2 promotes and demands professionalism
Inevitably, the wheat from the chaff will be separated here: The Magento 2 frontend is more complex in its structure and options than in Magento 1. If you have to deviate from the standard themes, excellent results can no longer be achieved with a little tinkering and goodwill.
Magento 2 requires a very structured working method and extensive know-how from front-end developers at the latest when customizing, in order to keep the effort for a consistently user-centered design within an attractive framework. This can only be achieved with a clear separation between backend and frontend development. With tools like the Task Runner Grunt, this work is made easier again.
In return, you get a system with which adjustments to the front end can be implemented extremely precisely, conflict-free, and thus quickly, which promises short loading times and is easy to upgrade.
SOURCE URL: https://www.rltsquare.com/
