(I also made a video version of this article).
I’ve worked with front-end a long time ago and now I am more focused on Java and other tools related to back-end. From time to time I pick some random simple project to do in Javascript just to not forget how to handle some basics.
The Application
Following the great tradition of anyone learning Javascript, I decided to make a To-Do app. But just to make things different than usual, I decided to make the antithesis of a To-Do: a Procrastination-Do.
In this simple Javascript app you are able to:
add new tasks to procrastinate;
you are not able to delete what you are procrastinating;
as the days go by, each task will get larger and larger, reminding you about the things you ought to be doing.
Yeah, it gets to a point where the app is not even usable anymore. A metaphor for life where if you keep procrastinating everything, there will be nothing left in the end but empty dreams and a non-working unfulfilled person (just like the app).
You can get the source code here: https://github.com/Artenes/ProcrastinationDoJs. Nothing fancy, just vanilla Javascript to remember the basics and some CSS to not leave things too bare bones.
The Twist
Since Java is the main language that pays my bills nowadays, I thought to myself: what would this look like if it was made in the Java ecosystem? Also it has been a long time since I did not have to deal with GUIs in Java, so this was a deep dive in some old tools from 10 years ago (that are still getting updated to this day).
There are multiple options to make a GUI with Java nowadays, but we can boil down things to 3 alternatives for simplicity:
Use Swing, the set of classes that comes with the JDK, but did not receive any relevant update in the past decade or so;
Use JavaFx, the recommended way to make GUIs in Java nowadays. This one is a first-party library from Oracle;
Do not use Java at all. If you want a desktop application, .net framework is a better alternative or even Electron if we are talking about Javascript.
But since the idea is to use Java, we will stick with the second option.
The New App
With the help of JavaFx, I was able to put together something kinda similar to what we have previously on the Javascript app. Despites some minor differences with the input elements such as the one where you pick the current date. This one is also available in GitHub if you are curious: https://github.com/Artenes/ProcrastinationDoJavaFx.
In the end I was with 425 lines of Java code compared to only 138 of Javascript. In the JS app I had everything in just one file, literally just a list of functions calling each other. Since Java is an OOP language more code ends up being written to help fit in that paradigm. I could have removed a couple of classes from the final project, but I like to separate concerns well in an app when using OOP.
This is the final class structure of the Java application.
Main - the entry point with the infamous “public static void main String[] args“ method that every computer science student takes a whole semester to memorize.
Repository - in the JS application we had the Local Storage API, here we have to make our own and store things in a local file.
JsonTasksParser - just because in JS I was saving tasks in JSON, I also decided to do the same in Java.
Task - a playing bag of data, a POJO for the intimates.
FxApplication - this one starts JavaFx and sets up some basic configuration for our GUI.
FXMLController - it binds directly to the GUI allowing us to manipulate its components.
TasksApplication - this is the equivalent to our .js file. This one contains the business logic of the app, while heavily interacting with FXMLController to deal with the view, something like a view-presenter relationship.
The Fun Fact
First, my app was like this:
Pretty Java if you would ask me. But after I found out that JavaFx actually provides support to CSS, I was able to step up the game to this:
Yeah, it did not work. Later I found out that JavaFx actually provides support to a custom CSS implementation of version 2. So they took what made sense to their context and shipped a Custom Sucky Style ™ with their tool. But after visiting some stackoverflow answers from 5 to 10 years ago, I was able to put something together that resembles the original app, as you already saw above. It is not CSS 3, but it gets the job done. (Their documentation about this is just a single html page that was updated on 2014).
The Conclusion
This was a fun time sinker. I don’t know what it is, but I found it fascinating playing with these old tools that not many people use. It feels like that after every little problem I solve I become the expert of the tool since no one is really using it.
And if that was not enough, I made a video about it just because I am getting into video editing too, go figure: https://www.youtube.com/watch?v=a6KOtWQYAhk.
Links
Js app: https://github.com/Artenes/ProcrastinationDoJs
Java app: https://github.com/Artenes/ProcrastinationDoJavaFx
Video: https://www.youtube.com/watch?v=a6KOtWQYAhk
Top comments (0)