PWA AND HEADLESS
PWA, React, and API-driven storefronts send fewer data between the server and the user and cache it with better efficiency. Also, modern frontend technology such as React improves user interaction experience even in slow network conditions by means of granular loading and caching of individual page components.
Currently, almost 100% of sites on the internet render an entire web page on the server (server-side rendering or SSR) and send it to the user as a big piece of design and data. PWA and headless change this approach to client-side rendered (CSR) pages where we first send the site's designs to the user's device and then inject the bits of requested data into the design template rendering the resulting page on the client side.
This is how mobile apps work: you first download empty layouts and then start requesting data from the server. Now this is available on the web with PWA—the feeling of a mobile app that is always present never gives you a blank screen, and can load data in smaller bits so that your experience is always interactive and consistent.
PWA and headless are API-driven, so it is much easier to integrate any 3rd-party API service, be it personalization service, search, image optimization, or real-time stock or price updates.
React-based API-driven storefront allows you to deploy your site, which is now an app, to Apple and Google app stores. Instead of a multi-month effort, it will be a maximum of a few weeks to prepare it for deployment. A big advantage is that you only need to maintain a single code base across all the channels!
Everybody says this. And we have seen it with our own eyes—we have integrated React PWA storefronts for more than 50 customers running Adobe Magneto and seen conversions increase from up to 7-12.5% on desktop and 10-34% on mobile.
While Google ranking algorithms are not public, we have seen in more than 50 launched PWA projects that an increase in speed is usually coupled with a significant improvement in organic ranking positions on Google. Organic traffic from search engines shows an increase from 7.5% to 27.5% for our customers after integrating PWA into their stores.
If your technology stack is modern, it is much easier to attract the best talent and explore modern microservices-based architectures. Decoupling of the frontend and backend also helps to optimize the total cost of ownership facilitating the switch of the backend platform, being much less dependent on it. Monolith platforms are good and still do an amazing job, but eventually, these will become hard to maintain. Also, the innovation in the eCommerce space will be connectable with API-driven headless solutions, and merchants running on monolith may fall behind or simply spend more time and money on integrations.
Since 2019, we've launched more than 50 projects on Adobe Magento with React PWA storefront—from niche merchants to brands with catalogs in excess of 100K SKUs migrating to PWA from SAP Hybris. Puma, Monin, 6thStreet, aden + anais are among the eCommerce businesses we brought to PWA and headless. Each journey had its own unpredictable situations, but now we are familiar with most of them, and our PWA integration service promises expected business results within the planned time and budget.
In 2020, we made probably the biggest open-source contribution to the Adobe Magento ecosystem since Magento itself. We open-sourced a React-based theme and storefront for Magento working as a headless PWA—called ScandiPWA. And since its release, it has been the choice of brands such as Puma, Adidas, Levi's, Shure, and 6thStreet. We continue to lead React and PWA practice in the Adobe and Magento space, remaining as the team that maintains and advances ScandiPWA products as well as engages with its active community of adopters.
The reason for the lowest cost is simple—we have developed more than 50 sites on PWA and have more than 100 ready-to-use extensions as well as themes to save considerable amounts of developer and QA time. We also built the platform to run Adobe Magento and PWA sites, and it's called readymage.com. This platform provides development and production environments for Adobe Magento with a PWA storefront with just one click, saving weeks of DevOps time. By open-sourcing ScandiPWA and launching readymage.com, we've made exotic, exclusive, and expensive enterprise-only PWA solutions available to everybody, and we continue to champion this trend.
As PWA integration essentially means changing your frontend completely, why don’t we couple it with a redesign? We usually do!
It saves costs, as you do not need to pay for coding your existing design in React, PWA, and then changing it and coding again. Use our data and conversion-driven design process and get the same great business results we have achieved for our other customers.
Our cross-service delivery platform helps you reach business goals by contributing from different competence centers such as technology, SEO, UX and UI, data & analytics, and marketing. In the end, none of our customers needs just “PWA”; they look for remarkable business results that are achieved by combining multiple competencies in the focal point—frontend and user journey.
Our guarantee of the lowest cost also comes with a commitment to shorter development time as we can build your projects from many ready-available blocks. While our process saves you time and money, it also brings better quality as these solutions have been seen to work and tested on at least a few dozens of Adobe Magento PWA projects already delivered. While some PWA technology is still a new journey full of first learnings, we know what to plan for and have out-of-the-box solutions and automation at hand to speed up delivery.
Here are some issues our customers encountered before turning over their PWA project to our team to fix.
SEO tanked after migration to PWA. We revise changes in the ULR structure and ensure the correct mapping of 301 redirects with special attention to the top traffic pages.
Google Analytics and other tracking are not working with PWA. It takes us just a few days to set up our own GTM extension for PWA to cover the basics while preparing the plan to cover all the data layer needs.
Conversion rates decreased after migration to PWA. We set up a basic data layer to understand whether it is a technology or UX issue, find root causes and fix them. It usually takes 1-2 weeks to revert conversions to the pre-Go-Live levels. Then we are happy to work on their increase.
The site looks good, but unless the page is cached, it loads in 6-10 seconds. Yes, default GraphQL queries might be slow, we have developed our own GraphQL queries to maximize performance and can implement them within a few weeks.
Your project is stuck due to the low availability of React and GraphQL resources as well as their inability to collaborate with Adobe Magento backend and data teams? Our 360-strong team can start within 1-2 weeks, and with our methodology of efficient work between frontend and backend teams, we got you covered.
Any other issues, e.g., hosting and deployment problems, you change configs in the backend but it has no effect on the frontend, data is changed but is not shown correctly on the frontend. We know why it happens and know how to fix it. You are a contact form away from a successful Go-Live!
After the initial meeting, we plan a discovery process to analyze the current state of your eCommerce operations and how you would benefit from the PWA frontend. We analyze and plan outcomes for the frontend itself, custom features, SEO, integrations, and data layer. The necessary time and effort to build the PWA frontend is reflected in the estimate that is part of the agreement.
Additionally, we look into opportunities to improve your eCommerce operations, including conversion-driven redesign, technical SEO, enhanced data gathering and analytics, scalable hosting, PIM, or OMS.
Once we start working, we share the project delivery roadmap across all the relevant streams—graphic design, frontend development, backend integration, technical SEO, data layer & analytics—and then we prepare a comprehensive testing plan.
Every week or two, you will be invited to a demo and receive a sprint report summarizing results achieved so far and updating you about the point where we are on the overall project roadmap.
In addition to sprint demos and reports, we also plan larger milestones on the roadmap that aggregate efforts across streams into a demo build of your project.
Milestones are usually as follows
A clean Adobe Magento 2 project with default PWA storefront is set up on a Staging server with default data from your store
The frontend team has completed your theme, and it is available for review on a separate server instance with default data—after its approval, it is merged into the Staging instance, so that your basic data that is now alive and connected to ERP systems is displayed in the correct look, feel, and layout
Extensions are set up and compatible with PWA, custom modules are coded, and custom data from the previous platform is migrated
ERP, WMS, or similar systems are verified to be connected to your new store and data starts to be alive with the import of real SKUs, prices, and stocks—basic orders placed can be received in the ERP system if order export is part of the order flow
SEO team has been working in parallel to make sure that all content, metadata, and redirects are set up correctly
Data & Analytics team makes sure that all events on the frontend are correctly tagged and sent to the data collection platform
The site undergoes end-to-end UAT and pre-live simulation after all scope is delivered and tested internally.
The current site sets up a maintenance page, the new site is up, the cache is warmed up, and we usually manage DNS switch with Cloudflare to enable instant transfer and show-up of the new PWA site for all users without the need to wait for ISP update propagation.
Project delivery, SEO, UX, and data layer teams continue to monitor the site during the first week of the Go-Live and work in close contact with the customer to make sure that all backend processes are functioning correctly and business metrics are stable.
Engage the eCommerce growth team for the continuous improvement of your eCommerce operations and business metrics.
Depending on the site complexity and additional changes bundled with migration e.g. redesign, migration may take from 2-3 months up to 4-5, but usually never exceeds
half a year.
You will get an estimate within a few days after we understand your current eCommerce operations and migration goals. Usually, we are 30-50% below top estimates because we keep our hourly rates competitive hiring globally and do many complex things much faster automating them since 2015. We are also 30-50% more expensive than the cheapest option you would get because while our hourly rates can be comparable, we see and estimate a much broader scope that we need to take care of for a successful migration than a low ball estimate.
Yes, we migrated to Adobe Magento from Hybris, Shopify, and legacy proprietary systems. Essentially, it is data on your products, customers, and orders that needs to be transferred as well as an understanding of platform features and integrations to make sure your new platform on Adobe Magento 2 will support all usual data flows and process.
Yes! We recently launched Buff global site migrating it from Community to Commerce adding a new design and React storefront from ScandiPWA during migration.
Sure, you can. We set up Dev, and Stage on our readymage.com infrastructure, and pre-live and Live can be set up on your preferred hosting.
Yes, absolutely. It is stated in the agreement, that there is a one-time project fee without lock-in or code rent. You will need to revise the pricing of 3rd parties though, but we can help with that.