My Journey Into the World of Modern Javascript

I was looking for an app to display the upcoming public transit departures from the station next to my house, in my smart home user interface. Not having found any software with the desired functionality, I developed my own. Today I would like to present to you berlin-departure-board and share some learnings along the way of making my first Vue.js project.

My hobby project departure-board was a practical entry point into the world of modern Javascript

Background

I have not messed around with Javascript since I was in high school in mid-2000s and worked on my hobby project. The hobby project that taught me web programming (and programming as such, long before the university courses) became a popular web site dedicated to the history of Kiev. The site perished after I had to turn it off 8 years later in order to focus on other endeavours. In my mind, Javascript was still that minimal language without type checking for verifying HTML input form values before submitting and rendering pin points onto a Google Map. I was thrilled to discover how much Javascript has changed since then, and would like to share with you some of my findings in this article.

Smart Home System Setup

Let me introduce my smart home system first. In the last year I integrated all my smart home devices into one system running on OpenHAB (a fantastic project, do make sure to check it out if you haven’t heard of it yet!). It is an open-source protocol-agnostic smart home server which allows you to integrate myriads of different devices communicating with open and proprietary protocols alike through plugins (aka bindings). OpenHAB can run on a Raspberry Pi without any cloud backup, so it is a cheap, highly configurable and privacy-aware option to run your smart home without uploading data into the Internet.

The entirety of my smart home is controlled with an iPad

Anything that has been implemented as a binding, can be integrated in an OpenHAB instance. OpenWeatherMap, Amazon Alexa, Google Text-To-Speech, Roomba, Next — are just a few of hundreds of available open-source bindings. But there was no binding for my application: a list of upcoming departures from the nearest station in Berlin.

The list of plug-and-play OpenHAB bindings is huge

Since OpenHAB UI runs on an iPad in our hall, I had a choice of either developing a binding and integrating it directly in the OpenHAB UI, or developing my own web app and running it standalone on the same iPad. I vouched for the second option in order to have more control over the UI appearance. I wanted the departure board to look like a typical tableau and also be usable outside of OpenHAB ecosystem, e.g. on mobile phones or laptops.

Choosing the Right Javascript Framework

Acquainting myself with modern Javascript was long present on my todo-list. Writing a web app seemed like a perfect opportunity to dive into the language, explore new development paradigms and an ecosystem of tools, of which I heard a lot, but haven’t laid my hand on yet. So it was decided: a standalone responsive web app running on Javascript to be primarily used on an iPad, but also on desktop and mobile. The next choice was that of the Javascript development frameworks.

React (red) is clearly winning over Vue.js in terms of search queries

There are many Javascript development frameworks, most famous of them being React and Vue.js. Comparing the two, I was intrigued by Vue.js. Being the lesser used of the tandem, Vue.js seemed to magically attract developers by its simplicity and extensible architecture.

My Learnings

Javascript has changed profoundly since the early days of using plain vanilla JS inside <script> tags in HTML4.1 web site and jQuery. Developing modern Javascript-based web applications requires a change of the way of thinking.

1. There is no HTML code any more. HTML is generated (aka built) in the process of deployment a web application. HTML being the result of the logic encoded in Javascript.
2. A web page consists of a hierarchy of (possibly nested) components. Each component knows how to render itself in HTML. An application entry point is App.js. The build script knows how to convert all the complex component logic into vanilla Javascript.
3. Sass is preferred over plain CSS. Sass extends the CSS language, allowing among other pretty perks, to define and use variables, allowing for the creation of themes and re-use of colors, fonts etc. inside your CSS code across the components.
4. A web app can be built into a static web page, but not necessarily. It can be served online (similar to Python’s Flask or Django) by a web server. A typical JS web server is node.js. It is incredibly easy to deploy a JS application to a cloud server (e.g. Heroku) running node.js, since the remote server needs only to execute one npm start command.
5. I struggled for some time with the Javascript dependency logic. Coming with experience in using virtual environments in Python and Docker, I was expecting to find a similar encapsulated workspace logic in Javascript too. I haven’t found it at first. A typical way seems to go with the global npm — node.js package manager — which installs packages into the project directory. I struggled (and still do) with upgrading the packages. Every time I upgrade some central package, the project compiler crashes and it takes my quite some time to reproduce the previous environment. This will probably improve with time, but I find that other programming languages provide more guidance and stability in this aspect.
6. Framework documentation is dazzling. It was easy to find tutorials and docs to pretty much anything I needed.
7. On the negative side, error messaging in Javascript can and should be improved. Runtime errors are fairly cryptic and — at least from the standpoint of a Javascript beginner — hard to interpret and trace back to the actual code.
8. The deployment of Javascript apps can get messy. In my example project, I used BootstrapVue as the UI framework, adding a bunch of additional dependencies. The packaging was performed by webpack. Webpack and BootrstrapVue would collide somewhere in the process and the debugging was cumbersome. The packaging and bringing all the complex logic together into a web app, is where I can see newbies in Javascript struggle the most.
9. Javascript is still not the most syntactically strict language. The tolerant nature allows for miniature errors to slip into your code. I believe TypeScript has a solution to this problem.

Summary

My first Javascript app has been finished in the course of a few days. It displays the list of upcoming departures with the mode of transportation (bus, metro, tram) and the line number (e.g. U2, M10, X9).

The app displays the list of upcoming departures and their modes of transportation across all device types

At first launch, the user is asked to search for a station by its name. Changes to the parameters are applied immediately, there is no “save” button. The settings are persisted using the browser’s local storage, so that on the second start the app still remembers the station name.

The station can be searched for by name. Settings are saved automatically

departure-board is now available on Github and the statically compiled app version can be used in pretty much any setting. The respective Heroku web app runs under the alias berlin-departure-board.

departure-board queries BVG (Berlin’s public transport company) transit departures and relies on the availability of the ReST API server, generously provided by transport.rest — a fabulous project that aims to have a unified way of querying public transport data from various service providers, so make sure to check it out and give it your stars.

I learnt new development approaches by trying out Vue.js, and deployed my application so that others can use and extend it. I got myself up-to-date in the world of modern Javascript. I am still light years away from real JS experts — but this was never the purpose of my expedition. My web app is arguably not the most beautiful in the world and it misses automated tests. Both aspects should definitely be addressed in a more serious project.

Inspired by my first contact with Vue.js, I already started working on a new smart home UI running in React. Keep watching this blog, an update is underway!