Progressive Web Apps: Interview With The Front-Commerce Founder

Progressive Web Applications (PWAs) have stopped being just a fancy word. This technology displaced native apps and proved its cost-effectiveness for top ecommerce businesses such as Alibaba, Aliexpress, Flipkart, Lancome, and more.

PWAs work both like traditional websites and mobile apps and provide such functionality as offline mode, push notifications, easy development, and multi-platform capabilities. They are SEO-indexed and GPS enabled, consume little storage, don’t require updates, and can be installed on the home screen. 

PWAs have been around for some while, but what is going on with the technology? What are the future trends of PWA? To find out, we had a chat with CTO & Co-Founder at Front-Commerce, Pierre Martin. Front-Commerce is a front-end PWA solution created for Magento stores to boost the web performance of ecommerce stores, particularly on mobile devices.

Q: Why is PWA so great?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

PWA meets the need for better usability on mobile devices by bringing security, speed, and ease of use through a web application. Teams who invest in native mobile applications will appreciate having a native app-like user experience with a single web-based codebase to maintain.

By leveraging emerging web browser APIs and good design principles, it is possible to deliver fluid browsing experiences while maintaining an accessible website for low-end devices or older browsers. This progressive enhancement strategy is what makes PWA so great!

For instance, merchants with a responsive website can get their mobile user’s happiness back thanks to some technical efforts that many solutions and developers can provide now.

Q: Why did you choose to create a PWA platform specifically for ecommerce? 

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

Front-Commerce was initially bootstrapped at Occitech, a service company of  Magento experts who also created tailor-made web applications across different industries. We noticed back in 2015, with beta releases, that Magento 2 could be used as a headless system, and that its built-in template engine would not converge with widely adopted ones.
Our experience with modern frontend tools (used in custom web applications), made us think about making Magento2 storefront development easier by managing the frontend as a separate application, with a JS frontend framework. The point was not to build a PWA solution but to have a decoupled architecture, which brought PWA compliance. That’s the reason why it was built with eCommerce in mind since day one.

Q: What makes a Front-Commerce a unique solution?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

Front-Commerce is the pioneer of the PWA eCommerce frontend, started in 2015. It was also the first to have stores operating in production since early 2018. It gives us a functional coverage, a technical advance, and robustness that confer confidence.

Front-Commerce is commercial software. Our team was aware that maintaining an open-source community would require huge energy. We chose a pragmatic approach by investing our energy into expanding functional coverage of the product and improving it from learnings from stores in production. This posture is now an asset that allows us to guarantee our code and provide training, expertise, and on-demand add-ons worldwide. Effective eMerchants are in-demand for those professional services and SLA. 

Our code is fully open to our clients though, and programmers can interact with us on our Gitlab platform as they could with any open-source projects.

Front-Commerce is provided with a wide range of ready-to-use tools to allow a project to run with the best practices of our industry: unit tests, integration tests, a Design System, a media middleware to serve the best dimensions and compression possible for images adapted to each visitor’s device (using WebP when possible)…

We also want to let developers focus on delivering value to users. No more bikeshedding on technology choices and making all pieces fit together, we take care of that with regular stack updates, Server Side Rendering out-of-the-box, a gateway to reuse existing payment modules on Magento, an effective and proper invalidated cache system for all API calls, SEO full compatibility with the latest best practices and even more.

It’s the most advanced solution on the market that allows programmers to focus on their project and build blazing-fast websites that boost sales and makes users happy.

Q: How is Front-Commerce different from other PWA platforms?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

Front-Commerce was the first to use a Node.js middleware that would expose a GraphQL API. This makes connexion to different systems a breeze because when developing your front-end you no longer need to worry about where your data comes from. You only need to specify what data you need.

The GraphQL API then parses your request and dispatch it to the different services. We strongly believe that headless commerce will shine in the near future, and Front-Commerce embraces it while allowing us to start the journey with existing headless monoliths.

A common use-case we see regularly is progressive migration (for instance migrating from Magento 1 to Magento 2 is a one-liner for Front-Commerce apps!) but also allows you to use best-in-class services for your use case. For instance, you can imagine using CMS content from WordPress, Prismic… but still use your preferred e-commerce solution for cart, checkout, and customer management.

It also facilitates connecting existing systems to this new frontend because you can reuse (or create) the endpoints exposed in your system instead of indexing content elsewhere. Performance is ensured by caching strategies that allow you to cache data granularly in a performant database (Redis, …).

As for the theme, we use tools that are widely used in the JS/React ecosystem (Webpack, Apollo Client, Storybook, …) but also the practices (Routing system inspired by Next.js, Nuxt, Gatsby…). This allows integrators to feel at home when they are starting a project with Front-Commerce, and they usually love to let us handle configuration and compatibility issues for them so they always have an up-to-date stack without spending hours browsing Github issues!

Front-Commerce also has a powerful way to override components to match your own needs and customize almost everything. Copying the file you want to override in your own project is all you need to have it automatically detected by Front-Commerce. This allows you to have a fully-featured base theme that is still highly customizable. This feature is in the core since 2017 and is proven by many implementations as we speak.

Read more: Progressive Web App Ecommerce Examples

Q: Speaking of building PWA, is there a difference in performance between React, Vue, and Angular?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

The main difference if we compare the frameworks as a standalone module is their bundle size. A simple application in Vue is smaller than React or Angular (the outsider in this area being the promising Svelte library!). The other differences between those libraries don’t really matter for an e-commerce shop if one respects each library’s best practice.

However, an application should be considered as a whole, and performance is not only a matter of Lighthouse metrics. For instance, SSR (Server Side Rendering) makes the first display of useful information faster while javascript loads. In Front-Commerce we also have a cache layer that improves global performance and decreases the load on the e-commerce back-end. There are other features such as pages preloading, analytics asynchronous loading, GraphQL batching, and many other low-level aspects that make the overall experience better. In the end, the goal is that users perceive performance and how the PWA is designed is a crucial factor to achieve this.

What is important is to compare the whole package instead of the underlying technology.

Q: What is the time-to-market (what difficulties are there when integrating with an ecommerce platform)?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

This highly depends on the amount of customization needed for the project. If the shop only uses native features of supported e-commerce platforms, it will only be a matter of customizing our default theme to match the brand and create a fluid digital journey.
However, if you need some custom features, you will need to enhance the data graph (GraphQL) to interact with the relevant remote APIs. In platforms such as Magento, creating API (REST or GraphQL) is quite straightforward but it could be something overlooked when buying modules from a marketplace. Exposing an API for module features not exposed will mean digging into the code and could be an issue if the module is not designed properly. 

However, for projects using data from external headless services, such as CMS, WMS, CRM, Customer Reviews, etc… it is much easier to access them from the GraphQL layer than synchronizing data into the backend the usual way to later expose them through the API. 

Developers becoming efficient with such architectures are more productive thanks to the strict typing of GraphQL models they create. It also enables frontend developers to access data from several sources in a unified way which is a booster for most projects.

Q: How long does implantation take?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

We estimate that for the same scope, it can take 15% less frontend implementation time than a standard e-commerce shop, by using react with no templating constraints. However, the main difference is that shops taking this route usually also improve their UX and deliver more refined interfaces which makes comparison harder.

On the backend side, it takes a little more effort to expose the API of custom modules, but it’s also faster to aggregate external data.

In the end, it depends on: the complexity of enhanced UX, the number of custom modules impacting the frontend, and the number of external sources of data.

Q: How do you feel about combining PWA and AMP?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

The main reason AMP exists is to improve the performance of websites by providing a caching mechanism and by limiting the set of available features on your website. But this comes with a price. You are no longer completely free when developing new functionalities, and you need to make sure that your website works both in standard mode and AMP mode. While it can improve your SEO because Google wants to promote their technology, one needs to carefully weigh the pros and cons and consider what is most important for their shop.

Moreover, if your website is a PWA, it should be fast. That’s not a given but that’s what PWAs aim for. If your website is already fast enough, you may not need AMP to speed it up. But keep in mind that it’s not the case only for PWAs. It still stands for standard e-commerce websites: if it’s already fast, you may not need the performance boost from AMP.

Q: What’s the future of Progressive Web Apps and web development in general?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

Devices (browsers, mobile phones, voice-based assistants) will continue to change the way users interact with web services. Web developers will have more tools at hand to build interfaces that allow people to consume their services. These technologies will keep evolving at a fast-pace and it will be more and more difficult to stay up-to-date with the latest features and practices.

Low-code or no-code platforms may allow to quickly build prototypes and even replace standard applications that used to leverage RAD frameworks. However, we think that there will always be room for well-crafted user interfaces and performant web applications for user-centric projects. For this reason, we think that solutions will have to provide consistent, low-level, regularly updated tools with clear migration paths to help developers to keep their web applications up-to-date and leverage the latest features made possible by the web platform.

Since more and more clients will consume data and services, headless will become the default. It allows to creating resilient and agile solutions to deliver features and services to the final users faster thanks to existing platforms. By composing existing SaaS applications, custom microservices, and legacy monolithic applications it allows existing actors to progressively move towards this final goal. Web developers will thus have to be efficient in distributed environments and understand the big picture of such architectures. A few years ago, GraphQL brought a new way to implement Service Oriented Architecture and there may be new technologies such as this one in the future.

Finally, we also think that decentralization could also help to shape the future of web development. Protocols and technologies such as ActivityPub, IPFS, dat://, SSB or Solid are already quite mature to implement a whole new range of applications in this new paradigm. Coupled with the offline abilities of PWAs, we envision many attractive applications.

Q: What features will E-commerce PWAs of the future have?

Pierre Martin, CTO & Co-Founder, Front-Commerce: 

Ecommerce PWAs will allow addressing the needs of both new visitors and regular customers. By providing a fast browsing experience regardless of the user device and data sources, it enables a wide range of user experiences to be built. 

With new browser APIs being widely available on devices, we will see even more seamless buying experiences. The Payment Request API makes checkout a snap by removing several barriers for day-to-day orders. Notifications, if used efficiently, will also improve the overall experience (shipment tracking, stock alerts, one-click restocking…). We hope that PWA builders will start using notifications sparingly so this standard will not die because of a browser blocking them by default to prevent user annoyances due to marketing abuses and spams.

When coupled to headless systems, PWAs will also allow merchants to develop their omnichannel strategy with features such as click-and-collect, web-to-store, self-checkout, and many more!

In some contexts, PWA’s offline possibilities could allow implementing offline catalogs and shopping experiences. We believe that offline will solve problems in very specific B2B use cases. Features such as background synchronization, and devices always more powerful will also allow eCommerce PWAs to have very tailored and robust features for such situations.

Even though it is not yet the first thing people have in mind, we think that PWAs will also allow merchants to build features for the desktop. Be it a POS for their physical store, a dedicated app for corporate purchasing, an application requiring large computing capacities (leveraging WebGL and WebAssembly), PWAs will not only be for mobile use cases. This is something that we are glad to explore with potential customers and excited to see emerging.

PWA is the future of web design

Industry experts across the ecommerce market agree that PWAs will be the future of mobile commerce, enabling developers to create superior user experiences that have the reach of the web and the functionality of native apps. 

More and more ecommerce businesses are embracing PWAs for their websites to get ahead, stay ahead, and beat out the competition. Certainly, PWAs have a strong presence in the ecommerce market and are expected to be a bright future of web apps!

If you’re looking into PWA development for your ecommerce store, we can help you build it. Let us know if you have any questions about PWA.