Every day in the Twitter universe, HN and other places, you'll see thee olde arguments about using React vs Plain Javascript, AWS vs. Heroku, HTML vs. FE frameworks, modern app frameworks vs. Wordpress/Rails etc. The list goes on...
I thought it'd be cool to showcase our development philosphy and how we build software as it relates specifically to Shopify apps. Below you'll find the development philosophies we follow here at The Shop Apps. We're a small team so some of the things below we know couldn't scale for large teams, but it works for us. Check out our business philosophies here.
We've got our apps set up in a way where they pretty much all share the same template and structure. We rely heavily on Rails best practices (as most should with 🛤️ Rails).
Most logic should be in the models (`app/models`) of the application OR in classes set up in `app/lib`, all background jobs should live in `app/jobs` and utilize Sidekiq. We only need to stay away from Rails best practices when we really really really need to implement custom logic or definitions (which we haven't done yet).
If a customer has a feature request or needs custom logic for a specific use case - do it. Since there is currently only two of us, it is safe to implement logic that is specific to a customer. But make sure the code is clean and concise with the intention to seperate it out from CORE logic eventually. The customer is king 👑.
Since we build out a lot of custom functionality, we place a lot of value on refactoring. Do this every 3-6 months so that our codebases is kept clean (you know - for the future owners 😉).
HTML is not going away, and SCSS makes writing CSS so much better. Only pull in React if we have to implement complex UI behaviors.
We both have used frontend frameworks in our full-time jobs in the past (mainly React and Angular). While we can see the value -- it doesn't fit small projects where we need to do things and do them quickly. jQuery 💲 allows us to quickly modify the DOM and do whatever we need to do to get an app working and functional.
That being said, we want to keep our jQuery consistent. Use an object based system e.g. TheShopCalendar.calendar.showTooltip() and do not put random pieces of jQuery anywhere you wouldn't be able to "find it".
For React (if needed), create views that are seperated and hold our React components. Don't muddle our views too much.
Instead of using frontend frameworks for this one key concept, implement component based HTML files. This makes our HTML files clean and not full of divs on divs on divs. While it may increase our load time - it is miniscule in terms of a performance hit. Our apps are serving customers, but most of the apps we build aren't Enterprise level where performance and speed are a true concern.
To keep our codebase somewhat clean, create feature branches 🌿. When merging PR's into master - make sure that you squash all commits into one so our commit history is clean, and we have a good timeline of feature/code commits.
The one thing that we do not want to worry about, is building out grids, layouts, components and utility classes 🌐. We find Bootstraps grid to be effective, easy to learn and straight forward. We utilize utility classes heavily in our layouts to make our apps look pretty and consistent.
Shopify Polaris is great. If we want an app to blend into Shopify - then use it. We prefer Bootstrap overall, but sometimes we feel like an app would make the user more comfortable if it was closer to Shopify's UI.
We feel pretty strongly, that if we use a library or package that truly helps us in our development lifecycle, we need to support the developer(s) 💸. Open Source rules the world and we want to give our thanks.
Please do not write any fancy code. Keep it straight forward and readable 📖. You should be able to read the code and know exactly what it is doing upon first glance.
If complexity is needed, make sure it's 2 or 3 lines tops! An example is something like implementing complex Regex scheme. If this is the case, make sure to write clear comments on what the code is doing.