SERINDA is MEAN?

I knew I wanted the STT, TTS, and menu to appear on every page.  I also knew that I wanted to keep each portion of the different aspects separate so I didn’t have one giant screwed up page.  Yet I needed everything to come together.  I hadn’t intended to use Angular as the display, but it just makes sense.  I could’ve used Vue, React, or really anything. However, I’m quite familiar with Angular so it was my first choice.  I can route the view through Angular fast and have an SPA.  I can use controllers how I need to for the front end.  Then I can still push through services.  Every piece for the front end is separate and clean with no worries about munging javascript.  Not quite a MEAN stack since I’m not using MongoDB – more of a SEAN stack since I’ll probably use SQLite, but that part is undecided at the moment.

This allows a lot of flexibility in keeping the MVC separate through Angular also keeping the services in Express separate.  Front end MVC files are in the static directory and public views.  The services and utilities are in the Express directories.  So Angular display routes in the config are separate from the Express service routes.

This is how a call is made and data returned to the page:
Page loads static javascript
static javascript makes a call to a service (say ‘find waldo’ in Express routes)
Express calls the Express utility that deals with that function (processing OpenCV in this case and using a Promise)
Promise is resolved and sent back through the pipeline automagically to the canvas on the page where it is displayed to the user.

The backend utilities manage the OpenCV calls. The static javascript manages whatever it needs to for the display.