I believe my search is over. Vue.js is a frontend framework that can be directly included from your html files, and it is comparable to Angular and React. In this post I want to describe how I use it to have a modern environment without dealing with the likes of npm, webpack, babel, typescript etc..
To go over the specifics of my setup, I put together a simple Google Keep clone just for this post. The code is on github, and there is a running demo that you can check out. The demo does not save anything for obvious reasons.
To implement the very basic functionality of Google Keep, three components seems enough. One to view notes, one to create and another one to wrap the note editor in a modal box. Their code can be found from the same github repository.
Coming from a long Java background, my backend of choice is Spring Boot. It has all the goodies of spring with none of the configuration hassle. But I am not going into any details as it is not the intent of this post. We will also use Thymeleaf as the server side template engine. It will help with the methods used in the next two sections.
This line is replaced with the JSON representation of the notes when thymeleaf processes the template.
Single File Components
Here is the simple code for the note view component.
I wish to turn these posts to a series called “One Post, One Song”. So here you go: