Ermers Consultancy was asked to give an overview over modern technologies used in Full Webstack development. In the past Ruud Ermers worked privately on a multimedia system and this served as a case for this assignment. In the following I present, in short, the multimedia system and several ways to connect this system to the outside (and inside) world. Technologies discussed will be back-end development in Object Pascal, C# and Javascript and frontend develpment in C# (Xamarin), javascript, typescript and java (Android). Also considered are desktop implementations in various technologies.

The system: A multimedia system

The multimedia system consists of a multi-room audio system. The system is running on one PC, with 4 internal audiocards which serve audio to various rooms. Moreover, with extra Android clients this can be extended to an unlimited number of audio clients. There is a number of host applications which enable this system: There are audioplayers which can play audio over one or more audio cards, there are audiobrowsers with which you can browse the audio collection (hosted on a local harddrive). The system can play individual audio in each room, but they can also be synchronized. Lastly, there is a http-server interface which can control the various options for all attached audioplayers, like pausing, exposing the mediafiles, selecting an audiofile or audiofolder.

In this case study, the most important interface is the http-server, which was written in Delphi a long time ago, but is still maintained (e.g. to serve JSON data besides XML). It listens on an internal port and can not be reached from the web.

The back-end: Webserver choices.

The webserver needed for the full systems has the following requirements: It should implement Virtual Paths, should be able to forward requests to another server and serve requests doing some scripting. Of course, things like security, speed, maintainability are a must.

I have implemented three different webserver technologies, i.e. Abyss Web server, Node.js and ASP.Net Core.

1. 1. Abyss Web server.

2. For this case study, Abyss webserver is not very interesting. It is a very robust webserver, with Virtual Paths, security and many options, configurable from a web interface. I used this in the past, to connect my multimedia-server directly to the webserver using FAST-CGI. At one point I decided to have a programmable server instead of a configurable server. Nevertheless, an interesting product.

3. 
   

4. 2. Node.js

5. Node.js is a popular webserver technology. Development is done in Javascript, not my favorite language. Setup is very easy. Development can be done from Visual Studio with full intellisense. After the first strugglings, Node.js turns out to be a very easy to use environment.During development the server can be stopped and started quickly, giving very short development cycles. In fact, Node.js is my choice for the webserver.

6. 
   

7. 3. ASP.NET Core.
   

8. I only touched this technology from the surface. The great advantage of ASP.NET Core over Node.js is that development can be done in C#. This is a big plus over Node.js Javascript. Setup is also very easy and development can be done from Visual Studio as well. You can also develop from Visual Code. As I only did some basic research, I struggle to get things going. On the internet there is quite some help, but many examples refer not to the latest technology. I find the Microsoft documentation, although very thorough, difficult to read, without many examples. Cross domain policies have been better addressed than in Node.js, so security (as stated by the developers) is an important plus.
   

The front-end: Web development.

First off, I am not a designer and i don't like HTML and CSS. Therefor, I am still looking for client technologies which go beyond that. Moreover, you will not be impressed by my user interfaces. Here is one from a jquery frontend:

1. For the frontend, the above picture will be the target to implement. We can see some selections icons, a picture from the current album (in the Ruud's room), see the tracks, volume and some more. Many are clickable, e.g. to select a track, or another room. You can also browse the collection. Remember that the back-end will serve the needed data (model) to generate the view. Since the view changes every second, many requests to the server are fired. The communication protocol is pretty much REST based (but was allready established years ago, using a mapping to classes) and served in JSON format. So let's discuss some webtechnologies on how to implement this, and take a look at some other technologies for remote control  (phone, table) as well.

2. Before continuing, I will investigate on client side technologies only. We see a clear drifting away from e.g. ASP.NET where there is a lot of interaction between the (dedicated) server and the webclient. (e.g. every click is forwarded to the server, maintaining a 'viewbag' state for each client).

1. 1. JQuery.

1. JQuery is used to make web design easier. It abstracts away browser incompatibilities and gives us an easier to use javascript framework, with, amongst other things, an easy AJAX implementation. With jquery it becomes easier to split web development between javascript designers and UI (HTML/CSS) designers. Since I am not a UI designer,  I embraced Jquery, as many others did. However, it is still javascript development, and for OO-designers there is still a lot to wish for.

2. 
   

3. 2. Angular 4.

4. 
   

5. Angular 4 (or 5) is a framework for client side webdevelopment. It uses Typescript as language instead of javascript and comes with full support for testing, debugging, easy maintenance. With Typescript, you finally have a (limited) OO language to develop with. The learning curve for Angular is somewhat steep, although there are some really good tutorials to get you going. The framework implements MVC (or 'even' MVVM) and separates UI design and OO development much better than e.g. JQuery. The development cycle is very short: Changes in your code are almost immediately reflected in the browser. That's nice. Still, there are some things missing. Typescript just isn't a full fledged OO language and somehow you still feel that it is just a javascript wrapper technology. I was surprised when I found out that you can't just run an Angular site from a webserver, but first have to build your project into a /dist distribution.  This leaves the question why there still not is a platform to do C# development.

6. 
   

7. 3. Other webtechnologies like VueJS or React.

8. 
   

9. I have not worked with these technologies. After reading on how these frameworks work, I decided not to use them. Both of them are based on javascript.

10. 
    

11. 4. Android.

12. 
    
13. I will finish off with some other ways of interacting with my multimedia system. I will skip development for PC, since the possibilities there are allmost infinite. I have coded my remote example in Delphi, C# WinForms, C# Wpf. I will also skip development for IOS, because, I am sorry to say, I am not interested in anything that is Apple - related (I once had an I-pod, but it was running Rockbox). So that leaves us Android.
14. 
    

15. Android development has come a long way since the early days where you had to code in Eclipse, define all your UIs with XML and ADB bridge was still 'in development'. I was pleasantly surprised some time ago when upgrading to Android Studio 3. Although downloading and installing takes ages (but is still faster than Visual Studio Installer), converting my old remote control project worked smoothly. Moreover, the IDE is very nice to use, and comes close to Visual Studio. I hope my days with struggling with Eclipse are finally over. Also, with JAVA 8, Android makes it possible to use lambda functions, which is nice to have for asynchronous http requests. The debugger is very reliable and so is ADB. There is also a GUI designer, making development comparable with desktop development. For new developers (with a background in HTML/CSS) I think JAVA/Android is still a steep mountain to climb, but for people with a OO background it will be very familiar.  

16. 
    
17. 5. Xamarin.
18. 
    

19. With Xamarin you can build C# applications, targeting UWP, IOS and Android. Xamarin is available in Visual Studio as a plugin. I have build a few applications in Xamarin, also for customers. Although it all sounds very promising, and is an adventure in its own, I am not convinced this is the way to go. As a C# programmer I like the fact I can code in that language and re-use a lot of code, and the integration with Android is really first class. But Xamarin is still missing a good Form designer, so I had to create the full user interface from code. Furthermore, execution speed is just low compared to native development and although debugging is possible, I had a lot of issues, with many different tablets/phones. Not recommended for Android development.