August 22, 2016

Get going with Magento 2 Theming

Yireo Blog Post

Next week - August 31st - we are organizing our second Magento 2 theming training, this time in Zwolle. It will be a great training, unveiling many frontend development techniques for Magento 2 with two major parts: Block development and JavaScript. Let's see what's the fuzz about theming.

Block development

Just like in Magento 1, a Magento 2 theme starts by defining blocks in various places. Previously, blocks could be just blocks with content (user-generated content, or structural blocks, so blocks within blocks) or blocks that just served as empty boxes for other blocks to use. The latter group is now renamed to containers. This is one of the many changes in both the XML layout and the PHTML templating. Truth be told, it looks all very different, but it's not that special. Therefore, the training only focuses a few hours on the development of XML layout, PHTML templates and underlying Block-classes.

JavaScript new-style

Things really get going with JavaScript: Magento 2 comes up with RequireJS to allow for JS dependencies to load properly and without conflicts. One caveat is that old scripts need to be rewritten before they comply to the new AMD standard to work together with RequireJS. It's not difficult, but practical advice is definitely needed. This counts for simple scripts that manipulate the DOM, extensions of the Magento JS framework and also jQuery plugins.

Magento takes it up a notch by also offloading things to AJAX, loading plain HTML templates quickly and filling them dynamically with variables. KnockoutJS is used for this - and KnockoutJS is actually what makes the checkout and cart of Magento 2 so flexible and adjustable. The training also focuses on UIComponents, which is mixing all of the theming elements together, so that chunks of JS/PHTML/XML/HTML can be easily picked up and reused elsewhere.

New deployment standards

One of the things that is already covered a lot is the usage of LESS and Grunt. As a frontend developer, the days of uploading changes via FTP should be in a distant past, while the current workflow should be including some kind of automation tool (Grunt is just one example) to commit your changes (git) to a server safely (deployment automation). The training therefore focuses mostly on the deployment steps like static view file processing, flushing caches, compiling code, so that these steps can be replayed in whatever script you prefer.

One training to rule them all

All in all, it is a lot of stuff that you need to deal with when starting with Magento 2 frontend development. Our training is compiling all of the required steps in a digestable amount - efficient and affordable.

Details and subscription

If you are Dutch and if you are interested in this training, head over to the details page and learn more on this training on the 31st of August: https://www.yireo.com/training/events/training/2016-08-31-magento-2-theming-training The training will be held on a regular basis in The Netherlands. We are also considering expansion to the rest of Europe (Spain, Germany, UK, Belgium, France), but most likely that will be at first through in-house trainings on demand. Interested? Drop us a mail and we'll discuss things!

Posted on August 22, 2016

About the author

Author Jisse Reitsma

Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.

Sponsor Yireo

Looking for a training in-house?

Let's get to it!

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.

Do not miss out on what we say

This will be the most interesting spam you have ever read

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.