Make implementation of third party elements in magento 2 in 5-times easier

Sergey LysakCEO at Eltrino

Make implementation of third-party elements in Magento 2 in 5-times easier

Sergey LysakCEO at Eltrino

We serve B2C & B2B web stores on Magento by delivering the most advanced eCommerce solutions - front-end and back-end Magento and OroCRM development, integrations & functional improvements, custom modules & extensions, eCommerce consulting and managed services.Also we’re creating new open source customer care solution - DiamanteDesk.

Agenda1. Typical issues in Magento 2 that can be solved by Composer2. Magic Magento-composer-installer3. Example of implementation of third-party libraries 4. How to create new module5. Backend validation comparison6. Conclusions

Composer – Dependency Manager for PHP Composer allows you to declare the libraries your project depends on, and will manage (install/update) them for you.Sometimes it’s called library manager - it works in general, but for definite local project Composer is Dependency Manager.

It’s a new era of developer’s laziness and it’s called Composer-ing)))

Typical issues that can be solved by Composer● Project dependency management of third-party libraries.● Resolution of conflicts of libraries and priorities.● Find and download into the project correct versions of libraries● Generation autoload.php

Magento 2 and Composer combination features:

● Provides the ability to use third-party libraries while you don’t have to bundle them with source code of Magento 2.

● Offers a component-based architecture as well as reliable dependency management.● Reduces extension conflicts as well as various compatibility issues.● Streamlines your work with versioned dependencies.● Introduces semantic versioning.● Supports some useful standards, such as PHP Framework Interoperability.

Composer in Magento 2● Magento 2 installer● Magento-composer-installer

There are 2 ways how to install an extension in Magento 2:1 - download from marketplace and handle it manually, copying the code and doing other required actions2 - use special official Magento plugin Magento-composer-installerI want to tell you more about the second solution. It allows you to avoid wasting of time and just with one line of code place your new module in required folder.Just type in Composer the name of new module and it will transfer it.

How to install Composer in Magento 2

curl -sS https://getcomposer.org/installer | phpmv composer.phar /usr/local/bin/composer

composer list --help

● Enter in command prompt:

If command help displays, Composer is already installed.

● To install Composer: Change to or create an empty directory on your Magento server. And enter:

composer --help or

Moving from Magento 1 to Magento 2 is alike the fall of the Berlin Wall

Magento 1 is like a monolith structure, where each module is like another brick in the wall. In Magento 2 all modules are separated and independent like bricks of the broken wall. Except modules that are marked as “dependent” in the configuration. So the Composer helps to crash the unbreakable wall. And I repeat it once again that now thanks to the Composer you can create custom Magento configuration, throw away unnecessary modules and install third-party libraries. All files related to modules even templates are placed in corresponding modules.Everything you have to do is just to include Composer in Magento configuration.

Composer in Magento 2

Available Composer packages in Magento 2

● magento2-module - code inserted into app/code● magento2-theme - code inserted into app/design● magento2-language - code inserted into app/i18n● magento2-library - code inserted into lib/internal● magento2-component - code inserted into root of magento installation

Composer in Magento 2

If any component of the system doesn’t meet requirements Composer will recommend to update the component and it won’t let Magento or Magento module to install.

Module installation

bash-4.3$bash-4.3$ composer require vendor/module:versionbash-4.3$ *** some magic ***bash-4.3$ Done.bash-4.3$

Magic Magento-composer-installerModule configuration for Composer

Example of implementation of third-party libraries

Google ReCaptcha

Search and and installing the necessary libraries

http://packagist.orggoogle/recaptcha

bash-4.3$ composer require google/recaptchabash-4.3$ *** some magic ***bash-4.3$ Done.

Existing complications in creating modules for Magento 2

• To build structure from scratch - too long• The use of simple modules - is deprecated• ihb/moduleCreator - ok

Module installation ihb/moduleCreatorbash-4.3$bash-4.3$ composer require ihb/moduleCreator:dev-masterbash-4.3$ *** some magic ***bash-4.3$ Done.bash-4.3$bash-4.3$ bin/magento setup:upgrade

ihb/ModuleCreator Introducing you a simple Magento 2 module creator.How to install it?Add repository url to the root composer.json file example:ihb/moduleCreator:dev-master

How to create new module

bash-4.3$bash-4.3$ bin/magento ihb:module-create Vendor_Modulebash-4.3$bash-4.3$ bin/magento setup:upgrade

How to use new moduleAfter Module Creator activated, just run php -f bin/magento ihb:module-create Vendor_Module command. This will create simple module structure in app/code/Vendor/Module folder.

The structure of the new module

Here is generated structure of the new module. You need to rename folders and delete unnecessary that you won’t need

Add captcha output to contact form

Template you can easily find on https://github.com/google/recaptcha or http://www.google.com/recaptcha/intro/index.html

Just copy and insert the code

magento2/app/code/Eltrino/ReCaptcha/view/frontend/layout/contact_index_index.xml

magento2/app/code/Eltrino/ReCaptcha/view/frontend/templates/captcha.phtml

Result

Backend validation – Observer

magento2/app/code/Eltrino/ReCaptcha/etc/events.xml

To make it alive we need to embed validation on the backendFor this we’ll use Observer pattern and Magento events

Before saving data from the form we need to validate captcha codeFor this we create Predispatch Observer

Observer Differences in Magento 1 and Magento 2While the majority of the mechanic remains the same as it did in Magento 1, there are a few differences in Magento2

● Each observer is in its own class. You no longer have an entire observer class that holds all observer code.● Observers are in their own folder. You do not put observers in the model folder anymore. They are located in

the Observer/ folder in your module.● Observer XML is located in the events.xml file. A common trend among Magento 2 is to separate all XML

according to functional destiny. This means that all XML is separated according to its purpose. All events go in their own XML files. All controller routes go in another, and so on.

● Observers in Magento 2 use Symfony event dispatcher ● Separation by area is done by placing event xml file into specific folder. E.g. etc/events.xml for all areas,

etc/frontend/events.xml (for the frontend), etc/adminhtml/events.xml (for the backend), etc.

In general there are less events in the code and alongside with events so called plugins are also introduced and used in Magento 2.

ValidationAnd actually how our validation looks

ReCaptcha/ReCaptcha - is our third-party library that we’ve installed.

Pay attention, to check Captcha we need just 2 lines of code!

ComparisonThere are just 314 lines in our code In embedded third-party library - 1670

So without composer to implement recaptcha feature in contact form we need to create around 2000 lines of code

314 lines of code it’s 2-3 hours of development2000 lines of code - around 12-18 hours

Don't relax! Even if you upgrade one of your components even between minor versions you need to test your upgraded component

ConclusionsWhat you should remember from this presentation:

Composer makes implementation of third-party elements in Magento 2 in 5-times easier

We saved 10-15 hours

Our code is light and clear

Our happy developers have time for sport)))

Thank you for attention!

sergey@eltrino.com