Forem: Evan Gunawan

Clean Architecture in Node.js: An Approach with TypeScript and Dependency Injection.

Evan Gunawan — Mon, 08 Jul 2024 14:39:23 +0000

A Clean Architecture

What is clean architecture and why do we even care about it? The clean architecture approach is a software design pattern and a guideline proposed by Robert C. Martin (Uncle Bob). This architecture urges us to build a cleaner code and more structured code.

So why do we care about it, why is it a good fit (at least, for me) to be used with a Node.js project, especially with TypeScript?

While there is a catch like a more complex code and it may be overkill for some simple or some quick projects, we have some benefits that we can get from following this guideline like great maintainability, testability, and flexibility.

There are some layers of clean architecture: infrastructure layer, adapter/controller layer, application, and domain layer.

The infrastructure layer consists of any kind of framework and infrastructure that we use in our application. For example, database connections and instances, message brokers, caches, and even external API clients.

The adapter/controller layer is like a bridge between our infrastructure and application layer. In this case, the infrastructure layer is like API listeners (for example, we can have express.js requests or message broker subscribers as the infrastructure). The listened API then will be handled by this controller layer. Please be aware that in this layer, we don't want to have any business rules and logic. It is purely just to receive any inputs from the infrastructure layer, maybe transform it, and call the usecase from the application layer.

A Great Match for Microservice

A microservice consists of some operations and logic that are scoped and contained within a boundary. As it is named, the service size is small and micro.

Using a clean architecture for microservice can be a good option since this microservice can be tidy and clean. Of course, it will be greatly structured and easily understood by other developers.

One of the best benefits of using microservice is that the business logic and rules are encapsulated and separated from the infrastructure and whatever we do outside them. We can change, move, and replace any infrastructure we want without touching and interfering with any code inside the business rules. This one key of clean architecture can be suited perfectly by using Dependency Injection (DI).

By using a clean architecture, we can improve the service maintainability and testability. In this case, we can easily test and maintain them without interfering with other projects and even with other use cases or business logic.

Dependency Injection (DI)

Dependency Injection is a design pattern that we can use for this matter. As the name suggests, we can inject any service and dependencies into a class or an entity inside our application. In this case, we can inject any kind of dependencies into our business use cases. A business use case can be contained in a class inside our application layer.

DI sometimes also relies on interface usage. Every use case class should have an interface that works as a template or mold of what kind of dependencies we can inject into a use case class.

So what we can conclude is, that we can inject any dependencies into a use case, that will be used within the application and business flow. Sometimes, injection can occur by using a class constructor inside our use case class.

Of course, there are a lot of resources online that you can read to learn more about this pattern.

A Clean Architecture Example with Node.js

Since we use DI and OOP patterns for this architecture, it will be the best fit to use TypeScript as our project language. While it is strict and has a lot of benefits for this project, TypeScript has a huge community and is an actively maintained technology that we can use for a long time.

Here is an example of a Node.js project with TypeScript using a clean architecture approach and DI pattern using tsyringe.

node-clean-architecture

There is an alternative to using NestJS to implement our approach. But, sometimes it may be an overkill approach since NestJS has a higher level of complexity and may add some complication for the developers.

In the project, we are using tsyringe since it is a library maintained by Microsoft and of course, it should be compatible and be a great fit with TypeScript.

This project uses a clean architecture approach by separating them into three major directories: application, controller, and infrastructure. All entities (domains) are included inside the application layer.

We are using express.js as the web server listening for API requests. In this case, all the handlers will be placed inside the controller directory which has a class that points into a use case class. Dependency injection mostly happened here with the creation of use case classes while injecting them with their required dependencies.

The application layer consists of some use cases. In this project, each use case has its separate class file. For example, creating and fetching posts has different use case classes. This is done for a cleaner approach and structured dependency injections.

The infrastructure layer has an example of using a mock class too. In this case, I have an example of a use case implementing an interface that needs a repository. The repository can be switched in the controller class with an infrastructure with the same interface implementation.

There is also an implementation of DTO uses. We use DTO to make sure the business domain and entities are decoupled with other objects. DTOs are primarily used as the use case input and output. It also can be used to regulate and standardize API response structure.

I happily share this project with you all for your inspiration and use. Of course, this is far from a perfect project that includes all the rules and flows by the guidelines. But, regardless I hope you like it. I am also very open to some feedback and improvement. Please share your thoughts in the comments!

Navigation in React Native: From Zero.

Evan Gunawan — Tue, 07 Jan 2020 14:52:50 +0000

You are developing a React Native application, and of course, you must be wanted to make your app with a lot of routes or screens. Of course, when you Googled it, you will find React Navigation. So how do we use and implement it into our application? Here, let's go and try this feature! 🤓

Before We Start

Please note, that I am using Expo for this article, please tell me if you have any problems.

Setup

If you are using expo-cli, you can run

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

and if you are using bare project, you can use yarn/npm to install the dependencies

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

For bare project, you can see the full instruction here

The navigators

First, we must know that there are some types of navigation:

Switch Navigator
Stack Navigator
Tab Navigators (and drawer navigators)

And, what are their differences?

1. Switch Navigator

Switch navigator allows user to switch between screens or route. It will not save your back stack, or navigation history. In real world example, if you have an app with a login screen and a dashboard screen, of course you don't want the user navigates back to login screen from dashboard using back button. The solution is switch navigator, with it, the user can not back into the login screen, instead it will exit the app from the dashboard.
As the name 'switch', the user switches between routes/screen.

Switch Navigator

See that it closes the app instead back into the home page when I pressed back

2. Stack Navigator

Stack navigator is different from switch navigator, but the function is similar, it is allows the user to navigate between screens/routes. The main difference is It will save your back stack/navigation history. You can also add a header to the screen. A header itself, is indeed the top bar of the screen. For example, you have a product list and the detail screen. In this context, you have to implement stack navigator to the screens.

Stack Navigator

3. Tabs and Drawer Navigators

It is as its name, the tabs and drawer navigators. It saves your back stack, and it will navigate the user with a press on the items. There is some variants that provided by react navigation, such as: BottomTabNavigator, MaterialTopTabNavigator, and others.
Please note that in this article, I will use BottomTabNavigator

Bottom Tab Navigator

🧭Let's Create Our Navigation!

Creating the Navigator

React Navigation let you create and customize your navigation, it can be flexible and complex. But first, lets create a simple one!

So, lets say that I have 3 Screens: Splash, Auth, and Application screen. The question is, what are we gonna use? Switch or Stack?
From the context, we have splash and authentication screen. And of course, we don't want to go back to splash screen when we are at the Authentication Screen.
So the answer is indeed Switch Navigator.

From the docs, to create a simple switch navigator, we can use this method:

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

and lets implement that method. Create a new file MainNavigator.js for the navigator. I usually put it inside ./navigators/ directory.

//**Other Imports**
import { createSwitchNavigator } from 'react-navigation';
export default const MainNavigator = createSwitchNavigator(
  {
    Splash: { screen: SplashScreen },
    Auth: { screen: AuthScreen },
    Application: { screen: AppScreen },
  },
  {
    initialRouteName: 'Splash',
  }
);

On the code above, we create a switch navigator with an object filled with all the 3 screens. In the object, the JSON key is the name of the route (e.g. Splash, Auth, Profile, etc.), it can be anything as it make sense. And the value is the Screen React Component itself (you should import it first).

The second parameter is SwitchNavigatorConfig, and we filled it with an object.
From the code above, the value in the object is initialRouteName, it will configure where should the navigator navigate first when it is fired. In that code, we set it to Splash, so when the MainNavigator fired/mounted, it will open SplashScreen.

There are some config that you can change and modify, like the navigation options, and many more. You can see the list in the navigator docs.

Note: Actually you can simply type Splash: SplashScreen in the navigator object, but it will be better to use the above example so that we can insert the navigationOptions later.

Mounting the Navigator into Root Component

So, we have the navigator file, and we created the navigator. How do we fire it or mount it into the application? Of course it won't be fired itself with magic, we will import, and use it inside our App.js (the root component).

const RoutedApp = createAppContainer(MainNavigator);
//**Other Imports**

export default class App extends React.Component {
  render() {
    return (
      <RoutedApp />
    );
  }
}

Then, try to launch your application. If you are using expo like me, just fire expo start. Hopefully, when you launch the application, it will navigate to SplashScreen.
Please note, that if you have some context or provider, you can wrap <RoutedApp /> with the providers. For example:

  render() {
    return (
      <ApplicationProvider>
        <FooContext.Provider value={this.state}>
          <RoutedApp />
        </FooContext.Provider>
      </ApplicationProvider>
    );
  }

It's done! you created your switch navigator.

🔍Getting Deeper

So, how to create the others? Stack Navigator and TabNavigator? It is the same, lets see from the docs, and what method did they use.

createStackNavigator(RouteConfigs, StackNavigatorConfig);
//And
createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);

The difference between them all is the config of the navigator, there are complete list if you explore the navigator docs.

RouteConfigs

All 3 Navigators that I mentioned above (Switch, stack, tabs/drawer) have RouteConfigs which holds your routes/screen in one JSON object.
Here is a simple example (taken from the docs):

//**Other Imports**
import { createStackNavigator } from 'react-navigation-stack';

const foo = {
  Profile: {
    screen: ProfileScreen,
    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'profile/:id',
    // The action and route params are extracted from the path.
    navigationOptions: {
      title: 'My Profile', //The header title (Topbar/actionbar title)
      ...OtherOptions
    }
  },
  ...OtherRoutes //Other routes goes here
}

export default const MyStackNavigator = createStackNavigator(foo);

navigationOptions

Switch and Stack navigator have similar navigationOptions, you can see the list here, while in tab navigator they have different options, you can check here.

And please note, that they have defaultNavigationOptions too that is written inside the NavigatorConfig (the second parameter).

//**Other Imports**
import { createStackNavigator } from 'react-navigation-stack';

const Foo = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        header: null, //No header in this screen
      },
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        title: 'Test Page',
      },
    },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'red',
      },
    },
  });

📲Creating Full Navigation

After you learn the basics, lets move on to the complex one.

The problem

Lets have some problem!
You have an application, and you need some screen/route like this:

A Loading/Splash Screen
Authentication Screens (includes Sign In and Registration Screen)
The Application Screens (Home screen, Profile screen, and Edit profile screen) The user wants it to be a bottom tabbed application.

In Authentication screen, you can navigate between Sign in and registration screen. In Application Screens, we need a Bottom Tab Navigator to separate the routes inside it.
You can think and have the structure in mind before moving to the solution.

The solution

So, here we go. Lets distinguish them into 3 groups of screens, the first one is the Splash screen (it is a single screen), the Authentication group, and the Application group. For those groups, we use Switch Navigator. Easy.

Onto the next one!
Splash Screen is a single screen, so let it be.
The authentication group has 2 screens: Sign In and Registration. So let's create a Stack Navigator, call it authentication stack.
And the last one, Application group. We have 3 screens: Home, Profile, and Edit Profile. The user wants to have a bottom tab in their app. So, lets put home and profile screen into bottom tab navigator.
And, we have Edit Profile screen, which will not be on the bottom tab, of course. We will put it alongside the bottom tab navigator (home & profile), and put them into Application Stack (we will use stack navigator for the application group)

Here is the summary:

The blue box is the navigator component, while the green box is your screen component.

And the code, will be somewhat like this:

//**imports here...
const AuthStack = createStackNavigator({
  Login: LoginScreen,
  Register: RegistrationScreen,
});

const TabStack = createBottomTabNavigator({
    Home: HomeScreen,
    Profile: ProfileScreen,
  }
);

const AppStack = createStackNavigator({
    MainTabs: TabStack,
    EditProfile: EditProfileScreen,
  }
);

const MainNavigator = createSwitchNavigator(
  {
    Loading: LoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'Loading',
  }
);
export default MainNavigator;

From the code, you can see that you can group some screens into one navigator, and put the navigator itself onto a parent navigator.

The complete code with navigation options will be posted in Github gist. (link down below)

✨Customizing Our Navigators

Creating Tab Bar Icons and Labels

The default tab bar icon do not have any icons. You should import it from outside libraries. You can just import and use @expo/vector-icons if you are using Expo. You can use other libraries too, like eva icons from @ui-kitten.

The icon and label itself is a react component, so you can create and customize those easily. Lets customize our tab bar (using expo vector icons)!

import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from 'react-navigation-tabs';
//**other imports**
const TabStack = createBottomTabNavigator(
  {
    Favorites: {
      screen: FavoritesScreen,
      navigationOptions: {
        /*
          There are 3 parameters passed that you can use,
          focused : boolean => wether the screen is focused/not
          horizontal : boolean => wether phone orientation is landscape/potrait
          tintColor : string
        */
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
          let iconName = `md-heart${focused ? '' : '-empty'}`;
          return <Ionicons name={iconName} size={24} color={tintColor} />;
        },
      },
    },
    ...OtherScreens
  },
  {
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: Colors.primary, //You can use hex code too.
      inactiveTintColor: Colors.primary,
    },
  }
//**Other navigators**

From the code above, you can see, the icon component is saved under tabBarIcon key in navigationOptions of FavoritesScreen. It will changes the icon when the screen is active or not.
The tabBarOptions is the default options for all icons in tab bar, you can change the tint color there. You can see the docs for the full feature list.

Screen Headers

Screen header is the top bar of your app, it can contain back button, the title, and much more.
For example, I can have a stack navigator screen with header or not with header in it. To do this, we are using navigation options of the route, the header options.

const AuthStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      //The screen will not have any headers.
      //Actually, you can create your own header component and insert it here!
      header: null, 
    },
  },
  Register: {
    screen: RegistrationScreen,
    navigationOptions: {
      title: 'Register', //the screen will have a header with Register title.
      headerStyle: { } //Add some style here! e.g. margin or colors
    },
  },
});

Please note that if you leave the header as default, not null, it will have back button as default. So do not worry about the top left back button

🎉And, We're Done!

At this point, you can create and customize your own routes for the navigation. Further more, you can use path in your route for more advanced feature. Also try to create a custom header or tab bar. Finally, you can learn to add some animations and create a complex custom routes.

That's was it from me. Thank you for you to read this long article 😊. I hope you can learn something from this. And please give me more feedback and suggestion if there is any mistake in the article, I would be glad to fix it.
All content in this article is completely taken from my experience in learning React Native.

And lastly, feel free to buy me a coffee☕😉.

Click me to view my full navigator code (Github gist).

React Context: The Easy Way (With Class Component)

Evan Gunawan — Sat, 04 Jan 2020 16:23:43 +0000

Let's say you have to build a web application that needs to hold some data in a "global state" that can be used across all the components in your application, for example a profile data from database.

So, how do we save or put the data in the app that can be used across all the components? 🤔 We can use React Context.
It is a component that can share it state, and can share the data to any component you want.

Context usage is varies, generally people use it to save the app theme value, for example, the user wants their app to be dark themed, so the "dark" value saved in the context, and shared wherever the user goes.

Before We Start

You know that you can create a component with different ways.
One is a functional components, and the other one is class-based components (of course, there are a lot of articles about it if you are new to React).
Please note that you can combine them, functional components inside your class, or vice versa.

The difference is, in functional components, you can use React Hooks for context and also state hooks, while in the class components, we must use different approach.

In this article, I will share only the React Context usage in a class component. React hooks will be on another article.

Let's start with Class-Based Components

Declaring the context itself

In this section, we will learn the React Context usage in Class components.
First thing first, we create a file that holds the context component itself,
Let's call it MainContext.js, We want to hold a profile object of a user, so we set it as a default value.

import React from 'react';

const defaultVal = {profile: {}} //Insert the default value here.
export const MainContext = React.createContext(defaultVal);

It is done! The React Context is created. 🎉

Providing the App

So now, you should ask, how do we use it, and how do we update it with a profile from a database? or a data from user input?

It would be easy, but before, we need to provide the app with your context component. So we need the context provider in this case. Lets wrap our App component (or the very outer component) with our context provider!

//**Import Goes Here**
export default class App extends React.Component {
  //Let's declare our main state here, it would be global, and can be shared!
  state = {
    profile: null,
    setProfile: this.setProfile,
  }
  //This is the method to set the context data.
  setProfile = (profile) => {
    this.setState({ profile });
  };

  render(){
    return(
      //You can add another component outside the context too, 
      //like the ThemeProvider or another application provider.
      <MainContext.Provider value={this.state}>
        //This is your root application component
        <MyApp />
      </MainContext.Provider>
    )
  }
}

Voilà 🎉, you provided the app with the context provider!
The next step is to manipulate the context. We can read, set or update it with a value.

Using the context

First thing first, we don't want our profile data in context is empty, lets fill it with some value! In my case, I will name the Component LoadingScreen because it fires up first before the profile component. You can add it directly into your root app component too!

//**Imports goes here**
export default class LoadingScreen extends React.Component {
  //Here we go, we set contextType of the component to our MainContext.
  static contextType = MainContext;
  state = {
    profile: null,
  };
  componentDidMount() {
    this._initProfile();
  }

  _initProfile() {
    const context = this.context;
    //Let's fill the context with some value! You can get it from db too.
    const profileData = {
      fullName: 'John Doe',
      username: 'johndoe',
      region: 'EU',
      age: 20
    }
    //Call our setProfile method that we declared in App Component.
    context.setProfile(profileData);
  }

  render() {
    return <Spinner/>;
  }
}

At this point, our profile data in the context won't be null, it will be filled with John Doe profile.

Onto the next one, how we read and use the context.

There is some way I learn to use the context, depends on how do you want to use it.

The first one, is when you want to use your context and provide it outside render() method.
Here is an example.

//Other imports..
import MainContext from './MainContext';
export default class ProfileScreen extends React.Component {
  //We will set the contextType of the Component to our MainContext.
  static contextType = MainContext;

  constructor(props) {
    super(props);
    //Let's declare an empty profile state here.
    state = {
      profile: {},
    };
  }

  componentDidMount() {
    const context = this.context;
    //It will get the data from context, and put it into the state.
    this.setState({ profile: context.profile });
  }
  //Let's use the data into our View.
  render() {
    const { profile } = this.state;
    return (
      <div>
        <h3>Welcome, { profile.fullName }</h3>
      </div>
    )
  }
}

And the next one, is use the Context Consumer itself as a component.

//Other imports..
import MainContext from './MainContext';
export default class ProfileScreen extends React.Component {
  componentDidMount() {}

  render() {
    return (
      <div>
        <MainContext.Consumer>
          {profile => (
            <h3>Hello Again, {profile.fullName}</h3>
          )}
        </MainContext.Consumer>
      </div>
    )
  }
}

And... That's it, you can use the context all the way you want!

Before I end this, I am very sorry if there is any errors or mistake I made in this article. I will be very glad if you tell me for the mistake. I am still learning tho.

However, thank you for your attention, and that you've read my article. I hope this helped you! 👊