E-Commerce in Egypt – The Tipping Point: Episode 1

November 26, 2017November 26, 2017 Hussein Mohieldin Leave a comment

Episode 1: Identifying the stakeholders & controlling forces

Being at the heart of the E-Commerce scene in Egypt and while working on the preparations for robusta’s upcoming E-Commerce Summit 2018 (contact me if you’re interested in participation) I can’t help but keep asking myself what’s left till the market reaches its tipping point in Egypt. Inspite of having one of the highest social media penetration rates in the world with more than 33 million users on Facebook alone massive increase starting 2011 and between 2014 to 2017, E-Commerce in Egypt hasn’t reached anywhere near the global E-Commerce growth rates for the obvious reasons like, for starters, the fact that the Egyptian customer is still hanging on having to see and feel the product they’re buying to make sure it’s good and being afraid to use their credit cards online and fearing their goods won’t be shipped (aka Egyptians have trust issues).

Being half engineer and half consultant, I couldn’t help but tackle this from a merely analytical perspective and run a quick mostly qualitative assessment of both the market stakeholders and controlling forces through a series of upcoming blog posts in an attempt to at least present the problem and try to find practical solutions and get you, the customer, the business owner, the rising entrepreneur, the big brand and anyone who believes, like me and everyone at robusta, that there’s a great future and opportunities yet to be snatched in the business of E-Commerce in Egypt, to weigh on this matter and give each other pieces of our mind, turning this from the thoughts of one individual to a discussion among those who are concerned and who knows what else. For starters, Identifying the stakeholders is mostly straight forward; however, identifying the controlling forces can get a little bit tricky.

Out of our experience at robusta for the past 4 years with several E-Commerce implementations, some of which are true models for successful case studies, I believe the most critical mix to look at of stakeholders and forces would be:

Supply: that would be the retailers and product providers. Think B.TECH.
Demand: that would be the end consumers. That’s everyone of us, the end users.
Mediators: in some cases there’s a marketplace acting as a mediator bridging the supply & demand. Think Souq, Jumia, Edfa3ly, etc..
Technology: that comes at the core and probably the key contributor to E-Commerce over the traditional brick-and-mortar retail and distribution.
Logistics: though a key pillar of traditional retail, E-Commerce adds an additional layer of complexity to optimize on cost and meet customers’ expectations.
Customer Service: in a global world that truly brings international E-Commerce players as close to local consumers as local players, customers expectations have truly hit the roof
Marketing: between the classical 4Ps and the need to go almost fully digital, marketing becomes one of the key barriers to new entrants to the market to realize the full potential of the market
People: most analysis would overlook the role of knowledgeable workers, management capacities and small business owners setting and E-Commerce strategies and respective implementations.

In the following series, I will look at each of the aforementioned and attempt to do an assessment of the current status of each in an attempt to look at the missing jigsaw pieces and anticipate the moment in time where they all click and unleash a huge potential of an economy on its own that can be a critical driver for economic development as it does not only develop the retail business but obviously creates lots of jobs on the logistics, customer service and significantly contributes to the development of the technology and financial sectors.

Would love to get thoughts on this as I plan to break it down into a series of detailed analysis of each of the aforementioned and I’m quite flexible to adjust for a more inclusive perspective that’s hopefully one step forwards towards the market tipping point.

I believe other perspectives looking at the topic could also be quite enlightening, one of which would be the study of the evolution in other more developed markets and the different phases it has gone through until it reached maturity.

5 Design Tips for a Successful Black Friday Campaign

November 20, 2017November 21, 2017 Nada Fadali Leave a comment

It’s that time of the year again and Black Friday is upon us. The sales are everywhere; there’s something new everywhere; deals here and deals there; but what makes customers buy off of one website over the other? We’ve gathered our fair share of easy tips to help your e-commerce platform maintain a successful Black Friday campaign.

Stay true to the brand
Avoid visual clutter by using simple designed ad banners with clear call to action. The designs should stick to the brand identity which makes the user related more to the website.

Help your users get to what they want
Listing all products in the sale next to each other is overwhelming. Use categories to help the users navigate to the right section of the website, as well providing filters to narrow down the range of products displayed.

After clicking on the black friday banner, the page displayed include products featured as deals of the day, hottest deals and a list of categories which have deals. — After clicking on the Black Friday banner, the page displayed include products featured as deals of the day, hottest deals and a list of categories which have deals.

Make your discount percentages pop
Offers and discounts are great driver for the shoppers to take the decision to purchase a product (link). Discounts are the core of Black Friday campaign. Featuring those discounts visually and in percentage has a great impact on the experience.

Tell the users the what they will really pay before they click “checkout”
61% of users abandon their cart and the checkout process when they realize that extra fees are too high. Deceiving the users by using a website wide banners promoting free shipping which isn’t the case when they proceed to the actual checkout, leaves a bad impression.

Macy’s promotes free shipping in the header and in the product page but when the user tries to checkout, they add shipping fees anyways.

Get to know your users better
Black Friday is a great opportunity to observe your users behaviour and their shopping patterns through analytics and usability studies. Note down what negatively affects the experience, handle it and iterate. Read more into how to do a low budget usability analysis of an e-commerce website.

These are just simple design tips that you just can’t overlook; however, an awesome and successful Black Friday campaign (or any sale for the matter) doesn’t only stop at these, without proper marketing, a secure website that actually works, great effort exerted by your customer support team and the right partners to get your goods to the customer, you don’t stand a chance in this highly dynamic season.

4 Things Shaping the Future of Online Shopping

November 19, 2017November 19, 2017 Ola Oreiba Leave a comment

Looking back at the last 10 years, tracking the evolution of the different technologies has become quite challenging of a task; one reason why is the speed of said evolution, another could be the immense number of new tools, practices and technologies surfacing in a single month let alone a year or two. However, if this has to tell you anything, it’s the fact that the current generations are aiming at surpassing themselves in terms of achieving the impossible and in return leveraging the experience of living from the tiniest detail to the greatest.

When it comes to one thing that has definitely evolved in the past few years in human lives, it’s definitely the shopping experience. Since we’re now almost always online, our mere day-to-day interactions online produce an incredible amount of big data which, with the increasing power of computing, is used to make our experience, as customers, richer, more seamless, more entertaining and of course more fulfilling to our needs.

Imagining what the future could be like could appear to be easy from afar yet remains difficult because you never know what the next breakthrough is or where it is coming from. However, if the future is anywhere, it’s lying right in the palm of our hands, the smartphone. Think of all the things made easy by having your smartphone on you, countless, right?! Consumers are now engaging with brands on various channels through their mobile phones, be it social media with the brand itself or finding inspirations from influencers or with the brands’ e-commerce platform. The sheer number of clicks and actions a customer has to go through to go from engagement to purchase is still hindering. Brands have been reinventing the customer experience through mobile by distributing their online presence between e-commerce and mobile apps for more reach, all you have to do is scroll, but it is not yet enough, carts are still abandoned and needs are yet to be fulfilled in a better way.

We imagine a future with less friction and an even more seamless experience and we think the next 4 things are what will be taking our shopping experiences up a notch or a few in the next few years.

Machine Learning and AI

With the help of machine learning and AI, your desired product will find you not the opposite, since a unique experience is all about being personal, an experience tailored just for you, right? If you think online shopping still lacks the presence of someone there to turn to for inquiries and questions, chatbots are now developed and equipped with all the information anyone would need, ready to answer all your questions and might even take over the whole customer support as we know it.

Augmented & Virtual Realities

You will be able to find all the info and reviews you’d be searching for to determine whether you should purchase X or Y as you point your phone towards the product using AR experiences online or in-store. The lack of the sensory element in online shopping will be a thing of the past, overcome by creating engaging buying experiences using VR though which you can see the product, place it where it fits, try it on and customize it to your taste.

Digital Fingerprinting

You won’t be afraid to share your personal information to make a purchase online because you won’t have to when you can present your unique digital fingerprint for authentication, reducing the number of steps needed to checkout and leading to higher conversion. Digital fingerprints will also be of great help in avoiding fraud in online transactions protecting both retailers and customers.

Personalized Payments

Online payment is still such a hurdle to many, right? Personalizing payments should come as a natural evolution to personalizing the whole shopping experience. Retailers will be providing means for customers to decide when and how much they’re willing to pay, gaining not only their loyalty but also the certainty to come back for more.

As a retailer, are you ready for the future? Are you ready to engage the customer on more than meets the eye? The survival in this game will be not only for the smartest, but also for the first and not necessarily the best anymore. Hop onto the train of the new first and you’re guaranteed a notice from a customer overwhelmed by choices yet holds the upper hand all the way and is always looking for only what calls their name.

UX in E-Commerce: Web vs Mobile (Pt.2)

September 27, 2017November 20, 2017 Nada Fadali Leave a comment

In part one of this post, we reviewed the differences between a desktop web and mobile design throughout an e-commerce website. We reviewed some of the important pages including: home, category, product and cart page.

In this post, we continue the journey through another four key screens.

Search (5/8)

Search functionality is one of the most crucial features that should not be only included in the e-commerce website but also implemented in the most efficient way. The usability of this functionality doesn’t only lie in the interface of the search bar but also in how smart the search is.

Web view:

Amazon search got it right. Just from generic keyword like “Laptop”, it offers suggestions related to everything a laptop needs as well as the ability to search in a specific category.

Mobile view:

Emphasizing on how important the search is, amazon mobile design uses the entire width of the screen to display the search bar as well as being thump friendly. The suggestion list height doesn’t extend more than the space above the keyboard.

Search Result (6/8)

Next step, after having a smart search, is having a usable search result page. That includes a clean display of products, sorting, filtering and different display options if needed.

Web view:

At first glance, Amazon design may seem noisy but you can easily comprehend how the page is designed in blocks and each block serves a specific functionality.

Block 1: Showing number of results found, the keyword I used in the search, sorting and display options
Block 2: Filters
Block 3: Search result. This is the most important block and that’s why it takes the most space.
Block 4 & 5: show ads, promotions or sponsored content.

Mobile view:

Amazon mobile design is very clean and organized. It starts out with a message that includes the keyword used in the search, followed by the search result count, link to filters and the result products. Sorting and filtering options are included in another screen due to the variety of options.

Checkout (7/8)

Implementing a usable checkout process decreases abandonment rate and guarantees a solid conversion. However, the process is lengthy and requires too many information, especially from first-time users. We will not go into details of the process but rather look at it from a bird’s-eye view and how it looks like on web versus mobile design.

Web view:

A common practice in design a checkout is to include the following:

Remove all elements that aren’t related to the checkout process like website header, that includes search bar, categories and any extra links.
Include a progress bar indicating the number of steps, current and completed steps.
Emphasize on the security of the process.
Provide support for the customers, in the form of live chat or help line.
Call to action buttons are the most prominent visual element.

In B&H checkout design, the desktop size can afford to include all the following practices in the same screen as well as order summary always present of the right side of the page.

Mobile view:

B&H mobile checkout disregards almost all the practices followed in the desktop design due to the limited space. However, it depends on how the process should flow smoothly where users can only focus on one task at a time and that is what they can currently see from the long one-page checkout.

Post-checkout & Account (8/8)

As important as the checkout process it, the follow up process is also crucial. If the follow up is frustrating, so will be the customer and will avoid any future transactions on the website. This includes creating a new account on the website as well as the page displayed after a successful checkout; the thank you page.

Web view:

B&H promotes their users to identify themselves before checking out. It provides different options including guest checkout and social media login. Following a successful checkout, user receives an invoice with their order details as well as the ability to track that order. It also promotes guest checkout to create an account by only providing a password.

Mobile view:

B&H mobile design is almost identical to the web design but accommodates to the small screen. This is due to the importance of every elements used in the web design.

Lessons Learned

The most obvious obstacle when designing for a mobile screen is the limited space available. This limitation drives designers to either compromise some content and accommodate to it. This can only be achieved by defining a hierarchy of importance to the content and which should be the most accessible in order to have a usable mobile experience. This indicates that each platform has its design needs and capacity which can be limiting but that doesn’t mean usability should be compromised.

On Finding The Perfect “Add to Cart” Button

October 9, 2016March 8, 2017 Ahmad Alfy Leave a comment

Recently I participated in a code camp at Al-Makinah where we introduce participants to the fundamentals of the front-end component of the web. I was asked to review the model answer to one of the exercises given to the students. It was simple; they take a web page written in HTML, CSS and JavaScript and improve it in a way that shows what they’ve learnt that reflects what they were taught. The exercise addressed several aspects like user experience improvement, semantics, validation of the markup … etc. It was a simple shopping cart with several products cards laid out in a grid.

I spend a lot of time writing HTML. It’s been a part of what I am doing every day for more than a decade. For me, HTML is more than just a few elements that you throw here and there; I invest a lot in picking the elements that I use. While I was reviewing the exercise, I stopped in front of the “Add to Cart” button. It was an <a> tag with a link. I started questioning myself; part of me hates the fact that this is a link not a button inside a form. It makes perfect sense to be a button. Of course it can be made anything. Simply attaching a listener that fires an ajax request updating the cart will work. But it doesn’t feel right. This isn’t semantically correct. Before I decide what the “Add to Cart” element should be, I decided I should write down the criteria addressing how this element should behave given all the possible circumstances.

Criteria:

It must have the same behavior in presence or absence of JavaScript.
If there are other fields like “amount,” pressing enter (submitting the form) should behave like clicking the button.

At this point I was convinced that this should be a submit button not a link. I quickly realized that this will require each product card to have a form tag with more elements like hidden input with product id for example. In big shops, the home page sometimes hosts a lot of product cards. It even uses sliders to save the space for “Newly arrived,” “Hot offers,” “Hot in category X” and the list can go on. A single page can contain more than a hundred of product cards. All this increase the amount of the HTML tags we serve to the user and increase the page size (comparing to serving a single <a> tag per card).

There is also another problem the submit button doesn’t address and it is very common. It’s the products that need you to select attributes before adding it to your cart (like shirt size or color). It’s common that these product cards redirect the user to the full details page of the product asking him to pick the required attributes in order to add the proper item to the cart. Now I changed my mind; I don’t think it’s a problem using a link for this functionality. I decided to change the first rule I mentioned earlier; it shouldn’t have the same behavior. It just should work in a way.

Before discussing the possible scenarios, I want to clarify something before getting into the argument of whether we should support users with no JavaScript or not. I believe both sides of the argument have valid points; however, there are reasons that you don’t want to lose even the smallest fraction of the users without JavaScript. We’re talking about e-commerce where conversion is translated directly into money. The solution is also pretty simple whether you decided to go with progressive enhancement or graceful degradation as you will see later on.

The available scenarios

Using button

If the product can be added directly to the cart, use button inside a form tag. It can use ajax when JavaScript is available or submit to the server directly when it isn’t (embracing progressive enhancement).

Pros:

Semantically, it is more accurate.
The behavior is similar in presence or absence of JavaScript.

Cons:

Require more code for form tag and other elements that identify the product.

If the product cannot be added without selecting attributes, use an anchor tag linking to the full product details page.

Using link

Use links in all cases. When JavaScript is available, hijack the click event and add the product to the cart using ajax (embracing graceful degradation). If it isn’t, direct the user to the full details page.

Pros:

Requires less HTML, just a link with data attribute for product id.

Cons:

The experience is different based on the presence or absence of JavaScript.

In absence of JavaScript, the link that says “Add to Cart” will do something completely different. It should then say “Show product details.” This might cause confusion for people using assistive technologies like screen readers.

How other e-commerce platforms address this issue?

I decided to review how the other popular e-commerce platforms address this issue. At robusta, we have success stories building successful big e-commerce platforms in Egypt using popular platforms like WooCommerce and Magento Enterprise Edition. I picked the popular open source e-commerce platforms available which provided a demo and a default theme. Now, bear in mind that the result of this analysis is highly based on the used theme. If you are using a different theme it is very likely that your theme uses a different markup than what I am about to show you. The default theme is important because developers use it as a boilerplate for their themes. Some platforms like Magento allow defining a parent theme and extend it to override some of its parts instead of writing everything from scratch.

Magento 2

Magento comes with a theme called Luma. It uses a button tag without a form. The button itself has some additional data attributes related to the product. As you might guess, this implementation doesn’t work except when JavaScript is available. It’s worth mentioning that Magento 2 utilizes RequireJS to split JavaScript into modules. Luma theme by default loads 119 JavaScript file in the homepage alone. With Magento, JavaScript bundler merely seems to function properly; there is a big chance for failure at any point (by network timeout, server failure, slow internet connection,…etc.). It’s disappointing to see the e-commerce giant uses an inaccessible solution that only works with JavaScript.

WooCommerce

The number 1 WordPress plugin for e-commerce really shines with its implementation. It uses a link that directs to the current page with the query string “?add-to-cart=id”. When JavaScript is available, the product is added to the cart using ajax. When it’s absent, WooCommerce handles it in a way different than the scenarios I mentioned before. The product is added to the cart and the user is redirected to the same page again with a success message on top. WooCommerce says “Add to cart” and it delivers what it says exactly with no confusion. When the product requires picking attributes, it redirects the user to the product details page.

OpenCart

OpenCart uses a button without a form that has an onclick attribute. It requires JavaScript to work. When JavaScript is available the product is added to the cart. If the product requires selection of attribute the same button redirects the user to the full details page.

VirtueMart

Perhaps this is one of the least known e-commerce platforms but it is well known across Joomla community. VirtueMart uses a classic form with a button. If JavaScript is available, the experience is enhanced with ajax. If not, the form is submitted and the user is redirected to the cart page. If the product requires selection of additional attributes the button is disabled and the options are displayed to pick from inside the cart. VirtueMart embraces progressive enhancement and provides a solution that works smoothly.

osCommerce

This is an obligatory mention to the e-commerce dinosaur. From the minute you check the demo you get the feeling that you stepped back in time into PhpNuke. osCommerce doesn’t include an add to cart button in the listing. Adding the product to the cart is only available inside the full product details.

Conclusion

There are several methods to mark down the “Add to Cart” button. We should always embrace a method that guarantees the button will work then improve the experience using JavaScript.

Magento 2 vs Magento 1: A Comparison and Review (Part 2)

August 8, 2016March 8, 2017 Mahmoud Tantawy 1 Comment

In part 1, we started a comparison between Magento 2 and Magento 1 in order to list what’s new in Magento 2, while comparing it to Magento 1 to put things into perspective.

We compared themes and extensions development, frontend development, and admin dashboard.In this sequel, we will explore more into the features, performance, stability, and deployment process.

Features

Magento 2 has all the features included in Magento 1, yet adds upon it many new features like:

CSS Preprocessing
Better Security
PayPal integration enhancements
More payment methods based on BrainTree
Full-Page Cache (FPC), now available for Community edition as well.
Performance, or lackthereof as we will discuss later.

Magento 2 is not an upgrade from Magento 1; it is more of a re-write so while it introduces some new features, more effort is put into Magento’s Core as we inspected earlier, so the lack of impressive new features is justified as long as no features were removed and hopefully with time new features will be added after stabilizing the product.

Performance

Releasing a re-write version of a software without adding new features is justifiable and actually expected for the first couple of releases until bugs are squashed and everything is stabilized.

However, releasing a new version of a software like Magento 2 with clear performance issues, where performance has been/is a crucial cornerstone of the software, is never acceptable and is a clear sign that the maturity of the software is badly affected.

Although the different articles list performance enhancements as a feature of Magento 2, we do realize from the experience of working with both Magento products that this is not true and, most probably, this is all just theoretical speculations.

It takes only seconds after installing Magento 2 to realize the following:

Magento 2 is more CPU hungry than Magento 1.
Magento 2 requires more housekeeping than Magento 1
Running Magento 2 in “developer” mode, which is essential during development phase, means you have to wait minutes between page loads, and you won’t even be able to spend that time doing something else as Magento will make sure to leave no resources whatsoever for your computer to be able to perform other actions in parallel.
Magento 2 is slow, like really slow, unbearably slow, not even comparable to Magento 1; we expected Magento 2 to be at least on par with Magento 1; however, this is not true, performance is much worse and pages load much slower and use much more resources.
Even in “developer” mode, which should mean that all caching is turned off, Magento 2 still utilizes some caching mechanisms to be able to perform in an acceptable manner. You have to run `setup:static-content:deploy` to deploy static content like assets, and Magento automatically caches “Dependency Injection” in var/di directory, which causes frustrations and slows down development.

These disappointments were confirmed by the various benchmarks published by other developers, as well as comments by the developers on the different forums.

Almost all benchmarks indicated that while Magento 2 uses more CPU resources than Magento 1, it is also twice as slow as Magento 1, meaning that it can serve only half the number of requests that Magento 1 can serve in the same time, all while using more CPU resources.

These benchmarks were confirmed even with caching turned on, so while Magento 2 offers Full-Page Cache (FPC) for both enterprise and community editions (Magento 1 offered FPC only for enterprise edition), and also offers integration with Varnish out-of-the-box, it is still slower even when utilizing the different caching techniques.

A detailed benchmark can be found at https://www.magecore.com/blog/news/magento-ce-1-9-vs-magento-ce-2-0-performance-comparison “Magento CE 1.9 vs Magento CE 2.0 Performance Comparison”, written by “Dima Soroka” who is the former lead Architect of the Magento project and wrote on the official blog for “MageCore” who are certified Magento Partners.

While Magento 2 supports PHP7 which normally reduces processing time by almost 50%, Magento 2 is still slower than Magento 1; however, utilizing PHP7 makes Magento 2 a bit faster and decreases the gap between Magento 2 and Magento 1.

Here is a detailed benchmark by Dima Soroka as well, https://www.magecore.com/blog/news/php-7-affects-performance-magento-1-9-ce-vs-magento-2-0-ce “How Does PHP 7 Affects Performance of Magento 1.9 CE vs. Magento 2.0 CE”

Magento 2 tries to offer better performance by offering the following tools, which while helping a lot it also adds a lot to the complexity:

Compiling of PHP files.
Merging of global assets
Indexing
Full-Page Cache
Caching of “Dependency Injection”
Caching various other items like configurations and layout

We hope that Magento team will focus on optimizing performance so that Magento 2 at least matches the performance of Magento 1 in the near future.

Stability

It is expected that a major software like Magento doesn’t go live unless bugs are squashed and proper testing is conducted; unfortunately, this was not the case in our experience.

A quick visit to Magento 2 code repository on GitHub at https://github.com/magento/magento2 reveals the amount of issues opened. We have also faced many issues ourselves although we have always used the latest stable release of Magento 2.

Some issues were critical, like the issues affecting the cache and the translations, others we have attempted to make temporary fixes for ourselves, but all in all, our developers have always been surprised by the bad quality of the code in areas with bugs.

Have a look at the release notes for the latest version of Magento 2.1 at http://devdocs.magento.com/guides/v2.1/release-notes/ReleaseNotes2.1.0EE.html. Notice the amount of issues fixed and the known issues not fixed yet. This is obviously not an enterprise-edition software.

It is worth-mentioning that upgrading from Magento to version 2.1 was a complete failure for us; we even had to roll back to a backup of version 2.0.7 after 48 hours of downtime and different trials to fix Magento issues ourselves.

One issue was with the default Magento theme, which we built upon a customized theme. Here is an answer from Stack OverFlow pointing out the bug in the theme “Luma”, along with comments by developers who suffer from Magento 2 instability.

Deployment Process

In today’s software development world, deployment should be fully automated; it is no longer accepted to have a person dedicated to deployments, or even downtime caused by deploying a newer version of a software.

Continuous Integration (CI) and Continuous Deployment (CD) aim at decreasing the effort and time required to push new features, enhancements, and fixes by the developers to production servers by automating the process.

Different softwares and frameworks are built with CI and CD in mind; tools and scripts are developed to make sure deployments are safe, automated, and fast.

We have easily established an automated deployment process for Magento 1 on production servers; the process simplified is the following:

Push release to code repository.
Automatically trigger a script on production servers.
Pull the updated files.
Run modman to make sure new files are correctly linked.
Clear the cache.

What’s beautiful about this process is, beside the simplicity, it takes couple of minutes and doesn’t cause downtimes, unless the code itself caused issues which should be detected by CI when running the automated tests.

We tried to devise a similar process for Magento 2, after many iterations we figured out a long process that looks something along the lines of:

Push release to code repository.
Automatically trigger a script on production servers.
Run `composer update` to update the different packages and since we built our extensions as composer packages which will be updated as well and this usually takes a couple of minutes.
Run `setup:upgrade`; this upgrades the extensions and run any install/upgrade scripts that alter the database and/or install new extensions; this usually takes a minute.
Delete some directories from the directory “var”
Run `setup:di:compile`, this generates DI configuration files, which usually takes 5 minutes and can fail and cause a lot of trouble.
Clear everything inside the directory pub/static.
Run `setup:static-content:deploy`, which creates and deploys static content and assets for all themes, and for all locales, usually takes a whopping 20~30 minutes, shouldn’t fail but actually failed miserably when upgrading Magento to version 2.1.
Re-Indexing.
Flushing the cache.

The process is complicated, long and prone to failure. It causes downtime and takes on average 45 minutes.

This is definitely an unacceptable downtime; the process is overly complicated due to different caching and caching-like mechanisms like DI configuration and static-content deployment.

Conclusion

Magento 2 is definitely a great effort towards matching modern PHP frameworks, which we touched upon in different aspects and have always praised during day-to-day development.

However, Magento 2 team has a lot of challenges to tackle if they aim at staying the number 1 e-commerce solution, using and applying modern standards and technologies is an advantage; however, stability and performance are killers if not given proper focus.

At the end, we hope to see practical improvements during the coming months so as to restore our confidence in Magento being our go-to solution for e-commerce platforms which require scaling, performance, and integrations with the different systems.

Magento 2 vs Magento 1: A Comparison and Review (Part 1)

August 2, 2016March 8, 2017 Mahmoud Tantawy Leave a comment

Magento is an open-source e-commerce platform written in PHP. The software was originally developed by Varien Inc., but after witnessing huge successes eBay started investing in Magento by buying shares and eventually acquired Varien.

In late 2015, Magento 2.0 was released, almost completely rewritten using modern programming concepts and technologies, we will be discussing the changes in Magento 2.0 and the new features through comparing it to Magento 1.

Extension & Theme Development

Magento 2 uses modern approaches in how it is built and how developers can build extensions and themes for it.

In Magento 1, themes and extensions’ files were distributed in many locations, we had to use a Module Manager “modman” which allows developers to place the files in 1 folder and then let modman create symlinks “shortcuts” to where Magento expects the files to be placed; this allows for better and easier development and also allows for using Code Version Control systems like “git”.

Magento 2 on the other hand uses modern approach; everything is a Composer package, which allows for better organization, updating, and code maintenance, along with automating some of the scripts and commands that need to be run after any updates.

In our current project with B.TECH, we made use of that fact and based all our work (both extensions and theme) on Composer packages, linked to our code repository to allow for instant code deployment (Continuous Deployment) for both staging and production servers.

This is definitely a step forward towards modern development cycle, and one that puts Magento 2 inline with modern PHP frameworks while opening new opportunities by enabling direct use of any of the thousands of packages available using Composer Packagist.

Frontend Development

Magento 1 uses Prototype JavaScript framework because -believe it or not- jQuery was not production-ready when Magento was in vitro, and it kept depending mainly on Prototype and the framework’s add-ons like Scriptaculous.

This made frontend development for Magento 1 a bit hard, although you can easily inject jQuery, sometimes you just need to stick with Prototype and work with it, which is not a pleasant experience usually.

Magento 2, on the other hand, uses modern approaches; it uses jQuery and Knockout, but more importantly, it uses RequireJS, which makes a webpage load only the required libraries instead of loading everything in all pages.

Magento 1 -and 2- has options for merging JS files, which, while reducing the number of HTTP requests, makes loading a huge JS file required with every page load, This was a valid recommendation in the early days;however, things have changed with HTTP 2.

HTTP 1.1 used to open a new connection for every HTTP request, so merging assets was a must; however, this has changed with HTTP 2 which allows for parallel requests on the same connection. This allows faster assets download and invalidates the recommendation for having less requests per page.

RequireJS is a good candidate for making better use of HTTP 2, as it makes use of HTTP 2 parallel requests per connection, while loading only required libraries per page, a win-win situation.

Our Senior Frontend Developer, Ahmed Alfy, wrote a nice introduction to RequireJS; make sure to check it out here.

Admin Dashboard

Magento 1 had a very clear dashboard; you can easily navigate and access everything; it loads fast and extensions can easily add functionalities to it.

Magento 2 revamped the dashboard completely. It is based on AngularJS, along with RequireJS for loading the assets, which, while sounds like a step towards utilizing modern technologies, raises many flags.

Magento 2’s dashboard is criticized due to the following.

It can easily fail to load if any of the assets didn’t load for any reason.
It is also much slower, due to having to wait for all the assets to load.
While using AngularJS sound promising, it is actually a disadvantage as it makes loading a large number of products or orders -or any relatively long list- very slow, and very CPU demanding, which can even cause the whole browser or computer to freeze for seconds or indefinitely sometimes.
It is built on AngularJS version 1, although version 2 is now out of beta.
While the overall look of the dashboard is modern and the use of icons and large menus should make it more usable and friendly, this is actually not the case as it is harder to navigate through all the menus and the different menu options and submenus.
While it is easy for extensions to add menu items, installing many extensions -which is normal- can easily make the dashboard’s menu much harder to use or not really usable at all.

Here is a quick example showing the steps required to reach the “Cache Management” page, which is a frequently visited page.

Magento 1

Hover over the “System” link in the horizontal menu.
Click on “Cache Management” in the vertical submenu.

Magento 2

Look for the “System” menu item in the vertical (sidebar menu).FYI you won’t be able to see it as extensions add menu items that push Magento’s menu items downwards.
Scroll down till the icon for “System” menu item is visible.
Click on it.
Inspect the submenu that slides, you won’t find the “Cache Management” link.
Scroll up till you see the link for “Cache Management”.
Click on it.

This is just an example of how the navigation, while might look seemingly better, is actually confusing and hard.

We have touched upon important aspects of the comparison and saw the advancements in Magento 2 in many areas. While it looks like Magento 2 is a real improvement upon Magento 1, in the second part of this blog post we will see comparison of performance and performance-related changes in Magento 2, we will also discuss the stability of Magento 2, so here is a sneak peak.

A Better Way for Obtaining Best Sellers in Magento

May 29, 2016July 12, 2016 Mahmoud Tantawy Leave a comment

Best Sellers, New Arrivals, and Promotions are three cornerstones of any ecommerce solution; they add great value for both customers and store owners.

Best sellers offer customers quick view over the products that other customers buy the most, which adds to the customer’s confidence when deciding to make a purchase and makes it easier for the customer to choose between alternatives.

The method of calculating best sellers is pretty straightforward; you count how many times has each product been sold and order the result by summed-up quantity ordered; then you’ve got yourself a best-sellers widget or products slider that should most probably be placed on the homepage.

In development mode, and on staging server as well, everything is working as you expected, until you move to production and the store owners decide to launch huge campaign that will drive thousands of visitors to the homepage; everything falls apart then, as each request makes Magento recalculate the best sellers and then load every product to show the product’s card.

Caching to the rescue, you tell yourself, and it helps relieve the stress off your database and your store comes back online. You could then make a change and try to refresh the cache while the visitors are hammering the homepage with requests looking for your store’s best selling products and that is exactly when you realize that even those split seconds of recreating the cache can become minutes of downtime as the requests keep hitting Magento while it is recreating the cache are all cache-miss that hammer the database directly until Magento gets it act together and starts serving content from the cache again.

Now let’s back off a moment, Magento has some powerful reports, one of which is, guess what, “Best Selling Products”! So why don’t we check how does Magento generate such report without bringing online stores to their knees, meanwhile, applying one of the most known software engineering principles in the process, which is DRY (Don’t Repeat Yourself) while we’re at it. Okay?!

Magento doesn’t generate this report on the fly or, to be specific, it doesn’t calculate best sellers on the fly; however, it makes use of it’s own cron jobs to aggregate best selling products every day and save them in a database table for later use. This allows Magento to directly hit this pre-calculated table of best sellers and just do the work of getting every product’s attributes, while sacrificing the ability to get fresh and up-to-date list of best sellers, which is not that crucial in most cases.

So let’s stand on the shoulders of giants and make use of that pre-calculated, automatically-aggregated table of best sellers we say, and instead of calculating the best selling products for every request, just query this table for the period you wish and then fetch the attributes you want to view for each product.

As a rule of thumb in Magento development, make sure to invest some time checking if the feature you want to develop/implement is already implemented in a way or another in Magento; this will save you so much time and effort on the long run and will also, most probably, give you a better idea for doing things. Have you encountered a similar problem while using Magento? Tell us what you did in the comments.