Case study: Webstack modern technologies

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. Abyss Web server.

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.

2. Node.js

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.

3. ASP.NET Core.

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:

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.

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

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. Angular 4.

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.

3. Other webtechnologies like VueJS
or React.

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.

4. Android.

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.

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.

5. Xamarin.

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.