A front end developer should be familiar with everything on this list. I figured I had these topics covered, but if you don’t use them in development on a regular basis, you’ll have a hard time understanding your application code. There are numerous videos available online to help you brush up on these skills, but FrontendMasters provided me with all I needed in one convenient location. I took two courses in particular: Kyle Simpson’s The Recent Parts, which covers topics like destructuring, spread operators, and async functions (which almost anything your app does, like API calls and server functions, would depend on); and Steve Kinney’s State Management in Pure React v2, which covers React hooks, state management, and context, allowing you to work with React and Polaris. Putting a few days into training so I could really grasp the nitty-gritty bits of what I was doing saved me so much time in development hours, regardless of which courses or tutorials you select. Shopify’s programming platform is called Polaris.
For your application, it includes HTML and React components. Tabs, modals, icons, and cards—everything you need to create a seamless user interface is included. You can offer your app users a consistent user experience with Polaris. Consider the components of Polaris React as Lego parts. You can mix and match them and they’ll work well together. React is a good technology for this; all you have to do is feed data into your components. Acting with Polaris, I have three key recommendations: Using React Background was the most important code change I made on my second app.
I used props to move data top-down (from parent to child) in my first app, which is a popular React pattern. However, when a large number of components are involved, this pattern may become tedious. Instead of passing data between components, React Context allows you to transfer data through the component tree, which is a more efficient way of sharing application logic. All of my components were able to view and share the application data thanks to Context. This marked a significant shift in the nature and maintainability of the application for me. The ScriptTag API on Shopify allows you to insert a JavaScript file into a client’s storefront. This left me with a lot of unanswered questions. What is the best place for this file to be hosted? Is my server capable of handling a large number of requests?
How much would it cost you?
Finally, I used an AWS S3 bucket to host my ScriptTag file, which was then distributed through the AWS Cloudfront CDN. Fortunately, you can now serve your scripts from Shopify CDNs using the 2021-01 ScriptTag API and “cache”: real. This is a significant performance boost that benefits both app developers and merchants. My recommendations are as follows: Allow Shopify development apps to manage the distribution by using “cache”: real. To value the merchant’s efficiency, keep it as small as possible. No variables can leak if the code is wrapped in an IFFY. Hosting for applications I’ve never had any experience with server administration. Safety, updates, load balancing… there’s a lot to keep track of. Heroku is where I host my apps. It was extremely simple to set up for my use case and provides me with exactly what I need at this time. You’ll need a deployment pipeline to get your app into production, which might sound complicated but isn’t. My system’s pipeline Listing of applications After that, I wanted to make my product listing page, which is the page that merchants would see in the Shopify App Store, look awesome.
I used Freepik to create the images. While I am not a big fan of stock photography, there are a lot of good options available for a reasonable price. For your demo shop, you’ll need a logo, main profit images (optional), and product images. It’s up to you whether or not you want to make a demo video. I didn’t have one to begin with, but with Promo, I was able to make many. I was completely out of my element because I had no prior experience with video production, but thanks to Promo, I was able to get everything up and running in a matter of hours. I choose Zendesk for my personal needs. It enables me to keep track of all of my conversations in one convenient location. The basic package is reasonably priced, despite the fact that it is a paid service.
I even have a few extra “how-to” videos in the app itself, in addition to reactive customer service. These videos walk merchants through how to use the app step by step, hopefully preventing them from having to contact me for assistance. I have an accent because I am not a native English speaker, so I chose not to narrate my own video. Fortunately, artificial intelligence voices that sound almost human are now available. To narrate my videos, I use Amazon Poly. There are no shortcuts to getting on the list other than being prepared. Shopify’s official public app standards must be adhered to to the letter. There is no getting around it. The review process was quick—I received feedback on my first app in three days, and my second app in one day. Since there were “minor problems that needed to be patched,” I did not get listed right away. Even after reading the full specifications several times and taking the time to prepare my application, I made mistakes—which is to be expected when it comes to app submissions.
