Application Frameworks — SE3040

Article 1

SOLID design principles with JAVASCRIPT

SOLID is a very popular set of design patterns developers use in object-oriented software development. The name SOLID itself stand for five design principles. They are,

· Single responsibility

· Open-close

· Liskov substitution

· Interface segregation

· Dependency inversion.

From here onwards let’s talk about each of them.

Single responsibility

The main idea given by the single responsibility principle is, “A class should have one reason to change”. Which means a class should have a unique functionality or responsibility. So, in that way it will be easy to maintain our code for us as well as for the others. By following the single responsibility principle, it will make the implementation,

· Easier to understand

· Help to prevent errors in changes

· More flexible

· Easier to test

We can apply this principle not only for classes but also for functions, software components, API’s etc.

If we consider the above example we can see that there are two methods for the customer. Although the greet method is about the customer “validateCard” method is another responsibility to the customer. Therefore, any changes to the validateCard can make changes to the customer. The correct way to do it is to put the validateCard responsibility to a different class.

As the given two examples we can create another class to validateCard. Now any changes to the validate method will not affect the customer.

Open-closed

The main idea of the open-close principle is “classes, modules or any software entity should be open for extension, but it should be closed for modification”. In simpler words other than changing a class, we can simply extend the class in order to do the necessary changes. Otherwise it can make errors in the implementation. With the help of this principle as the benefits we can mention,

· More maintainable

· Longevity of the application

· Minimize risk when adding new behavior

· Less error prone for the existing implementation

In the below example let’s say we need to calculate the discount according to the payments and the discounts. But in any case, like we need to calculate the discount for a vip customer we need to use the vip discount as well.

Therefor in that case we can create another class for vipCustomers and do the necessary implementations as given below. So, inside the new class we created we can get the vipDiscount and override the getDiscount method in the new class.

Liskov substitution

The principle says that every subclass should be able to substitute their parent class. This principle is like an extension of open-closed principle. In a simpler meaning the child class should contain the functionalities of the parent class while not having a different behavior to the functionalities or methods in the parent class. With the use of this principle we can find some advantages like,

· Easy maintainability

· Code reusability

As the disadvantages we can mention that,

· Create unnecessary entanglements

· Low performance

· More error prone

· Difficult maintainability

As we can see in the given example we can’t extend the customer class methods to the waiter class. But we can create another class for the Vip customer and extend the methods. That means base class should not be extended if the child class cannot accept its parent class methods.

Interface segregation

The main idea is “client should not be forced to implement methods they do not use”. According to this principle it will be better if can use rather more specific interfaces than using them in the regularly used general purpose interfaces. So that we can use specific interfaces rather than using the larger once. So, in that way,

· We can reduce the complexity

· We can increase the maintainability

· Increase the readability

In the above example you can see the interface implementation in typescript. So, we can create an interface newCustomer and implement it in the Vip customer class.

Dependency inversion principle

The main idea is “high level modules which provide complex logic should be easily reusable and unaffected by changes in low level modules which provide utility features”. In other words, it means high level modules should not depend on lower level modules so we should use abstraction and interfaces. So that we will be able to have a more,

· Flexible

· Reusable

Implementation.

In the above scenario we are providing a service inside the constructor. So, we have the problem that high-level modules depend on low level modules. To solve this problem, we can change the CustomerController class to refer only an abstraction of the service class. The example is given in the below.

Article 2

Getting into synchronous and asynchronous JavaScript with callbacks and promises

When we talk about JavaScript we can have many definitions for it. The simple definition is, it is a programming language that can be used for both server side and client-side operations. If we talk more about the JavaScript it is a single threaded language. Single threaded in the sense like we can just process one task at a time. Mainly we use JavaScript in web applications, but we can also use JavaScript in other software’s as well. There are so many advantages we can get using this language, among them given below are some advantages we can mention.

· Simplicity

· Interoperability

· Extended functionalities

· Speed

· Versatility

Synchronous JavaScript

As we already know JavaScript execute one task at a time it doesn’t block the process of execution. So, when we have some lines of codes, it will go through one by one and execute the functionality of them. For an example if we have two processors, the second one will be waited until the response from the first one.

Asynchronous JavaScript

The simple idea of asynchronous JavaScript is that, the order of the output will not depend on the order of lines in the code snippet. So, it will give us the permission to execute the processors parallelly. As a result of that if we have a main execution process happening behind, it will not be blocked. Although the above example doesn’t depict some kind of a time-consuming process other than just a simple console.log, in a scenario like we have to deal with timeouts or request like HTTP, these tasks will take some time to complete the whole execution comparing to the other processors.

In this kind of situation asynchronisty comes to the action and it will not block the other processors while in the time-consuming process. Instead of that it will skip that process and continue with the other processors or the tasks.

Let’s try to understand how JavaScript actually works .To understand how JavaScript works we need to understand the JavaScript runtime and its main concepts like,

· Memory Heap — dynamic memory allocation for variables and other functions

· Call stack — helps to keep track what and where we are running in the code

· WebAPI — place where we keep the asynchronous functions and use them

· Callback queue — when webAPI or HTTP request complete their process they will be sent to the call back

· Event Loop — Where we keeps the track of the call stack and callback queue. Once the call stack is empty it will check the callback queue to continue the process.

Callback functions

In JavaScript we can pass functions as an argument for another function. Callback function is a function that we are going to pass another function as an argument. One of the simple examples is given below to understand the callback functions. As the advantages of using callbacks we can mention that,

More readability, more maintainability of the implementation and also it helps to have a more organized abstraction throughout the code itself.

Promises

Gives us the ending result of a asynchronous operation with its states. These are mainly focus on the asynchronous operations and it will be focusing on the processed result of the operation.

States of a promise,

· Fulfilled — when the actions is success

· Rejected — when the action is fail

· Pending — the promise is not being rejected or fulfilled

· Settled — promise is being fulfilled or rejected

Benefits of promises,

· Better error handling

· Manageable when we have multiple callbacks

Improve the code organizing

Thoughts and summary

In this article we mainly focused on deep about the JavaScript where we mainly focused on the concepts like call backs, promises and the picture about the JavaScript on how it works.

This article will be a better place for someone new to these things to understand the functionalities of the JavaScript while understanding the core system of it. So, if we have the idea about how it actually works, I think it will be easy for anyone to start working on any technology.

Article 3

Version controlling with Git, GitHub and No Sql

Throughout this article I hope to talk about a important concept which is something important for almost all kinds of developers which is the version controlling. Other than that, will have idea about the what git and GitHub are with their advantages.

What is version controlling?

The basic and the simplest idea is keeping track of the changes in order to mange them in a proper way. This thing comes to the action when we are dealing with some kind of a development process while collaborating with a team or some members. In this kind of situation, it will ensure and helps us to keep track of the changes we are doing. So that the communication and the collaboration between the team members will be improved and the code will be more manageable. So when ever we do some changes it will be visible to other developers and they also can have a better idea about the changes and the person who did those changes.

So, there are many advantages of using version controlling.

· Identity

· Branching and merging

· Traceability

· Efficiency

· Conflict manageability

· Less duplications and errors

What is git?

Since we have talk about the version controlling, lets talk about the version control system available. There are some popular version controlling systems like Git, Monotone, Bazarr, TFS…etc. Among these systems Git is something popular among the users. Git is a distributed version control system which is designed to handle everything from a simple project to large and complicated projects. Other than that git is free, open source and it helps to do the implementation in a speed, manageable and more efficient manner. Basically, when ever we want to change the version or if we want to stay with the previous changes that we have done, git will provide the opportunity to do that since it holds all the records.

What are the importance of using git?

Mainly there are two categories of version controlling systems.

· Distributed version control systems.

· Centralized version control systems.

One of the main importance of using git is it is a distributed version control system. Before git there were many centralized version control systems like CVS. The meaning behind the word centralized is, every user gets a copy which points back to a central repository. In git every use have their own repository complete with full history of commits.

What are the basic commands in git?

First of almost before working with git we need to configure the user information. So, we can set our name and the email so that we will be more identifiable. This process can be done by the following commands.

git config –global user.name “example name”

In the above code snippet we can put our name inside the inverted commas where I have put “example name”. like wise we can set out email as well.

git config –global user.email “example@example.com”

In here also we can put our email where I have put “example@example.com”. So when ever you are going to contribute, you detail will be visible to others.

Initializing a new repository

This one of the main commands that we need to know in order to start working with git. With the following command we can initialize our git repository.

git init

This command will create a brand new git repository in the local file system. In reality what we can see is a .git file has been created in the root of the file location and it will contain all of the to keep the track of the changes.

Talking about the file changes, git provides us a smooth way to track all of our changes. Mainly we can divide the files in to three different stages.

· Modified — has done some changes but they are not been committed

· Staged — has done some changes and ready to be committed in the next commit

· Committed — has saved the changes in the locally

In order to clone a repository, we need follow the following command.

git clone [example url]

If we need to check the status where it shows the modified files in the working directory, we user the command git status. This will show the status of the repository whether we have any untracked changes to be committed. If not it will say that the repository is up to date.

git status

Once we check the status, if there are any thing to be added we can do it by the following commands. One way is adding a specific file by giving its name. The other way is adding all the file with the command “git add .”.

Git add [file name]

Git add .

The next step is to commit all the changes we have done. We can simply commit the staged area file by the following command.

git commit -m “example message”

What is GitHub?

GitHub is a hosting platform for software development and version controlling using git. GitHub offers distributed version controlling and source code management functionalities of git. Simple idea is it is a platform to share and manage your code. This has become very useful and popular because it makes the tasks easy for developers as well as the large companies and organizations to manage their projects and collaborate with others.

No sql

In non sql databases data are stored in different formats like key-value pair, document, graph, column etc. when we are dealing with non sql database, we do not need to define the schema. we can’t find a standard way or language for manipulating data because different databases user different syntax. Mostly use for situations like data are unstructured and when we are not focusing on the formats. Most of the time we don’t need to have a license because these are opensource. As examples we can mention MongoDB, Cassandra, etc.

Features of NoSQL databases

· Schema less

· Non-relational

· Hight scalability and availability

· Open source

Types of NoSql databases

· Key-value pair

· Wide-column store

· Document store

· Graph store

Thought and summary

In this article we talked about version controlling with git and GitHub which is something really important for the developer. In the modern IT world, it something important and almost compulsory to have an idea about how, what and why version controlling. Other than that we have talk about git and GitHub related to version controlling. At last we briefly talked about NoSQL database, which we can see commonly in the modern IT industry.

Article 4

Getting started backend development with Koa js and REST API’s.

When we talk about the modern-day web development it is something clear that JavaScript is one of the main languages which is used for the web development as well as the mobile development. The usage of this language or the technology has been gradually increased with the development of the JavaScript frameworks. So, talking about JavaScript and related technologies NodeJS is a one of the main backend technologies that we can find more popular with the developers. NodeJS is a cross platform, backend JavaScript runtime environment which runs on the v8 engine in order to execute JavaScript code outside the browser. So, from here onwards let’s talk about the KoaJS.

What is KoaJS?

KoaJS is an open source NodeJS framework which was developed by the team behind the Express. According to the KoaJS official website their aim to be more smaller, more expressive and more robust foundation for web application API. KoaJS uses asynchronous functions while it focuses on eliminating callbacks and to improve error handling.

Let’s make it more simpler going through process of creating a small application.

Let’s create a small application using KoaJS

Before we are going to start working with KoaJS, we need to make sure we have installed node and the version of the NodeJS should be v7.6.0 of higher for ES2015and async function support.

Once we installed NodeJS with the necessary requirements we can move forward and create a node package and install koaJS by following the given commands.

Once the koa is installed, then we can start working with our application. The rest is also a pretty simple process because only thing we have to do is to import the necessary modules and use them. In this case the main module that we have to deal with is koa. So we can import it and use it as the following code snippet.

Now we have finished creating our application and it is running on port 3000. We can use the listen method with the use of the Koa module. So in this process we are running on the port 3000. The port number is something optional since you can use any other port number you like. We can run this application and check whether it is working by typing the given command.

In this case index.js is the file name that you are doing your implementation.

As the next step we can add routing to our application. As an important thing in feature we need to understand that koa does not handle routing by default. So, in order to use it we need to install necessary middleware libraries for routing. We can simply install it with the following command given below.

Once we install the koa router, we can import it and use it in the same way imported koa to our application. But in here there is one more important thing to do. In order to use the routes, we need to register them. We can register the routes by the following few lines of code. So when ever we are going to import rout file to the index.js file, we need to register them in order to use them.

To proceed with the rest of the implementation we need to understand the concept of the context.

What is context in koa?

The simple idea of the context is it holds the request and the response objects into a single object where we can use the methods to writing web applications and API’s. when we are developing the HTTP server development a context will be created per request. When we want to access each request and the response, we can access them by the given code example. Other than the request and the responses there are many accessors and alias request equivalents and response equivalents.

Ex –

Request — ctx.header, ctx.path, ctx.url …etc.

Response — ctx.status, ctx.message, ctx.type …etc.

As the next step we can start working with the response handling part. We can just simply create the route by using the context that we have discussed moment ago. In the below example as we can see we have created a simple get rout with a simple message of “Hello world”. As we discussed earlier, in here context.body represent the response we are going to get when we call this request. Other than the response body we can define the status of the response as well.

What are the advantages and the disadvantages of Koa?

Advantages

· Light weight

· Improved error handling

· More manageable and clean async code implementations

· More improved interoperability and robustness

· Better user experience

· Better performance with no callbacks and better error handling

Disadvantages

· Not compatible with express-style middleware

· Usage of generators which are not compatible with other NodeJS framework middleware.

· Smaller community

Thoughts and summary

In this article I have talked about the basics of koaJS and how start working with koaJS as an developer. We also have express which is kind of similar to koa with some major differences. For someone who is already familiar with express, this article will be a better place to get the base idea and start working with koa. For other also can have a good understanding about the koa and also can visit to the koa official website to read the documentation to get the complete idea about it. Thank you!

Article 5

Getting started with ReactJS

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. This is a very popular front-end library in the modern world. This library is suitable for complex applications where we have to deal with considerable data changing. So, in order to understand what and why we need to learn react, there are some basic concepts we need to understand. So, in this article lets go through on by one.

According to the creator of reactjs, it is an efficient, declarative and flexible library for simple, fast and scalable web applications.

What are the advantages of reacJS?

· Speed — allows users to utilize individual parts of the application on both client-side and server-side.

· Flexibility — easy code and more flexible because of its structure

· Performance — server-side rendering and virtual DOM increases the performance

· Usability — can start working with the basic knowledge of JavaScript

· Reusability — the components can be reused

Basic concepts

Component — these are independent and reusable set of codes. They serve the same purpose as JavaScript functions, but work in isolation and return html. Mainly there are two types of components.

· Class components

· Functional components

No matter what kind of component we are going to use, the concept remains the same. Class components and the functional components are pretty much popular with the developers. But after introducing react hooks, functional components are now getting popular among the developers.

Virtual Dom — DOM stands for “Document Object Model”. The DOM is represented in a tree data structure where we can find nodes for each UI element. According to the recatJS official documentation, the virtual DOM is a programming concept where an ideal or “virtual” representation of a UI is kept in memory and synced with the “real” DOM by a library such as React DOM.

Props — In simpler words props are arguments passed to a react component. These props can be passed to another component via html attributes. The word props stand for “properties”. One of the most important things the we have to keep in out mind is, these props are read-only. In another word’s props are immutable.

Const newElement = <example name=”react” />

The syntax would be something like the above example. As the above example we can pass a value to another component like we are passing the name in the above example.

State — react components has a built-in state object. This is the place where we are going to store property values. When ever the state object going to change, the components will be re rendered.

As the difference of props and sate, we can mention the given below differences.

· Props cannot be modified or it is immutable while stated changes time to time.

· States can be used in class components, functional components with the use of react hooks, while props don’t have this limitation.

· Props are set by the parent components while sate is generally updated by some event handlers.

Hooks — These are a new feature introduced with react version 16.8. The main idea is this allows the user to use sate and other features without writing a class. There are some hooks available like useState, userEffect nad userContext. These are the most common hooks and other than that we have some additional hooks like, userReduser, useRef, useCallback…etc.

Let’s understand the component life cycle

Since we have an idea about react that it is some set of collection of components that runs accordingly, it is important to understand the how those components work and how those components interacting with each other. Simply a react component go through four stages of its life time.

· Initialization — done by the constructor of a component class. In this stage the component is constructed with the props and the state.

· Mounting — rendering the jsx returned by the render method itself

· Updating — updating the component

· Unmounting — the step where we are going to remove the component from the page

Let’s understand the data flow of react

React has a single side or one directional data flow. Because of this nature, the changes that we are going to do to the state of a particular component will affect only the children. Or in another words, props refer the data from parent.

Thoughts and summary

So, this is a basic introduction to the front-end development with reacJs library. In this article we have discussed about the basic concepts of reactJS which is essential for start working with react

Article 6

Group project management experience in AF module

As an undergraduate in software engineering, it is something clear that we have to work with many group projects throughout the whole semesters. So, inside the AF module also we had to work with some group projects.

From my perspective and my experience so far, I think even though we do not think about it much it gives us so many soft skills which are really important in out life. Some of them are team management, time management, team work etc.

From my experience so far, time management is something really critical in our day to day life. Since we have to deal with so many deadlines we need to have a good time management plan. So, what we did was, before we are going to stuck and fed up with the deadlines, we came with a plan for each and every project.

So that we had a clear idea about when do I need to finish a task and what kind of time I have to get ready for it. In the earlier days we planned to discuss about the technologies, architecture and other technical requirements for our project.

As a result of it at the end of the day we had a good understanding about what we need to do next and how we need to do it. One of the main things we discussed was the architecture that we are going to use and the front-end UI libraries. After that we started working on our individual tasks.

The other thing that I want to talk about is understanding the requirements, problems or the functionalities, finding the solutions for it. On this topic we had to discuss more in order to choose the best technologies which suitable for our requirements of the project. So, at the end we came up with the technologies where we had to start learning some new concepts as well. The reason behind that was we hadn’t use some of the technologies we choose.

So as result of the time management we discussed earlier, we had time to go through those things and start working with those things.

One example for this is the first step to our project, where we planned the initial folder structure and as a team and started working on our individual areas.

The next thing I want to highlight is the team management and the collaboration. Most of the time we had our discussions via online platforms. Although we are not meeting physically for the most of the time, we tried to make sure those meeting and discussions are not boring. One of the main things I have noticed is when ever we schedule a meeting, almost every day every team member joined with the meeting. So, I think the responsibility taken by each of the member is really important and admirable.

Other thing is, every team member is always willing to help others when ever they ran into a problem.

From my experience also, when we ran in to a problem with backend implementation one of the members helped others to solve the problem since he is good at the particular technology.