Laying the Foundations for a Rich User Interface

The beginning of our front-end journey 📌🗺🛥 with Vue.js – a simple and refreshing option 🍸 to create a reactive single-page web app 🦉.

It took me a while to get around it, but these days, any serious web application is basically split into a back end web API of some sort, REST being the most widely used flavour today, and a JavaScript front end, often built as a single-page app. This is what people online got used to, and there might be many good reasons why that is the case.

Building for the Modern Web

The challenge for me was coming from a mainly Web 1.0 background, when JavaScript was not really a thing, and some Web 2.0 sprinkled over it. I got away with mostly sticking to the traditional request response cycle, where the browser asks for a page, and the server sends it back. Simple, and still the essential technology behind modern single-page applications. Just that some of the request and response cycle is hidden away and happens largely in the background, making it possible to load and update content more granularly. This helps improving the performance and making web apps respond much more quickly to user input. Given that some studies in recent years have shown, that the average user does not like to wait, creating an illusion of instant response is essential for success.

So, there was no way around learning something new to build a modern, state-of-the-art front end. Luckily, for the back end side of the web app, I could build on my experience with Python and Django. Using Django Rest Framework made it massively easier to get started — we designed and implemented a data model with the tools and concepts we knew. For the moment, we leave aside trendy topics like web sockets, which don’t seem to be of much use at this stage for UnscrewMe.

The question about which framework or library to use for the front end was also settled quickly: for me, Vue.js was the most appropriate option — offering powerful features, a simple syntax and a gentle learning curve, as elaborated in another previous article, ‘Building Blocks of a Modern Web Application’.

Learning Vue.js

I’ve mentioned it before, but it deserves to be highlighted again here. A key resource for me to get started with Vue.js was the excellent book recommendation from a long-time web developer friend Dirk Schürjohann from DECAF. ‘The Majesty of Vue.js 2’ gives a good overview to do something useful, without going into all the details. It provides the relevant keywords and examples to delve into more advanced features, yet limits its scope to core concepts to ensure quick progress and a rather fun and smooth learning experience.

I did not do the tasks at the end of each chapter, but I happened to use the book from time to time as a more detailed, commented reference — not that this would be necessary too often, as the documentation of Vue.js is quite remarkable in itself.

Standardising Design and Formatting

When looking at CSS frameworks and form components for Vue.js, I was quite tempted by Quasar — it looks sleek, complete and really powerful. However, the fact that it relies heavily on a more complex development setup made me reconsider. We will start using a bundler like Webpack soon enough, but our main focus is not developer tooling, but application development. So our goal was to get started with little overhead, not to configure a handful of tools first.

Sometimes, I already question whether Vuetify and Material Design really are the best choices, since we happen to use quite a few formatting options that are not covered by the Material Design standard approach. But for now, Vuetify works quite well and does what we need. Having easy access to standard interface components like buttons, text fields and calendar selectors is our main reason for using a UI framework.

Embracing the Vue.js ecosystem

Given that I have no experience in Angular or React, I cannot make any comparisons. And with my very minimal approach without a bundler like Webpack, I cannot take advantage of all the benefits of Vue.js, most notably probably single-file components — but most things work just fine.

The focus on components nicely supports building reusable bits that help to keep the different parts of a web application interface separate, making the code easier to read and understand. In the end, components are just a collection of three key parts:

• data and business logic
• markup template
• additional styling

Vue.js doesn’t force you to use components, but if you want to take advantage of some of the features like integrated routing with the official “vue-router” library to easily build a single-page application, components become a core part of your application architecture.

Rather quickly, partly due to my limited understanding of scopes in Vue.js, I was looking for a sensible way to store and share data across components and pages or routes. Luckily, there is a Vue.js library for this: Vuex. Having a central, local data store makes some features massively easier — it might also make falling into bad practices easier, but used appropriately, it is a huge help.

In combination with vue-router and Vuex, we also needed to fetch data from our API endpoints. In our early prototypes, we used the “vue-resource” library. It is fully integrated and easy to use, unfortunately or not, it has been deprecated. The recommended replacement, the “axios” library has a very similar API and for what we have implemented so far works without issues.

To improve the overall code quality and readability, the “Vue.js Component Style Guide” might be worth a closer look.

Getting Things Done

A key reason for me to choose Vue.js was that it seemed relatively straight-forward to learn. And so far, I am satisfied with the experience. Overall, building a web app with Vue.js is probably easier than I expected, you can make good progress with little code. The basic concepts of Vue.js are easy enough to understand.

Despite my dislike of JavaScript, Vue.js code feels kind of clean, and yes, working with Vue.js actually is fun!

After this foray into front-end development, we will present some of the challenges we ran into when making our first deployment on AWS Elastic Beanstalk.

(A nice cup of coffee always makes writing a bit easier, and I should thank Kaffeine and Curators Coffee for fuelling my efforts week after week. More interestingly, perhaps, I had a 2014 “Attitude Blanc” by Domaine Pascal Jolivet from the area of the Loire castle in France at Le Bab in Soho. The Sauvignong Blanc was a bit on the fruity side, but had nice mineral notes as well. A second notable glass that deserves a mention was a 2016 Albariño by Bodegas Fillaboa from the Rias Baixas in Galicia, Spain, at the newly opened 31 below in Marylebone. I very much enjoyed this one, with its fresh citrus notes, a bit of lime and strong minerality, with a slightly earthy finish.)