I got asked a while ago by one of my students, “What is the best programming language for Shopify app development?”.
If you’ve been following us for a long time, you’d know that we create Shopify apps using PHP. However, in my work, I do use React. Surprisingly to say but I really liked developing with React than the core PHP. Now, you may be asking why? Well, there are a lot of reasons why I prefer using React and in this blog post, I will be comparing the two languages from a coding point of view.
Shopify App Development with Node, React, REST API & GraphQL
Discover how to create a Shopify app that works using Node, React.js, Polaris, REST & GraphQL.
Creating Shopify apps with PHP vs React.js
Making Shopify apps with PHP is great especially if you prefer to have control over everything in your development. Because you’re not using any frameworks and modules, you know exactly where you’ve written your own functions, classes, and features. Not only that but you know exactly how to fix them if in case you encounter an error. But to be fair is it not the same if you use other programming languages or libraries like React?
If you’ve been following us for a while, you may be familiar with the following code:
<?php
$query = array(
"client_id" => 'xxxxxxxxxxxxx',
"client_secret" => 'xxxxxxxxxxxxx',
"code" => $shop_data['code']
);
$access_token_url = "https://" . $shop_data['shop'] . "/admin/oauth/access_token";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $access_token_url);
curl_setopt($ch, CURLOPT_POST, count($query));
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($query));
$result = curl_exec($ch);
curl_close($ch);
$result = json_decode($result, true);
echo $result['access_token'];
Code language: PHP (php)The code above is written by our friend Alex and this is what I personally use for generating Shopify access tokens in PHP. Very simple, right? Just provide your API and secret keys and use cURL and you’ll be able to get your access tokens.
Now, what is the problem with the code above? Well, first of all, if you’re not truly familiar with PHP then you probably won’t understand the code above at first glance.
You see, in the code above it took us 10 lines of code just to get the access token and with PHP, you will have to do the same process to use REST API. In other words, developing Shopify apps with PHP can take a lot of your time. Yes, you have control over everything, but is it really worth a try?
Now, what about in React? How do you get the access token?
Well, getting Shopify access tokens in React is actually very easy. Thanks to koa-shopify-auth, you can generate an access token by simply using one single function: shopifyAuth. Here’s an example for shopifyAuth function:
app.use(
shopifyAuth({
prefix: '/shopify',
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_SECRET,
scopes: ['write_orders, write_products'],
accessMode: 'offline',
afterAuth(ctx) {
const {shop, accessToken} = ctx.session;
console.log('Here\'s your access token: ', accessToken);
ctx.redirect('/');
},
}),
);
Code language: JavaScript (javascript)In this single function, you can easily generate access tokens. Just one function! Unlike PHP, you won’t have to learn about cURL, setup your URL, etc. Just provide your API and secret keys, set up your access scopes and you’re good to go.
Now, if I am going to ask you, which one is more readable and easier to understand? PHP or React?
If you answered PHP, then good for you because it means that you’re up for a challenge. If you answered React, then that means you’re taking the easy and fastest way to develop Shopify apps.
Now, does that mean the PHP is a bad programming language for Shopify app development? Of course not! But I wouldn’t say it’s the best either.
There are a lot of reasons why you should use Node and React for developing Shopify apps. One of the reasons is GraphQL and Polaris.
If you’re not fully aware yet, REST API is very slow compared to GraphQL. This is because REST do not allow you to pick the fields you want to query. Let’s take a look at the following code:
$products = shopify_call($access_token, $shop_url, "/admin/api/2020-10/products.json", array(), 'GET');
$products = json_decode($products['response']);
foreach( $products as $product ) {
foreach( $product as $key => $value ) {
$PRODUCT_ID = $value['id'];
$product_image = shopify_call($access_token, $shop_url, "/admin/api/2020-10/products/" . $PRODUCT_ID . "/images.json", array(), 'GET');
$product_image = json_decode($product_image['response']);
var_dump($product_image);
}
}
Code language: PHP (php)As you can see in the code above, we’ll have to do two REST API calls just to get the images of a single product. This itself is very costly and can slow your application down.
Unlike PHP, Node and react can allow you to use Shopify GraphQL using React apollo and graphql-tag. Also, you can use both REST and GraphQL in React. So, that’s a win for React.
import gql from 'graphql-tag';
const query = gql`
{
products(first: 10) {
edges {
node {
images(first: 10) {
edges {
node {
originalSrc
}
}
}
}
}
}
}
`
Code language: JavaScript (javascript)As you can see in the code above, we only needed to do one query to get 10 images per product. It’s also very easy to understand because, with GraphQL, you can specify in the query which data you want to retrieve. In the code above, we simply used the products field and specified in the input that we only need the first 10 products. Then, in each node, we are going to use the images field and specify in the input that we only need the first 10 images and each node response will only give us the value of originalSrc field.
If you’re curious about the response, here’s the JSON response generated by my code above:
{
"data": {
"products": {
"edges": [
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1505460695.jpg?v=1605240202"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1495236089.jpg?v=1605240203"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1173869630.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476396.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476394.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476399.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476398.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476401.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476402.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476397.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476395.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1422476400.jpg?v=1605240206"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1505460173.jpg?v=1605240203"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-998007610.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713435.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713440.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713439.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713437.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713438.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1320713436.jpg?v=1605240205"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1458993934.jpg?v=1605240203"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429264792.jpg?v=1605240203"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429264793.jpg?v=1605240203"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429264791.jpg?v=1605240204"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235656.jpg?v=1605240204"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235662.jpg?v=1605240204"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235664.jpg?v=1605240204"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235666.jpg?v=1605240204"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235663.jpg?v=1605240204"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1433235665.jpg?v=1605240204"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647494.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647501.jpg?v=1605240205"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647503.jpg?v=1605240206"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647502.jpg?v=1605240206"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647500.jpg?v=1605240207"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1429647504.jpg?v=1605240208"
}
}
]
}
}
},
{
"node": {
"images": {
"edges": [
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928607.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928615.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928618.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928616.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928613.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928617.jpg?v=1605240213"
}
},
{
"node": {
"originalSrc": "https://cdn.shopify.com/s/files/1/0509/9002/2826/products/product-image-1611928614.jpg?v=1605240213"
}
}
]
}
}
}
]
}
}
}
Code language: JSON / JSON with Comments (json)So, is React.js better than PHP for Shopify App Development?
If we’re going to compare the two, in my own opinion, yes. React is much better to use compared to PHP. However, it doesn’t mean that PHP is not good for Shopify app development because after all, it will depend on the project that you’re working on and where you’re comfortable creating the app.
Summary
There are a few similarities between React and PHP, but there are more important differences that you need to be aware of. Obviously, PHP is more for back-end development, and React is more of a front-end development language so in other words, these two are totally different from one another. My only advice for you is to use React if you’re going to need a lot of data from a Shopify store and if you’re going to create an app that only customizes the storefront using your own functions, then go for PHP because it will be much easier for you to manage it, especially if it’s live on the internet.
I have talked about this on our YouTube channel, and so if you’re interested, feel free to watch it here:
