Kleen Code in Angular 🅰

Hello ! The Hipster is back with brand new topic which is Clean Code ! But instead of just discussing the regular clean code, i will add more explanation on the implementation of clean code in Angular (file structure and more!)

Old meme from Advanced Programming course 😁

Module Separation

In angular, the application should be split into several modules to maintain the project reusability and make it more organized. With separated modules, making changes to the application will be easier since we will know where the implementation is.

For example, in our current progress, we have some modules.

Some of our project’s structure

As we can see, there exists two pages, event-page and landing-page. Each of them has its own separated module which means that everything that will be put or displayed in the page is located in the particular module. E.g. landing-page module folder will contains everything including the components (which we will discuss later).

So that when we face a problem in the landing page, we can go directly or search the problem inside its designated module.

Components

Assume that you are making the events card for the event page that will look like this.

Event Cards

You can easily create six cards div to form the layout above. But what if we had 20 or 30 of them? We might as well get tired of doing that and our html would be very long. We actually can minimize the code duplication and prevent us from making thousand lines of codes.

We can put a repeatedly-used code inside a component. Or in other words, we can create a component that can or will be used repeatedly.

Make the event card a component

Shared Module

You might as well have some parts that is used across the application or you want to create a standardized layout for every page in your app. Then you would like to take benefit of the shared module.

Header and Footer as shared module

We implemented the shared module for our header and footer, so it will be shown in every page we have in our application.

Services

What about the backends? Does angular provides a way to clean your backend codes? The answer is yes. In angular, we have service. Take a look inside our auth.

Auth

As you can see, we have auth.service.ts at the bottom. What does it have? It contains our signUp() function and other authorization function that we need to have to connect or implement Cognito. Our code snipps

Functions inside the auth.service.ts

if we want to use this code, we can write this on the page’s component.ts file like this

Define the service in Constructor

One use of the service’s function

That’s i think sums up the Clean Code in Angular that we implemented in our project. If you miss something, please understand that we do not use all the features that Angular has.

Discussing about Clean Code in our project, It would be improper for me to just left out the general Clean Code definition and usage. Here is some of the Clean Code principles and implementation.

The Principles

Keep It Simple Stupid (KISS)

Avoiding overly complicated Code is a must. Since we want or might share our code to other people, we need to make it as simple as possible so that people would understand what our code is doing. The implementation of KISS in our project is helped by Angular split sana split sini that simplified a specific module for a page.

Modules

Another example is our auth service’s functions. Psst! it also contains Meaningful Names

Auth’s function

Instead of cramping all Sign Up, Sign In and Sign Out into one big Auth() function, we split each specific function of itself. We have other Clean Code implementation hiding on those, yep! the Arguments! We have only at most two arguments in a function there. Why? because we want it as simple and as low as possible. Hehe.

Don’t Repeat Yourself (DRY)

We need to reduce code duplication in our project in order to keep our code simple like one above, make our code easy to refactor, and prevent overwhelming codes. Again, this was helped a lot by Angular’s Component and Services features. Thanks angular!

Auth services

Header and Footer as shared module

Make the event card a component

You Aren’t Gonna Need It (YAGNI)

If you think that something is not very useful or having any impact to the code in general, you should remove it immediately. Or if you have an unused code, and you sure that you would use it again somehow, Think again! A left behind codes is the reason why we need YAGNI. A stack of unused and forgotten code is really a mess, and might confused people on which one are we using and increasing the project’s memory. Hm, this is odd, we don’t have an example for this because we implement YAGNI 😃.

Composition over Inheritance

Take a look again at the project structure

the project structure

It might reminds you of something from Advanced Programming course. Yep it’s Composition making its return! Angular actually implementing Composition design pattern for their project structure so that one will have a composition of code with the same objective or functionality. like landing page will have everything related to landing page in its composite (component).

Favor Readability

Maintain your code so that everyone else can easily read and understand the codes, the code must be simple and have meaningful names

Meaningful names, you will figure out what is it just by reading the name

Well you might’ve seen before… Duplicated! Help this medium itself is not applying clean code 😅.

Consistency

When you giving name to a function or a module, you are not only take notes on its meaningful names, but also the name consistency along the project.

This picture again?

Name Consistency

use “-” to replace “ “ <- whitespace

Well it’s time for us to part, thanks for reading this medium and i am sorry about the Medium Smells

O. O, Stinky!