To the frontline!

Hello everyone! This is Hossomi, a Java backend developer trying to learn frontend. There probably is a multitude of people out there telling their own story of a similar journey, and mine is just one more of these. But anyway, sharing won't hurt, and someone might even enjoy!

In this series, I will try to build and deploy a full-stack web application using languages, libraries and technologies I'm not very familiar with. I won't go wild on complexity because it's more of an exercise than anything serious, but I will take this chance to learn as much as I can and share the experience along the way.

In this first post, I will introduce myself, my motivation and experiences. At the end, let's think a little about what to build!

💡 Motivation

I have been a backend developer for a few years now, and I am still very satisfied with it. Since I started my tech career, I have worked with various programming languages (mainly, but not only, Java), frameworks, tools, services and other technologies. There is always so much to learn and so many possibilities!

As one of those people who also code as a hobby, I have personal projects in which I have to deal with databases, web APIs, deployments and such. However, there is one aspect I was never able to even make a dent: GUI. Web applications running in a browser are popular nowadays, and only attainable with technologies that I have nearly zero knowledge.

This gap in my skillset feels very crippling! Any project, personal or not, that required frontend skills is usually out of my reach. So I decided it was time to fill that gap.

🥉 The bad experience

This is not going to be my first time learning frontend. A few years ago, I wanted to make an application to help my brother manage his Magic the Gathering collection.

I thought that a desktop application would be best, so looking around I came across Electron. I didn't know any JavaScript or any of its frameworks and libraries at the time, but this could be a good opportunity to learn, right? Well, I quickly found out the hard way that JavaScript ecosystem can be absurdly overwhelming.

Installing libraries and getting something on the screen is not difficult with a tutorial. But I had to go and overstep by a lot! Suddenly, I am learning JavaScript, React, Redux, Webpack, Babel and a bunch of other things that came along all at the same time. Eventually, I cloned a boilerplate repository with all these preconfigured, but it was so huge I couldn't even fathom.

I was able to get slightly off the ground, learn a little of each of those technologies and get some things working on the screen. At some point, though, I realized I was blindly changing code until it barely worked as I wanted. The lack of understanding of the fundamentals was increasingly unproductive and demotivating. The code was so entangled that trying to learn properly now was difficult. Maybe it was time to step back and start smaller.

🥈 The better experience

During the next few years, I had the chance to work with frontend again in my job in a much smaller scope. I learned about Create React App (CRA), an amazing tool for beginners that encapsulates many development aspects for a static web application. With CRA, I no longer had to worry about Webpack, for example, which is already a huge weight off my shoulders.

Along the way, I realized that I didn't need Redux. React's context API and hooks also came up to solve probably everything that I would use Redux for.

Of course, I will have to come back for all these tools (or alternatives) eventually. This new approach worked for the applications I was working on at the time and allowed me to focus on fewer things.

🥇 The next experience

Let's start with a very high level idea of what I will build and a few technologies to focus on.

I still want to help my brother with Magic the Gathering (MTG), so here's some background. When a new set is about to be released, some local stores hold pre-relase tournaments. The cards are published beforehand so players can study and prepare, and my brother builds a spreadsheet with lots of information for that.

I wrote a shell script that fetches the set data from MTG JSON and generate a CSV using jq with all the data he needs, which he then copies over his spreadsheet with his formulae and formatting. He can't run the script (not a programmer) so I run it and give him the CSV. What about turning that into a more flexible, self-served web application?

🎯 GOAL: display a set data from MTG JSON in a dynamic table and generate a CSV from it.

On the technical side, these are what I have in mind initially. Of course things can change along the way.

• Typescript. I have tried it before, thinking that I would adapt easily coming from a statically typed main programming language, but I was wrong. I don't have demands pressuring me this time, so I believe I will be able to learn it properly now. I might not be too strict, though, it depends on how it goes.

• GraphQL. MTG JSON has quite a lot of data for each set and card. A more flexible interface for querying those fields might be useful, and suitable use case to try GraphQL out at the API layer.

MTG JSON has a GraphQL API in beta available for supporters in case you are interested in such API (probably better than mine will be).

• React (and CRA). I will stick to it since I still have much to learn. I will also have more time and freedom to study and experiment.

• MUI Core. I have used previous versions of Material UI and enjoyed it. The new v5 seems slightly different, but I think it is worth learning to develop UI quicker with a system behind it.

• Yarn. Workspaces sounds very nice for organization even though I won't be publishing packages out of the application. NPM is fine, I just think I can try something new here without shooting myself in the foot.

• Heroku. The simplest application platform I know, yet very powerful. I have tested it a few times but never went too deep, I want to learn more about its capabilities.

There are other development aspects I haven't even thought about yet, I will come up with them along the way. This is enough to get us started!

🏁 Ready, set, go!

Keeping the MTG theme, I chose to name our application after the MTG character Tamiyo. She is a planeswalker that seeks and records knowledge throughout the multiverse. It somewhat fits the purpose of this application.

Check out the GitHub repository (at the time of this writing, empty) and stay tuned for next articles!