Styles & Extensibility: Reaction vs. Shopify
It’s been two months since I joined the Reaction Commerce team as a Community Engineer, but it’s been over two whole years since I started contributing to the project as the lead developer for GetOutfitted, a snow gear rental company (RIP). Before we switched to Reaction, I was building GetOutfitted on Shopify, and before that, I ran a small development and design shop that did a number of custom ecommerce builds on Shopify. Having spent multiple years developing shops on these two platforms, I feel like I have a unique perspective on the pros and cons of both.
We had a question in our most recent Reaction Action on how extending and theming Reaction compares to extending and theming Shopify. I answered this question during the livestream, but since it's a topic that comes up frequently, I wanted to expound on my answer and make it available to anyone looking for a comparison.
In terms of extensibility, Reaction is ahead of Shopify in almost every sense. With Reaction, it's fairly easy to build a plugin and drop it into your reaction
imports/plugins/custom directory, and from there, everything just works. You don't need to have a separate server, you don't need to generate an API key, and you don't have a separate app to maintain. These plugins can extend the core Reaction Schema, can add or change views or templates, and can add or modify business logic to your commerce application.
Because Reaction is open source, a number of plugins that people have built are available for use, such as this CSV Product Importer that we built at GetOutfitted. Additionally, much of Reaction’s core functionality is built in as a series of plugins. If you look in the
imports/plugins/included directory in your Reaction app, you'll find plenty of examples of plugins that were either built or maintained by the Reaction core team.
Reaction does not have an extension store like Shopify does, but I’ve always found that, when building any type of complex shop, an extension store is a decent start, but it’s not quite enough. If you’re building a super simple shop, like a t-shirt store frequented by friends, Shopify and its built-in extension store might be easier to use. However, once you need any kind of custom work, eg. custom business logic, unique fulfillment requirements, or any other kind of moderately complex customizations, Shopify gets difficult to manage.
In my opinion, from a theming perspective, comparing Shopify to Reaction is like comparing apples and oranges. For simple changes, building Shopify themes in Liquid can be pretty easy, but it gets really messy and hard to manage once you want to build any kind of custom business logic into the view. Have a custom inventory model? Be ready for a lot of pain and technical debt. We rented products at GetOutfitted, and building that functionality on Shopify was a nightmare. I was constantly afraid that any change might break something important in a different liquid template elsewhere.
Additionally, Shopify doesn't let you customize some of the most important parts of your app, such as the Checkout page. Want to run some experiments to see how changing your checkout flow might improve your conversion rate? Can't do it, even in Shopify Plus! In Reaction, you can change any style, component, or layout. You can create custom business logic in a plugin and still get access to updates to the core project. And while the learning curve for theming Reaction may be a bit steeper than learning Liquid for theming Shopify, once you understand how to build plugins that change the way Reaction works, I believe you'll find it far easier and more powerful than theming for Shopify.
Shopify's theming system really isn't bad for making simple changes to styles or page layouts, but Reaction makes it possible to not only change anything about your layout or theme, but to also build custom business logic that can hook into any part of the app.
One last gripe I had with Shopify was how difficult it was to manage any kind of modern build process for a site. When I built my last shop on Shopify about two years ago, I remember it being a huge pain having any kind of deployment process that didn't involve either FTP or copy and paste. If I wanted to maintain separate (CSS/SASS/LESS) files for different parts of the app, I had to build my own grunt/gulp/webpack script that would combine them, then also build my own process to deploy the newly built files. Using Babel to integrate ES6 compatibility into my development process was also very difficult. I never got any kind of Continuous Integration or automated testing working with Shopify.
Perhaps Shopify has improved their developer experience for these issues in these last two years. I sure hope they have. But the point I want to drive home is this: Reaction is a joy to develop with. Meteor as a build tool manages all of the configuration—I can write ES6 code, I can separate features into different plugins (we built and maintained 15 plugins at GetOutfitted with 2 developers!), and guess what? There’s built-in test coverage, and it's easy to add tests for existing functionality.
If you're looking to switch from Shopify to Reaction and you have any additional questions, feel free to reach out to the community team on Gitter, or leave a comment here. I hope this post has given you some insight into my experiences having developed for both.