The Atwix engineering team spends a lot of time monitoring, engaging, and contributing to Magento Open-Source projects. As CTO, I can tell you this investment is smart business for any Magento shop to stay on top of ALL that is taking place across our eco. However, within our Magento agency, Open-Source is something very personal to all of us. Managers and developers set aside much time and effort to review, share and contribute. Contributing ensues our knowledge and skills stay sharp, and it is great for the greater community to continually move the eCommerce platform forward. To that end, I wanted to share what we have been seeing, and where we have been rolling up our sleeves and participating – recently GraphQL has occupied much of that time and for good reason…
Speed matters in eCommerce. This statement on its own is common knowledge (or should be). However, what may be less known is the need to invest in Magento performance audits and improvements — continually. Think of performance investment not so much as optional, but rather as part of an ongoing merchant’s operating budget needed to maintain optimal user experience (and site owners and all those responsible for managing the site!).
It’s essential to test the Magento website’s performance. Luckily, there are many useful tools and methods for optimizing content delivery, such as content delivery networks, automatic image optimizers, CSS minifiers, etc. Having said that, we must accept that a standard Magento storefront has its limits when it comes to site performance. At some point, you need to choose between performance and system stability/maintainability.
The standard Magento storefront is built in the “old good way” where we have a lot of extra data upon every page load. This layering happens since most of the page components are part of a page layout and should be loaded all at once. In essence, there is no easy way to load a particular component on-demand or cache it somehow separately. This challenge is where PWA (Progressive Web Apps) comes in handy. PWA is not just another hyped trend; it’s a new approach for delivering web content to the end-user.
Unlike standard approaches, in using PWA the system avoids “throwing” a massive page at a visitor by delivering frontend elements distinctly (not all at once). This approach has some consequences, to be certain, but it solves the “performance” problem of delivering a large payload for every page, especially on mobile devices that often leverage slow mobile networks.
All right, you say, let’s do PWA then. Unfortunately, things are not plug-and-play easy. For starters, there is no headless frontend solution that handles all storefront functionality (at least at this point in time). The existing products like Magento PWA Studio, Vue Storefront and others have a basic set of components, which are strong but you still require that you build many system parts on your own. To that end, it would be best to have a proven frontend developer inhouse.
All this talk about the storefront, but what about the backend? The frontend still must communicate with the server where it fetches/stores data and performs many complex calculations. The big question — is Magento backend ready for PWA and other custom storefronts?
The answer is yes…and no. Magento out of the box has excellent REST API coverage, so you may perform almost any system operation via API. However, the challenge is that a REST API assumes you are required to make many requests to the server to collect the data required for a particular page. This fact might slow down the storefront significantly. Because of this well-known problem, an alternative API system called GraphQL has been developed. GraphQL allows retrieving hierarchical data of different complexity using a low number of requests. For GraphQL to support a system, however, you need to build a brand new complex API layer.
Magento decided to go this route and subsequently introduced GraphQL API coverage. The first PR related to GraphQL was created on October 25, 2017, which introduced the GraphQL infrastructure and functionality for fetching products.
MAGETWO-81033: Create GraphQL endpoint for fetching single product
Many good (and not very good) things happened from that time, and by now, we have almost all parts covered necessary for storefront functionality. The most curious thing (and impressive!) about GraphQl coverage is that the Magento community delivered most of its functionality. Take a look at the corresponding repository.
Magento GraphQL Coverage: Merged PRs
You will see tons of PRs merged that bring new functionality. But this repository shows only a part of all the effort that went in. The repository has been archived and all the development was migrated into the central Magento repository.
Magento 2 Open Source: GraphQL PRs
All this work is a remarkable example of how the community can be an author of essential functionality for a large enterprise product. It is also a great example of how a small group of hardworking people, known as the Magento Community Engineering Group, can handle and process a tremendous amount of input from the community.
We are proud of our Atwix contributors team, who did the fantastic job of providing all the new features and bugfixes. It’s worth mentioning that our developers fully or partially developed the following features:
- Adding products to the shopping cart
- Set shipping/payment methods on checkout
- Set shipping/billing address on checkout
- Get shopping cart information
- Place order
- CMS blocks and pages
- Many other features, you may check the entire list [here]
After archiving the official repo, there was a short pause in the GraphQl development from the community end. So we had a chance to take some air as well. But some crucial pieces of the functionality still need to be delivered to the backend to make it 100% ready for PWA storefronts, so no time to rest.
A new endpoint that allows subscribing to the newsletter via GraphQl mutation was introduced recently by the Atwix team. You may check more details about the implementation here.
GraphQL: Subscribe to Newsletter
A lack of GraphQl coverage for wishlist functionality has been a showstopper for many stores for moving forward with the headless approach. Now we have the corresponding endpoint that is supposed to be a part of the 2.4.1 release. However, you may use it right now by backporting the code into your Magento installation. You can check the implementation by the following link.
Another useful set of mutations for the password reset procedure has been merged into the mainline recently. You may check the result in the following pull request.
If you find for yourself that the gift message functionality is absent, we have good news for you. The corresponding logic is already a part of the Magento core and will be announced in one of the next releases.
GraphQL: Gift Message Coverage
There’s a set of mutations in the core for adding different types of products to the shopping cart. But using different mutations is not the most efficient way from the user experience and maintainability perspectives. A new idea for utilizing only one mutation for all types of products was recently finalized in the architecture repository.
Single mutation for adding items to the shopping cart. Architecture
The Atwix team is deeply committed and is helping lead the initiative. Candidly, we have been working on the implementation for quite some time. It is that important to the Magento ecosystem as we all strive for speed through optimized performance. There’s still much work to be done – maintaining backwards compatibility and modularity principles. All this to say, this feature is still in active development. You should monitor the result by the following link.
GraphQL: Single Mutation For Adding Products to The Shopping Cart
Last but not least, we are working on the following features coverage that will be delivered to the Magento core soon.
- Gift Cart support (Commerce Edition)
- Gift Registry support (Commerce Edition)
- Multiple Wishlists support (Commerce Edition)
- Product Reviews support
- Compare Products support
The progress laid out above suggests there is reason to be excited about the 2.4.1 release, in terms of rolling out the features of GraphQI. To be clear, though, do not be disappointed if some features will not be a part of the release. This is common. Beyond this release, we can expect another release later this year. So plan your headless roadmaps accordingly.
The Atwix team will do its best to monitor the progress and releases. We plan to introduce the most vital features of GraphQL as soon as possible. Our goal is to help accelerate the Magento backend, and its critical need to achieve an optimally performing, global headless approach.
