Let’s select the right tech stack for your new product (1/2): The Interface (user experience and interaction point)

As we can divide the business into two aspects:
1. Where the user uses and engages with your product idea: The Interface
2. Where core business logic runs and magic happens: The Engine

This post is divided into two parts one we can select as the frontend, and further frontend can divide into mobile applications and web applications. The second part we can say is server backends, where the real business logic and data are stored. Simply part 1 is about the interface, and how users can interact and use the engine. The second part is about where the engine runs and most magic happens. You can read the second part of this post: The engine, read here.

So let’s start with the first part called: Interface

D2C/B2C Business Product Interface:

It depends on the product, which interface is required if it is a D2C product and the end consumer will use it, Starting creating with PWA for POC/MVP and mobile apps for the next phase is a good idea. If your product idea is based on next-generation technology using VR/AR/MetaVerse/Game Development/AI-based for those all use cases I prefer to say skip this paragraph. As PWA has the advantage of fast release and can be downloaded into the user’s phone without the hassle of installing it, you can have fast update rollouts and most importantly it is cost-effective for POC/MVP purposes. As your product is new, no one is searching for your mobile application. For PWA you can choose the most popular PWA solution technologies: Vue.js, React.js, and Angular. I suggest using Vue.js or React.js, as Vue.js is quite simple to learn and quite good and manageable code architecture, and has a lot of advantages. React.js is the most popular in this domain, so you can get developers easily at a very low cost. As developer cost of Vue.js and react.js is almost the same but react.js developer you can easily find in the market compared to Vue.js.

Now if you got enough traction from the users, and users somehow demand a mobile application then what should be the tech stack of the mobile application? There are two major divisions: Native application development (iOS and Android separately) and one use cross-platform technologies such as React-Native, and Flutter. One more option is ionic(HTML, CSS, JS-based mobile app), but as you already created PWA, and don’t make sense to transform that code into mobile at this point.
Now if the application is quite simple just fetching information from server and showing to user, not much memory/sensor specific task, I always prefer to say use cross technologies like React-Native and Flutter, which has the advantage of single code base is used to develop android and iOS apps and you can save a lot of money while investing so much money on native application development. Few examples of React-Native apps are: Facebook, Instagram, Skype, Slack etc.
Native development also has it’s own advantage of accessing latest feature of OS, you can do manage the better security of apps, if it is an image or video editing app, an AI-based app that runs the model into the mobile app itself. However, everything is also possible with cross-platform technologies, but it would be quite tricky at some times when memory-intensive/AI-based / security-concerned apps. Native app development is generally costly, as two developers develop apps (one for iOS and one for android). Few more problems you can face as feature domesticity on both platforms at the same time and fast-rolling outs of features.
In my experience, 95% of mobile applications can build on React-Native. Flutter I’m not much opinionated as it uses Dart language and IDE issues, very few developers you can find in the market who works on it. As the React-Native developer’s community is very big and you can easily find any developer easily.

B2B Business/Admin Interface:

Here we can use Vue.js/React.js/Angular.js for the admin dashboard, but for the initial development POC/MVP purposes I suggest going with server-side rendering technologies instead of creating PWA/SPA for your admin for fast rollout features and cost saving. After enough traction, you can migrate it to Vue.js/React.js/Angular.js. If your product manages a lot of frontend computation such as accounting software, and social media application I prefer to start from Vue.js/React.js/Angular. If it is mostly CRUD operation(which means server-based information and won’t require a lot of calculation or data stored at the client end) use server-side rendering.

It completely depends on the business idea and product requirement but in most cases my preferences for the web frontend: are Vue.js for SPA/PWA (Easy to learn, code is manageable and maintainable), in some cases react.js but mostly Vue.js. And for mobile applications React-Native.


Quick Note:


SPA: (Single Page Application) Can use for the web frontend as an admin panel, no need of SEO, meaning without user login nothing happen and private data to be used.
Technologies: Vue.js/React.js/Angular

SSR: (Server side rendering) can use for SEO purposes, an extended version of SPA, but requires more server cost on operation, and require to deploy on some server. Further it is classified into two parts as to do separate frontend and backend use: Vue.js/React.js/Angular
For fast release and save a lot of development time and feature release time, use server-based template engines like Blade in laravel(php), edge in Adonis.js, ejs in express, erb in Rails, and Django based own template engine.

PWA: (Progressive Web Apps): It is also one kind of extended version of SPA but it has capabilities to store data offline, cache calls, offline-online sync, and most importantly can able to download on the user’s phone as an app and desktop as another application. For B2B business it is a great solution for a variety of releases and fast rollout in a cost-effective manner. Users don’t need to download apps from AppStore/PlayStore or download any .exe/.dmg. It just downloaded by the web URL and dedicated to running your application like a mobile app/desktop software. You can go to youtube and can see the download button on your URL panel and now you have a dedicated youtube app on your system.
Desktop Software: Nowadays where everything is cloud-based rarely does your business requires a desktop app, unless it is something productive tool. Most of the work you can use by PWA. Anyways If you require a desktop app, a couple of options like use can use Electron (such as a react-native app for both Android and iOS, electron build app can run on Windows, Linux and mac) or native app development. The electron has the same limitation as react-native has, you can use device hardware with limited access. Electron-based application as Skype, Slack etc. If you talk about desktop application, and businesses require it badly, means you have a something product idea that you cannot build on an electron-based solution, here I prefer to say invest money on native desktop software development.

Cross-Platform Mobile App: App that code is use to build android and iOS apps such as react-native, Flutter, Native Script etc. I recommend using React-Native for cost-saving and large community support.

Native Application Development: Only use if your product requires a lot of memory optimization or large rendering or AI-based solution or IoT/BLE/device sensor-based product. Most product doesn’t require this nowadays.


READ PART-2: The Engine (core business logic)