Magento 2 frontend architecture – Sample 1

Although nonetheless in development part, Magento 2 comes with a particular set of modified/improved frontend approaches in comparison with its predecessor Magento 1.X. The huge distinction is that frontend is now up to date with newer applied sciences corresponding to HTML5, CSS3 and jQuery.

There are additionally important adjustments/enhancements to total layout manipulation, file construction and a model new introduction to Magento UI library closely based mostly on LESS preprocessor with in-built compiler.

One of the principle objectives in addition to efficiency and scalability was to serve RWD out of the field. In this article I’ll try to cover a number of the important variations, dive into development and show some sensible examples.

Theme workflow adjustments

When creating a brand new theme theme_root_dir/theme.xml file is required to truly initialize it. There are a few different choices to be taken under consideration as properly. Add placeholder picture for preview in administration, configure its parent theme, declare theme version etc. It’s fairly comparable method to the one used within the latest 1.X variations.

simplemagento
    1.0.0.0
    Magento/blank
 
        media/preview.jpg

One of the primary adjustments I’ve observed when beginning to sort out Magento 2 was definitely the elimination of pores and skin directory. Everything is organized instantly underneath the app construction.

Another huge change is that each module has its own VIEW directory the place all module-specific template, layout, js, and css/much less files are saved. This is a greater method and positively it is going to be useful for module builders. All visible content shall be saved instantly throughout the module separating it from Magento core.

What does it imply for us fronted builders?

It signifies that construction inside app/design/frontend/vendorName/newTheme/ is now not divided into layout and template directories. Instead we need to incorporate module directory and its full hierarchy to override default directory construction.

Example of a brand new architecture

For example, if the plan is to alter one thing in 1column.phtml, it’s required to comply with full directory hierarchy for a module Magento_Theme (this was part of the page directory in 1.X variations).

Theming inheritance is now utterly redesigned to assist limitless fallbacks and app/design/frontend/base/default directory is now not included. From the documentation offered up to now, the really helpful method is to fallback to clean theme as a place to begin.

At the time of writing this article I used to be not ready to correctly take a look at different choices besides to falling again to clean, however it appears this method is useful just for the initiatives requiring slight styling modifications/updates. From customized development perspective, in some instances the place development differs very a lot from default settings it’d produce an affect on the efficiency.

Theme declaring course of is just about the identical as in earlier 1.X variations besides that now it’s potential to create a brand new theme from administration.

Layout updates/enhancements

When it comes right down to layout manipulation there are some actually cool and fascinating new enhancements.

Before diving into sensible examples it’s necessary to say that layout files are actually divided into smaller components. Practically defined — what as soon as was a layout deal with now’s a separate file.
Probably the intention was to simplify the upkeep.

Magento 2 introduces the entire new idea for product/media picture resizing actions proper from the layout. Layout file view.xml is accountable and it must be positioned underneath app/design/frontend/vendorName/newTheme/etc/ directory. Here is an example of resizing product catalog pictures in action.

<var>100</var>
        <var>275</var>
        <var>48</var>
        <var>166</var>
        <var>370</var>
        <var>0</var>

Although I presume that the principle aim was to simplify precise resizing course of for builders, it would definitely fail underneath majority of responsive design conditions. For example, we don’t wish to serve huge pictures for smartphone customers on edge connection. Resizing from template files provided a greater option to serve out a number of sources for various finish person profiles. Right now inspecting a clean theme I solely see a scenario with simply scaling pictures down in html.

One of the good and greater than welcome adjustments is an introduction of a container wrapper, successor to a core/text_list block type which served the function of a structural block within the earlier variations of the system. What is de facto fascinating is a chance to cross attributes like htmlTag, htmlClass, htmlId instantly from layout files.

My private favourite is transfer method introduction. It’s a type of refined action method set/unsetChild however now the method is far more intuitive. For example, if we need to insert supply block1 into vacation spot block2 this is the way in which how we will do it:

It routinely makes supply block1 a toddler of a vacation spot block 2.

It’s necessary to say that Magento 2 provides a system validation for XML files utilizing xml schemas for particular person and merged layout files.

Magento UI library introduction

Magento 2 provides a whole UI library construct up on LESS to match the precise system necessities. Reason for selecting LESS over different pre-processors is as a result of Magento 2 comes with internal compiler to compile CSS instantly from PHP. This will, in keeping with Magento crew, pace up development and permit builders to focus simply on file modifying/manufacturing whereas the system covers all the effort with compiling etc.

However, this, in fact, just isn’t the one choice to go together with. This method may be ignored and focus may be set on manually compiling with SASS and even writing down pure CSS.

UI Library itself present tons of mixins (vertical rhythm,@font-face .etc) and an enormous set of predefined variables to make the method extra intuitive and fewer demanding for a fronted developer. Does it actually accomplish that?

Let’s see some sensible examples following the really helpful method.

Magento UI library is located under store_root_dir/lib/web/css/source/lib

Element construction is kind of in a approach how I configured my own SASS files whereas coping with Magento 1.X. I discovered it fairly acquainted. 🙂

Now let’s see how can we lengthen a number of the files and its mixins etc. To import UI library to our theme it’s required to name/import lib.much less file into types.much less which is default much less file for a theme.

@import “supply/lib/lib.much less"

It’s impossible to explain all variations and possibilities in one article so my focus will stay on a few practical examples to encourage you to check it out on your own if you didn’t do it already.

Let’s say that we want to extend predefined @font-face mixin to include our own font to the site. Open Sans is already included by default. So let’s replace it with our own Lovelo Black. Let’s check default mixin for @font-face under the store_root_dir/lib/web/css/source/lib/typography.less

.font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.eot');
        src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}.woff') format('woff'),
        url('@{font-path}.ttf') format('truetype'),
        url('@{font-path}.svg#@{family-name}') format('svg');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

Pretty a lot easy, required parameters are @family-name and @font-path.

What we need to do now’s to increase default typography.much less. We’ll accomplish that by copying file to our theme directory. Here is an example of theme.much less file after together with typography.much less

/* Magento/blank */
 
.magento-reset();   // Reset default styles with magento_reset
 
// Import theme vars overrides and mixins
@import "source/lib/lib.less"; // Import all lib files
@import "source/theme.less"; // import theme styles
 
@baseDir: "../"; //default
 
@import "source/typography.less"; // extending theme typography
@import "source/lib/responsive.less"; // extending responsive styles

Once the process is accomplished it’s time to increase @font-face mixin to swimsuit our wants.

.font-face(
  @family-name: 'Lovelo Black',
  @font-path: '@{baseDir}fonts/lovelo_black/Lovelo_Black',
  @font-weight: 300,
  @font-style: normal
);

And that’s it. We are actually efficiently prolonged UI Library @font-face predefined mixin. 🙂

Magento UI Library definitely gives a whole lot of highly effective materials and concepts generally, particularly for initiatives that require extra of a skinning type method. On the opposite hand, I discovered it fairly overcomplicated in some events, particularly for complicated customized responsive initiatives that just about differ from default layout architecture.

For example, the whole responsive building is counting on 3 predefined variables @pill @ desktop @cellular however whilst it might be good for a place to begin, it’s definitely not a completely scaled resolution. Responsive design is all about content whereas this jogged my memory extra of an adaptive method with few predefined pixel based mostly queries. Although the actual fact is that we will all the time upgrade and lengthen the system. After all, we will even keep away from it altogether and start constructing our own architecture powered with SASS as an alternative. We’ll definitely experiment with different approaches within the close to future.

jQuery integration is a subject of its own and it’s too complicated for this article so I’m planning to write down one other one sooner or later.

Conclusion

It’s nice to see that the brand new platform is lastly shaping up. Now when the potential launch dates are recognized, it’s much more fascinating. Although nonetheless in development part, Magento 2 is a considerably improved system with regards to frontend development, in comparison with its predecessor. With all new applied sciences included, improved architecture and workflow, frontend development now requires by way more skilled method than before.

In case you are feeling you want some further assist, we will give you a (*2*) – be happy to get in contact and see what we will do for you!