JavaScript is a fascinating and well-used language. From server-side NodeJS applications to frontends with PlainJS or frameworks like React, it powers many services. Since 2019 I have been working on several projects to learn and explore JavaScript. This blog post is a short recap of those projects, and then gives an outlook to my newest endeavor.
This article originally appeared at my blog.
Coline
A framework for creating interactive, terminal-based dialogs. I started to work on this 2018 as a side-project to my project management role at work. The goal was to design a simple input data-structure from which dialogs are created: Questions, answers, answer patterns (strings containing certain words, numbers etc.), dialog flow.
This project is "server-side" in the sense that it can be installed and executed with NPM. Being my first full featured NodeJS application, I explored essential concepts like interfaces, classes, anonymous functions and data structures in general. In the interactive part I learned about handling terminal interactions, input processing and key event handling. The project also has an extensive test suite.
I did not advertise the project much - only gave a talk in Berlin Hackerspace, and wrote one blog post it: Coline - JS Command Line Interface.
You can explore Coline' Github repository and the NPM package.
Boardgame App
A web-application that helps to track board game interests of yourself and your friends. Basically, you register with an account, search for games, and mark them as "owned" or "interested to play". These status changes are collected in a timeline that you can share with other users.
The board-game app is primarily a client-side application written with the React framework. The backend consists of a thin API layer that persists data in MongoDB. With this application I wanted to learn writing web apps with React, and therefore learned React and much of its ecosystem: custom hooks, react router, react redux, and fetch for API interactions. The design is a plain old CSS file with first steps in animations and page transitions.
I enjoyed programming and blogging about it - see the Board game Blog Series. The project is not continued since the 2020 big crisis.
Lighthouse scanner
A service to scan webpages and see how they score in categories such as SEO, performance and best practices. You enter any URL, click the scan button, and 10-30 seconds later you receive a detailed test report with helpful hints how to improve the scanned web page.
The service is primarily server-side and uses a complete self-hosted Kubernetes infrastructure. The backend is a microservice application composed of three different services: delivering the front-end to client requests, an API to check job status and load scan results, and workers to perform the scans. Each service is written with NodeJS using the HAPI framework. The services run as Docker containers in Kubernetes environment that I installed and maintain myself. The frontend is statically generated HTML with a bit PlainJS: Showing a loading bar during the scan process, then display the result.
With this project, I learned a lot about JavaScript: Using and tweaking a framework, decoupling into microservices, asynchronous service communication, and worker execution. On the Client-side, I touched upon DOM manipulation, event handling and animations. The most exiting learnings however were infrastructure related. I installed a custom Kubernetes cluster at a cloud provider, and deployed the 3-microservice app using all essential Kubernetes resources (deployments, volumes, services, ingress). Also, I setup a Kubernetes staging environment on my Raspberry Pi to build and test multiarch Docker images.
The application is live and can be accessed at lighthouse.admantium.com. The development journey and my learnings are covered in the lighthouse blog series, the Kubernetes blog series, and the Ansible blog series
ApiBlaze
As you see the past projects gave me a good understanding of client-side programming and infrastructure management. With my new project ApiBlaze I want to focus on client-side JavaScript programming.
ApiBlaze is a web app that simplifies searching in OpenAPI specifications. It is intended to help you with quickly finding an object, property or endpoint of a specific API. When you select any search result, you will get helpful visualizations: The description of the element, an example of its data model and its dependencies to other elements.
With ApiBlaze, I want to improve my web design skills and fully understand client-side PlainJS java applications. Structurally, this means to provide well-scoped modules that are loaded asynchronously to build up the UI. Eventually I will implement a basic framework that builds the app consisting of abstractions like controller, pages and components. Visually it means to provide a pleasant experience with visual helpers: Ranking and highlighting search results, previews render of more complex elements, simple click-and-copy functions to exploit the search results. Also, the UI should give immediate feedback to any user input: Trigger a search with each keystroke, and allow navigation with meta keys like arrows, enter and escape.
Similar to the lighthouse scanner, this project will be a hosted service accessible with a browser. The development journey is covered in the ApiBlaze blog series.
Conclusion
This article briefly presented the JavaScript projects I worked on: Coline, a tool to generate command-line applications, the unreleased Boardgame App and Lighthouse scanner, a service to check SEO and performance criteria of web pages. My newest project, ApiBlaze, continues my series of JavaScript projects with a focus on UI-interactions.
Top comments (0)