Quick Recruitment Web system by React and Azure platform

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Quick Recruitment Web system by React and Azure platform

Azure platform
Quick Recruitment Web system by React and Azure platform
Hoang Anh, Vo
Business Information Technology
Bachelor’s Thesis
Hoang Anh Vo
Year 2020 Number of pages 43
The aim of this thesis project was to complete a Quick Recruitment Web system using the Re-
act and Azure platform for Kassavirtanen Oy.
To achieve this goal, several objectives were established. These involved designing the UI,
the UX of the product, implementing create-, update-, delete- functions of the job advertise-
ment as well as a survey and creating APIs and SQL databases corresponding with those func-
tions. At the end of this project the system had a complete UI from the front-end and back-
end with APIs. Many features were implemented. The company was able to create, delete,
and update the survey and get the URL link from a created survey, while jobseekers were
able to get the public URL link in order to complete a list of questionnaires. As a result, all
features would be operated properly.
The React library and Azure function framework for development could be utilized. Following
the official React and Azure documentation would keep the project implementation on track.
A case study approach was carried out in this thesis with qualitative research method through
gathering feedback from two target user groups via interviews. By analyzing the collected
data, the project was developed successfully in terms of functionality, user experience and
performance with minor needed improvements in user interface in the next development
Table of Contents
1 Introduction ............................................................................................ 5
3.1 React foundation. ............................................................................ 8
3.3 Styling with JSX............................................................................. 11
4 Using Azure platform in back-end development. ............................................... 14
4.1 Azure platform fundamental. ............................................................ 14
4.2 API server with Azure function ........................................................... 15
4.3 Database with Azure SQL ................................................................. 16
5 Case Study: Kassavirtanen Oy - Building a Quick recruitment system with React and Azure
platform. ................................................................................................... 16
5.7 Application testing. ........................................................................ 35
Figures ..................................................................................................... 42
Tables ...................................................................................................... 43
1 Introduction
This thesis topic will focus on the usage of React and Azure platform in Quick recruitment sys-
tem development in Kassavirtanen Oy.
Firstly, the history of recruitment would be mentioned as extended information with the
technologies involved in the nearest century. The recruitment process and system have
evolved during the decades stemming from the World War II to the current decade. However,
the changes of technologies and services since 1999 would be discussed more since it captures
the overall recruitment situation over nearly 20 years.
Then, there are overviews of React fundamentals and Azure platform basics in which fea-
tures, characteristics of those technologies will be revealed. The advantages of React and Az-
ure will be specified, which are also the reasons they are chosen rather than other platforms.
Finally, this research conducts the summary of Quick recruitment application development
through three main stages which are planning, implementing and testing phrase. Specifically,
planning stage will be divided into functional requirement, non-functional requirement and
application design while implementation stage includes front-end and back-end development
following by the testing phrase.
2 Literature review
Recruitment process originated from World War II period. The primary motivation behind this
was the lack of men who have been called for War supplement. In order to fulfil the gap of
vacancies of serviceman during the war, recruitment agencies have been established to solve
the existing issues. Even though there was an end of the war, job agency companies still
played a pivotal role in landing the job market for returning solders. (PrincePerelson 2019)
After that, the presence of job paper applications appeared few decades later. Due to the
limitation of jobs in the market, those organizations have started figuring out the best poten-
tial matched demand of employers. Therefore, the invention of paper resumes was born in
which skillsets and competences of applicants are showed in writing style. At this stage of his-
tory, recruiters have to publish the job vacancies in newspaper and parallelly save uncounta-
ble non-digital applications while jobseekers are supposed to apply through post or approach
directly to employer’s address. This illustrated the ponderation of precedent recruitment pro-
cess in regards paper applications. (PrincePerelson 2019)
In 1948, The first programing computer was invented by Frederic Williams altering entirely
recruitment system (Computer Hope 2019). Application Tracking System or ATS working with
digital database allowed recruiters to query suitable applications faster and more convenient.
On 6 August 1991(Bryant 2011), World Wide Web was publicly exposed literally boosting the
potential power of traditional recruitment process. The previous hiring activities only influ-
enced locally while the Internet enabled agencies to access numerous candidates globally re-
gardless of their locations. Many online sites and social platforms generated during Internet
era have offered the great opportunities for recruiters to have the wider search in seeking the
most talent employees on global scale.
At this stage, most recruitment companies pursued to become tech-driven companies which
were heavily depend on the latest technology in order to figure out the most suitable candi-
dates for their clients. This provided alternative ways of applying to job application remotely
easier and faster. They were likely to submit their resume online via some websites of compa-
nies or agencies instead of heading to placement firm with their non-digital resumes. (Prin-
cePerelson 2019)
Specifically, the recruitment technology and services have been changing dramatically since
1999. There were 3 waves of recruitment innovation in term of processes of seeking candi-
dates, tracking the application process and performing the process.
Figure 1. Recruitment innovation from 1999 to 2016
For finding the candidates, many online job boards have been formed in the late 1990s imme-
diately attracting a huge number of job seekers from traditional newspapers and printed ma-
terials. Giant companies born in this era were CareerBuilder, Monster or Cragslist bringing the
fresh experience for both recruiters and those candidates. Even though there were more
emerging recruitment platforms releasing later, those flatforms still accounted for from 10 to
approximately 15 percent of US hires. Then, the second wave of job aggregators and profes-
sional network have disrupted the former one in the beginning of 2000s. At this stage, social
network literately formed two types of job seeker, namely active and passive applicants.
While job portals were the suitable places for active job seekers but there was lack of traffic
transactions involved, job aggregators such as Indeed company offer “Pay per click” service
where they were capable of embedding ads from other web platforms to current system. In-
deed would receive the financial merits based on the number of people clicking on those ad-
vertisements. This kind of services became dominant in the job market contributing nearly
60% of US hires from external sources. Meanwhile, LinkedIn was also a trending company at
that time with numerous profile data available online. The unique selling point of this busi-
ness is that recruiters are able to sort out the potential candidates whether they are in de-
mand of looking for job or not. Free data of applicants are valuable for those recruiters with
proper searching skill. The third wave of recruitment evolution soon appeared with the role
of company branding and ranking. Glassdoor, for example, was company review platform
which was the great combination Yelp with user-centred content and aggregator business
from Indeed turning into the fastest growing job platform with more than 50% of visitors in
Another part is tracking application process in which many traditional organizations opted ATS
or application tracking system as their preferences. The first wave of innovation from 1999-
2004, however, is observed to be the presences of on-premise system. Specifically, the instal-
lations of ATS software have been performed at the working places. The notable company
emerging from this era was Taleo which was acquired later by Oracle accounting for 36% of
the market share. After that, SaaS stands for Software as a Services has come to the competi-
tive market as the second wave. Many firms have become successful during this wave includ-
ing Jobvite and iCIMS. Meanwhile, full packages of HR solution software have been conducted
by two giant companies, namely Orable and SAP. Few years later from 2012, many companies
strived to deliver better user experience. They were likely to create user-friendly and respon-
sive applications in order to make users feel more comfortable and accessible when using
those services. Companies itself provided not only the products but full package of services.
Finally, performing the process also be discussed beginning with the golden era of recruit-
ment agencies in the 1990s. Because of the exclusiveness of applicant’s data, recruiters were
able to offer premium services for their clients with higher package price. Many organizations
have exploited these advantages to become more profitable. Few of them exceptionally grew
into publicly listed companies with strategies of sale-centred content. Then, the wave two
came with two major contrast trends with internal recruitment and outsourcing. The former
one was far more popular when LinkedIn entering the market. It enabled companies to less
depend on external recruitment firms and operate their own recruitment process. There was
also the shift from agencies to cooperate firm with more stable working environment. Re-
cruitment process outsourcing (RPO), on the other hand, experienced the fast growth since
there were huge recruitment demands from medium to large organizations. Those firms had
more benefits from cost reduction from outsourcing entire recruitment process. RPO market
would be expected to grow sustainably with 10% per year. Finally, third wave presented
firstly with individual recruiters. Those people had more flexibilities of using recruitment
tools and platforms as well as the working hours along with varieties of working models in
which they have been paid hourly or project based.
As a result, there are many Job Portal platforms emerged as the job hub for jobseeker and
money generation machine for recruitment agencies. However, they are missing some critical
features such as short Job Advertisement with call-to-action button and Quick Survey that
would make the service more attractive to the user. The time for finishing the Job applica-
tion survey is around 30 seconds to 1.5 minutes which is far better than median time of 13
minutes to complete a job application in 500 Fortune Companies. Many of them take nearly 1
hour to finish the job application. (Newton Software)
The shorter time doing the job application, the better chances to get more qualified appli-
cants. If the job application takes longer than 10 minutes, 50% qualified applicants are missed
out. (Newton Software). By doing this, it will shorten the recruitment process with quick re-
sponse from Jobseekers when filling the survey. Therefore, Kassavirtanen Oy has intention to
build Quick Recruitment System to fulfil that gap.
3 Using React in Front-end development
3.1 React foundation.
According Gackenheimer (2015), React is front-end library framework backed up by giant tech
company Facebook. It was first published in 2013 creating the surprise for world developer. It
is built by JavaScript language with an attempt to deal with mutable dynamic dataset and the
complexity of web interface. React itself was born in one of Facebook’s department where
Model-View-Controller architecture is utilized. This model performs two-way data binding
with template rendering. Once React released, it drastically alters the web development with
advanced ideas and algorithms.
React is well-known because of its Virtual Dom. Recognizing the lack of performance in tradi-
tional website technology, Facebook was interested in rebuilding interface performance.
Then, reconciliation was invented in which a set of DOM (Document Object Model) mutates
whenever there is a data change. Traditionally, if developers want to manipulate the content
and the style of every single of element in the page, they have to inspect specific HTML DOM
to achieve that. React technology, however, uses Virtual DOM as layers separating the real UI
representation and programming code to display data into the screen.
Figure 2. Comparing the Browser DOM and the Virtual DOM
Performance of Virtual DOM is far more efficient than rendering the real DOM. With outstand-
ing feature of Virtual DOM, its algorithm will compute the difference when data is changed,
resulting in the minimal updates of rendered data in real DOM.
3.2 Lifecycle of component.
React lifecycle of component also plays an essential role in project development. Each React
lifecycle method is automatically triggered during certain period of time in component life
span. Currently, there are three main stages involved in one lifecycle of each React compo-
nent beginning with mounting phrase, updating phrase and ending with unmounting phrase.
(React Component 2020)
Mounting stage is the first step in lifecycle indicating the initial state of component. The”
constructor()” method will be called first before component literally renders. This is the suit-
able place where local state is initiated, and event handler is bind with an instance or
element. Then, “render()” method will be triggered with props and state examination before
rendering React elements as JSX type. (React Component 2020)
After mounting state completes, updating phrase starts processing with “ComponentDid-
Mount()” method. In case if developers are intended to manipulate the state or call APIs con-
necting with backend, this is the appropriate place for that. “ComponentDidUpdate()” func-
tion then will be triggered instantly after there is an updating process. Developers often per-
ceive this as an opportunity to make some condition algorithms in regard to current props and
previous props comparison. This state also consists of few uncommon methods such as
“shouldComponentUpdate()” or “static getDerivedStateFromProps()” which are seldomly used
by developers. (React Component 2020)
Finally, when certain components are not in use, it will enter the unmounting phrase. “Com-
ponentWillUnmount()” would be provoked to execute clearing the method of this component,
namely time interval or APIs request cancellation in “ComponentDidMount()” function. (React
Component 2020)
Figure 14 Snippet of JSX syntax
This is JSX which is an XML-like or precisely HTML-like extension syntax of JavaScript. It is
highly recommended by Facebook to define the user interface of website. At the first glance,
it looks familiar with HTML. However, it literally is powered by JavaScript language. (Gacken-
heimer 2015)
JSX was born to achieve the conjugation of JavaScript logic and user interface. This interface
logic could concern the way of handling events, altering the local state or adjusting data be-
fore UI presentation. While UI files and logic files before are organized separately in folder
structure, JSX allows developers to store both logic and presentation files in one place consti-
tuting one unit called “component”.
Figure 4. Styling in react app
In term of styling functionality of JSX, it completely inherits almost features from HTML.
However, it is noticeable that there some differences in attribute specification. Because of
“camelCase” naming convention in JavaScript, “class” in HTML has been changed into “class-
Name” in React or “tabindex” becomes “tabIndex” in JSX.
3.4 State and Props managements.
This chapter will emphasis on state and props management which illustrates the data manipu-
lation in React application. Any updates occurred in props and state will trigger component
re-render JSX again.
For props, it stands for properties referring the immutable data displayed in UI presentation.
Props data is supposed not to be changed during the lifecycle of component and usually is
used to pass data from parent to its children. If there is a need of data adjustment, state ob-
jects should be used instead.
// Parent component
render() {
return (
render() {
return (
As can be seen from the code, Parent component has one child component where it renders
the content. However, the content of the page is not rendered from the child itself but its
parent. The data of content is passed to Child component via props object called “content”
which is declared in Parent component. In order to get data from its parent, “this.props” will
be called within Child component to retrieve values.
As mentioned above, state is another approach for manipulating data in React. it is mutable
object in which data will be altered during the component lifecycle. Software developer
could initialize the state of component and change it properly if needed. Furthermore, This
data has only been accessed within one single component. It is highly recommended not to
have local state in component since it would bring the complexity of the react app because of
an increasing number of states.
To tackle with this issue, third library for state management is utilized, namely Redux. Redux
consists of 4 main components which are Actions Creator, Reducer, Store and React compo-
nent. First, user will trigger events from UI component, leading to the dispatched action to
the store. This is where the global state of application is saved and updated, corresponding
the user’s events. Then, reducer with 2 intake arguments, namely initial state and actions,
will receive given dispatched actions. Base on the type of input actions, reducer will perform
some updates with the state. Once the new state has returned, Redux approximately sent it
back to React component where web presentation would be re-rendered.
Figure 5. Redux workflow.
4 Using Azure platform in back-end development.
Microsoft Azure platform is a service of cloud computing with the purpose of building, deploy-
ing and testing applications or services. It was firstly announced in 2010 with surrounding
products of virtual machine hosting, web hosting and data related to services. (Klaffenbach
4.1 Azure platform fundamental.
As evolving during the year, Window Azure was renamed into Microsoft Azure in 2014. From
that onward, their strategy is to emphasis on offing variety of services ranging from Infra-
structure as a service (IaaS) to software as a service (SaaS) as illustration bellow:
Figure 6. Azure cloud computing types
The first type of cloud service is Infrastrcuture as a service, in which users are mainly
responsible for most configuration of the system without hardware. This including router,
SSD, supplies of podwer and system of cooling will be handle by Azure Microsoft. Azure Virtual
Machines, Azure Virtual Networks, for example, are under this catergory. With this option,
users have more accessibilty of sytem covering operating system, antivitus software, network
installation and other confituration. However, there is a time-saving business logic value
contribution. (The Developer’s Guide to Microsoft Azure 2017)
Another cloud services type is Platform as a service or Paas. In this type, users are allowed to
control their system and installation while hardward and Operating system installation and
maintainance are belong to Azure’s responsibitlities. Users still have less time for adding
business logic values. Azure Redis Cache, Azure SQL Databases as well as Azure App Service
are key components in the Paas section. (The Developer’s Guide to Microsoft Azure 2017)
Function as a services (FaaS) is the next category of cloud service. By using this service, users
just need to concern about adding business logic and application. The remaining tasks
including hardware, Operating system or scalability of system are handled by Azure.
Nowaday, It is well-known as serverless computing. Azure function, for instance, is one of
Faas groups in which user only need to initialize application or embed together business logics
and finally execute it. The app will be automatically scalable, conresponding the request
from client sides. Fee is charged based on number of requests instead of entire system which
always lives and waits for the demands from clients. (The Developer’s Guide to Microsoft Az-
ure 2017)
The last type of Azure serives is Software as a service or SaaS. This refers to a service where
user only need to perform application installation while the rest are Azure’s tasks. This is
regarded as the highest abtraction layer of Azure services. This consits of Azure IoT suit or
Azure Cognitive service. (The Developer’s Guide to…