KISS - Keep It Simple Stupid. This is the key to any successful software application design. I start with that to set the tone that I prefer the basic of a simple architectural design. Less is more and it is more scalable and performant too. In a time when engineers want to use all the latest shiny objects, sometimes you just have to go with what is proven, supported and what works. Most of the people that always want to use the latest shiny objects just want to play and look self-important like the discovered the new tech stack. Oh God, Yet Another Tech Stack. Just Stop. Most of these types are academics and just draw bubbles all day and have no sense of getting thing completed and across the finish line. I have worked with several of these smug elitists.
I have just completed a modernization effort where we created a web app based off a legacy thick client. Several tech stacks were identified and proposed and we ended up with the following web architecture for the end-to-end design.
Now, this sounds too easy, right? well lets add in ReactsJS to all for componentization of the code. ReactJS structures the code and allows for component creation and creates an Object-Oriented approach to web client development. The Reactjs framework provides several utilities to aid the engineer in creating robust reusable and scalable web client code. Of course, I advise just jumping in and start creating to best learn. You will pick up React, or any language/framework, faster by getting your hands dirty and by doing. The key features of React that I like are:
The React State engine for binding variables and updating visuals when state doe change.
State changing events are sent out to all components and handled accordingly. States and data binding are a nice feature of Reactjs.
React allows you to pass in method references to a subcomponent to allow the sub component to communicate with its parent. This is very useful and allows sub components to affect states that cause other components to update.
The Reactsjs render() function allows you to render any html or html toolkits like material-ui.
If I have not lost you yet, here is the tech stack which I found very useful for rapidly creating a production ready app in a very short amount of time.
Native WebSockets for two-way communications to the web server application.
Material-ui for defined widgets like Dialog, Sliders, Drawers, Cards, Menus, etc
CSS Stylesheets. There are powerful and somewhat hard to learn and use correctly.
NPM used to build ReactJS Application
WEB SERVER TIER
NGINX - Acts as the Web Server controller. For SSL, Location Aliasing, REST endpoints, Server name/IP.
NodeJS - For the actual Web Server Business application. Interfaces to Data layer and legacy servers via JMS or sockets.
JSON Data Interchange - used as Payload between Web client and Web Server. Used between Web Server and Legacy Server. Used to store in MySql database. Store JSON Document object in a LargeText field. Note MySql has a JSON type field in their current release.
Web client to Web Server two-way communications accomplished via Web Sockets.
REST endpoints created on web server application and defined in the nginx.conf configuration file. These are used for Database specific POSTS, GETS, PULLS etc.
Use MySql. Nodejs has Mysql packages to make working with a MySql database simple.
NPM for Web App and installing component dependencies.
WEBPACK for building the nodejs Web Server App.
Some of the issues I encountered with using this architecture were as follows:
Learning curve. Learn ReactJs and NodeJs and how to properly configure nginx.conf. I have mastered all three of these though lots of sweat equity.
Having been a hands-on Software Engineer for over 30 years, this architecture is the most efficient and easy to use I was able to engineer. It is scalable and easy to use. If you are wrestling with how to architect you web application, this design may be what you need. I am not just writing this as an academic exercise. I have proven this works and delivered a usable working product.
If you have any questions, please feel free to contact me. I am available for consultation as well.