Let's build a concept E-Commerce webapp
As a little side project, I wanted to try to build an E-Commerce webapp. After much planning I wanted to opt for a streamlined and decoupled architecture to keep things running smooth and fast. I am really interested in building a decoupled setup with a CMS(Content Management System) as my API provider and a scalable front end that my clients will access. Though the next series of related posts I will like to take you on a step by step journey to building a decoupled E-Commerce webapp.
The idea is to create a decoupled application consisting of two sections :
- A CMS to hold all the product details
- A FrontEnd PWA that talks to the CMS via API
To answer the WHY a decoupled architecture question, I will like to state that I am a performance freak. I am disgusted by websites and web apps that are sluggish to use. The downside of any CMS is that, once you use it to load both data and render the frontend (with custom theming of course) the page load speed takes a massive toll.
Also, a decoupled approach keeps things simple and easier to maintain.
Now, let’s talk about the tech stack :
However, any good E-Commerce web app should have standalone apps for Android and iOS too right?
Now, there are a few ways of doing this :
- The Amature way: Build a frontend for the web only, then hire another team or two, and build standalone android and ios apps using the existing CMS APIs. This approach is pretty stupid, as it massively increases the labour and time to market (TTM) for your site.
- The Smart way: Build the frontend as a PWA and package the PWA for Android and iOS. This approach is smart and hugely time and effort saving, ONLY IFF you have a great responsive design for the frontend. However, PWAs packaged as apps often suffer from sluggish performance on devices, and also they do not have native API access. Hence the scope gets extremely limited.
- The Genius way: Use a framework for the frontend that can be packaged into native Android and iOS distributable while also being capable to run on the web. The benefit of this is that you get access to device native APIs and is extremely scalable. Single codebase, running as your web and generating your native apps (yes, for both android and ios platforms).
I will be going for the 3rd approach as its the perfect solution in my opinion. Through this, you’re :
- Saving the cost of managing and investing in multiple teams
- Single codebase powers all your client apps
- Work with web technologies (HTML, CSS, JS) and get the native app
- Need to design only once which scales up from the web to apps
If this sounds cool, then let’s modify the tech stack as follows :
- Drupal 8: CMS for managing e-store products and building the APIs
- Ionic frontend: Ionic is a great framework that lets you build for web and package it for Android and iOS platforms. What’s even cooler, is that it’s running on Angular.
With our tech stack in place its time to proceed to the next phase of the project!
Featured Image:\ Photo by Bench Accounting on Unsplash