Optimized Web Architecture for real-time web app

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.

The one problem with Web development is that the engineer is typically forced to use several tech stacks and languages to complete the app. For example, Javascript for the thin client with Python or Java for the web server. Then C or C++ for the legacy servers. The key solution to this and to having a simple to use web server (say no to Apache) is NodeJS implemented as the main web app running on the web server with NGINX acting as the web server. This allows the engineer to use the plethora of node packages. These are easily installed using the NPM installer and builder. NPM uses a package.json file that details the the web clients dependencies and browser requirements. You can also use the package.json to define name tags that can be used in the web app code as tokens.

The other benefit of having nodejs on the web server allows the engineer to keep with on language for the web client and web server code: Javascript. I use to have a Jaavascript client talking to a DJANGO web server running a Python based app. Switching between languages on the fly can cause error and confusion now and then. But I was very good at this and excelled at this. Having said that, I do like having the ability to stick with using Javascript for both web client and web server software development.

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.

  • Reacts allows you to develop more organized javascript code by means of React Components.

  • 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.

WEB TIER

  • ReactJS / Javascript

  • 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.

COMMUNICATION

  • 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.

DATABASE

  • Use MySql. Nodejs has Mysql packages to make working with a MySql database simple.

BUILD

  • 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.

  • Porting standalone Javascript libraries into the ReactJS web architecture can be very tedious. I ported in the D3 Data Visualization Javascript library in my ReactJS framework. This was very difficult. I learned alot and was successful. D3 runs great in Reactjs now.

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.