Magento

Magento is an open-source PHP based platform for building e-commerce solutions. Built by the Magento company (now part of Adobe), it is used by over 350,000 developers all over the world. It enables the creation of highly customizable digital storefronts for Business-to-Customer and Business-to-Business purposes. Magento 2, the transformed version of the Magento E-commerce Platform, comes with brand new architecture, coding structure, and database design.

a) General overview

Magento’s platform is built upon PHP and MySQL. During its lifetime of 10 years (the version 1.0 released in March 2008 and the version 2.0 in November 2015, it has undergone changes in terms of structure and development patterns and is now in its second major version, Magento 2.

Magento’s structure is comprised of two main parts, one being the back-end, with the database and MySQL, and Model, Data and Service interfaces, as can be seen in figure 3. These are directly connected and used in Magento’s Blocks, Layouts, and Templates, which would be defined as the front-end of the application.

b) Product searching

One of the prominent features on any website is the product search feature, which allows users to type in terms to search for products by. Once search results are gathered, the user can usually sort or filter through those by categories or product attributes.

In Magento, the search usually uses either MySQL, Solr or Elasticsearch for indexing the catalog. Catalog indexing determines what results are returned to the storefront when entering a new search term or changing filtering options from already gathered results.

c) ElasticSearch

Elasticsearch is a free and open-source search-engine built on Apache Lucene. It is particularly used when dealing with large amounts of data and when needing to quickly retrieve that data. When using MySQL, querying for data can take very long when having a lot of data. Thus, the main selling point of Elasticsearch is to multiply querying speeds by the hundreds. It works by indexing data into documents that have keys and values and it comes with an API that allows for retrieving these indexed documents.

When used on a Magento store, the catalog is indexed in an Elasticsearch node. It is easily configurable by just enabling it and specifying from the admin panel of the store, the IP address and port of the host where the Elasticsearch node is located.

d) Search API

Magento has a fair amount of REST API endpoints, of which one that can be used for searching products. This search API endpoint takes as data sent an array called search criteria, which has the following structure

To make a request, the client must send a GET request to a specific path appended to the base URL of the store. The path is /rest/V1/search/? to which the search criteria are appended.

2. ReactJS

a) React as a Tool

React is a JavaScript library created by Facebook and designed for building user interfaces. It relies on the use of components and states for rendering dynamic content on web pages without the need for page loads. It is one of the most popular and supported JavaScript libraries for UI interfaces these days.

Unlike older JavaScript solutions, which involved manually triggering changes on the page, React “knows” when the UI needs to be updated and re-rendered on the page when the states of the components change. The main idea that differentiates React from other libraries or frameworks (e.g. AngularJS, Knockout) is the use of a “virtual DOM”, which enhances performance by reducing the number of changes happening on the DOM.

b) React’s virtual DOM

React’s virtual DOM is technically what it sounds like. It is a DOM that is created when components render and when states change. The approach used is to create a new virtual DOM when some element needs re-rendering and compare it to another virtual DOM representation of the previous state of the app, making the “diff” using an algorithm and re-rendering in the DOM only the elements that need changing.

The virtual DOM is a full representation of the DOM without being an actual DOM, meaning that the process of creating a new virtual DOM is much faster than creating the DOM of the actual page. Consequently, since React creates a new virtual DOM every time something needs re-rendering, it does not actually need to know what has changed. This means that the developers do not need to control the rendering process since React will then change the DOM of the page only when an actual change is needed. Performance-wise, it is one of the best and smartest methods to re-render part of the DOM that needs changing.

c) State management library

When using a JavaScript library, such as React, developers create components which in most cases are stateful, meaning that each component has states that can change and that trigger component updates. When the application becomes large with many interconnected components, it can become cumbersome and states may need to be passed from parents to children and vice versa. To go around this issue, state management libraries exist. They allow keeping the states of the application in one place for ease of state management. The two most popular libraries used alongside React are Redux and MobX.

3. React and Magento

Magento 2.3 uses a new tool called PWA Studio. It is a Progressive Web Application tool that will allow developers to work with Magento in a “headless” way, meaning that the frontend is not directly tied to the backend and communication is done through APIs.

Until now, Magento user interface was created by using what are called “blocks” which have a template (phtml file) and a PHP block. Data is often rendered on the page load through these blocks and models and interfaces coming from the backend.

PWA Studio uses React, Redux and webpack for development.

a) What Is Progressive Web App (PWA)?

Progressive Web App is a web app that applies web capabilities (HTML, CSS, Javascript) to deliver great user experience mimicking native apps. More specifically, PWA can function like a native app with an icon on the mobile home screen, splash page (after opening the app), full-screen display, push notifications, and so on.

All of the PWAs must assure three essential criteria: Fast (respond to user interactions nearly instantly), Reliable (be able to work under poor network conditions) and Engaging (deliver smooth app-like experience).

There are some major differences between a PWA and a native app:

A native app can only run on a certain operating system (iOS or Android) while PWA is powered by mobile browsers and supported on both iOS and Android.
You have to download the native apps from an app store; meanwhile, PWA can be installed quickly after adding to the home screen.
Users must access their app stores to get the latest version of the native apps but refreshing to get PWA updates.
Since PWA runs right in a web browser, it is easier for store owners to share and promote the PWAs than native apps. PWAs work on-demand without taking up the device’s memory like the native apps

b) Magento and PWA

In 2017, Magento collaborated with Google to bring the best of PWA features to Magento platform by the end of 2018. Magento 2.3 was released on November 28, 2018, with a ton of impressive updates and Magento PWA was one of it.

Magento, in fact, is one of the first e-commerce platforms to enable its users to fully utilize the potential of PWAs. Magento has also introduced PWA Studio which offers the required tools for developers to successfully create and maintain a PWA storefront on top of Magento.

c) Why Should We Apply PWA In Magento 2?

Progressive Web App integration has been drawing huge attention from Magento users, especially when Magento 2 PWA Studio was released. Below are three primary motivations to convert your website to Magento PWA:

Enhanced user experience on mobile devices: Getting the PWA on users’ mobile is effortless, no download required, but it’s just the door before they experience amazing functions like offline mode (access the app even when losing your Internet connectivity), background sync (postpone actions until the network connection is stable) and other app-like features.
Lower cost of development & maintenance compared to native apps: For native apps, you will have to develop two separate apps (one for iOS, and another for Android), which leads to doubled time and effort for app development and maintenance. On the other hand, a single codebase is needed to create a PWA that can run regardless of the operating system.
PWA in Magento 2 website is not simply a heated trend, it will be the future of the apps: Many Magento stores have adopted this technology and found their mobile user satisfaction significantly improved.

d) Why is Magento concentrating on PWAs?

The above graph shows that 63.5% of e-commerce sales in 2018 took place through mobile phones and tablet devices. In 2019, sales via hand-held devices are expected to reach 67.2%.

Since m-commerce is driving more online sales, Magento has made a wise move to bring advanced trends like PWA to its platform.

e) How can Magento PWA improve online business?

Remarkable speed — The one vital factor for all online stores is speed. If a mobile site takes more than three seconds to load there will be a 53% drop in mobile visits. In other words, 53% of customers will leave a website if it takes more than three seconds to load. PWAs will be playing a major role here as they are blazingly fast. The reason for PWAs to be faster is browser-level caching which is possible because of service workers. PWAs use service workers to pre-cache part of the web app to load instantly when the user opens it the next time.

Cross-platform compatibility — PWAs can run smoothly on almost all the widely used mobile browsers and platforms. This includes browsers such as Chrome, Safari, Edge, and Firefox. The single web codebase is enough to run on multiple platforms, including desktops. Hence, businesses don’t have to develop and maintain apps for different platforms. Furthermore, PWAs don’t have to be updated from the app store. Updates can be delivered real-time just like a website.

Responsive design — Implementing PWA will result in consistent experience across devices like desktop, mobile phones, and tablet devices. This will help in improving the customer experience. Google has said that sites with responsive web design will rank better in Google search results. Hence, implementing PWA can make the site rank higher in Google search results.

Offline support — A part of the complete PWA site can be made to work offline. For example, customers can browse the products of your e-commerce site and can add it to the cart without internet connectivity, provided if they have visited the pages previously. Customers can even place orders offline, once the internet is connected the order will be processed.

SEO-friendly — Since PWA sites are highly engaging and reliable, visitors might stay for a longer than the usual time. Also, factors such as speed, offline support and so on will contribute to high user engagement. Another significant advantage of using PWA in terms of SEO is “mobile-first index”. Google recently announced that the mobile version of a site would be indexed first. This means that sites that don’t have a mobile-friendly version would not perform well in rankings.

Push notifications — Push notifications are the messages that are sent as notifications from the application. They are said to increase engagement by up to 88%. Push notifications are important to e-commerce businesses to keep customers informed about the latest deals, offers, and order updates.

Add to home screen — The app icon, which looks like a native app icon, of PWA sites can be added to the home screen of smartphones. Users can click the icon and visit the site directly instead of going to the browser and then to the website. This will increase the time spent by the user on the app which will eventually result in a higher conversion rate.

f) What benefits can PWAs promise for e-commerce businesses?

Since PWAs combine the best of two worlds — native app and mobile web, they solve two significant problems faced by the e-commerce industry at the same time:

ü Higher Conversion rate — Conversions on mobile web are less when compared to the conversions on mobile apps. PWAs provide seamless app-like experience, and combined with features such as offline support, speed, and cross-platform compatibility; conversion rates can go up.

ü Increase in the number of users — Customers download only the mobile apps of well-established e-commerce businesses. With PWAs, customers can add the PWA of the online store to their phone’s home screen with just click of a button.

g) Methods To Convert A Magento 2 Website To PWA?

Install Magento 2 PWA Extensions
Create own PWA Using Magento 2 PWA Studio
Convert Site To PWA Using Magento 2 PWA Theme

h) PWA case studies

AliExpress

AliExpress is one of the largest e-commerce business, not only in China but globally. Once they implemented PWA, they saw results in days. There was a 74% increase in the time spent on their website, and the page views doubled.

Flipkart

Flipkart is India’s biggest e-commerce store and launched Flipkart Lite as its PWA.

Users time on site increased to 3.5 minutes with PWA, earlier it was 70 seconds in the case of the native app. The engagement rate increased to 40% and 70% greater conversion was seen from the customers who arrived via Add to Homescreen feature. The data usage also reduced to one third.

OLX

OLX is a leading marketplace in India, and the bounce rates were high for mobile-web. Half of their traffic was from mobile-web, and they chose PWA to solve their problems.

After implementing PWA, the bounce rate went down by 80%, and the Click Through Rate (CTR) on Ads went up by 146%. With the help of push notifications, the engagement rate went up by 250%.

Jumia

Jumia is a popular e-commerce store in Africa, and after witnessing the benefits of PWA, they have applied PWA to their other operations such as Jumia Travel. Traffic to their PWA increased by 12 times more than the combined traffic of native apps — both Android and iOS. The data usage reduced by five times and 2x less data was required to complete the first transaction. In addition to that, the data storage required was reduced by 25x.

Konga

Konga is a big player in Nigeria, and they used PWA to reduce data consumption. By implementing PWA, the initial load took 92% fewer data and to complete the first transaction 82% less data was required.

Businesses that utilize limited features of PWA

To utilize the full potential of PWA, the site should be built from scratch. This can be quite expensive. However, it is also possible to integrate only the required PWA features to the existing website.
Businesses can concentrate on the features that will create maximum impact, and implement it. This will also increase customer experience considerably. Let us see examples of some businesses that use selected features of PWA.

AirBerlin

AirBerlin utilized the offline functionality of PWA to offer reliable offline support to their customers at airports. Offline support was added and the initial load time was reduced to less than a second. This allowed their passengers to access boarding pass and journey details without internet connectivity.

The Washington Post

The Washington Post built a simple PWA version using PWA demo for their top news feed. They focused on speed. The page load time was reduced to 80ms. You can see the live demo of this product at WAPO.com/PWA. Since they saw an incredible result, they decided to use PWA for their core mobile web experience.

Enhancing Magento Front-end Performance With ReactJS