oscprofessionals logo

Understanding different layers of Magento module development

1. quickread, benefits of layered framework design.

  • Stringent separation of business logic from presentation logic simplifies the process of customization. For example, you can change the appearance of your storefront without impacting any of the backend business logic.
  • Clear code organization predictably points extension developers to the code location.
  • Presentation layer
  • Service layer
  • Domain layer
  • Persistence layer

2. Domain layer

The magento domain layer, access to the domain layer.

  • event hooks
  • di.xml files (with an SPI contract)

3. Persistence Layer

Xml declarative scheme, 4. presentation layer, what is the magento presentation layer, who uses the presentation layer, components of the presentation layer, progressive web applications, how does presentation code communicate with other layers, flow of the presentation layer, 5. service layer, what is a service layer, and how does it work.

  • Above the domain layer and below the presentation layer.
  • Service contracts specify how the implementation will work.
  • The REST/SOAP API application code is easily accessible (which also resides above the service contracts). No coding is necessary to connect service contracts to web service APIs.
  • Provides a dependable API for other modules to use.

Who accesses the service layer?

  • Controllers’ (initiated by actions of users of the storefront)
  • Web-based applications (SOAP and REST API calls)
  • Other Magento modules are available through service contracts.

Service Contract Anatomy

  • Interfaces for repository
  • Interface management
  • Interface Metadata

Benefits of service contracts

Latest posts.

8 Tips for Efficiently Managing Product Data Through Web Scraping

8 Tips for Efficiently Managing Product Data Through Web Scraping

From Traditional to Remote: Evolution of Database Administration with Remote DBA Services

From Traditional to Remote: Evolution of Database Administration with Remote DBA Services

Top SEO Tips You Need to Boost Your Website’s Ranking

Top SEO Tips You Need to Boost Your Website’s Ranking

Crafting Savings: A Guide to Generating Discounts on Shopify

Crafting Savings: A Guide to Generating Discounts on Shopify

How to Protect Your Disability Claim from Social Media Scrutiny

How to Protect Your Disability Claim from Social Media Scrutiny

Shopify Before-and-After Image Comparison Slider that Showcases the Benefits

Shopify Before-and-After Image Comparison Slider that Showcases the Benefits

Navigating Your Path in Digital Marketing: Finding Your Specialization

Navigating Your Path in Digital Marketing: Finding Your Specialization

Elevating Media Production Quality with Advanced Software Tools

Elevating Media Production Quality with Advanced Software Tools

Creating a Digital Presence: The Essentials of Building a Successful Website

Creating a Digital Presence: The Essentials of Building a Successful Website

Leave a comment cancel reply.

You must be logged in to post a comment.

Unlock Your Online Growth Potential.

Let’s make things happen..

Information

Head Office

Other Branches

Welcome Back!

It looks like you already have created an account in GreatLearning with email . Would you like to link your Google account?

1000+ Courses for Free

Forgot password.

Reset Password

If an account with this email id exists, you will receive instructions to reset your password.

Architecture of Magento 2

< Features of Magento 2

What is Composer? >

The architecture of Magento 2 aims to make the source code as comprehensive and adaptable as possible. The main objective of this strategy is to make it easy to adjust and adapt to the project requirements. Each logic and functionality of the company is constructed as modules. Each module can function as an independent entity.

A ViewModel (MVVM) architecture is available in Magento 2. This MVVM architecture provides a considerably more solid separation between the model and the visual layer, as the model view controller is closely related (MVC).

Description of MVVC:

Like the MVC, the data management and essential information description logic are necessary for the application. It has the application's business logic and depends on the associated class – the database access Resource Model. The model responds to the request from the viewpoint.

The view is a graphical interface on the screen. It is capable of showing the user request-response. The view is a framework or layout that shows the data in a certain format. Views indicate that "the way your data looks." It subscribes to the changes of the ViewModel property values or commands.

The ViewModel connects with the layer of the model and only provides the view layer with essential information. The Block Classes in Magento 2 module handles this. It is vital to note that this is typically part of the role of the MVC controller. In MVVM, the controller handles the user's flow, such that requests are accepted and that the system can either display a view or redirect the client to another pathway.

According to the official documentation, Magento 2 is divided into four layers.

Presentation Layer

Service Layer

Domain Layer

Persistence Layer

The top layer of Magento 2 architecture is the presentation layer. When we interact with Magento's web interface, we deal with the layers of code for the presentation.

The middle layer and domain layer is the service layer. It offers a connection between the presentation and domain layer and resources specified data. The service layer performs service contracts defined using a PHP interface.

For business logic, the domain layer is responsible. It does not include information specific to a database or resource. The domain layer defines the generic Magento databases or business logic models.

It outlined the resource model accountable in the CRUD (Create, Read, Update, and DELETE) requests for information gathering and manipulation in the database.

Magento 2 vs Magento 1

Architecture

  • Magento 1 supports PHP 5.2, and Magento 2 supports PHP 5.6 versions of PHP.
  • Magento 1 functions with HTML, CSS, and Magento 2 uses HTML5, CSS3, as well as composer.

Until June 2020, Magento 1 has been extended by the Magento team. This means that Magento stops upgrading and distributing the latest security, corrections and extensions on its side.

Magento 2 has, on the other hand, started up advanced features Like PWA integration, page building, easy management and automation.

SEO & Security

The catalogue page contains rich snippets, improving the search results in SERPs, for the passwords use the reinforced hazard algorithms (SHA-256). This strengthens the password for the type of assaults dictionary.

Scheme.org has been launched by Magento 2.0 to enhance the SEO of stores.

Get free access to

1000+ courses with certificates

Live sessions from industry experts

Industry salary insights and benchmarks

Have an account?

By signing up/logging in, you agree to our Terms and condition • Privacy Policy

We've sent an OTP to CHANGE

Setting up your account...

Welcome to GL Academy!

We see that you have already applied to .

Please note that GL Academy provides only a small part of the learning content of Great Learning. For the complete Program experience with career assistance of GL Excelerate and dedicated mentorship, our Program will be the best fit for you. Please feel free to reach out to your Learning Consultant in case of any questions. You can experience our program by visiting the program demo.

We see that you are already enrolled for our

Please note that GL Academy provides only a part of the learning content of your program. Since you are already enrolled into our program, we suggest you to start preparing for the program using the learning material shared as pre-work. With exclusive features like the career assistance of GL Excelerate and dedicated mentorship, our is definitely the best experience you can have.

Please note that GL Academy provides only a part of the learning content of our programs. Since you are already enrolled into our program, please ensure that your learning journey there continues smoothly. We will add your Great Learning Academy courses to your dashboard, and you can switch between your enrolled program and Academy courses from the dashboard.

We will add your Great Learning Academy courses to your dashboard, and you can switch between your Digital Campus batches and GL Academy from the dashboard.

We see that you are interested in .

Please ensure that your learning journey continues smoothly as part of our pg programs.

GL Academy provides only a part of the learning content of our pg programs and CareerBoost is an initiative by GL Academy to help college students find entry level jobs.

Presentation Layer

What is the magento presentation layer.

When you interact with the Magento web interface, you are interacting with presentation layer code.

The presentation layer contains both view elements (layouts, blocks, templates) and controllers , which process commands to and from the user interface. Presentation code controls web user interaction with the product and its appearance.

You can extensively customize the user interface by using HTML, CSS, and PHTML files to modify elements of the presentation layer. Presentation layer represents customization of HTML,CSS,Javascript,Magento UI,PHTML file and Block file.

Presentation layer is Top layer among four layer(Presentational, Service, Domain, and Persistence layer) described by Magento architecture.

Who uses the Presentation layer?

Three types of Magento users interact with presentation layer code. Magento uses areas to efficiently make web service calls, loading only the dependent code that is required for the particular type of user. Types of users and their associated areas include:

Web users interact with the store front, where they can see the View model of data displayed by Magento and interact with product UI elements to request data for view and manipulation. These users work within the ( frontend ) area.

System administrators customizing a storefront can indirectly manipulate the presentation layer by, for example, adding themes or widgets to the front end.

Web API calls can be made through HTTP just like browser requests, and can be made via AJAX calls from the user interface.

Presentation layer components

One helpful way of understanding the Magento presentation layer components is by examining Magento themes . Magento themes organize both the visual aspect of your storefront and certain aspects of product behavior.

Each theme resides in a unique directory and contains custom page layouts, templates, skins, and language files that work together to create a distinct user experience.

For an extensive introduction to theme elements and an overview of how to extend and override the default Magento themes, see the Frontend Developer Guide .

Magento generates the HTML for a page to display to a user from a tree of view elements.

View elements fall into two main categories: blocks and containers.

Blocks can generate dynamic content and can contain named child view elements that are similar to arguments being passed in. (The as attribute holds the child view element names for the parent block to reference them)

Containers collect an ordered group of children view elements.

The browser forms a product web page by asking the view element tree to render itself into HTML. Containers and blocks emit HTML that encloses their children appropriately. Blocks can generate their content using static HTML, Knockout JS scripts, and PHTML.

How Presentation code calls other layers

Presentation code typically calls service contracts, particularly for a store front. However, presentation code is occasionally dependent on a specific implementation that requires the presentation code to directly call the business logic layer. For example, the Admin UI screens are often tightly linked to a specific implementation and are not generic across implementations.

The View layer calls code from the Model to get information about the state of the application (for example, the price of a product). Typically, the way it accesses the Model is through service contracts.

Presentation layer flow

Web users interact with components of the presentation layer to select actions that initiate calls to the underlying product layers. Presentation layer components make calls to the Service layer, which in turn sends requests to the Domain (or business logic) layer.

Related topics

Architectural diagrams

Architectural layers overview

  • Privacy Policy
  • Terms of Service
  • License/Trademark FAQ
  • Release Notes
  • Third-Party Licenses

Redirecting…

What is Magento Headless: Best Practices and Real-World Examples

What is Magento Headless: Best Practices and Real-World Examples

Shivendra Tiwari

With Magento's headless architecture, the front and back end of an e-commerce website are decoupled. It enables greater flexibility, faster performance, and improved Magento scalability . This article will explore the best practices and real-world examples of the Magento headless approach.

What is Magento Headless?

How does magento headless work, magento headless vs monolithic (default or traditional) architecture, implementing headless magento: 8 steps, pros and cons of magento 2 headless, best magento 2 headless examples, key takeaways.

Magento's headless architecture elevates the flexibility of independently managing front-end and back-end operations.

The headless approach significantly boosts website performance and enhances user experience.

Opting for a headless Magento setup allows for improved scalability, easily accommodating business growth.

Real-world examples illustrate the practical benefits of adopting a headless Magento strategy.

Implementing best practices in a headless Magento environment is crucial for maximizing its potential.

Explained Magento Headless Architecture for Enhanced Website Flexibility and Performance

Magento Headless is an architecture where a website's front and back end are separated. It means that the front-end presentation layer, usually built with HTML, CSS, and JavaScript, is detached from the back-end logic powered by Magento. It allows developers to leverage web technologies and frameworks of their choice for the front end while still utilizing the robust e-commerce capabilities of Magento.

Traditionally, Magento is a monolithic platform with a tightly integrated backend and front end. However, headless architecture decouples the front end from Magento, allowing for greater customization beyond the platform's limitations.

Step-by-Step Process of Magento Headless Implementation Showing Front-end and Back-end Separation

The operation of Magento headless is centered around two key steps:

1. Frontend and Backend Separation

Headless Magento architecture separates the front-end and back-end of a website. The frontend is built with modern technologies like React, Vue.js, or Angular, while the backend, powered by Magento, manages all eCommerce data. APIs facilitate communication between the two parts, enabling efficient data retrieval and display. This separation enhances flexibility and resource optimization, with the front-end prioritizing user experience and the back-end focusing on eCommerce data processing.

Headless technology enables independent updates and changes to the frontend, resulting in faster and more efficient development. It provides a flexible and scalable platform for eCommerce, improving development times, security , customer reach, and SEO. Magento 2 headless architecture allows businesses to create unique experiences while reducing costs. It's gaining traction as a powerful way to enhance eCommerce development.

2. APIs channel communication between frontend and backend

APIs in Headless Magento development facilitate communication between the front-end and back-end of a website. As a bridge, APIs allow the frontend to retrieve and display eCommerce data stored in the backend. They enable dynamic content, like product listings and customer profiles, and perform actions such as adding products to a cart and processing orders.

Using APIs in Magento headless commerce offers numerous benefits, such as enhanced security and improved performance. It enables seamless communication between the front-end and back-end, providing businesses with a flexible and efficient platform for eCommerce development. With this technology, businesses can create unique customer experiences.

Planning and strategizing: When creating a Magento headless website system, planning the architecture and comprehending the key elements of headless development are vital. This includes API understanding, technology stack selection, security protocol implementation, and future scalability preparation.

Choosing the right front-end framework: When implementing Headless Magento, selecting the appropriate front-end framework that aligns with your business requirements is crucial. React, Vue.js, and Angular are among the favored options.

Planning your API strategy: Carefully plan your API strategy to ensure seamless access to essential data for your front end. This involves determining the necessary endpoints and ensuring comprehensive documentation for each.

Using a modern architecture: To ensure scalability and flexibility, consider adopting a modern architecture optimized for headless development, like microservices.

Caching: Utilize caching to enhance performance and alleviate the load on your back-end system. This involves caching frequently accessed data and employing caching layers like Varnish to accelerate page loading times.

Ensuring compatibility: Ensure your front-end and back-end are compatible and communicate effectively through APIs.

Testing thoroughly: Thoroughly test your implementation to ensure it functions as expected. This includes independent front-end and back-end testing and communication between the website's components.

Testing and monitoring performance: Regularly test headless Magento implementations to ensure optimal performance. Monitoring performance metrics , including page load time, API response times, and error rates, is also crucial.

Comparative Analysis of Advantages and Disadvantages of Magento 2 Headless

Optimized performance: Magento 2 Headline simplifies communication between the front and back end, eliminating the need for multiple requests. This leads to faster page loads and enhances the overall user experience. Improved loading times reduce customer frustration and boost conversion rates, making it particularly beneficial for high-traffic organizations.

Enhanced subscription management: Magento 2 Headless makes handling subscriptions and recurring payments easier. You can efficiently provide subscription-based products or services using dedicated subscription management tools or APIs. This allows you to establish consistent revenue streams, improve customer loyalty, and streamline the subscription management process.

Achieve faster website performance: Headless Magento sites usually load faster than traditional or monolithic ones. This is because the front and back end are separated, allowing the customer-facing UI to load independently before the back end. Moreover, by using Headless in Magento 2, you can use advanced caching techniques and utilize content delivery networks (CDNs) to improve site speed further.

Improved Search Engine Optimization: Magento 2 Headless offers the additional benefit of enhancing your SEO. By utilizing headless CMS platforms or creating customized frontend solutions, you can optimize your website's structure, meta tags, URLs, and content with a focus on search engines. This helps improve your search presence, attract relevant traffic, and boost online visibility and revenue.

Utilizing multiple channels to reach and engage with your audience: Headless Magento enables a multichannel approach, reaching customers across various touchpoints, including mobile, websites, tablets, and even unconventional devices like the Apple Watch and the Internet of Things. The best feature of a headless Magento CMS is content unification, allowing fast content uploads and consistent branding across all devices.

Disadvantages

High development costs: Using a headless approach in Magento 2 entails the independent development of the front end and back end. This can lead to increased development expenses compared to traditional methods. Specifically, creating and upkeep of two separate systems demands additional resources and dedication.

Increased complexity: A headless approach requires developers with skills and expertise in multiple technologies, including frontend frameworks, backend APIs, and system integration. These intricacies may necessitate additional training or store owners' hiring of specialized developers, presenting a potential challenge for certain organizations.

Maintenance and version compatibility: When Magento releases new updates and versions, compatibility problems could occur with the selected frontend framework or backend API. Ensuring all the components work well together may require additional maintenance efforts.

Complications in content management: A headless architecture adds complexity to content management, requiring separate management for each channel or frontend. To ensure a seamless operation and leverage the benefits of Magento 2 Headless, owners must invest more effort in synchronizing content updates across different systems for their online store.

1. Zadig & Voltaire

Zadig &amp; Voltaire’s Website as a Real-World Example of Magento Headless Application

Zadig & Voltaire is a renowned French fashion brand founded in 1997 by Thierry Gillier. The brand has made a name for itself with a contemporary, rock-inspired design and a luxurious yet relaxed aesthetic. Thanks to a Magento headless PWA written in Vue.js, the Zadig & Voltaire website impresses customers with its minimalist style and simplified design, focusing on displaying only essential elements. The website also ensures fast loading times and allows for seamless navigation, offering visitors an engaging Magento UX.

Rubik’s Cube Website Showcasing Headless Commerce Transformation and Features

Rubik’s , the company behind the iconic Rubik's Cube, has overcome challenges with its traditional backend by adopting a headless e-commerce model. This transformation has significantly improved their website, including features like image zooming and rich media instructions. As a result, Rubik's has enhanced its customer shopping experience and expanded its brand globally.

3. Galerie de Beaute

Galerie de Beaute’s Optimized Online Store Design using Magento Headless Architecture

Galerie de Beaute , a Greek cosmetic brand, has rapidly expanded to 50 physical stores in under 2 decades. They revamped their Magento site to prepare for their international expansion, addressing speed and user experience issues. By adopting a headless PWA storefront, they achieved lightning-fast performance, device compatibility, and a flexible design. This future-proof solution allows them to adapt to changing business needs without limitations.

1. What is the reason behind the popularity of Magento headless?

Magento headless has gained popularity due to its agility and power. It allows brands to make many changes and control everything from the backend, including menu setup and functionality, without affecting the front-end experience.

2. What is the advantage of using extensions and plugins in Magento?

Extensions and plugins add extra functionality to your Magento site. Whether it's for integrating with Google services, adding a unique feature, or improving your product page, these components can be a cost-effective way to enhance your ecommerce platform. Choosing Magento hosting ensures reliable and robust performance and security for your ecommerce business.

3. How does GraphQL differ from REST in a headless Magento setup?

GraphQL is a powerful tool for managing data in headless Magento setups. Unlike REST, it allows for more efficient data fetching, reducing the demand on the infrastructure. This can lead to improved conversion rates and better overall performance.

4. Why should a team consider a transition to a PWA Studio storefront?

A PWA Studio storefront offers a responsive design that automatically adjusts to desktops and mobile devices. This can lead to improved customer conversions and offer a better user experience. Moreover, the setup can be done from scratch, providing a tailored e-commerce experience.

5. What are the costs of switching to a headless commerce approach with Adobe Commerce?

The cost of the switch can vary based on factors such as the size of your team, the extent of required integrations, and the complexity of your desired web app. However, Adobe Commerce provides a robust and scalable option in the market, with a combination of modules that can be customized to suit specific e-commerce needs.

Magento Headless helps the development of mobile-optimized online stores by decoupling the front-end and back-end. This innovative approach offers unparalleled flexibility, scalability, and customization options. For an even smoother commerce experience, consider opting for managed Magento hosting . This ensures optimal performance of your Magento store.

Shivendra Tiwari

Shivendra has over ten years of experience creating compelling content on Magento-related topics. With a focus on the Magento community, he shares valuable tips and up-to-date trends that provide actionable insights.

Magento 2 Certified Professional Developer Guide

Download a free magento study guide.

Download Magento 2 Certified Professional Developer Guide Magento 2 Certified Professional Front End Developer Guide Magento 2 Certified Professional JavaScript Developer Guide

Section 1: Magento Architecture and Customization Techniques

1.1. describe magento’s module-based architecture.

Magento 2 modules are realized with MVVM architecture:

MVVM architecture

MVVM has three layers:

  • Model The Model contains the application’s business logic and depends on an associated class—the ResourceModel – for database access. Models depend on service contracts to disclose their functionality to other application layers.
  • View The View is both structure and layout of what is seen on a screen – the actual HTML. This is achieved in the PHTML files distributed with modules. Such files are associated with each ViewModel in the Layout XML files, sometimes referred to as binders. The layout files can as well assign JavaScript files to be used on the final page.
  • ViewModel The ViewModel works together with the Model layer and exposes only necessary information to the View layer. In Magento 2, this is handled by the module’s Block classes. Note that this was usually part of the Controller role of an MVC system. On MVVM, the controller is only responsible for handling the user flow, meaning that it receives requests and either tells the system to render a view or to redirect the user to another route.

archi_diagrams_layers

Magento 2 architecture consists of 4 layers:

  • Presentation Layer Presentation Layer is the top layer that contains view elements (layouts, blocks, templates) and controllers. Presentation Layer usually calls the service layer using service contracts. But, depending on the implementation, it may cross over with the business logic.
  • Service layer Service layer is the layer between presentation and domain layers. It executes service contracts, which are implemented as PHP interfaces. Service contracts allow to add or change the business logic resource model using the dependency injection file (di.xml). The service layer is also used to provide API access (REST / SOAP or other modules). The service interface is declared in the / API namespace of the module. Data (entity) interface is declared inside / Api / Data. Data entities are the structures of data passed to and returned from service interfaces.
  • Domain layer The domain layer is responsible for business logic that does not contain information about resources and the database. Also, the domain layer may include the implementation of service contracts. Each data model at the domain layer level depends on the resource model, which is responsible for the database access.
  • Persistence layer The persistence layer describes a resource model that is responsible for retrieving and modifying data in a database using CRUD requests. It also implements additional features of business logic, such as data validation and the implementation of database functions.

Describe module limitations

  • Certain modules can come in conflict with each other if the dependencies in module.xml (sequence) are specified incorrectly.
  • Not all classes can be overridden with modules.

How do different modules interact with each other?

Different modules interact with each other via dependency injection and service contracts. They can also be dependent on other modules when they apply other modules’ logic.

What side effects can come from this interaction?

If modules contain di.xml files, such files may sometimes load in the wrong order or try to override the already overridden module functionality. To resolve this situation, use sequence in module.xml. When modules use other modules’ logic and this very module is deleted, the dependencies would be unable to load and an error at the code execution will occur.

1.2 Describe Magento’s directory structure

Determine how to locate different types of files in magento. where are the files containing javascript, html, and php located.

Magento 2 Certified Professional Developer Guide Screenshot 1

The whole Magento structure can be divided into the following types:

  • Magento root structure
  • Modules structure
  • Themes structure

To begin with, Magento has various areas that allow to determine configuration, view files, etc. for a certain area. Adminhtml (applied to the administration panel) and frontend (applied to frontend parts of the website) are examples of area. From this point, we will use <area> to denote any of the available areas.

Magento root partition structure:

  • design – contains themes
  • code – contains modules
  • etc – contains Magento framework settings

Magento 2 Certified Professional Developer Guide Screenshot 2

  • bin – there the executed Magento file is located that allows to manage the website via CLI.
  • dev – the directory for Magento test scripts (for more information, follow the link https://devdocs.magento.com/guides/v2.3/mtf/mtf_quickstart.html ).
  • generated – contains the generated php files (Factories, Proxies, Interceptors, DI configuration).
  • lib – used for Magento library files.
  • phpserver – contains the router file “router.php” for the php Built-in web server. Allows to use Magento without a third-party web server, like nginx and apache. Here is the example of php Built-in web server launch: php -S 127.0.0.1:8082 -t ./pub/ ./phpserver/router.php
  • errors – stores the error pages,
  • media – stores all media files (product, pages, etc.),
  • static – stores Magento themes generated files. This directory can be specified as web root in nginx config or in apache config. Numerous Magento directories contain “.htaccess” files (including root and pub), which allow you to configure apache for a specific directory. Nginx does not support .htaccess. For nginx, Magento has a nginx.conf.sample file, which is an example of Magento configuration for nginx. This file can be copied, modified, and include the main nginx configuration file.
  • setup – contains Setup Wizard
  • update – contains Magento Updater

Magento 2 Certified Professional Developer Guide Screenshot 3

  • cache – contains cache files if cache utilizes file system as a storage
  • page_cache – contains FPC (Full Page Cache) files, if FPC utilizes file system as a storage
  • log – contains Magento logs
  • report – contains Magento error/exception files that were not intercepted by code
  • session – contains session files
  • view_preprocessed – contains style generated files and minified HTML
  • vendor – contains the installed composer packages. When Magento is installed via composer or using official site’s archive, then all the standard Magento modules and Magento Framework are located in this folder. In case you install via the official GIT repository, which is recommended only for contributing, then Magento Framework will be located in lib/internal folder, while the default modules – in app/code folder.

Next, we will proceed with module structure.

Modules can be located in /app/code and /vendor directories.

The modules in /app/code can be found at a similar path – /app/code/BelVG/MyModule , where BelVG is vendor name, MyModule – module name (in capitals). PSR-0 standard is used for php classes loading in /app/code directories ( https://www.php-fig.org/psr/psr-0/ ). Example: on request, \BelVG\MyModule\Model\MyModel class will be automatically loaded with app/code/BelVG/MyModule/Model/MyModel.php file.

Modules in /vendor are located at the similar /vendor/belvg/module-my-module path, where belvg/module-my-module is the composer package name. Package name contains the names of a vendor and a project. In theory, there are no strict requirements to the package name because it does not impact the module operation. But, for your own comfort, it is better to specify package name as “{vendor-name}/module-{module-name}”. Package name should be in lowercase, with words separated by dashes. PSR-4 standard is applied in /vendor directory for loading php classes ( https://www.php-fig.org/psr/psr-4/ ).

Example: when requested, \BelVG\MyModule\Model\MyModel class is automatically loaded from the file inside the /vendor/belvg/module-my-module/Model/MyModel.php composer package.

Hereinafter <module_dir> will be used to specify module root directory, for this directory can be located both in app/code and in vendor.

It is recommended to install the third-party modules via composer.

Magento 2 Certified Professional Developer Guide Screenshot 4

Inside the module directory, the following directories and files are located:

  • etc – required directory where the module configuration is stored.
  • Block – the directory with php class blocks.
  • Model – the directory with models and resource models
  • Controller – contains all actions for the module. Controller\<Controller>\<Action> is the php classes template for all module actions. For instance, for <front_name>/<controller>/<action>/ query the Controller/<Controller>/<Action>.php file will be requested.
  • Helper – contains helper classes
  • Console – contains php classes for CLI calls via /bin/magento.
  • Api – contains API interfaces.
  • Observer – contains php files of observer classes.
  • i18n – localization files directory
  • Setup – php classes directory that executes certain actions during module installation, upgrade, refresh or deletion. From Magento 2.3 version and further, the directory also contains data and schema patches.
  • Plugins – the directory, containing plugins for classes and interfaces.
  • Ui – contains auxiliary php classes for UI components, like modifies, data providers, etc.
  • view – contains templates, CSS, JS, images, layouts, UI components files. The internal structure of this directory consists of <area> and base, with base storing the files that relate to all areas. <area> and base have the similar file structures.

To make an example, we will give examples of two areas’ contents :

Magento 2 Certified Professional Developer Guide Screenshot 5

This is the internal structure of the directories:

  • email – contains email templates. For example, order_new.html
  • layout – contains layouts xml files. Commonly, the layout name is formed according to this template: {route_id}_{controller}_{action}.xml
  • templates – contains phtml templates’ files
  • page_layout – contains files, describing Magento page types (1column.xml, 2columns-left.xml, etc,)
  • ui_component – contains .xml files with UI components description
  • web – contains static files, template files for KnockoutJS, JS, theme files and images. Below is web directory example:

Magento 2 Certified Professional Developer Guide Screenshot 6

css – contains css styles

images – contains images

js – contains JavaScript files

template – contains .html templates for KnockoutJS n.  registration.php – the required file that registers the module in Magento.

o.  composer.json – contains composer package configuration.

Next we will describe the design structure.

Magento 2 templates are located in app/design/ and vendor folders. Each Magento 2 theme is connected to a certain area.

Themes for admin panel are located at app/design/adminhtml folder, while app/design/frontend contains themes for frontend.

Magento 2 Certified Professional Developer Guide Screenshot 7

Themes in app/design are located at <area>/<ThemeVendor>/<theme_name> folders, where <ThemeVendor> is written in capital letter, <theme_name> in lowercase. For example: app/design/frontend/BelVG/my_theme.

Themes in /vendor are located at the following path /vendor/belvg/theme-frontend-my-theme , where belvg/theme-frontend-my-theme is composer package name. Similar to modules, there are no requirements to composer package name, but for simplicity, it is better so name them as “<vendor-name>/theme-<area>-<theme-name>”.

Further in the text, we will use <theme_dir> to define the theme root directory, for this directory can be located both in app/design and in vendor.

The following directories and files are located in the directory together with the theme:

  • <ModuleVendor>_<ModuleName> – common template for override view module files. For example, BelVG_CustomModule. Inside the directories and files, the structure is similar to view/<area>/ folder inside the module (for example, app/code/BelVG/CustomModule/view/frontend).
  • etc – contains theme configuration files.
  • media – contains theme media files.
  • web – contains theme css/js/fonts files.
  • file theme.xml – a mandatory file with the theme configurations, like the name of the theme and its parent.
  • requirejs-config.js – contains RequireJS config
  • registration.php – a mandatory file that registers a theme in Magento.
  • composer.json – contains composer package configuration.

How do you find the files responsible for certain functionality?

To find the files responsible for certain functionality, search among di.xml files (Dependency Injection configuration). Another way is to search in a module or theme layout files, if you need to find certain blocks. The hints, enabled in the store settings (Stores -> Configuration -> Advanced -> Developer), can also prove helpful for this type of search.

Magento 2 Certified Professional Developer Guide Screenshot 8

For actions search, use the directories structure, because actions are located at the module directory the following way: <module_dir>/Controllers/<Controller>/<Action>). Front Name is specified in <module_dir>/etc/<area>/routes.xml, so finding it via the file search is a relatively simple task. To search for the model functionality, use the full class or interface name (including namespace). Conduct the file search, specifying the full name of the class or the interface (without leading backlash).

In case of SSH access, you can use `grep` to search files with particular content:

grep -r 'String that you are looking' [path/to/search]

Example (search files with content “Catalog\Model\ProductRepository” in vendor/magento/module-catalog folder):

grep -r 'Catalog\\Model\\ProductRepository' vendor/

In case you know the file name, you can use `find`:

find [path/to/search] -name 'FileNameMask'

Example (search all webapi.xml files in `vendor` folder):

find vendor/ -name webapi.xml

When you know both the filename and its contents:

find [path/to/search] -name 'FileNameMask' -exec grep 'String that you are looking' {} +

Example (search *.xml files with content “Catalog\Model\ProductRepository” in vendor folder):

find vendor/ -name '*.xml' -exec grep 'Catalog\\Model\\ProductRepository' {} +

1.3 Utilize configuration XML and variables scope

Determine how to use configuration files in magento 2. which configuration files correspond to different features and functionality.

In Magento 2, the configuration is stored at the following locations:

  • In xml files of modules, themes, languages and app/etc folder.
  • In the database in core_config_data table.
  • In app/etc/config.php and app/etc/env.php files.
  • In the framework variables.

One can modify the configuration from the admin panel only when it is stored in core_config_data and is not overridden in pp/etc/config.php, app/etc/env.php or via environment variables. In case it is overridden, it is disabled at the admin panel:

Magento 2 Certified Professional Developer Guide Screenshot 9

app/etc/config.php and app/etc/env.php files contain Magento basic configuration (for instance, modules list, scopes, themes, database credentials, cache config, override core_config_data config and other). They are generated at the Magento 2 installation. app/etc/config.php file has shared configuration settings, while app/etc/env.php contains settings that are specific to the installation environment. As of the 2.2 release, the app/etc/config.php file is no longer an entry in the .gitignore file. This was done to facilitate pipeline deployment.

Below is the list of xml files inside the module:

  • etc/config.xml – contains the default values of the options from Stores > Configuration in admin panel menu, as well as other options, like class names (for instance, <model>Amazon\Payment\Model\Method\AmazonLoginMethod</model> ) and attributes (for example, <account backend_model=”Magento\Config\Model\Config\Backend\Encrypted” /> ).
  • etc/di.xml and etc/<area>/di.xml – contains the configuration for dependency injection
  • etc/events.xml and etc/<area>/events.xml – the list of the events and observers
  • etc/<area>/routes.xml – routers’ list.
  • etc/acl.xml – adds module resources into the resource tree, allowing to set up access for different users.

presentation layer for magento

  • etc/crontab.xml – adds and configures tasks for cron.
  • etc/module.xml – declares module name and version, as well as its dependencies from other modules.
  • etc/widget.xml – stores widget configuration.
  • etc/indexer.xml – declares a new indexation type. There, view_id is specified, which denotes the views described in etc/mview.xml.
  • etc/mview.xml – is used to track database changes for a certain entity.
  • etc/webapi.xml – stores configurations for WEB API (REST/SOAP).
  • etc/view.xml – stores product images’ values.
  • etc/product_types.xml – describes product types in a store.
  • etc/product_options.xml – describes the types of options that products can have and the classes that render options in the admin.
  • etc/extension_attributes.xml – the ability to add custom attribute, introduced in Magento 2 version. The file describes the attribute and its type, which can be simple, or complex, or have the form of an interface.
  • etc/catalog_attributes.xml – adds attributes to the groups. quote_item, wishlist_item, catalog_product, catalog_category, unassignable, used_in_autogeneration are the standard groups. To learn more, follow the link: https://www.atwix.com/magento-2/how-to-access-custom-catalog-attributes/
  • etc/adminhtml/system.xml – can relate to admin section solely, adds Stores > Configuration settings and describes form sections and fields.
  • etc/adminhtml/menu.xml – can relate to admin area solely, adding the menu option in the admin panel.

Magento loads different areas and files separately; it also has different file loaders for each file type.

In Magento 2, XML configuration files have areas: global, frontend and adminhtml, crontab, graphql, webapi_rest, webapi_soap. You can find a list of them at Magento\Framework\App\AreaList class, defined via di.xml. Certain xml files can be specified for each area separately and some may not. For instance, event.xml file can be specified for each area (global, frontend, adminhtml, etc.), while module.xml can be specified only for global.

If config file is located at the module etc directory, its values are located in the global area. To specify configuration area, place the config file into etc/<area> folder. This is a new concept, introduced in Magento 2. Previously, in the first version of Magento, the visibility area was defined by a separate branch in XML file. This introduction allows to load configurations for various visibility areas separately. If the same parameters are specified for global and non-global areas (for instance, frontend or adminhtml), they will be merged and loaded together. The parameters, specified in non-global area, or located in etc/<area> folder, have the priority.

Configuration upload is executed in three steps:

  • System level configurations upload. Loading of the files, necessary for Magento 2 launch (like config.php).
  • Global area configurations upload. Loading of the files, located in app/etc/ Magento 2 directory, such as di.xml, as well as files that relate to the global area and are directly located in modules’ etc/ folders.
  • Specific areas configurations upload. Loading of the files, located at etc/adminhtml or etc/frontend folders.

Configuration files are merged according to their full xPaths. Specific attributes are defined in the $ idAttributes array as identifiers. When two files are merged, they contain all the nodes and values ​​from the original files. The second XML file either adds or replaces the nodes of the first XML file.

Each XML file type is validated by the corresponding XSD validation scheme. All validation schemes are in etc / directories of the module. The most important schemes are located in the Magento framework-e (vendor / magento / framework); for example, XSD for acl.xml is located in vendor/magento/framework/Acl/etc/acl.xsd directory.

All Magento 2 configuration files are processed by the Magento\Framework\Config\ *classes. These classes load, combine, validate and process configurations, converting them into the needed format array. If one needs to modify the standard loading procedure, they must create a single or several classes that inherit the interfaces:

  • \Magento\Framework\Config\DataInterface – allows to get configuration value and merge two configurations together. \Magento\Framework\Config\Data class realizes this interface and saves the configuration in cache in order to speed up the repeated website upload.
  • \Magento\Framework\Config\ScopeInterface – allows to specify and get the current scope.
  • \Magento\Framework\Config\FileResolverInterface – runs the config files search, returns the array or iterator. Keys are the absolute paths, the value is their content.
  • \Magento\Framework\Config\ReaderInterface – reads configuration data. \Magento\Framework\Config\Reader\Filesystem is the standard reader.
  • \Magento\Framework\Config\ConverterInterface – converts Merged DOM object into the array.
  • \Magento\Framework\Config\SchemaLocatorInterface – specifies the path to validation schemes.
  • \Magento\Framework\Config\ValidationStateInterface – defines whether DOM validation with schema is needed.

Magento 2 has two types of validation for XML configuration files: before and after the merge. The schemes can be the same or differ from each other.

One can create the following elements for a custom configuration file:

  • Config PHP file
  • Config reader
  • Schema locator

Not all those elements are necessary. Instead of creating them, one can use virtualType in di.xml and create only the following elements:

To make an example of configuration file creation, let us examine product_types.xml file from Magento_Catalog module. This file allows each module to add a custom product type; afterwards, the files will get validated and merge.

  • We begin with XSD file creation. Before the merger, Magento_Catalog uses product_types.xsd validation scheme and product_types_merged.xsd scheme for the merged XML file.
  • Create the configuration PHP file for access to the file data; in our case, it will be Config.php. To provide access to the product_types.xml file data, it implements the Magento\Catalog\Model\ProductType\ConfigInterface interface and realizes all its methods.
  • We should get reader class in Config.php in the constructor. In our case, it’s Magento\Catalog\Model\ProductType\Config\Reader. This is a small class with a certain $_idAttributes attribute. In $fileName variable at the constructor we define the XML file name.
  • Magento\Catalog\Model\ProductType\Config\SchemaLocator implements two methods: getSchema and getPerFileSchema return the path to merged XSD and common XSD files. In the constructor, we define these paths in $_schema and $_perFileSchema attributes.
  • Convertor class creation. In our case: Magento\Catalog\Model\ProductType\Config\Converter it implements \Magento\Framework\Config\ConverterInterface and realizes convert method that converts the merged DOM tree of nodes into the array.

1.4 Demonstrate how to use dependency injection

Describe magento’s dependency injection approach and architecture. how are objects realized in magento.

Dependency Injection is a design pattern based on the inversion of control principle. This pattern centers around relations between the objects and its dependencies. Instead of creating dependencies manually, all the necessary dependencies are passed into the object with the help of external container. This approach allows to avoid strong components coupling, for the object is not required to create custom dependencies. The dependencies container, in its turn, determines which implementations should be passed to the objects at their creation, depending on the necessary behavior or configuration.

Dependency inversion principle claims that high-level classes should use low level objects’ abstractions instead of working with them directly.

Object Manager

Magento 2 applies dependency injection for the functionality, which was offered by Mage class in Magento 1.

ObjectManager is used as dependencies container, configured with di.xml files. ObjectManager is responsible for:

  • Objects’ creation in factories and proxys
  • Return of one and the same object instance at the continuous requests*
  • Selection of the suitable implementation at the interface query
  • Automatic class creation depending on constructor arguments.

* If shared=false attribute is specified for a certain type in di.xml, then a new object will be created at the future requests.

Why is it important to have a centralized process creating object instances?

A centralized process creating object instances decreases code coherency and lowers the incompatibility risk in case the object realization changes.

Identify how to use DI configuration files for customizing Magento

Each module can have a global and an area-specific di.xml file. Area-specific di.xml files are recommended to be applied for dependencies configuration for presentation layer, while global file – for all the rest.

How can you override a native class, inject your class into another object, and use other techniques available in di.xml (such as virtualTypes)?

Abstraction-implementation mappings and class rewrites.

Abstraction-implementation mappings and class rewrites are applied in case the constructor requests the object by its interface. ObjectManager utilizes this configuration to resolve which implementation should be used for the current area.

A similar approach can be used to substitute not only the interfaces, but the classes themselves.

Virtual Types

Virtual Type allows to modify any dependencies arguments and therefore modify class behavior without changing the operation of other classes that depend on the original.

ObjectManager should never be called directly, because Magento Framework makes the call automatically. Factory or proxy classes, as well as unit texts or static and magic methods (wakeup, sleep) can be considered exceptions, for they are majorly generated by the framework automatically.

Magento 2 code contains direct ObjectManager calls, which exist only for backward compatibility and should not be used as an example.

Dependencies compilation

bin/magento setup:di:compile

Magento 2 applies a specific utilita for compiling dependencies of all classes. The utilita creates a file that contains the dependencies of all objects for ObjectManager, based on constructor arguments with the help of php reflection features. Such service classes as factories, proxies and plugins, are generated as well.

1.5 Demonstrate ability to use plugins

Demonstrate how to design complex solutions using the plugin’s life cycle. how do multiple plugins interact, and how can their execution order be controlled.

Magento 2 Plugin (Interceptor) is the class that allows to alter the behavior of other classes by calling the custom mode before, after or instead of conflict method call, allowing to minimize the probability of conflicts between various pieces of code that concern the same functionality.

Plugin Configuration

<module_dir>/etc/di.xml

{ObservedType} – class name, the method that must be altered

{PluginName} – plugin name

{PluginClassName} – plugin class name

sortOrder – plugin call order

disabled – ability to disable the plugin

Plugin Methods

Before methods.

Before methods allow to modify target class method arguments before the method is called.

Namespace Vendor\Module\Plugin;

The name of the plugin method is concatenated ‘before’ and the method name, which arguments must be altered. The first argument of this method is the class, the method of which is called. The rest of the arguments correspond to the called methods arguments, including default values. It is also possible to use “…” token to get all the arguments ( https://www.php.net/manual/en/functions.arguments.php#functions.variable-arg-list.new ). Example:

Before methods should return the arguments array, if they need to be overridden, or null, if there is no need for that.

After Methods

After methods allow to modify the result of the target method.

The first argument, the same as before methods, is target class instance, the second is the returned value of the original method, while the third and further are the original method arguments.

Around Methods

Around methods allow to execute the code before and after the target method in one place.

$proceed argument is PHP closure, that in its turn calls the target method.

Such methods allow to completely substitute the target method.

Plugin Sorting

Plugin sortOrder parameter allows to identify what the order plugin methods will be called in case multiple plugins are observing the same method.

In this case, plugin processing is executed in the following order:

  • Plugin1::beforeMethod()
  • Plugin2::beforeMethod()
  • Plugin3::beforeMethod()
  • TargetClass::method()
  • Plugin3::aroundMethod() (Magento calls the second half after callable)
  • Plugin3::afterMethod()
  • Plugin2::aroundMethod() (Magento calls the second half after callable)
  • Plugin1::afterMethod()
  • Plugin2::afterMethod()

How do you debug a plugin if it doesn’t work? Identify strengths and weaknesses of plugins

Magento 2 generates an Interceptor class for each class that has plugins. This class inherits the original plugins and contains the code that calls the plugins in the assigned order. Therefore, any plugin debug can be started with the Interceptor class.

Plugins enable to modify the application behavior without the need to modify or substitute the original classes, which allows to flexibly impact the application flow.

On the other hand, application of plugins, around methods in particular, complicates code readability and increases stack trace, as well as the non-functioning application, if the plugins are applied without due accuracy. If you do not call $proceed() in around plugin, the plugins whose sortOrder is larger than the current plugin will not be called. The original method will not be called as well.

What are the limitations of using plugins for customization? In which cases should plugins be avoided?

Compared to Magento 1, class rewrites plugins do not inherit the target class, allowing several plugins that modify one and the same method to have no conflicts with each other. However, due to the same reasons, plugins have certain limitations.

Plugins can not be used with:

  • Final methods and classes
  • Protected/private methods
  • Static methods
  • __construct methods
  • Virtual types
  • Objects that are instantiated before Magento\Framework\Interception is bootstrapped
  • Objects that were initialized not with ObjectManager

The main purpose of plugins is to modify the certain method input, output or execution. In case the data is not modified (for instance, when order details are sent to the 3rd party ERP), then it is recommended to apply observers instead of plugins.

1.6 Configure event observers and scheduled jobs

Events are commonly used in applications to handle external actions or input. Each action is interpreted as an event.

Events are part of the Event-Observer pattern. This design pattern is characterized by objects (subjects) and their list of dependents (observers). It is a very common programming concept that works well to decouple the observed code from the observers. Observer is the class that implements Magento\Framework\Event\ObserverInterface interface.

According to https://devdocs.magento.com/guides/v2.3/coding-standards/technical-guidelines.html :

All values (including objects) passed to an event MUST NOT be modified in the event observer. Instead, plugins SHOULD BE used for modifying the input or output of a function.

Therefore, if there is a need to modify the input data, use plugins instead of events.

Demonstrate how to configure observers. How do you make your observer only be active on the frontend or backend?

In Magento 2 there is a special event manager class – Magento\Framework\Event\Manager that fires events. This class can be obtained through dependency injection by defining the dependency in your constructor.

Look for the mentioned notes in the code Magento 2:

$this->eventManager->dispatch(‘event_name’, ['myEventData' => $event_arguments]);

Event Observers in Magento 2 can be configured in a separate file events.xml. It should be created in <module_dir>/etc directory, if observer is associated with globally events, or in <module_dir>/etc/<area> (like <module_dir>/etc/frontend or <module_dir>/etc/adminhtml) if observer to only watch for events in specific area.

In instance attribute we declare observer class name. This class has to implement Magento\Framework\Event\ObserverInterface::execute(Observer $observer) method. The $observer object has an $event object (available through $observer->getEvent() ), which contains the event’s parameters.

Demonstrate how to configure a scheduled job

To demonstrate how to configure a scheduled job, we create in the module a crontab.xml file with the similar content:

Group element determines to which group cron jobs should be tied. Group is declared in cron_groups.xml file and contains group configurations. The events inside the group have a general queue, while several groups can be launched simultaneously. Example:

Job element contains name (name of the job), instance (job class name) and method (job method name in the class) attributes. Also, job contains schedule element ( http://www.nncron.ru/help/EN/working/cron-format.htm ) or config_path (configuration path to the schedule value).

Which parameters are used in configuration, and how can configuration interact with server configuration?

Magento 2 stores database configuration in core_config_data table. This configuration can be overridden:

  • In app/etc/config.php file
  • In app/etc/env.php file
  • In the area variables

To learn more, follow the link: https://devdocs.magento.com/guides/v2.3/config-guide/prod/config-reference-var-name.html

Identify the function and proper use of automatically available events, for example *_load_after, etc.

In Magento1 we can use of automatically available events. For example:

This event is triggered before saving object, if it extends Mage_Core_Model_Abstract class. When we create a new class, which extends Mage_Core_Model_Abstract, we can declare $eventPrefix = “namespace_modulename” and use new event namespace_module_save_before.

We have the same ability in Magento2. In class Magento\Framework\Model\AbstractModel:

In Magento1 and Magento 2 we have the same automatically available events.

[$eventPrefix]_load_before

[$eventPrefix]_load_after

[$eventPrefix]_save_before

[$eventPrefix]_save_after

[$eventPrefix]_save_commit_after

[$eventPrefix]_delete_before

[$eventPrefix]_delete_after

[$eventPrefix]_delete_commit_after

Controllers:

controller_action_predispatch_[ROUTE_NAME]

controller_action_predispatch_[FULL_ACTION_NAME]

controller_action_postdispatch_[ROUTE_NAME]

controller_action_postdispatch_[FULL_ACTION_NAME]

controller_action_layout_render_before_[FULL_ACTION_NAME]

1.7 Utilize the CLI

Describe the usage of bin/magento commands in the development cycle. which commands are available how are commands used in the development cycle.

Magento 2 allows to execute numerous operations using command line interface. It also contains a large number of commands that allow to flush the cache, change deployment mode or reindex the necessary index quickly. To apply the following commands, you should:

  • Login into your Magento 2 server via SSH as Magento file system owner

$ ssh [email protected]

  • Change directory to Magento 2 installation directory

$ cd /var/www/magento/

Afterward, we can use Magento CLI the following way:

$ bin/magento COMMAND

For example, list command will put out a list of available actions:

$ bin/magento list

Demonstrate an ability to create a deployment process

A standard Magento 2 deployment process includes the following steps and commands:

  • Enable maintenance mode – $ bin/magento maintenance:enable
  • Perform database migrations – $ bin/magento setup:upgrade
  • Compile necessary code – $ bin/magento setup:di:compile
  • Publish static files – $ bin/magento setup:static-content:deploy
  • Disable maintenance mode – $ bin/magento maintenance:disable

How does the application behave in different deployment modes, and how do these behaviors impact the deployment approach for PHP code, frontend assets, etc.?

Magento 2 can operate in three possible modes:

  • At the request, static files are copied into pub/static directory and afterwards are put out from it.
  • Exceptions are not put out at the screen and not recorded in log files
  • Enabled automatic code compilation
  • X-Magento-* HTTP response headers are hidden.
  • Exception and backtraces are put out at the screen
  • Automatic code compilation is enabled
  • X-Magento-* HTTP response headers are enabled
  • XML schema validation is enabled
  • Slow application operation due to automatic code compilation on the fly.
  • Exceptions are recorded only in log files and not put out at the screen
  • Static files are put out from cache (the files are generated in advance with $ php bin/magento setup:static-content:deploy command )
  • Automatic code compilation is disabled (it is executed in advance with $ php bin/magento setup:di:compile command )

To learn the current deployment mode, enter the command:

$ bin/magento deploy:mode:show

Changing Deployment Mode

To change the current deployment mode, enter the command:

$ bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

  • {mode} is the required mode (default, developer or production)
  • –skip-compilation – is an optional parameter that allows to skip code compilation after the deployment mode is changed.

When the deployment mode is changed, the var/cache folders will be cleared, except for generated/metadata, generated/code, var/view_preprocessed, pub/static files .htaccess. To avoid this, apply –skip-compilation flag.

Describe how to operate with cache clearing. How would you clean the cache?

There are three ways to clean the cache:

  • bin/magento cache:clean
  • bin/magento cache:flush Execute the bin/magento setup:config:set --http-cache-hosts=SOME_HOST1,SOME_HOST2:PORT2 command beforehand in order to enable cache clearing in varnish. In this command, SOME_HOST1,SOME_HOST2:PORT2 are the addresses of varnish services, divided by a comma.
  • File cache: “rm -rf var/cache/*”, “rm -rf var/page_cache/*”
  • Redis: “redis-cli flushall”
  • Restart services (Varnish, Redis)

In which case would you refresh cache/flush cache storage?

When you clean cache, you do it by tags, and if in cache item is not associated with cache type tag, it will never be removed from storage.

When you flush cache, you remove all cache records in storage. Sometimes it’s more preferred than clean cache.

Describe how to clear the cache programmatically

To clean cache for specific model object, you can use:

\Magento\Framework\Event\ManagerInterface->dispatch(‘clean_cache_by_tags’, [‘object’ => $model]);

To clean entire cache type, you can use:

\Magento\Framework\App\Cache\TypeListInterface->cleanType($typeCode)

To invalidate entire cache type, you can use:

\Magento\Framework\App\Cache\TypeListInterface->invalidate($typeCode)

The cache tags are generated at block level, with each block class implementing the IdentityInterface which means they must implement a getIdentities method, which must return a unique identifier. For example:

When the front controller response is ready, the FPC combines all the block tags from the layout, and then adds them to the response in a X-Magento-Tags custom HTTP header. The different FPC options then handle the header differently. Varnish stores the header along with the rest of the page when it is cached, so no additional work is required. The built-in option however needs some additional code to pull the tags back out of the X-Magento-Tags header so that they can be associated with the response when it is stored in the configured storage (e.g. Redis).

What mechanisms are available for clearing all or part of the cache?

You can clean cache from admin panel. System->Cache Management

Magento 2 Certified Professional Developer Guide Screenshot 11

In this page you can clean/enable/disable cache by cache types or full cache. Also you can clean cache from console:

bin/magento cache:clean – clean cache,

bin/magento cache:clean <cache_type> – clean cache only for <cache_type>

bin/magento cache:status – you could see statuses and types of cache

bin/magento cache:enable <cache_type> – enable cache

bin/magento cache:flush – flush cache

pm-dubina

Let’s connect

Have a project? Fill out the form and we’ll reach out to you. Get a free proposal now.

Privacy Overview

Lobbster

  • MAGENTO ECOMMERCE DEVELOPMENT SERVICES
  • B2B MAGENTO DEVELOPMENT SERVICES
  • MAGENTO CONSULTING
  • HIRE A DEDICATED TEAM
  • START A PROJECT

Lobbster

Magento 2 Architecture

  • October 2, 2013 | 4 MIN READ
  • Sinisa Colic | CTO and Magento Solution Architect

Magento developer working a big eCommerce project on his PC

Let’s get familiar with Magento 2 architecture and terminology.

Magento has a very specific architecture, designed with the intent of making the source code as modularized and extensible as possible (this mostly refers to dependency injection and the use of design patterns such as the Model-View-Controller (MVC), which will be more thoroughly covered in the sections below). 

This makes it easy to adopt, and more importantly,  swiftly customizable for the specific needs of each project. Moreover, new functionalities, which are often incorporated in the form of extensions, work as standalone units (here it’s important to emphasize that although extensions are usually separate components, they are not completely independent of the core system). This supports the ever-changing eCommerce trends and underpins a variety of business strategies and approaches. 

If you are substantially customizing the base of your Adobe Commerce or Magento Open Source product, module development will most probably be your top priority. Code is organized in modules that support a particular task or feature. A module’s code can provide some additional functionalities or modify the existing ones and affect how your store looks and functions. 

Other approaches to Magento base product customization include theme development, integration with APIs, and customization through the use of configuration options.

The Model View ViewModel (MVVM) Architecture Pattern

Some Magento Architecture elements being analyzed on a laptop.

Magento 2 has a Model View ViewModel (MVVM) architecture pattern. This MVVM architecture provides a much more robust separation between the Model and View layer, as it is closely related to the Model View Controller (MVC). 

Let’s quickly explain the logic behind MVVC:  

  • The Model holds the business logic of the application and depends on an associated class (the ResourceModel) for database access. Models rely on service contracts to expose their functionality to the other layers of the application.
  • The View is the structure and layout of what a user sees on a screen – the actual HTML. This is achieved in the PHTML files distributed with modules. PHTML files are associated with each ViewModel in the Layout XML files, which would be referred to as binders in the MVVM dialect. The layout files may also assign JavaScript files to be used on the final page.
  • The ViewModel interacts with the Model layer, exposing only the necessary information to the View layer. In Magento 2, this is handled by the module’s Block classes. Note that this was usually a part of the Controller role of an MVC system. On MVVM, the controller is only responsible for handling the user flow, meaning that it receives requests and either tells the system to render a view or redirects the user to another route.

The modules function with the core product code, and if you want to understand the basics of Adobe Commerce and Magento Open Source product organization, firm grapes of layered software patterns are essential.

Magento 2 Layers

A nice cozy office with a big monitor on the central table showing some MySQL scheme.

Magento 2 consists of 4 layers:  

1) Presentation Layer

The presentation layer is the uppermost layer of Magento 2 architecture. When you interact with Magento’s web interface, you are interacting with the presentation layer code. This layer contains all controllers and Views elements such as – layouts, templates, blocks, css.js, etc, and is mostly used by web users and system administrators.

2) Service Layer

The service layer is the middle layer among the presentation layer and domain layer. It provides a bridge between the presentation and domain layer and resource-specific data. The service layer implements service contracts, which are defined by using the PHP interface. These service contracts allow us to add or change the business logic resource model without breaking the system. This is done using the dependency injection configuration file (di.xml).

The service layer grants access to API (REST/SOAP or other modules). It resides above the domain layer and below the presentation layer.

3) Domain Layer

The domain layer is responsible for business logic. It does not contain database-specific or resource-specific information. The domain layer defines the generic Magento data objects or models which contain business logic. This logic describes which operation can be performed on particular types of data, such as Customer objects.

To retrieve the data from the database with the MySQL calls, each domain-layer model has a reference to a resource model.

4) Persistence Layer

This robust platform uses the active record pattern for saving. In Magento, the model object contains a resource model that compares the object with one or more database records. The resource model is responsible for performing functions such as:

  • Executing all CRUD requests – the resource model contains the SQL code for executing these queries
  • Performing additional business logic (for example, a resource model can perform data validation, run processes before or after saving data, or perform other operations on the database)

If you expect to return multiple items from a database query, you must implement a special type of Resource model, known as collection. Collection is a class that loads several models into a structure similar to an array, based on a set of rules.

I hope that this gives you a wider image of Magento 2 architecture and how this eCommerce platform accesses and manipulates data.

presentation layer for magento

About The Author

Related posts.

7 Magento eCommerce Trends for 2024. That You Need to Know

Comments are closed.

Privacy Overview

  • Release Notes
  • Magento Architecture
  • Installation Guide
  • Component Manager and System Upgrade Guide
  • Configuration Guide
  • Migration Guide
  • JavaScript Developer Guide
  • PHP Developer Guide
  • Magento Testing Framework Guide
  • Magento Admin Pattern Library
  • Get Started with Magento Web APIs
  • REST Reference
  • SOAP Reference
  • Coding Standards
  • Contributor Guide
  • How Do I...?

Presentation Layer

Presentation layer.

When you interact with the Magento web interface, you are directly working with presentation layer code. The presentation layer contains both view elements (layouts, blocks, templates) and controllers, which process commands to and from the user interface). Presentation code controls web user interaction with the product and its appearance. You can extensively customize the user interface by using HTML, CSS, and .phtml files to modify elements of the presentation layer.

Who uses the Presentation layer?

Three types of Magento users interact with Presentation layer code. Magento uses areas to efficiently make web service calls, loading only the dependent code that is required for the particular type of user. Types of users and their associated areas include:

Web users interact with the store front, where they can see the View model of data displayed by Magento and interact with product UI elements to request data for view and manipulation. These users work within the ( frontend ) area.

System administrators customizing a storefront can indirectly manipulate the presentation layer by, for example, adding themes or widgets to the front end.

Web API calls can be made through HTTP just like browser requests, and can be made via AJAX calls from the user interface.

Presentation layer components

One helpful way of understanding the Magento presentation layer components is by examining Magento themes . Magento themes organize both the visual aspect of your storefront and certain aspects of product behavior.

Each theme resides in a unique directory and contains custom page layouts, templates, skins, and language files that work together to create a distinct user experience.

For an extensive introduction to theme elements and an overview of how to extend and override the default Magento themes, see the Frontend Developer Guide .

Magento generates the HTML for a page to display to a user from a tree of view elements.

View elements fall into two main categories: Blocks and containers.

Blocks can generate dynamic content and can contain named child view elements that are similar to arguments being passed in. (The as attribute holds the child view element names for the parent block to reference them by.)

Containers collect an ordered group of children view elements.

The brower forms a product web page by asking the view element tree to render itself into HTML. Containers and blocks emit HTML that encloses their children appropriately. Blocks can generate their content using static HTML, Knockout JS scripts, and PHTML.

How Presentation code calls other layers

Presentation code typically calls service contracts, particularly for a store front. However, presentation code is occasionally dependent on a specific implementation that requires the presentation code to directly call the business logic layer. For example, the Admin UI screens are often tightly linked a specific implementation and are not generic across implementations.

The View layer calls code from the Model to get information about the state of the application (for example, the price of a product). Typically, the way it accesses the Model is through service contracts.

Presentation layer flow

Web users interact with components of the presentation layer to select actions that initiate calls to the underlying product layers. Presentation layer components make calls to the Service layer, which in turn sends requests to the Domain (or business logic) layer.

Related topics

Architectural diagrams

Architectural layers overview

eCommerce platform, solutions and services to help grow your business.

  • Magento Facebook
  • Magento Twitter
  • Magento Linkedin
  • Magento Google+
  • Magento Youtube

GET THE LATEST NEWS

See Magento in the news, find press releases and resources for media.

Please submit a valid email.

Thank you for submitting your email.

Get in touch

We'd like to hear from you! Call us, send us an email or talk to sales.

  • Privacy Policy
  • Terms of Service
  • License/Trademark FAQ

Javatpoint Logo

Magento 2 Tutorial

Install & configure, magento 2 store setup, payment setup, order processing.

Interview Questions

PHP Technologies

JavaTpoint

  • Send your Feedback to [email protected]

Help Others, Please Share

facebook

Learn Latest Tutorials

Splunk tutorial

Transact-SQL

Tumblr tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras tutorial

Preparation

Aptitude

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS Tutorial

Cloud Computing

Hadoop tutorial

Data Science

Angular 7 Tutorial

Machine Learning

DevOps Tutorial

B.Tech / MCA

DBMS tutorial

Data Structures

DAA tutorial

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

html tutorial

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

C Programming

C++ tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

RSS Feed

  • Magento consulting
  • Magento development
  • Extension development
  • UI/UX design
  • Theme development
  • Migration to Magento 2
  • Integration
  • Maintenance & support
  • Event Management
  • Limit Guest Coupon

We’ve gathered common questions about Magento and are happy to share our answers.

  • About Magento What is Magento? What is Magento 1? What is Magento 2? When was Magento 2 released? What is Magento Open Source? What is Magento Commerce? What is Magento Commerce Cloud? How do you pronounce Magento? What is Magento used for? Who owns Magento? Who bought Magento? Where is Magento from? When did Adobe buy Magento? Who uses Magento? How many Magento sites are there? What is Magento Connect? How many Magento certified developers are there?
  • Magento installation How to install and set up Magento? How to install Magento Commerce? How much time does Magento installation take?
  • Why Magento Why Magento? Why Magento Enterprise? When should I use Magento?
  • Magento vs. others Which is better: Magento or OpenCart? Which is better: Magento or WooCommerce? Which is better: Magento or Shopify? Which is better: Magento or BigCommerce? Which is better: Magento or Volusion?
  • Magento cost How much does Magento cost? Why is Magento Commerce so expensive? How much does Magento B2B cost? How much does it cost to launch a Magento site?
  • Magento tech What language is Magento written in? What database does Magento use? How many architecture tiers are there in Magento? Which Ubuntu version should I use for Magento? What is Magento based on? What is Varnish in Magento? What are the hardware requirements for Magento?
  • Magento hosting What is the best Magento hosting? Is there a free Magento hosting?
  • Magento themes What is a Magento theme? How to install a Magento 2 theme? How to uninstall a Magento 2 theme?
  • Magento extensions What is a Magento extension? How to install a Magento extension? How to uninstall a Magento extension?

How many architecture tiers are there in Magento?

There are four architectural tiers in Magento: the domain layer, the persistence layer, the presentation layer, and the service layer. Thoroughly understanding the Magento architecture tiers or layers can help developers better customize the platform to their clients’ needs.

Magento 2 architecture tiers (layers)

Domain layer.

Magento’s domain layer holds the business logic belonging to a Magento module. Typically, it doesn’t contain any database- or resource-specific information and only defines generic data objects or models containing the business logic.

The logic contained in the domain layer defines the operations performed on various types of data like a customer object. Optionally, they may also include implementing service contracts, although this isn’t necessarily defined as their role.

A module’s domain-layer code can be accessed in one of the following three ways:

  • By using service contracts to communicate with the layer and passing data using strongly typed objects. This is the most optimal method of communicating with the domain layer and one that is also recommended for Magento.
  • By directly calling one module from the other. This is sometimes unavoidable; however, it is generally not recommended for most situations.
  • By allowing the domain layer code in one module to plug into another using either event hooks, plugins, or di.xml files.

Although using service contracts is the recommended method, an individual store’s configuration and needs usually define which of the three methods is used to access a module’s domain layer code.

Persistence layer

Magento employs the active record pattern strategy for persistence. This pattern is used to access data stored inside a database by mapping an object to one or more rows in the database.

This data is mapped by resource models responsible for performing actions such as creating, reading, updating, and deleting database requests using SQL code stored inside them. They also perform other business logic such as data validation, starting processes before or after saving data, and some database operations.

Usually, a simple resource model will only define and interact with a single database table. When you wish to return multiple items from a database query, you can use a ‘collection’, that is a class capable of holding numerous models in an array-like structure.

Occasionally, some objects such as product or customer data may contain many attributes or have objects with varying numbers of attributes. In such cases, the objects can be constructed using the Entity-Attribute-Value model that spreads attributes over many MySQL tables. In Magento, only the Catalog, Customer, and Order resource models use EAV attributes.

Presentation layer

The top-most layer of the Magento architecture is called the presentation layer. This is the layer that end users usually interact with in the form of the web interface. It comprises both view elements such as layouts, blocks, templates, and controllers responsible for processing commands in the user interface.

The presentation layer code controls the product’s frontend appearance and its user interactions. It can be fully customized using a mix of HTML, CSS, and PHTML files to alter the elements inside the presentation layer.

This layer is generally used by web users when interacting with a storefront, system admins when customizing a storefront using themes or widgets, and by web API calls made through HTTP requests and AJAX calls from the user interface.

The best way to understand the Magento presentation layer is by examining Magento themes and analyzing how the themes organize the design and functionality of a storefront. Magento themes reside in unique directories containing a mix of customized page layouts, templates, skins, and language files that work in unison to create an appealing end-user experience.

Service layer

The service layer in Magento is responsible for communicating between the top-most presentation layer and the domain layer. It uses service contracts defined using PHP interfaces to determine code behavior, provides easy access to the API framework in Magento, and provides a stable API that other modules can call into.

Any calls made by users working with the storefront or by web service interfaces are generally routed through the service layer. External services can access the service layer and get information-rich data structure using a single API call. Using an XML or JSON file, developers can provide external applications with access to the service layers PHP APLI to make requests with SOAP and REST calls.

Layered software architecture is a popular and frequently used principle in software development as its use in application design offers numerous advantages.

In Magento, the layered architecture provides a clear separation between the backend and the frontend code. This enables the alteration of the frontend design without affecting the backend business logic.

eCommerce Blog

Headless magento – an introduction & examples.

Paul Rogers

  •  – November 16, 2019

Headless commerce is everywhere at the moment – with merchants, eCommerce platforms, technology partners and CMS providers focusing heavily on readying for this shift. The concept of ‘headless’ provides benefits around performance, serving different formats, development flexibility and fairly often achieving best-in-breed CMS features (via integrating with a headless CMS or traditional CMS) and more. The headless eCommerce trend will only continue to grow and there are new examples of bigger and better-known sites using Magento for headless builds every week at the moment.

Headless eCommerce is essentially the decoupling of the front-end and the back-end of your store, which communicates via requests and retrieving information via APIs. The move from a monolithic approach provides opportunities to integrate different solutions to meet your business requirements, as well as the benefits outlined above.

In two previous posts, I provided a brief introduction to headless eCommerce and examples in the context of Shopify implementations . In this post I am going to provide examples of Magento implementations, along with the technology they’re using.

Why go headless

Customer shopping behaviour is changing all the time – when in the past shoppers would have purchased directly from a desktop site, now customers consume content through a host of interfaces including smartphones, tablets, in-car technology (to one extreme) and much more. If you’re looking to achieve best-in-class mobile UX, have complex requirements around the front-end of your store or are generally invested in providing a rich UX across all devices, then headless may be the route for you. 

The benefits of a headless approach means greater flexibility, significantly improved performance and the ability to tailor content and a greater user experience to customers. The separation of the front-end and back-end also means that some changes to your site can be implemented without having to worry about back-end development, as you would have to have done in the past, meaning greater agility.

Whilst there is a wide range of benefits of going headless (without yet mentioning PWA), there are also some cons – which, in my experience are around loss of features, lack of available APIs and generally development being made more complex and requiring different skillsets. Not all third parties are geared up for headless builds yet as well, which can be an issue. My general stance has been to wait until platforms (including Magento) improve their readiness for headless and the eco-system has caught up with innovators. That said, there are some excellent examples of headless Magento websites – a number of which can be seen below.

Magento as a headless solution

Magento is a good fit for headless on paper – it’s highly extensible and it’s often associated with performance issues / slower load times (not as much in recent times) and even minor front-end development tasks can be heavily impacted by the back-end of the platform. These are two of the biggest reasons I’ve heard Magento agencies use – giving them and the merchant for agility on the front-end and much faster load times.

There are already a wide range of options for the front-end / presentation layer with Magento, with the most common ones currently being:

  • PWA Studio – Magento’s own framework that’s being built around the platform to enable users to build stores as progressive web apps. This is very new but something to keep an eye on as it’s obviously backed by Magento (with lots of community involvement) and is likely to be tightly integrated. It’s also built solely for Magento, unlike most other options.
  • Bespoke – lots of agencies / developers are building out their own frameworks, which can then be used across different projects. Most of these are based on modern javascript frameworks, such as Vue.js or React.js. The disadvantage for a merchant is that they’re semi-locked in with an agency, as the solution is essentially proprietary.
  • Third party framework – there are many new frameworks popping up around Magento (and other platforms), but the most commonly used ones are VueStorefront and Deity. VueStorefront has been implemented by a number of well-known Magento sites and are building a strong community and eco-system around it.
  • Headless CMS – with other platforms, solutions like Prismic or Contentful are widely used, but this hasn’t been as much the case with Magento. This is becoming more common and some of the bigger sites building headless sites at the moment are adopting these. Made.com is an example of a very large Magento store building a headless site using Prismic as a headless CMS.

Magento is a really good fit for the back-end of a headless build, be it via a separate framework or a headless CMS. The only thing to remember is that not every Magento feature has fully built out APIs (as with an API-first platform or some of the more headless-focused platforms), which can result in additional development work. Magento’s page builder or content staging and preview are good examples of features that fall under this. This, along with the other development overheads, are the only counter arguments to going headless with Magento – however, lots of people (particularly Tom & Co, who have been building headless Magento sites using their own framework for years) have overcome this and have developed additional modules or started combining other solutions (like Contentful for example) to improve affected areas.

In the below examples Magento is the eCommerce engine, however, the presentation layers run independently, via different solutions. Magento also provide more information on their headless offering here .

Me + Em – Magento + bespoke headless framework (by Limesharp)

presentation layer for magento

This editorial rich site showcases Me+Em’s core product offering of flattering, functional and high quality clothing. Me + Em is likely one of the larger headless stores live on Magento and the front-end experience is very custom. 

Zadig & Voltaire – Magento + VueStorefront

presentation layer for magento

This is one of the more recently launched examples of headless Magento, leveraging the widely-used VueStorefront framework. Zadig & Voltaire have talked a lot about their shift to a modern technology stack and their CTO, Jonathan Ribas did a talk about the recent Magento Live event I went to – where he seemed positive about the experience.

Oliver Bonas – Magento + bespoke front-end framework (Tom & Co)

British lifestyle brand Oliver Bonas has been one of the poster child examples of headless Magento, launching over two years ago (on Magento 1) on Tom&Co’s Angular-based framework. This has been one of my favourite Magento stores for a long time and both the speed and general UX is very impressive. This is another big store that’s likely one of the highest turnover examples here.

presentation layer for magento

Agent Provocateur – Magento 2 commerce (headless) + bespoke Angular front-end (Tom & Co)

A business based around glamour was always going to have a superb storefront, and this is another Tom&Co example that really packs a punch.

presentation layer for magento

Topps Tiles – Magento commerce + bespoke front-end framework (Tom & Co)

Topps Tiles is a pretty complex front-end experience and they’re using a headless approach to improve mobile UX and simplify the shopping experience. This is probably one of the more advanced headless Magento implementations I’ve seen, with various choices around colours, design, materials, size and more throughout the buying process being a lot more custom than the average headless project.

presentation layer for magento

Biscuiteers – Magento + bespoke front-end framework (Tom & Co)

Another example of a Tom & Co headless Magento site that demonstrates the speed benefits of this approach very well.

presentation layer for magento

les boys les girls – Magento + VueStorefront

Relatively basic example of a headless Magento Open Source build, featuring VueStorefront again.

presentation layer for magento

Eleganza – Magento + PWA Studio

High-end menswear brand Eleganza’s minimalistic style is conveyed really nicely on their headless Magento store – which is very fast and easy-to-use. There are lots of good examples of considered interactions on this site and it’s one of the only PWA studio examples I’ve seen on a production environment at this stage.

presentation layer for magento

UK Meds – Magento + Bespoke Storefront (JH)

Given their unique and complex product and service mix, UK Meds use a headless approach to tailor their storefront to their customer’s specific needs. Good example of a pretty solid headless site that has a really strong mobile UX.

presentation layer for magento

These are just some of the sites I’ve looked at that have been built as headless Magento implementations – if you have any others you’d like me to add, please feel free to add them in the comments or email me. I’ll also update as I think more examples.

Paul Rogers

Paul Rogers

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Service layer

What is a service layer.

The service layer provides a bridge between the presentation layer and the domain layer and resource-specific data. This is implemented using service contracts , which are defined using PHP interfaces.

In general, the service layer:

Resides below the presentation layer and above the domain layer.

Contains service contracts, which define how the implementation will behave.

Provides an easy way to access the REST/SOAP API framework code (which also resides above the service contracts). You can bind service contracts to web service APIs in configuration files — no coding required.

Provides a stable API for other modules to call into.

Who accesses the service layer?

All calls from web service interfaces, or users working with your storefront (that is, controller-initiated requests), are typically routed through the service layer. We strongly encourage the use of service contracts to call business logic.

External applications can make requests for business logic with simple SOAP and REST calls. With some simple XML or JSON, you can expose the service layer’s PHP API and make it accessible to REST or SOAP web services. Once implemented, a web service can make a single API call and return an information-rich data structure.

Service contract clients include:

Controllers (initiated by actions of users of the storefront)

Web services (SOAP and REST API calls)

Other Magento modules through service contracts

Service contract anatomy

The service contract of a module is defined by the set of interfaces in the module’s /Api directory.

This directory contains:

Service interfaces in the /Api namespace of the module ( Catalog API ).

Data (or entity ) interfaces in the Api/Data directory ( Catalog API/Data []). Data entities* are data structures passed to and returned from service interfaces.

Files in the data directory contain get() and set() methods for entries in the entity table and extension attributes.

Typically, service contracts provide three distinct types of interfaces:

Repository interfaces

Management interfaces

Metadata interfaces

However, there is no requirement that service contracts conform to all three patterns.

Advantages of service contracts

Service contracts allow you to add a new customer extension that adds or changes business logic-level resource models without breaking the system.

This is done using the <preference> element in a custom module’s dependency injection configuration file ( di.xml ) file.

The di.xml file specifies which PHP class to use for the interface Magento\Customer\Api\CustomerRepositoryInterface .

Another module can change this interface file by specifying a different class name. However, if the client code uses the interface definition only, no class change is necessary.

Related topics

  • Architectural diagrams
  • Architectural layers overview
  • Become a Contributor
  • Privacy Policy
  • Terms of Service
  • License/Trademark FAQ
  • Release Notes
  • Third-Party Licenses

Magento 2.x Learning & Knowledge & Troubleshooting

Explain Shopify Plus or Shopify Advanced Features

Shopify Plus or Shopify Advanced Features ::

Step [1] – Advanced customization: Shopify Plus allows for greater flexibility in customizing your online store. You can access and modify the platform’s HTML, CSS, and JavaScript to create a unique storefront that aligns with your brand identity and customer experience goals.

Step [2] -Dedicated support: Shopify Plus customers receive priority support with access to a dedicated account manager who can provide assistance with technical issues, platform customization, and strategic guidance to help grow your business.

Step [3] -Scalability: Shopify Plus is built to handle high levels of traffic and sales volume, making it suitable for businesses experiencing rapid growth or expecting seasonal fluctuations in demand.

Step [4] -Robust Integrations: With Shopify Plus, you have access to more than 2,000 apps and integrations through the Shopify App Store. This allows you to extend the functionality of your store with features such as advanced analytics, marketing automation, inventory management, and more.

Step [5] -Multi-channel selling: Shopify Plus enables you to sell across multiple channels, including your online store, social media platforms, marketplaces like Amazon and eBay, and even in-person with Shopify’s POS system.

Step [6] -Customizable checkout: You can create a customized checkout experience to optimize conversions and reduce cart abandonment. This includes the ability to add custom fields, offer multiple payment options, and streamline the checkout process for your customers.

Step [7] -Enhanced security and compliance: Shopify Plus offers industry-leading security features, including Level 1 PCI compliance, SSL encryption, and automatic backups, to help protect your customers’ data and ensure secure transactions.

Step [8] -Automation and workflows: With Shopify Flow, you can automate repetitive tasks and create customized workflows to streamline your business operations. This includes automating order processing, inventory management, customer segmentation, and marketing campaigns.

Step [9] -Enterprise-level analytics: Shopify Plus provides access to advanced analytics and reporting tools to help you track key performance metrics, identify trends, and make data-driven decisions to optimize your business strategy.

Step [10] -Launchpad (Promotional): Shopify Plus includes Launchpad, a tool that allows you to schedule and automate product launches, flash sales, and promotional campaigns. This helps you efficiently manage large-scale events and maximize revenue opportunities.

What is B2B2C & Explain Briefly with Examples

presentation layer for magento

Business to business to consumer  (B2B2C)::

B2B2C = Manufacturer (Business1) + Distributor ( (Business 2) + Customers

B2B2C describes business relationships in which two companies partner to offer services to consumers.

The First B in B2B2C

This is the first business to get into the whole chain of businesses, and they hope to acquire a bulk of customers. Instead of approaching a new customer every time,

The Middle B in B2B2C:

The intermediate business could have different reasons to connect the other business with the customer. The middle B usually make money by charging a commission or share the profits from the products or services provider.

The C in B2B2C:

The End Users or Consumers, those are purchasing products or services for their use

Examples relationships between Grocery Stores and Delivery Services to offer consumers online shopping and home delivery.

online retailer who sells smartphone accessories, but instead of approaching the customer by itself, the online retailer connects and approaches some franchised-mobile phone stores, the retailer ties up with the mobile phone stores to sell their products to the customer.

Explain Shopify Architecture

Shopify is a subscription-based software-as-a-service (SaaS) sales platform.

Shopify uses Ruby on Rails, MySQL, Redis, and memcached for its backend system. It also uses Go and Lua for performance critical for backend parts.

Shopify uses React with GraphQL APIs for its frontend.

Shopify pod:

A Shopify pod contains data for one to many shops. It’s a complete version of Shopify that can run anywhere in the world.

Theme architecture::

A Shopify theme controls the style, organization, and features of a merchant’s online store.

Explain Shopify Admin Panel Overview Step By Step

The following below steps explain Shopify Admin Panel Overview Step By Step

Step [1] – Once Login Shopify Admin Dashboard displaying as below.

Left Panel display all Menu Items

  • Sales Channel –> Online Store
  • Sales Channel –> Point of Sale

presentation layer for magento

Step [2] – Click on Left Panel Orders

  • Orders:: Display listing of all Orders Listing
  • Drafts:: Display listing of all Draft Orders Listing
  • Abandoned Checkouts:: Display Those customers whom added products in Cart & trying to checkout but they did not succeed payment process for their added shopping cart products

presentation layer for magento

Step [3] – Click on Left Panel Products

  • Collection:: Display list of all Products (Physical Products, Digital Products(MP3, Video etc.), Service Products(Movie Tickets, Online Coaching, Events Registration)
  • Inventory:: When you enable inventory tracking on your products, you can view and adjust their inventory counts here.
  • Purchase Orders::Track and receive inventory ordered from suppliers.
  • Transfers:: To create a transfer you’ll need more than one location, Move and track inventory between your business locations
  • Gift Cards:: Supports all Gift Cards type products (Physical, Virtual, [Virtual + Physical] )

Step [4] – Click on Left Panel Customers

Manage customer details, see customer order history, and group customers into segments.

Segmentation applied on the bases of

  • Customer’s address
  • Customer’s Order History
  • Customer’s Shopping Cart Content
  • Customer’s Age
  • Customer’s Gender

presentation layer for magento

Step [5] – Click on Left Panel Content

  • Metaobjects:: Metaobjects allow you to group fields and connect them to different parts of your store. Use them to create custom content or data structures.
  • Files:: Upload and manage your files & can be images, videos, documents, and more.

Step [6] – Click on Left Panel Customers

Display Sales Details as Total Sales, Sales by Channel, Average Orders etc.

  • Reports:: Display Sales, Customers, Cart, Gross Profits etc.
  • Live View:: Display live store view as graphics view.

Step [7] – Marketing:: Display Marketing related things

  • Campaigns:: Display Campaigns listing
  • Automations:: Marketing automations are set up once and run for as long as you want.

Step [8] – Discounts::

Create discount codes and automatic discounts that apply at checkout. You can also use discounts with compare at prices.

Step [9] – Sales channels :: having Two Parts

[a] Online Store

presentation layer for magento

[b] Point of Sale

presentation layer for magento

Step [10] – Apps::

Once you need to Install third party plugins click on Apps & search your desired plugins as per your Business Need.

presentation layer for magento

Step [11] – Settings::

By Settings page, you can manage your Shopify subscription plan, store type, and store status.

On this page Update your plan Change your store address Change your store type Change your store owner account email Change your store’s customer-facing email address Change the store owner’s profile

presentation layer for magento

Step [12] –

Step [13] –

Step [14] –

Step [15] –

Step [16] –

Step [17] –

Step [18] –

Step [19] –

Step [20] –

Step [21] –

Step [22] –

Step [23] –

Step [24] –

Step [25] –

Step [26] –

Step [27] –

Step [28] –

Step [29] –

Step [30] –

Step [31] –

Step [32] –

Step [33] –

Step [34] –

Step [35] –

Step [36] –

Step [37] –

Step [38] –

Step [39] –

Step [40] –

Step [41] –

Step [42] –

Step [43] –

Step [44] –

Step [45] –

Step [46] –

Step [47] –

Step [48] –

Step [49] –

Step [50] –

How To Setup Facebook and Instagram in Shopify

presentation layer for magento

The following below steps to setup Facebook & Instagram plugins in Shopify

Step [1] – Go to your Shopify admin -> Left Side Panel

Click on Settings > Apps and sales channels.

Step [2] – From the Apps and sales channels page,

Click on Shopify App Store.

Step [3] – From the Shopify App Store,

Search for  Facebook  & Instagram

Step [4] – Once Search applicable for Facebook & Instagram

Click Add channel or Add app.

Step [5] – Click Start set up on the feature that you want to install first.

Step [6] – Click Connect account.

Step [7] – Sign in to your Facebook account.

Step [8] – Connect the Facebook assets that are required to set up the features that you want.

Step [9] – Accept the terms and conditions.

Step [10] – Click Finish setup.

How to Setup Shopify Store

The following below steps need to follow to setup Shopify Store

[1] – Sign up For Shopify:

Browse Shopify website and sign up for an account. You’ll need to provide basic information about yourself and your store business

[2] – Set up Your Store:

Once you’ve created an account, you’ll be directed to the Shopify admin dashboard. Here, you can begin setting up your store by adding details such as your store name, address, currency, and payment gateway preferences.

[3] – Choose a Theme:

Shopify offers a variety of themes that you can use to customize the look and feel of your store. Browse through the available themes and select one that fits your brand and aesthetic preferences. You can customize the theme further to match your branding.

[4] – Add Products:

After setting up your store, you can start adding products. In the Shopify admin dashboard, navigate to the “Products” section and click on “Add product” to add your products. You can add product details such as title, description, price, images, and variants.

[5] – Set up Payments:

Shopify supports various payment gateways, including Shopify Payments, PayPal, Stripe, and others. Set up your preferred payment gateway to accept payments from customers.

[6] – Configure Tax Settings

Set up your shipping settings, including shipping rates, shipping zones, and carrier integrations if applicable. You can specify shipping rates based on factors like weight, price, or location.

[7] – Configure Shipping Settings:

Create and customize your store policies, including terms of service, privacy policy, and refund policy. These policies help establish trust with your customers and outline expectations for transactions.

[8] – Create Important Static Pages / Blogs for Your Store:

Create Static page as Privacy / Policy, Terms & Conditions, Shipping Policy, Payment Policy & Blog as per your requirement

[9] – Install Shopify Third Party Plugins as Per Needed::

Install Shopify third Party Plugins as per your Business store requirement

https://apps.shopify.com/

presentation layer for magento

[9] – Customize Policies:

[10] – Launch Your Store:

Once you’ve completed the setup process and customized your store to your liking, you’re ready to launch. Review your store settings, double-check everything is in place, and then click on the “Launch” button to make your store live.

[11] – Market Your Store:

After launching your store, focus on marketing and promoting your products to attract customers. Utilize various marketing channels such as social media, email marketing, content marketing, and search engine optimization (SEO) to drive traffic to your store.

[12] – Manage Your Store:

Regularly monitor your store’s performance, analyze sales data, and make adjustments as needed to optimize your store for success. Continuously engage with your customers, address their inquiries and feedback, and strive to provide a positive shopping experience.

How Do Identify The Project is Running off-Track

presentation layer for magento

The following below steps of off-track involves monitoring various aspects of the project against the planned objectives, timelines, and budgets.

Missed Deadlines: If milestones or deadlines are consistently missed or if tasks take longer to complete than planned, it could indicate that the project is falling behind schedule.

Budget Overruns: Exceeding the allocated budget or spending more resources than planned without corresponding progress in the project’s deliverables is a clear indication of being off-track financially.

Scope Creep: If the project scope expands beyond its original boundaries without proper documentation and approval, it can lead to delays and resource overruns.

Low Quality Deliverables: If the quality of the project deliverables is below the expected standard, it might indicate that the project is not progressing as intended.

Lack of Communication: Poor communication among team members, stakeholders, or project managers can lead to misunderstandings, delays in decision-making, and ultimately, project setbacks.

Resource Constraints: If the project team lacks necessary skills, expertise, or resources to complete tasks effectively, it can result in delays and compromise the project’s success.

Risk Events: If significant risks materialize or if there is a failure to identify and mitigate potential risks, it can lead to unexpected issues that derail the project.

Stakeholder Dissatisfaction: Negative feedback or lack of engagement from stakeholders may indicate that their expectations are not being met or that the project is not delivering the desired outcomes.

Decreased Team Morale: A decline in team motivation, increased stress levels, or conflicts among team members can be indicators of underlying issues that are affecting project progress.

What are Difference Between SQL & NoSQL

The following below difference between SQL & NoSQL

How Do Define Magento 2.x or Adobe Commerce Simple Architecture

Magento 2.x or Adobe Commerce Architecture explain here very simple way as below.

presentation layer for magento

Step [1] – Presentation Layer::

The top layer of Magento 2 architecture is the presentation layer. When we interact with Magento’s web interface

Step [2] – Service Layer::

The middle layer and domain layer is the service layer. It offers a connection between the presentation and domain layer

Step [3] – Domain Layer::

The domain layer represents business logic, The domain layer defines the generic Magento databases or business logic models.

Step [3] – Persistence Layer::

Persistence Layer represents CRUD (Create, Read, Update, and DELETE) from database

What are Virtual Type & Type of DI.xml in Magento 2.x or Adobe Commerce

Virtual Type & Type of DI.xml :: The di. xml supports two types of nodes which are a node type and a node virtualtype

  Virtual Type & Type of DI.xml:: Virtual Type is considered as a perfect method instead of the type  . Virtual types are similar to the types but provides additional flexibility as they allow defining a virtual class.

Type adjusts existing classes, whereas Virtual Types creates a new class . 

Virtual Types  allows us to modify existing classes without affecting the other classes and without having to create a new class file (it isn’t necessary but if we want then we can create it as well)

virtual Type accepts two attributes – name and type . Name is the virtual Type’s name and type is an existing class we use to create the virtual Type

Difference Between Virtual Type & Type of DI.xml ::

Virtual Types are like a sub-class for an existing class

Type adjusts existing classes, whereas Virtual Types creates a new class .

Type affect all the instances, whereas Virtual Type is equivalent of a sub class,

Presentation Layer

What is the magento presentation layer.

When you interact with the Magento web interface, you are interacting with presentation layer code. The presentation layer is the top layer of the four layers (presentation, service, domain, and persistence layers) described by the Magento architecture.

The presentation layer contains both view elements (layouts, blocks, templates) and controllers , which process commands to and from the user interface. Presentation code controls web user interaction with the product and its appearance. You can extensively customize the user interface by using HTML, CSS, and PHTML files to modify elements of the presentation layer. Basically, the presentation layer represents the customization of HTML, CSS, JavaScript, Magento UI, PHTML files, and block files.

Who uses the Presentation layer?

Magento uses areas to efficiently make web service calls, loading only the dependent code that is required for the particular type of user. Three types of Magento users interact with presentation layer code:

Web users interact with the storefront, where they can see the View model of data displayed by Magento and interact with product UI elements to request data for view and manipulation. These users work within the frontend area.

System administrators customizing a storefront can indirectly manipulate the presentation layer by, for example, adding themes or widgets to the frontend.

Web API calls can be made through HTTP just like browser requests, and can be made via AJAX calls from the user interface.

Presentation layer components

One helpful way of understanding the Magento presentation layer components is by examining Magento themes . Magento themes organize both the visual aspect of your storefront and certain aspects of product behavior.

Each theme resides in a unique directory and contains custom page layouts, templates, skins, and language files that work together to create a distinct user experience.

For an extensive introduction to theme elements and an overview of how to extend and override the default Magento themes, see the Frontend Developer Guide .

GraphQL is a data query language developed internally by Facebook in 2012 before being publicly released in 2015. Magento implements GraphQL to provide an alternative to REST and SOAP web APIs for frontend development.

GraphQL allows you to define the structure of the data that you need, and the server returns only the data you request. Each GraphQL-capable module contains a declarative schema that defines the syntax for queries that the module supports, as well as the attributes that can be returned. If you run a REST call such as GET /V1/products/:sku on a simple product, the system might fetch more than 100 lines of data. If all you need is the current price, the call has returned significantly more information than you need. With GraphQL, a query against the same SKU could return just the price.

More information can be found in the GraphQL Developer Guide .

Progressive Web Apps

The Magento Progressive Web App (PWA) Studio project is a set of developer tools that allow you to develop, deploy, and maintain a PWA storefront on top of Magento 2. PWA is a way to present a Magento storefront via a set of React JavaScript components. Using Magento as a headless backend, you can use PWA components to create mobile friendly frontend.

You can read more about how PWA works with Magento in the PWA Studio docs .

Magento generates the HTML for a page to display to a user from a tree of view elements.

View elements fall into two main categories: blocks and containers.

Blocks can generate dynamic content and can contain named child view elements that are similar to arguments being passed in. (The as attribute holds the child view element names for the parent block to reference them)

Containers collect an ordered group of children view elements.

The browser forms a product web page by asking the view element tree to render itself into HTML. Containers and blocks emit HTML that encloses their children appropriately. Blocks can generate their content using static HTML, Knockout JS scripts, and PHTML.

How Presentation code calls other layers

Presentation code typically calls service contracts, particularly for a storefront. However, presentation code is occasionally dependent on a specific implementation that requires the presentation code to directly call the domain layer. For example, the Admin UI screens are often tightly linked to a specific implementation and are not generic across implementations.

The View layer calls code from the Model to get information about the state of the application (for example, the price of a product). Typically, the way it accesses the Model is through service contracts.

Presentation layer flow

Web users interact with components of the presentation layer to select actions that initiate calls to the underlying layers. Presentation layer components make calls to the service layer, which in turn sends requests to the domain layer.

Related topics

Architectural diagrams

Architectural layers overview

  • Become a Contributor
  • Privacy Policy
  • Terms of Service
  • License/Trademark FAQ
  • Release Notes
  • Third-Party Licenses

IMAGES

  1. Describing the Layers of Magento 2 Architecture

    presentation layer for magento

  2. Architecture of Magento 2

    presentation layer for magento

  3. Magento 2 Tutorial: Building a Complete Module

    presentation layer for magento

  4. Describing the Layers of Magento 2 Architecture

    presentation layer for magento

  5. Magento Design Guide: The Definitive Tutorial for Magento Designers

    presentation layer for magento

  6. Configure Layered Navigation in Magento 2 Store

    presentation layer for magento

VIDEO

  1. EXPLAINING PRESENTATION LAYER || Tech with Hamza

  2. Lec- 7 Application Layer

  3. Render with Template, View Model and Layout in Magento 2

  4. Application layer Presentation layer

  5. Lec-30: Presentation Layer in Computer Networks ( NEC Computer Master )

  6. CHAPTER 1.1 FUNDAMENTALS OF MAGENTO 2 DEVELOPMENT

COMMENTS

  1. Presentation Layer

    What is the Magento Presentation layer? When you interact with the Magento web interface, you are interacting with presentation layer code. The presentation layer is the top layer of the four layers (presentation, service, domain, and persistence layers) described by the Magento architecture. The presentation layer contains both view elements

  2. PDF Magento Digital Commerce Architecture

    Presentation Layer When you interact with the Magento web interface, you are working directly with presentation layer code. The presentation layer contains both: • View elements, which include HTML/CSS/JavaScript web page assets, and the page composition concepts of layouts, blocks, and templates; and

  3. Explore Different Layers of Magento Module Development

    The presentation layer is the top layer of the four layers (presentation, service, domain, and persistence layers) defined in the Magento architecture. The presentation layer includes both view elements (layouts, blocks, templates) and controllers that process commands to and from the user interface.

  4. Architecture of Magento 2

    The top layer of Magento 2 architecture is the presentation layer. When we interact with Magento's web interface, we deal with the layers of code for the presentation. Service Layer. The middle layer and domain layer is the service layer. It offers a connection between the presentation and domain layer and resources specified data. The service ...

  5. Presentation Layer

    Presentation Layer What is the Magento Presentation layer? When you interact with the Magento web interface, you are interacting with presentation layer code.. The presentation layer contains both view elements (layouts, blocks, templates) and controllers, which process commands to and from the user interface.Presentation code controls web user interaction with the product and its appearance.

  6. devdocs.magento.com

    We would like to show you a description here but the site won't allow us.

  7. Magento 2 module-based architecture guide

    According to the official documentation, Magento 2 architecture is split into 4 layers. Presentation Layer. Presentation Layer is the upper layer. It contains all the View elements (including layouts, blocks, templates, css, js) and controllers. Presentation Layer usually calls service layer using service contracts.

  8. Exploring the Powerhouse: A Deep Dive into Magento's Modular ...

    In conclusion, the Magento architecture is a modular and scalable three-tier model that enables businesses to create customized e-commerce websites. The presentation layer handles the user ...

  9. Understanding Magento Headless: Top Strategies and Case Studies

    Magento Headless is an architecture where a website's front and back end are separated. It means that the front-end presentation layer, usually built with HTML, CSS, and JavaScript, is detached from the back-end logic powered by Magento. It allows developers to leverage web technologies and frameworks of their choice for the front end while ...

  10. Magento Architecture Guidebook for Developers

    Presentation Layer: This layer is responsible for the visual presentation of the website, including the layout, design, and user interface. It's built using HTML, CSS, JavaScript, and Magento's ...

  11. Magento 2 Development 01: Magento Architecture

    The presentation layer is the uppermost layer of Magento 2 architecture. When we interact with the web interface of Magento, that time, we are interacting with the presentation layer code. It contains all controllers and View elements such as - layouts, templates, block, css, and js, etc. The presentation layer calls the service layer using ...

  12. Magento 2 Certified Professional Developer Guide

    Magento 2 architecture consists of 4 layers: Presentation Layer Presentation Layer is the top layer that contains view elements (layouts, blocks, templates) and controllers. Presentation Layer usually calls the service layer using service contracts. But, depending on the implementation, it may cross over with the business logic.

  13. Presentation Layer

    The presentation layer is the top layer of the four layers (presentation, service, domain, and persistence layers) described by the Magento architecture. The presentation layer contains both view elements (layouts, blocks, templates) and controllers , which process commands to and from the user interface.

  14. Magento 2 Architecture I Lobbster

    The presentation layer is the uppermost layer of Magento 2 architecture. When you interact with Magento's web interface, you are interacting with the presentation layer code. This layer contains all controllers and Views elements such as - layouts, templates, blocks, css.js, etc, and is mostly used by web users and system administrators.

  15. Magento 2 as a headless solution

    First, I would split it into two layers: proxy layer and presentation layer. Proxy layer. The first thing you'll have to consider is about building Proxy layer. Behind the scenes, you can utilize Magento API, CMS API, ERP API, x API, whatever you want... In the proxy layer, you're free to use and organize data the way you want.

  16. Managing Content in a Headless Commerce with Magento + CMS

    With a headless implementation, Magento Commerce serves as the backend system of record, while the CMS acts as the presentation layer content hub. The challenge is synchronizing content from the CMS downstream to Magento to expose products/content via APIs. This can be achieved via: · CMS connectors to push content to Magento automatically

  17. Presentation Layer

    One helpful way of understanding the Magento presentation layer components is by examining Magento themes. Magento themes organize both the visual aspect of your storefront and certain aspects of product behavior. Each theme resides in a unique directory and contains custom page layouts, templates, skins, and language files that work together ...

  18. Architecture of Magento 2

    The detailed description of Magento 2's layer architecture is given below. 1) Presentation Layer. The presentation layer is the uppermost layer of Magento 2 architecture. When we interact with the web interface of Magento, that time, we are interacting with the presentation layer code. It contains all controllers and View elements such as ...

  19. How many architecture tiers are there in Magento?

    The service layer in Magento is responsible for communicating between the top-most presentation layer and the domain layer. It uses service contracts defined using PHP interfaces to determine code behavior, provides easy access to the API framework in Magento, and provides a stable API that other modules can call into.

  20. Paul Rogers

    There are already a wide range of options for the front-end / presentation layer with Magento, with the most common ones currently being: PWA Studio - Magento's own framework that's being built around the platform to enable users to build stores as progressive web apps. This is very new but something to keep an eye on as it's obviously ...

  21. Service layer

    The service layer provides a bridge between the presentation layer and the domain layer and resource-specific data. This is implemented using service contracts, which are ... The di.xml file specifies which PHP class to use for the interface Magento\Customer\Api\CustomerRepositoryInterface. Another module can change this interface file by ...

  22. MAGE2DB.COM

    The top layer of Magento 2 architecture is the presentation layer. When we interact with Magento's web interface. Step [2] - Service Layer:: The middle layer and domain layer is the service layer. It offers a connection between the presentation and domain layer. Step [3] - Domain Layer:: The domain layer represents business logic, The ...

  23. Presentation Layer

    The presentation layer is the top layer of the four layers (presentation, service, domain, and persistence layers) described by the Magento architecture. The presentation layer contains both view elements (layouts, blocks, templates) and controllers , which process commands to and from the user interface.