How to Get Started as a Magento 2 Frontend Developer

Being one of the most popular eCommerce platforms, Magento has been the favorite option for eCommerce developers for approximately one decade. However, it is a very complex framework and has a steep learning curve, especially in the beginning. Being a Magento frontend developer requires advanced skills as it practically forces developers to always follow the best practices. For example, executing JS dependencies via Require JS, keeping the balance between performance and page speed, or building apps with Knockout JS.

This article will be focused on what does it mean to be a Magento frontend developer and what makes it different from the other frameworks. You will find practical and technical guides on how to start learning and get familiar with Magento. The article will cover different aspects of the learning process. From learning methods to the best tools.

Table of contents:
1. Why should you learn Magento
2. Technology stack
2.1 Technologies you will need
2.2 The best tools to use
3. Learning techniques
3.1 Online resources
4. My personal approach and how I got here
4.1 Best Practises

1. Why should you learn Magento?

Magento 2 is one of the most exciting frameworks to learn. Being a Magento 2 frontend developer differs from the traditional meaning of the frontend developer. You are not only focused on styling the page elements or implementing cool and modern CSS animations. Instead, you need to understand the whole Magento frontend architecture, the layout structure, and the template rendering engine.

Furthermore, doing frontend work on Magento means that you work with the latest technologies and developments in the industry. My favorite aspect of being a Magento frontend developer is the variety of work. So many jobs require you to do the same tasks over, and over, and over. On Magento, one day you are building a furniture website, a week after you find yourself estimating a custom module for a jewelry store.

2. Technology stack

Make sure you have a good understanding of the core technology stack used by Magento. To become a Magento frontend developer, you have to be able to apply the skills mentioned above to each of the core technologies that Magento uses. The frontend technologies include HTML5, CSS3 (LESS CSS pre-processor), jQuery, RequireJS, Knockout.js etc. Please, review here the full list of the technologies Magento implements. There are a lot of resources on the web. However, I would like to suggest some of my favorites:
• W3Schools is the base starting point for every web developer out there. It has tutorials for every web technology and most importantly it is up-to-date with the latest standards.
• CSS-Tricks is my favorite blog to learn about CSS features and keep up to date with the latest innovations.
• RequireJS and KnockoutJS official documentation. I always tend to follow the official documentation when it comes to frameworks and both RequireJS and KnockoutJS have really detailed documentation and I suggest going through that prior to starting learning Magento.

2.1 Technologies you will need

Third, after you can apply these fundamental concepts with those technologies, put your focus on the Magento dev docs, particularly on the frontend area. Having good knowledge of the single technologies, dev docs guidelines will help you to create a clear idea of Magento frontend architecture, and understand how Magento uses those. There are a couple of online courses that I would suggest to get familiar to Magento:
• Magento U – Core theme principles – a detailed overview of the theme components and how to customize a website’s look and feel.
• Mage2TV – by far one of the best resources for Magento 2. It has a detailed overview of the Magento core files and covers different aspects, from cashing systems to UI components.

2.2 The best tools to use

Working with Magento can easily get complex without using the right tools. The most reliable Magento development tools should help you get started and improve your efficiency. Using the best tools to help you save both time and effort.

• PHPStorm is one of the most popular code editors on the market. It is perfect for working with both backend and frontend technologies. It has a variety of developer tools, which help debug and perform different tasks.
• Docker Used for local application setup and development.
• Warden CLI tool to help with the local enviroment.
• Magerun Command line for Magento
• Sequel Pro Database management application
• Magento 2 dev tools Chrome or Firefox extension to help with Magento debugging.

3. Learning techniques and resources

• I would strongly suggest using the divide and conquer strategy, break Magento down into small pieces, and focus on them one by one. There are many aspects when it comes to Magento’s frontend development and trying to master them all at once is extremely overwhelming. You need to review the items one by one.
  
  Let’s say you start looking at the Layout XML first, then if you feel comfortable with that, move on to template overrides, and then on to creating javascript modules, etc. Obviously, you should start with the easiest technologies, HTML5 and CSS3. After you have a good understanding of these two technologies, you can proceed with JavaScript, PHP, and XML. It’s important to follow this order and not bypass things. Small things that you might ignore now, will cause problems later and you will be forced to get back to things.
  
  
• Explore blog posts and tutorials by popular, famous, and award-winning “Magento agencies” as well as well-known Magento extension developers. Seek for more specific Magento developers content, including specific Magento Q&A on StackOverflow, StackExchange, and official Magento developer forums. Also, do a quick research for what you’re looking for, trying to describe the issue/feature as best as you can.

3.1 Online resources

• With its wide recognition as one of the best eCommerce development platforms in the market, Magento has the most amazing community support. You can find various forums and networking events around the Magento platform. I would highly encourage you to get involved and get to know other Magento developers on social media platforms like Twitter or various forums. When you need help with issues that you encounter during development, you can get a lot of assistance from the community members and people you know.
• Furthermore, Magento community has a slack workspace that you can register and get in touch with Magento developers all around the world. Also, review the Magento github repository and keep up to date with the latest features or bug fixes.

4. My personal approach and how I got here

• Do a Google search to find a specific Magento extension development company (or better yet, a specific Magento developer/person), and find something they did, similar to what you’re trying to achieve. For example, you can search for the most popular modules or themes on the market. After that, get their module’s/theme’s source code either directly from GitHub (if it’s available) or buy it from the Magento 2 Marketplace. Then divide that code line-by-line, read the explanations/comments, look at the documentation for it (if available). This will help you look at the big picture and understand how things are related to each other, how things function as a whole etc. Moreover, you’ll be surprised at how frequently you can reverse-engineer a custom feature or build a completely new feature from the bits and pieces of existing features you find and other open-source code.
• Being an Open Source platform, Magento is preferred by many developers since they can extend the platform according to their needs. To start with and understand how Magento works, I would strongly advise downloading Magento, installing, and exploring the Magento core. Basically, for every question you might have, the answer is on the Magento core files. For example, let’s explore the JavaScript mixins. Instead of Googling about it and searching on different websites, Its enough to get on the Magento core files and see how Magento uses it. For example, the checkout agreements mixin. It offers a clear understanding of what a mixin is and how it is used.
  Moreover, there might be cases that what is provided by the original developers of the platform, is not enough. On such occasions, you can use the Magento modularity and extendability and make customizations.

4.1 Practice makes perfect

• In my opinion, this is the most important piece of advice. While you’ve already mastered the core concepts and how they apply to Magento’s architecture, you have to put this knowledge into practice. While learning by itself does lead to progress, new theoretical knowledge does not necessarily bring new skills. If you don’t have a Magento project to work on right now, you can try building modules or creating themes with a live demo. Find the best extensions on the market and try to build the same functionality they offer. Then compare your code line-by-line with the original one, read the comments, etc. The same goes for Magento themes.
  Besides this, I would suggest starting from small tasks and gradually, make more and more difficult ones. You can start with tasks such as:
  – Add a product widget on the homepage.
  – Add a static block on the category page sidebar
  – Move the CMS block from top to bottom on the category page.
  – Create a custom tab on the product page
  After this, you can proceed with some more advanced tasks:
  – Add a new page on checkout.
  – Auto display the mini-cart popup when adding product to cart.
  
  Last, try to attend online workshops and training. There are many agencies or developers offering workshops. Some are Integer.net, MageMastery or Magenticians. Also, try to be active on social media, especially on Twitter and LinkedIn. Try to find the most popular profiles and the best software engineers and make sure to follow them. They are always giving priceless advice and tutorials. Some of the best profiles to follow are Joseph Maxwell, Lukasz Bajsarowicz or John Hughes.

To sum up, I would like to mention one of the best sayings for programming:

“A language that doesn’t affect the way you think about programming is not worth knowing.”
― Alan J. Perlis

Magento goes perfectly in that direction. Being a Magento developer is much more than being a “normal” developer. It is challenging, “forces” you to think bigger and view things not only from the developer’s point of view. 

I hope this article will help you kick off your Magento frontend career and help you with some of the important aspects of that direction.