To kick off the year, I’ve talked to Adrian Bece, one of our frontend developers who has been delving deep into PWAs and is among the most active contributors to Magento’s official PWA Studio. Take a look at what he had to say about the state of PWA in the world of Magento and eCommerce, his analysis of the solutions that are already out there, and a reflection on how contributing to open source projects helps him hone his development skills.
Hi Adrian. As one of our frontend developers who has been working on PWAs the most, what do you expect in 2019 when it comes to the world of progressive web apps? How do you see the adoption of this new concept and what’s the shape of things to come?
Hello Aron. During the past two years, we saw awesome success stories when some of the key players like Pinterest, Twitter and Netflix switched to PWA.
They saw significant improvements in overall performance, user experience, user engagement and generated revenue. PWA accommodates users with unreliable internet connection, internet connection with varying speed and devices with varying processing power.
By using React, Vue or any other similar Javascript Framework, creating a delightful and seamless app-like browsing experience has never been easier.
These improvements are especially important for eCommerce since lower loading times results in improved user engagement and increased revenue. For example, Alibaba saw 76% higher conversions and up to 30% more monthly active users on mobile. And AliExpress saw up to 104% increases in number of users with increase of 74% more time spent per session across all browsers. You can find numerous examples of successful PWA eCommerce case studies like these.
PWA features will definitely become a standard. Websites and platforms (like Magento and WordPress) will transition to PWA eventually, with more to follow suit as more and more successful case studies are being published. Developers and agencies will need to be ready to offer those features to their clients and even build a proper PWA websites from the ground up with Javascript Frameworks like React and Vue.
Benefits of having PWA website definitely are worth the development cost. To quote an article from A List Apart: “…nearly every website should be a progressive web app, because they represent best practices for the web”.
What would you say are the advantages and disadvantages for developers and merchants going with PWA Studio as opposed to Vue Storefront or Deity as the basis for their new projects? Do you see those as direct competitors, or will they all be able to get their share of the market?
So far I’ve worked most with PWA Studio and Deity, since I’m primarily a React developer, and I’ve been somewhat familiar with Vue Storefront. First off, It’s important to note the difference in the approach between these three solutions.
PWA Studio is more of a set of tools for developers to create React-powered PWAs for Magento 2. It’s more aimed to developers and agencies. Even though Venia Theme is a part of PWA Studio package, it’s only meant to be used as a showcase and not as a base theme. PWA Studio allows developers and agencies complete control over the theme’s structure, code pattern, modules and technologies from start to completion. Developers aren’t forced into using specific modules, technologies (besides few base required ones like React, of course) or code patterns.
PWA Studio is developed by a dedicated PWA team at Magento, so we can expect regular updates alongside Magento 2 updates once the PWA Studio is fully finished. It’s also important to note that the community is very active with the contributions on GitHub and discussions on Slack.
As for Deity, it is equally aimed at merchants as it is for developers, since they offer a quite powerful theme editor where users can make quick and easy theme adjustments (color, breakpoints, typography, spacings, logos, etc.). This would be useful for merchants who would prefer just having a simple PWA theme without any additional development or customization costs. Deity is driven to be more platform-agnostic and it features WordPress and Algolia API managers alongside Magento API manager, so it’s easy to integrate CMS, blog and more advanced search right out of the box. With extra development cost, Deity can be adjusted to work with any other API.
Vue Storefront (VS) comes with theme boilerplate which can be used as a base to develop custom theme, and also offers a complete theme which can be slightly modified and used in production, so there are some development and customization costs required. Like Deity, it aims to be platform-agnostic out of the box with many API integration possibilities. VS is being developed by a team of dedicated and experienced developers alongside the active community. VS team also organizes workshops and trainings in order to keep the community active and push VS to both merchants and developers.
Even though these solutions aim for the ideal PWA experience for Magento 2, we can see the differences in final approach and what they have to offer. Vue Storefront and Deity being aimed as a complete theme packages with additional development and extension options, and PWA Studio being aimed as a set of tools for developers to create custom themes from scratch using the tools and technologies they are accustomed to using.
Ultimately, I think that market share will depend on whichever solution will be adopted by more agencies, developers and the size of developer community around them. Since the final goal for the merchant is having a reliable, flexible and fast PWA solution, it’s up to agencies to choose and offer the appropriate solution and be very familiar with it.
You have been very active in contributing to PWA Studio lately. Can you share some of the features and other contributions you are most proud of so far?
I’m proud of every contribution to PWA Studio so far, but most significant contribution so far is a Search Suggestion feature which offers suggestions on products and categories as user types their search query.
As for the technical details, you can watch the demo I did for Magento Community Engineering channel on Youtube:
Besides this feature, I’ve worked on fixing several bugs (UX, frontend and performance) which have been merged into the release, I’m also actively reporting issues I come across and I’m regularly attending weekly calls and discussions with PWA Studio team and community.
How does this process affect you as a developer? I mean, obviously you have to work on client projects as a part of your daily job, but what are some of the perks of contributing to open source projects like this? What are the upsides and downsides?
Most important upside to contributing is learning and improving as a developer. Contributions to PWA Studio are reviewed by one or more developers (both Magento and community) before release, and community has been very helpful with advices. Every task is an opportunity to learn something new or improve. It’s great!
Another upside is the challenge. I love to develop something that I haven’t had a chance to work on before, like the Search Suggestion feature I mentioned earlier. On a regular Magento 2 project, backend developers would have to create this feature or a client would have to get a separate extension for it. I strive to be very versatile as a developer and it’s exciting to see how the role of Frontend and Javascript developer is expanding and how much more we are able to do now.
So far, I haven’t experienced any downsides while contributing to open source projects. I assume that, in some general case, downsides could be attributed to organizational issues and lack of communication between the repository owners and the contributors. I was lucky to work on contributing to projects which are very well managed.
It’s important for the repository owners to actively communicate with the contributors if they are willing to accept their contributions. It’s also important for them to check and keep track of the issues community is reporting. Similarly, it’s important for a developer willing to contribute to get familiar contribution process (automated code checks, code styles, rules, licenses, etc.) and check beforehand if contributions will be worth their time and if they are even going to be reviewed and, potentially, accepted.
Can you describe the process of contributing to PWA Studio for our readers? How does it work, where and how do you communicate with the Magento team, who is “in charge” and who gets the final say in whether a certain contribution makes the cut?
Before contributing code to PWA Studio, contributor should first become familiar with the contribution process and rules by reading the Contribution guide.
You can contribute by reporting issues or by contributing code – developing features or fixing a bug that has been reported.
If you want to contribute by reporting an issue on GitHub and you have found something in the release branch of the code that needs fixing, it’s a good idea to check if the issue hasn’t been already reported. Next, you will be provided a template for reporting an issue. It’s important to share as much detail as possible on steps how to reproduce an issue, testing environment and any other detail which is important for reproducing it.
If you decide to develop a feature or fix an issue, first you need to claim the task.
You can either comment on the issue page itself on GitHub, ask directly on #pwa channel in Magento slack (which is linked in the docs) or contact Eric Erway on Slack (Eric is the Project Manager for PWA Studio). Also, you will need to make sure to check if the task hasn’t already been claimed.
After completing work (following the best practices in the guide which has been linked above) and submitting the Pull Request on GitHub, someone from Magento or community will need to review your code and approve it before merging. They will let you know if there are any changes required before merging the code and offer assistance if needed.
Before submitting the Pull Request, you will need to make sure that the code passes all the automated tests and follows the code style and best practices set by Magento PWA team
What are some of the things that can be improved in working with Community Engineering team? Where do you see some bottlenecks and what would you suggest as your “contribution” to this area?
Currently, the contribution process is straightforward and relatively smooth, but I can see a potential bottleneck with increased community contribution.
During the late November and December, as community around Magento PWA Studio has become very active and eager to contribute, I have noticed a spike in number of submitted issues and Pull Request on GitHub.
I would speculate that the number of Pull Requests and issues almost doubled. Hopefully, the Magento team will not be overwhelmed and will be able to organize and handle the increasing number of contributions as community becomes more engaged.
I hope that the contribution process will remain smooth and continue to improve over time.
Thank you, Adrian, have a great new year with lots of contributions making their way to PWA Studio – the more, the merrier!
