Boiling Down Frontend Frameworks: Simplifying the Essentials

Next.js? Angular? React? Vue? Flutter? React Native? Have you ever been in a situation where you have to switch to a certain framework? Or are you a beginner who wants to start building a cool Software Experience for Users? Beginners or those who have only worked with one framework might find switching to a new one challenging or intimidating. In this blog, I will help you view frameworks and frontend development from a different perspective, which will reduce your fear of switching to any framework.

Let's go back to the time when the term "frontend" didn't exist. Let's build a small CLI-based TODO application. I suggest you first develop a solution and then try to build this application on your own. Building a CLI-based application, especially in Java for beginners, will help you learn a lot and clarify many concepts.

Here is the list of features we need to build:

1. Users can create, delete, update, and edit tasks.

2. Every task can have a status, deadline, and priority.

3. Optionally, save the tasks to a file (like JSON) so the state can be reloaded when the CLI is restarted.

4. Track the application state across different commands.

5. Provide a summary of the tasks on the home screen.

Project Structure

I have tried to mimic real elements of frontend development code elements. Here is the project structure I proposed. I have also provided a Git repo link with a simple setup which will help you continue with this blog.
Java CLI To-Do Application Challenge

The database folder contains the logic for data storage. Models include all the data structures used. Pages and utils are self-explanatory. Index.java is the starting point of the application and also functions as a router. I haven't implemented the router but have left a hint on how to do it. If you enjoyed the project and are curious about how a router works, try implementing it yourself. I recommend going through the code and understanding the flow first.

Critical Points to Watch

public class Home extends Page {
    private  ArrayList<Task> tasks;
    .....
    @Override
    public void displayELements() {
    // responsible to display all elements
    ...
    }

    private void todoListElement() {
        if (tasks == null || tasks.isEmpty()) {
            System.out.println("No tasks available.");
            return;
        }

        System.out.println("Todo List:");
        for (int i = 0; i < tasks.size(); i++) {
            Task task = tasks.get(i);
            System.out.println((i + 1) + ". " + task.toString());
        }
    }

    // METHODS TO PERFORM OPERATIONS 
    private void addTask(Task task) {}
    private void updateTask(Task task) {}
    private void deleteTask(Task task) {}
}

When you finish this home page, you'll few a major issue:

• Even if you update the ArrayList, the changes won't show up in the UI.

• Also, if the UI were a real interface, changing a value directly in the UI wouldn't update the private ArrayList.

• You will also notice if you build multiple pages, you have to share the same piece of Data between them

• Maintaining the Data consistently on each of the screens or pages is also important

• If any of the data is changed by any page, it should reflect on other pages as well

Isn’t all of the above things are overwhelming if we do it from scratch? And that’s what all of the frontend frameworks does with their own flavor. If we boil down Frontend-related complexities, Frontend is all about:

FEW EXISTING SOLUTIONS

Let’s have a look at how existing solutions solve these problems.

Consistent State Management

Responsive and Adaptive UI Design

Component Architecture and Communication

Efficient Rendering Management

I hope this helps you navigate the world of new front-end frameworks and guides you in finding the right things to focus on when starting to learn or begin a new project.