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

Smart Home System Setup

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

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

  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

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!

Driving the future of healthcare!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store