DEV Community: Amir Azhar

Concurrency in Java: A Guide for Beginners!

Amir Azhar — Fri, 21 Mar 2025 08:44:48 +0000

Overview

In modern software development, concurrency is a game-changer. It allows a program to handle multiple tasks at once, improving performance. For example, in a web server, while one thread is serving a user’s request, another can be processing a database query. This makes the system feel fast and responsive, even when there are many things going on behind the scenes.

In this article, we’ll dive into concurrency in Java - what it is, how to use it, and how it can be applied in real-world applications. By the end, you’ll have a foundational understanding of how to handle multiple tasks in your Java programs.

Concurrency vs. Parallelism: What’s the Difference?

Concurrency

Concurrency is when a program handles multiple tasks at once, making progress on them even if they aren't running at the same time. For example, a web server handles multiple requests by quickly switching between them, without running them all at once. It’s like a chef cooking several dishes at the same time - stirring one pot, chopping vegetables for another, and cooking rice - without fully focusing on any single task the whole time.

Parallelism

Parallelism is when tasks are actually executed at the same time, usually with multiple CPU cores or processors. For example, when working with a large dataset, the tasks can be divided and processed simultaneously across different cores. It’s like each chef in a kitchen working on different parts of the same dish at the same time - one chef is chopping vegetables, another is cooking the sauce, and another is grilling the meat - all working together to complete the dish faster.

When to Use Concurrency vs. Parallelism?

Knowing the difference is great, but when should you actually use concurrency or parallelism in your applications? To put it simply,

Use concurrency when tasks need to make progress together but don’t have to run at the exact same time. It’s useful for:

Web servers - Handling multiple user requests without blocking.
Mobile apps - Loading data while keeping the UI responsive.
Chat applications - Sending and receiving messages without delays.
Databases - Handling multiple queries without waiting for each to finish.

Use parallelism when tasks can run at the exact same time, taking advantage of multiple CPU cores. It’s great for:

Image processing - Applying filters to different parts of an image in parallel.
Machine learning - Running computations on large datasets simultaneously.
Data analysis - Processing big data across multiple threads for faster insights.
Video rendering - Encoding multiple frames at the same time to speed up processing.

Threads: The Building Blocks of Concurrency

A thread is the smallest unit of execution within a program. In Java, a thread is like an individual worker responsible for performing a task. You can either create a thread by extending the Thread class or by implementing the Runnable interface.

Here’s a quick comparison:

Extending the `Thread` Class:

class MyThread extends Thread {
    @Override
    public void run() {
        System.out.println("Thread is running!");
    }

    public static void main(String[] args) {
        MyThread thread = new MyThread();
        thread.start(); // Start the thread
    }
}

Implementing the `Runnable` Interface:

class MyRunnable implements Runnable {
    @Override
    public void run() {
        System.out.println("Runnable is running!");
    }

    public static void main(String[] args) {
        MyRunnable runnable = new MyRunnable();
        Thread thread = new Thread(runnable);
        thread.start(); // Start the thread
    }
}

What Does the `run()` Method Do?

The run() method is where you define the task that you want the thread to perform. When you create a thread, you don’t actually tell it what to do directly. Instead, you put that code inside the run() method, and the thread will execute whatever is inside it when you start the thread.

Think of the run() method as the “to-do list” for your worker (thread). When you call the start() method, the thread begins executing the instructions inside the run() method, and that’s when the actual work happens.

How Concurrency Works: Context Switching

Now that you know what a thread is, let's take a step back to understand how concurrency actually works.

When you have multiple threads running on a single CPU, only one thread can execute at a time. But how can multiple threads seem like they're running at once? The answer is context switching.

What is Context Switching?

Context switching happens when the CPU rapidly switches between multiple threads. It makes it appear that several tasks are being run simultaneously, even though only one is running at any given time.

1.The CPU executes one thread: The CPU runs the instructions of one thread.

Time slice ends: After a small period, the operating system interrupts the running thread and schedules the next one. This is often done in time slices, which can be very short.
Context switch: The CPU saves the state (or context) of the current thread so it can resume it later. This includes things like the program counter and register values.
Next thread runs: The CPU loads the state of the next thread and continues executing its instructions.

Thread Lifecycle: Understanding the Process

Threads go through a lifecycle, similar to workers in a production environment. Here’s what happens:

New: Created but hasn’t started yet.
Runnable: Ready but might be waiting for CPU time.
Blocked: Waiting for access to a resource.
Waiting: Paused until another thread signals it to resume.
Terminated: Thread has completed its task.

Synchronization: Preventing Conflicts in Multi-threading

When multiple threads access shared resources, you can run into issues like race conditions. For example, if two threads try to update the same data simultaneously, the result could be incorrect or unpredictable.

To handle this, Java provides synchronization to ensure that only one thread can access a particular resource at a time. This is crucial in real-world applications like banking systems, where two users trying to withdraw money from the same account at the same time could lead to incorrect balances.

Here’s an example of using synchronization in a Java class:

class BankAccount {
    private int balance = 0;

    public synchronized void deposit(int amount) {
        balance += amount;
    }

    public synchronized void withdraw(int amount) {
        balance -= amount;
    }

    public int getBalance() {
        return balance;
    }
}

In this example, the synchronized keyword ensures that no two threads can update the balance at the same time, preventing race conditions.

`ExecutorService`: Managing Multiple Tasks Efficiently

In real-world applications, especially ones that need to handle multiple tasks simultaneously (like web servers, data processing pipelines, or task schedulers), managing threads manually can become complex and error-prone. That’s where ExecutorService comes in.

Imagine you have a file-processing system that needs to handle thousands of files. Instead of creating a new thread for each file (which would be inefficient and resource-intensive), you can use ExecutorService to manage a pool of worker threads that handle the files concurrently. This makes your application both efficient and scalable.

Here’s an example of using ExecutorService to handle tasks:

import java.util.concurrent.*;

class FileProcessingTask implements Callable<String> {
    @Override
    public String call() throws Exception {
        // Simulate file processing
        return "File processed successfully!";
    }

    public static void main(String[] args) throws ExecutionException, InterruptedException {
        ExecutorService executor = Executors.newFixedThreadPool(5); // Pool of 5 threads
        FileProcessingTask task = new FileProcessingTask();
        Future<String> result = executor.submit(task);

        System.out.println(result.get()); // Output: File processed successfully!
        executor.shutdown(); // Close the executor after all tasks are done
    }
}

In this example, we’ve created an ExecutorService with a fixed thread pool. This means that we can process multiple files concurrently, but without overwhelming the system by creating too many threads.

Why Use `ExecutorService`?

Using ExecutorService simplifies task management in production applications. It allows you to:

Reuse threads: Avoid the overhead of creating new threads every time you need one.
Schedule tasks: Submit tasks without manually managing threads.
Handle results: Easily get the results from tasks once they’re completed.

There's More?

While we’ve focused on ExecutorService here, Java provides many other tools to make concurrency easier and more efficient as part of its concurrency utilities. Some of these tools are designed for specific use cases, like handling scheduled tasks (ScheduledExecutorService) or forking tasks to be processed in parallel (ForkJoinPool).

In a future article, I’ll dive into more of these tools to give you a broader understanding of how to manage concurrency in Java. But for now, the ExecutorService is your go-to for most situations.

Conclusion

Java’s concurrency features - such as threads, synchronization, and ExecutorService - are crucial for building efficient, scalable applications. By understanding and using these tools, you can build real-world systems that handle multiple tasks concurrently, ensuring your application is responsive and optimized.

With ExecutorService, you can easily manage concurrent tasks in production scenarios, from web servers to file-processing systems. While there’s much more to explore, this foundation will set you up for success as you dive deeper into Java’s powerful concurrency tools.

Exploring Redux-Persist with Pokémon!

Amir Azhar — Thu, 20 Oct 2022 13:57:45 +0000

Disclaimer

This post is intended for developers with a basic understanding of using Redux and its concepts such as stores, actions and reducers. If you are unfamiliar with these concepts, I highly recommend starting with the Redux Essentials documentation or a concise Redux for Beginners Tutorial video, if you’re looking for a sample project walkthrough.

Simple Recap on Redux

Redux is an open-source JS library designed to help developers manage the state of variables in their applications. Redux does this by creating a centralized store, and creates processes such as dispatch and reducers. This ensures that the various components from any part of a complex application, can read and update the data from the same store, in a uniform and consistent manner. Hence, this allows easy communication between components in an application.

In this blog post, I will not be going in-depth into the boilerplate setup of Redux and other miscellaneous steps in the projects (writing different React components or CSS). I will instead start by showing a simple application that uses Redux, and explain how Redux-Persist will tackle the pain point of the application.

Pokémon with Redux

Setting up the Project

I will be showing a simple Next.js application, initialized with typescript. Additionally, we will be using 2 Redux libraries:

react-redux

The library needed to have the core redux functionalities - Store, dispatching, actions and so on. Most of us should already be familiar with this.

@reduxjs/toolkit

A toolkit makes it easier to write good Redux applications and speeds up development, by baking in our recommended best practices, providing good default behaviours, catching mistakes, and allowing you to write simpler code.

# Create a new Next.js application, with typescript
npx create-next-app@latest --ts

# Install redux related tools
npm install @reduxjs/toolkit react-redux

Simple Features of Application

Fast forward a little and we have ourselves a basic application that uses Redux. This is a simple Pokémon application, that you can use to create a team for your next Pokémon journey! If you’re unfamiliar with Pokémon, it is a role-playing game based around building a small team of monsters (Pokémon), to battle other wild monsters and players (Trainers) to become the very best! This application uses the RESTful Pokémon API that can be found here. Even if you’re unfamiliar with Pokémon, the features of this application will still be easy to understand, if you’re already familiar with Redux. For now, let’s just take a look at 2 Redux-related files, and the 3 main components of our application that uses the Redux functionalities. In the videos I included, I made use of Google Chrome’s Inspect tool and Redux DevTools, a chrome extension that allows us to debug application state changes.

1. `pokemonSlice.ts`

This file declares the initial state value of our store. In our case, the state that we will be keeping track of, is the Pokémon in our team, in the form of an array. Additionally, we also create 3 reducers - addPokemon, removePokemon and removeAllPokemon - that will mutate our state by adding or removing single/all Pokémon from the state.

export const pokemonSlice = createSlice({
  name: "pokemon",
  initialState,
  reducers: {
    addPokemon: (state, action: PayloadAction<PokemonBasicInfo>) => {
      state.value = [...state.value, action.payload];
    },
    removePokemon: (state, action: PayloadAction<PokemonBasicInfo>) => {
      state.value = state.value.filter(
        (poke) => poke.name !== action.payload.name
      );
    },
    removeAllPokemon: (state) => {
      state.value = [];
    },
  },
});

export const selectValue = (state: RootState) => state.pokemonTeam.value;

export const { addPokemon, removePokemon, removeAllPokemon } =
  pokemonSlice.actions;

export default pokemonSlice.reducer;

2. `store.ts`

This is the file which holds the whole state tree of our application. configureStore, similar to createStore , initializes our store with the reducers and initial state that were declared in pokemonSlice.ts.

import { configureStore } from "@reduxjs/toolkit";
import pokemonTeamReducer from "./slices/pokemonSlice";

export const store = configureStore({
  reducer: {
    pokemonTeam: pokemonTeamReducer,
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

3.`Pokedex.tsx`

This component displays a grid of Pokémon, where users can add Pokémon to their team. Users also have the ability to remove a Pokémon from their team if needed. These are both accomplished using Redux’s useSelector and useDispatch, combined with the reducers that we declared previously

const Pokedex = () => {
  const [pokedex, loading] = useGetPokemon();
  const myTeam = useSelector(selectValue);
  const myTeamNames = myTeam.map((poke) => poke.name);
  const dispatch = useDispatch();

  function handleClick(poke: PokemonBasicInfo) {
    if (myTeamNames.length == 6 && !myTeamNames.includes(poke.name)) {
      alert(
        "You can only have 6 Pokémon in your team! Remove one Pokémon to add another."
      );
      return;
    }
    if (!myTeamNames.includes(poke.name)) dispatch(addPokemon(poke));
    else dispatch(removePokemon(poke));
  }

  return (
    <div className={styles.pokedexWrapper}>
      <h1 className={styles.pokedexTitle}>Kanto Pokédex</h1>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <>
          <div className={styles.pokedex}>
            {pokedex.map((poke: PokemonBasicInfo) => (
              <div
                key={poke.name}
                className={
                  myTeamNames.includes(poke.name)
                    ? styles.pokemonChosen
                    : styles.pokemon
                }
                onClick={() => handleClick(poke)}
              >
                <img src={poke.image} alt={poke.name} />
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default Pokedex;

4. `Team.tsx`

This component showcases the Pokémon that we have already added into our team. It does this by reading the state from the store using Redux’s useSelector.

const Team = () => {
  const myTeam = useSelector(selectValue);
  const dispatch = useDispatch();

  return (
    <div className={styles.teamContainer}>
      <h1 className={styles.header}>My Team</h1>
      {myTeam.length ? (
        <div className={styles.teamWrapper}>
          <div className={styles.teamListing}>
            {myTeam.map((poke: PokemonBasicInfo) => (
              <div key={poke.name} className={styles.pokemon}>
                <img src={poke.image} alt={poke.name} />
                <h1 className={styles.pokemonName}>{poke.name}</h1>
              </div>
            ))}
          </div>
          <button
            className={styles.clearButton}
            onClick={() => {
              dispatch(removeAllPokemon());
            }}
          >
            Reset
          </button>
        </div>
      ) : (
        <h1 className={styles.emptyMessage}>
          Click on a Pokémon to add it to your team!
        </h1>
      )}
    </div>
  );
};

export default Team;

5. `_app.tsx`

The entry point for our app is then wrapped with a Provider which provisions the store we previously created. This allows all its children components to access the store and make modifications to the state.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

For an in-depth look at the project, please visit my GitHub.

Limitations of Redux Alone

But here’s a problem.

Did you catch that? If you said that the problem was choosing Oddish to be part of my team, technically you’re not wrong….. BUT a more drastic issue would be that my team selection gets wiped whenever I refresh the page. What if I forgot what my team selection was before? How would I make sure that the application remembers (persists) the choices (state) that I have made?

Redux-Persist

Redux-Persist is an add-on library to Redux that will allow us to save our Redux store in the local or session storage. Before I dive deeper into how and why it works, let’s take a look at adding it into our application. This is a simple process as it only requires us to modify our store.ts and _app.tsx . But before that, let’s install the package.

# Install redux-persist
npm i redux-persist

Changes /Additions Made

Now, let’s delve deeper into the changes and additions that were made to our existing files.

1. `store.ts`

Function / Object	Description
combineReducers()	Merges all the reducers into a single reducer object. Think of it as throwing all our reducers into a giant box, so that we can easily reference all our reducers by pointing to that giant box.
persistConfig	This is a configuration object that is used to customize the persistence of our reducers in our store. The key configuration to include is the key and storage. For our case, we our key is simply root and the storage we are using is the session storage which is imported from redux-persist/lib/storage/session . Alternatively, to use local storage, we can instead import storage from redux-persist/lib/storage but of course, the choice is yours. This will determine where our store and state is being stored. You can look at it as the core of redux-persist as it allows the application to remember and persist the data using the local/session storage as its memory.
persistReducer()	Takes in the persistConfig object we created earlier, together with the all-in-one reducer to create our persistedReducer. What we are doing is simply applying the persistence configuration on all our reducers
configureStore()	If you’re familiar with Redux’s createStore, this is a simply an abstraction/wrapper around that function which helps to add good default to our store setup. This function takes in a configuration object which in our case just includes the persistedReducer we created. This store is exported and is the same one provisioned via the Provider wrapper in _app.tsx.
persistStore()	Finally, we pass our previously created store object into this function, to finalize the creation of a store that is able to persist state, by saving it in the local storage. This persistor is exported to be used in _app.tsx

const persistConfig = {
  key: "root",
  storage,
};

const reducers = combineReducers({ pokemonTeam: pokemonTeamReducer });

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
});

export let persistor = persistStore(store);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

2. `_app.tsx`

Apart from the store that we already provisioned, to ensure that the persistence configuration is set for all the components in our application, we add another wrapper PersistGate. This wrapper takes in the persistor that we created in store.ts and can also take in a loading component. e.g loading={<Loading />}. PersistGate will help to delay the rendering of the app until the persisted state has been retrieved from the local/session storage and saved to redux.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  );
}

Final Product

Add here’s the new and improved Pokémon team builder, now enhanced with redux-persist! As you can see, our application remembers our team, despite refreshing the page! When we look at the Redux DevTools deeper, we can see that Redux performs a persist and rehydrate, allowing our data to be ‘remembered’ on refresh. Additionally, we can also see that our information is being stored in the session storage, in the key persist:root.

Once again, for an in-depth look at the project, please visit my GitHub.

Conclusion

Redux-persist is a very helpful addon to Redux that allows our application to persist and remember our state, by saving the data in the browser’s persistent storage. This ensures that the data will still be available for our components to modify and utilise, despite a browser refresh. We are able to further specify which storage to use - local or session - or customize the persistence of our store by including/excluding desired reducers. With that said, what’s stopping you from simply creating a helper function that adds the state to the storage whenever we do a useDispatch(), and check that storage for existing any data whenever we perform a useSelector() to retrieve the state? Instead, maybe we could have used localStorage.setItem("team", []) and localStorage.get('team') ? Let me know your thoughts on which you prefer or if you have any other alternatives for persisting Redux state!

Lastly, if you’re looking for a more in depth understanding of redux-persist and its other features and configurability, here are other helpful articles/video you can visit!

Redux: Persist Your State by Zack (2017)
The Definitive Guide to Redux Persist by Mark Newton (2017)
Redux-persist: The Good Parts by Feargal Walsh (2018)
How to persist and rehydrate redux store efficiently by The Minimalist Coder (2021)

Basics of AWS Lambda

Amir Azhar — Thu, 16 Dec 2021 16:47:59 +0000

YOU HAVE BEEN WARNED!

You see, I'm no expert at Amazon Web Services (AWS) or Lambda functions. As a matter of fact, I only just started learning about them 2 weeks ago and have since played around with it during my internship. So please don't come at me if this post isn't as informative as you might have expected. Maybe look at this post as a sort of learning diary by yours truly! With that said, let's get started!

What is Lambda
Why Lambda
How Lambda
Closing Remarks

What is Lambda

Like many of you, I've seen the words AWS and Lambda before on the internet but never knew what they meant or what they represented. But now, I'm no longer a lost sheep. So here is some background of AWS and Lambda.

AWS

Amazon Web Services or AWS in short, is a subsidiary of Amazon (thank you Papa Bezos) that provides on-demand cloud computing platform and APIs for companies and individuals. To clarify the technical jargon cloud computing, it is simply an access to required services such as servers, databases, networking without having to care about managing the actual computer resource. I know, sounds fancy, but that's just the tip of the iceberg of what AWS can offer. Once again, I'm no AWS sensei so we'll only be focusing on one of the services AWS offers - Lambda.

Lambda

As defined on the AWS website,

AWS Lambda is a serverless, event-driven compute service that lets you run code for virtually any type of application or backend service without provisioning or managing servers.

So, the word serverless, is a tad bit misleading. It doesn't mean that there aren't any servers. It just means that we don't have to worry about whether our servers have enough resources for our application. All that will be taken care of by AWS. With that said, Lambdas are simply functions that run on these servers that are provisioned by AWS.

Why Lambda

All this is cool and all but why should YOU use AWS and Lambda? As mentioned earlier, AWS provides a myriad of services. If you're creating your next great startup that requires storage, computing power, databases, analytics and so on. AWS has you covered by being able to offer you all these services under one roof. It makes your development process much more efficient and scalable. So, if you have a resource hungry function that needs integration with a load of different services, why not use Lambda as well.

How Lambda

I know the section title is grammatically incorrect but I just wanted it to fit nicely with the rest of the section titles. Anyways, in this section I'll go through with you a simple step by step process on how I created my first Lambda using the AWS Console. If you haven't already created an AWS account, please do so because I'll be skipping that part and going straight into meat of the matter.

Step 1: Navigating to the Lambda Service

Navigating around the AWS console is as simple as searching for the required service on the search bar located at the top of the screen. Once there, you can go ahead and click on 'Create Function'.

Step 2: Creating the function

Here, we have 4 options we can choose from but as beginners, we can choose to just focus on the first 2 options.

Author from scratch means to write the function from scratch
Use a blueprint means that we can choose from a wide selection of templates to base our function off of.

In our case, we will be choosing the latter, and using a Node.js hello-world blueprint. Then, we can go ahead and continue configuring.

Step 3: Configuration

At this stage, you can set the name of your function and also set the execution role. What's an execution role? As mentioned earlier, Lambdas have the power to access other services. By default, its access is not authorized. For starters, selecting the 'Create new role with basic Lambda permissions' will allow us to use the CloudWatch Logs service, a service that helps us collect and store the logs of our Lambda. This should suffice for now but the role can be further modified in the future to allow access to other services whenever you need them.

Lastly, the code from the blueprint is also shown right before you finalise the process by clicking 'Create function'.

Step 4: Modifying the Code

Now that we have created the Lambda, there seems to be a lot to unpack - code properties, runtime settings, layers, throttle bla bla bla. But today, we'll just focus on deploying and running the function.

Before I give a rundown of the code, let me perform some modifications to it so I don't seem like such an amateur.

exports.handler = async (event, context) => {
    var article = event.article
    var followers = event.followers

    // Thank you to my followers
    followers.forEach(follower => console.log(`Hello ${follower}! Thank you for following and reading my posts!`));

    // A shoutout to an interesting article
    console.log(`Here's an article I read recently! ${article.title} by ${article.author}`) 

    return 'All Done!'
};

Let me now give a quick breakdown of the template syntax. handler in the index.js (the entry point) is simply the function that will be called whenever the Lambda is being invoked. This function takes in 2 parameters - event and context - with the former being the more important one.

event can be seen as the input to the function. This parameter can be in the form of a string, array or more commonly an object.

context parameter is an object that provides methods and properties that provide information about the invocation, function, and execution environment. For this example, this parameter is not as important.

Now, let's just straight into testing it so we can see what it does! Don't forget to click on 'Deploy' whenever you make any changes to the code.

Step 5: Testing

Under the testing tab is where can configure our input. Our input is an object that consists 2 properties - article and followers.

article is a nested object that has the author and title properties, corresponding to an insightful article that I recently read.

followers is an array that contains my first 10 followers since I joined Dev.to 3 weeks ago.

With our test input settled, we can go ahead and click 'Test'.

Step 6: Results

Given the simplicity of our function, the execution was completed in mere milliseconds. Let's now focus our attention to the Log Output.

START RequestId: c9da68e2-f02a-49bd-ab0c-294fe5f1aeda Version: $LATEST
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @leeraiyan! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @tarantool! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @ravitejamannam! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @martinkr! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @xingtler! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @chawn! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @coder5010! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @sabiyatabassum! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @chesecheif! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Hello @smpofana! Thank you for following and reading my posts!
2021-12-16T15:50:49.461Z    c9da68e2-f02a-49bd-ab0c-294fe5f1aeda    INFO    Here's an article I read recently! 25 Website Performance Metrics to Watch in 2022 by anthonynsimon
END RequestId: c9da68e2-f02a-49bd-ab0c-294fe5f1aeda
REPORT RequestId: c9da68e2-f02a-49bd-ab0c-294fe5f1aeda  Duration: 19.03 ms  Billed Duration: 20 ms  Memory Size: 128 MB     Max Memory Used: 55 MB  Init Duration: 143.67 ms

As expected, the output included all the logs that were intended, thanking my first 10 followers and giving a shoutout to anthonysimon's article, 25 Website Performance Metrics to Watch in 2022. In addition to that, we can see how long each step took, the total execution duration and how much memory was used.

And that's it! We've created our first Lambda function using the AWS console! I know I know, it isn't super impressive but we all start somewhere!

Step ???: Additional Information

Now, you might have been afraid when you saw 'Billed Duration' in the summary after invoking your Lambda function. If you're a broke university kid like me or you're just stingy with your money, fret not! AWS makes sure that you only pay for what you use, charged based on the number of function calls and the time it takes to execute it. Per month, users have 1 million free requests and 400,000 GB-seconds free (up to 3.2 million seconds of compute time) to play around with. Thereafter, Amazon charges users as little as $0.0000002 per request and $0.00001667 for every GB-second used, depending on your region.

If you're just playing around and not trying to build the next unicorn company, then you won't have to worry about paying for now!

Closing Remarks

There you have it! I hope this article gives a rough overview on how to create a Lambda on AWS and maybe even give you a glimpse on how you can use it in your next project. This tutorial handles all the intricacies of making a Lambda using the web console. However, if you want to feel more like a hackerman, you can rest easy knowing that this entire process of creating, deploying and updating a Lambda can be done in a local environment like VSCode. I'll delve deeper into this topic in the future when we explore the Serverless Framework!

Just Another (Average) Full Stack Web Project

Amir Azhar — Wed, 01 Dec 2021 05:26:41 +0000

Background
Beginnings
Tech Stack
Initial Design
Challenges
Grand Finale
Reflections

Background.

Back in 2019 when I first started delving into web development out of my own interest, I never had the opportunity (or rather, I was massively procrastinating) to start my own full stack web project. My past personal projects were always frontend-focused, using technologies like React or Bootstrap. I always found frontend development to be more enjoyable and captivating, as it allowed me to visualize my work and explore my creative side when designing interfaces.

But it was time to get out of my comfort zone.

I started to dabble in backend technologies - ranging from MongoDB to Express - during the summer of 2021. I used this as an opportunity to learn more technology frameworks and tools, mainly through YouTube tutorials from Traversy Media and Full Stack Junkie. It definitely brought me enjoyment, finally able to explore a whole different side to web development.

It was not until my final year in National University of Singapore (NUS), August 2021, that I had the opportunity to create my very own full stack web project.

Beginnings.

As Computer Engineering undergraduates in NUS, we had to complete the infamous CG4002 Capstone module. Why did I say infamous? Well, because this was our first project where we had to utilise all the knowledge and skills that we picked up over the past 3 years of our degree program. Embedded systems? Yup. Socket programming? Of course. Machine learning? You bet. Vivado? Absolutely hate it, but yes.

I think you get the point.

It was a huge project with so many different components interacting with one another but luckily, we worked in groups, where each one of us played different roles, and became experts in our different fields. Of course, I picked the web development role. Why would I be writing this post if there wasn't any web development. For just a bit of context, the problem statement of our project was:

A wearable system that detects and coaches dance moves of a dance group

We were given total design freedom, albeit a few guidelines to follow. We could decide the direction of the project and how we wanted to execute it. For my web development component, also known as the dashboard, I had a few requirements to fulfil:

How will the dashboard store, analyze, and display the data from
the dancers in real-time? What analytics can you provide to coach the dancers? How can the dashboard handle many simultaneous users? How will you assess user feedback of the dashboard?

Simply put, dancers would have wearables (with sensors) strapped to their wrists. The data will be used to predict what dance move a dancer is performing. I had to create a dashboard that would display the result of the machine learning model and also provide real-time data visualisation and analytics while the dancers performed their moves. For now, let's not worry about the details of the data pipeline between the other components and mine.

It's finally time to delve into the web development part that you've all been waiting for.

Tech Stack.

I opted for the MERN tech stack for my project. Let me briefly go through the different components in MERN and why I chose them. It has to be said that the entire web application, both the client and server, was run locally ob my own device.

MongoDB

MongoDB is one of the most famous NoSQL database. Unlike traditional databases, MongoDB represents its information in a schemaless series of JSON-like documents, as opposed to the table and row format of relational systems such as PostgreSQL or MySQL. I picked it for 2 main reasons - (1) it allowed me to watch for real-time changes in the database using Change Streams and (2) I had a complicated love-hate relationship with SQL.

Express

Being a smart (and hard worker) I wanted to achieve my goals without having to write API functions or routes from scratch. Express comes to the rescue as a minimal web application framework that provides me with a myriad of HTTP utility methods and middleware, to ease the creation of APIs.

React

Of course I picked React. What else would I have chosen? React is obviously the most superior frontend tool. All jokes aside, I was most comfortable with React as compared to other technologies like Vue and Angular, due to my extensive exploration of the library back when I was developing my personal web portfolio. (sorry for the shameless plug.)

Node
Using Node was essentially a no brainer for me. Node would allow me to run JavaScript outside of the browser, hence, I am able to use it server side as well.

Initial Design.

Having complete design freedom was definitely exciting, but it can be challenging because it may seem directionless at times. Thankfully, I tried to develop a proper workflow so that I could achieve an extraordinary end result.

I first started to look for inspiration on this amazing website, Dribbble. They had TONS of user-submitted designs and animations which I then used to generate my own ideas.
Next, I sent out a simple preliminary survey to my group mates, friends and family. I would then use these (un)overwhelming responses to develop use cases, user stories, and feature lists, all centered around the users.
Last step was the exciting part, which involved the designing of the UI. Thankfully, I had paid for the entire Adobe Creative Suite which included Adobe Xd, which allowed me to create simple mockups.

Challenges.

Considering it was my first full stack web project, I was met with quite a few challenges, which was to be expected from a newbie like me. Although I had Teaching Assistants and Professors that could guide my process, I wanted to be as independent as possible. This meant spending countless of sleepless nights debugging, re-designing and scouring the depths of StackOverflow. Here are just a few challenges I faced during the development of the application and I how I tried to overcome them or simply just ignore them (ignorance is bliss).

MongoDB provides a cloud-based solution, MongoDB Atlas, which handles all the complexity of deploying, managing, and handling of deployments on a cloud service provider of our choice. All I thought I had to do was to just set up the endpoints on my server that would connect to the cloud database and I would be good to go. Boy was I wrong. Unfortunately, there were troubles connecting to the cloud service on the FPGA that we deployed to run ML predictions and send results to the database. The FPGA was sitting in a lab in campus (we had to connect to it remotely) throughout the course of the project and was connected to the campus network. The network apparently had a certain firewall which I never managed to get around. However, a workaround was to set up the MongoDB server locally on my laptop. Since I was staying on campus, my laptop and the FPGA would be on the same network!
I definitely had troubles displaying real-time graphs on screen. Despite having MongoDB's Change Streams and Socket.io to aid in my real-time streaming, I still faced troubles. The issue was that, my database was receiving data at frequency of 30Hz and my server would then vomit out the data at the same rate to the frontend, resulting in major latency issues. An easy fix I thought of was to sample the incoming data, reducing the frequency to only about 5Hz. On deciding the sampling rate, it was about finding the sweet spot between having minimal latency, and still meeting the requirement of 'real-time'.
The biggest obstacle I faced was the lack of time. It was nearing the final evaluation but I had submissions for other modules to focus on too. My dashboard was mostly done, except for the sign up, login and logout functionalities. It was a shame as I spent quite a considerable amount of time learning about authentication using JSON Web Tokens (JWT), and Redux to manage and keep track of the state of the application. Since this was originally a 'Nice to Have', I decided to forgo the functionality and simplify the authentication process with just simple conditional checks and password encryption with bcrypt. I was definitely not proud of it, but considering it was not even a project requirement, and just something I wanted to have fun with, I was not too bummed for long.

Grand Finale.

After almost 4 months of painstaking hard work, it was finally done. Our final evaluation went very smoothly, with the dashboard performing as it should. Since I had to show only a small part of my website during the evaluation, I thought maybe I could shamelessly show off my masterpiece here.

Enjoy

Here are just some of the tools and npm packages I used in making some of the components of my dashboard:

Blobmaker - A free web design tool to help quickly create random, unique, and organic-looking SVG shapes.
Nivo - A library that provides a myriad of highly customisable data visualisation tools.
Material UI DataTables - A simple data table component that comes with features like filtering, view/hide columns, search and many more.
React Bootstrap - A library that provides many easy-to-use and highly customisable components, essential in any modern web application.

Reflections.

Was I happy with my work? Absolutely. Could I have done more? Maybe? When all is said and done, I believed that it was a great experience finally doing a deep dive on the different aspects of full stack web development. From exploring my misconceptions in React to understanding how HTTP requests work, I definitely learned a lot throughout this journey. This project showed me that backend development was definitely not my cup of tea and I still had a very soft spot for frontend development. I would like to give a shoutout to my lovely groupmates Andrew, Billy, Jess, Jiayi and Alex for being such great teammates and for making my CG4002 journey memorable. To others, this project may seem trivial and simple, but it was definitely a stepping stone for me in becoming a proficient web developer.

Here's to many more projects!

DEV Community: Amir Azhar

Concurrency in Java: A Guide for Beginners!

Overview

Concurrency vs. Parallelism: What’s the Difference?

Concurrency

Parallelism

When to Use Concurrency vs. Parallelism?

Threads: The Building Blocks of Concurrency

Extending the Thread Class:

Implementing the Runnable Interface:

What Does the run() Method Do?

How Concurrency Works: Context Switching

What is Context Switching?

Thread Lifecycle: Understanding the Process

Synchronization: Preventing Conflicts in Multi-threading

ExecutorService: Managing Multiple Tasks Efficiently

Why Use ExecutorService?

There's More?

Conclusion

Exploring Redux-Persist with Pokémon!

Disclaimer

Simple Recap on Redux

Pokémon with Redux

Setting up the Project

Simple Features of Application

1. pokemonSlice.ts

2. store.ts

3.Pokedex.tsx

4. Team.tsx

5. _app.tsx

Limitations of Redux Alone

Redux-Persist

Changes /Additions Made

1. store.ts

2. _app.tsx

Final Product

Conclusion

Basics of AWS Lambda

YOU HAVE BEEN WARNED!

Table of Contents

What is Lambda

AWS

Lambda

Why Lambda

How Lambda

Step 1: Navigating to the Lambda Service

Step 2: Creating the function

Step 3: Configuration

Step 4: Modifying the Code

Step 5: Testing

Step 6: Results

Step ???: Additional Information

Closing Remarks

Just Another (Average) Full Stack Web Project

Table of Contents

Background.

Beginnings.

Tech Stack.

Initial Design.

Challenges.

Grand Finale.

Reflections.

Extending the `Thread` Class:

Implementing the `Runnable` Interface:

What Does the `run()` Method Do?

`ExecutorService`: Managing Multiple Tasks Efficiently

Why Use `ExecutorService`?

1. `pokemonSlice.ts`

2. `store.ts`

3.`Pokedex.tsx`

4. `Team.tsx`

5. `_app.tsx`

1. `store.ts`

2. `_app.tsx`