Creating a Modern Web UI Using React and Typescript
Creating a Modern Web UI Using React and Typescript
VAASAN AMMATTIKORKEAKOULU
UNIVERSITY OF APPLIED SCIENCES
INFORMATION TECHNOLOGY
ABSTRACT
This platform is a product from Jakamo Company, the platform itself is quite big
so the content of this thesis will be the process of developing one of their
applications, the todo-list app, where companies can arrange a todo note both
for internal usage or share it with other companies from their connections.
Technologies used for development will be React and Typescript to build the
frontend, with Material UI version 5.0.0 for a professional outlook, and PHP with
PostgreSQL for the backend and database.
TABLE OF CONTENTS
TABLE OF CONTENTS........................................................................................ 2
1 INTRODUCTION ............................................................................................ 8
7 TESTING ...................................................................................................... 52
8 CONCLUSION .............................................................................................. 55
9 REFERENCES................................................................................................ 56
4
LIST OF FIGURES
Figure 1. React component using props example ................................................. 11
Figure 2. React component using states example ................................................ 11
Figure 3. Example of an interface ......................................................................... 14
Figure 4. Example of interface implementation ................................................... 14
Figure 5. Example of a generics interface ............................................................. 15
Figure 6. Interfaces where one is a normal interface and the other one uses
generics syntax ...................................................................................................... 15
Figure 7. Example of variables extend normal interface and generics interface . 15
Figure 8. Example of a function apply generics declaration and how to call it .... 16
Figure 9. Example of field that has initializers, which runs when the class is
instantiated. .......................................................................................................... 16
Figure 10. Example of constructor in class. .......................................................... 17
Figure 11. Example of a method. .......................................................................... 17
Figure 12. Example of class implements interfaces. ............................................. 18
Figure 13. Example of class extends base class. ................................................... 18
Figure 14. Example of interface extends class. ..................................................... 19
Figure 15. Example of data flow in a unidirectional flow. .................................... 20
Figure 16. Example of an extension on VSC market. ............................................ 22
Figure 17. Command to initialize the application. ................................................ 23
Figure 18. Command to redirect to working directory. ........................................ 23
Figure 19. Project node_module........................................................................... 24
Figure 20. Example of div tag with id of root. ....................................................... 25
Figure 21. Example of how React render. ............................................................. 25
Figure 22. Public folder in project structure. ........................................................ 26
Figure 23. Example of package.json file . .............................................................. 27
Figure 24. Use Case Diagram ............................................................................... 30
Figure 25. Example of project structure . ............................................................. 34
Figure 26. Example of command lerna init. .......................................................... 35
Figure 27. Example of lerna.json configuration. ................................................... 35
Figure 28. Adding workspaces to package.json. ................................................... 35
5
LIST OF ABREVIATION
UI User interface
SPA Single-page
application
Js JavaScript
Ts TypeScript
IDE Integrated
Development Environment
TDD Test-driven
development
1 INTRODUCTION
Nowadays, in the web development field, there are several famous and powerful
libraries that help user build a web application at ease, such as React, Angular or
Vue. But through time React stills keep its position as one of the most popular and
well-known JavaScript library. According to statistics from SimilarTech, there are
1,240,949 websites that used React in December 2021, and these include some
famous websites that have billions of monthly visits, like yahoo.com with 3.5
billion or discord.com with 1.3 billion /1/. These data reveal that React is a well
trusted technology that is used in the development of web application that meet
the standard for dynamic and responsive perspective.
The thesis report will cover the process of creation of a modern and user-friendly
interface web application that meets the standards for a dynamic and responsive
website. Taking advantage out of a React UI library called MUI, that provides a
robust, customizable, and accessible library of foundational and advanced
components, enabling the ability the build and develop React application faster
/2/.
9
With this application, users will be able to make to do notes both for internal usage
or share it with their connections. Since the main type of customer are companies
who registered and already a client of Jakamo, that is why they will have the
privileges to inherit the connection with other companies that are also clients of
Jakamo and hence they can all share the to do notes to each other.
1.2 Objectives
The main objective of this thesis is to create a modern and dynamic web
application that meets the requirements of a fully accessible website, which allows
users find it interesting and easy to use. The application itself should be a fully
functioning to do list app, with user friendly interface that allow users to make to
do notes and save it to their dashboard.
Users can see all of their to do when they first access to the app, there will be a
filter system enabling user to find the needed to do faster. The filter functionalities
consist of Basic filter and Advance filter, each input users type in will be the
parameter for the fetching query to the server. Users can also create new to do
and share it with their connections. New to do will be saved to the database of
that user and as well as the connection they shared.
10
The robust potential of React is that it allows developers to create a large, fast,
scalable, and simple web-based SPA, that can change data without reloading the
page. It is far more advanced and faster than normal websites that are written by
normal HTML /4/.
First, we need to understand what DOM is, it is abbreviation for Document Object
Model, a cross-platform and language-independent interface that treats scripting
language such as HTML or XML as a tree structure.
Virtual DOM is a lightweight copy of DOM, it can do everything DOM can do except
Virtual DOM cannot decide what will be shown on the screen. With DOM we have
tags like div tag or p tag. On another hand React uses Virtual DOM to create objects
like React.div or React.p, and these objects are what we interact, not DOM or DOM
API. That is why the code in React is JSX, a syntax extension to JavaScript, not pure
HTML.
The way that Virtual DOM works is, React takes a snapshot of the current situation
of the app, right before it applies any alternation to the application. When the app
is updated, a Virtual DOM indicated as tree structure will be created, then React
will use Diffing Algorithm to compare this snapshot with the Virtual DOM to know
exactly which node should be changed. Finally only nodes that are differentiated
will be updated to the real DOM and make changes on the screen.
The crucial benefit of using Virtual DOM is, by separating the rendering logic out
of DOM, React can be run on multiple environments like React Native or Server-
Side Rendering. In fact, Virtual DOM is just a JavaScript object, that is why it can
run on every environment as long as that environment enable JavaScript to run. It
can be NodeJs or Embedded JavaScript when developing a native application for
Web or Mobile platform.
2.2 TypeScript
TypeScript is a programming language developed and maintained by Microsoft. It
is a strict syntactical superset of JavaScript and adds optional static typing into the
language. TypeScript is designed for the development of large applications and
transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing
JavaScript programs are also valid TypeScript program. TypeScript enables
developing JavaScript applications for both client-side and server-side execution
(as with NodeJs or Deno). There are multiple options available for trans
13
compilation. Either the default TypeScript Checker can be used, or the Babel
compiler can be invoked to convert TypeScript to JavaScript /5/.
One of the reasons that makes TypeScript more popular and becomes a
fundamental element for web development is because it makes code more
readable and cleaner, improves error handler and easier to maintain. Errors that
are easily bypassed are now being revealed by TypeScript, which help reduce
effort and time for redundant debugging. In addition, even if the .ts file
compilation has error, it can still be generated to .js file on purpose. On another
hand, TypeScript provides us a one-of-a-kind code completion as we type in the
editor. This is what people often refer to when they mention about tooling in
TypeScript.
In order to leverage the power of TypeScript, some of its core knowledge such as
Types, Interfaces, Enums, Generics, and Classes should be learnt beforehand.
Once we perceive the basics, we can apply it to our project as well as continue to
learn the remaining concept.
• Any: This is a special type, it is like a work around when we do not know
about the type of element that is targeted like a variable or a function
parameter, … Using Any type will let us bypass the type checking of
TypeScript and access any properties of that element, like assigning it to
(or from) a value of any type or call it as a function.
• Tuple: It is an array, where we will know exactly how many elements are
in the array and what type they are.
• Void: It represents the return value of functions which do not return a
value. It is the inferred type any time a function does not have any return
statements /6/.
14
• Enum: This type is like a list with a specific range, such as days in a week or
colours from a traffic light like red, yellow, and green.
2.2.2 Interface
This is an inclusive concept in TypeScript, Interface is a way to declare a type of an
object or a function, if the object consistent with the type of interface, then it will
pass, else it will report type checking errors.
Figure 3 describe how an interface looks like, and the way to leverage the use of
interface is assigning it to an object such as a function parameter as in Figure 4.
2.2.3 Generics
One of the ideal ideas in developer world is that everything is dynamic and
reusable. TypeScript indeed notice of this and had provided to us a concept called
Generics to solve our concern. Generics is a term to indicate that a target such as
a variable, interface, class, or a function, does not need to be specified to a single
type when instantiated, but instead a type that can work over a variety of types.
This concept leverages the reusability of coding, helps reducing effort and time.
15
Figure 6. Interfaces where one is a normal interface and the other one uses
generics syntax
The figure above shows a normal interface where it has a ‘contents’ attribute
that has type as a string and an interface that has the same structure but instead
it uses a standard generics syntax.
This figure demonstrates the usage and difference between two type of
interface, object ‘boxStr1’ extends a normal string interface and the other two
extend a generics interface. Obviously, we can see that with normal interface, we
can only append object to one specific type, on another hand, with generics
16
2.2.4 Classes
In ES2015, TypeScript had introduced a full support for “class” keyword, as a
superset for JavaScript, it has the type annotations and syntaxes to express the
relationships between classes and other type /7/.
Figure 9. Example of field that has initializers, which runs when the class
is instantiated.
17
• Implements: This is used to check if the class meets all the criteria
from a specific interface, else it will report some errors. In addition, one
class can inherit from multiple interfaces.
18
2.4 Recoil
Normally in a Single Page Application (SPA) like React, most of the time we will
encounter a problem called “props drilling”. This is to indicate that with a
unidirectional flow technology like React, we will have the situation where the
data flow will only go in one direction, e.g., from father component to children
component. And if the data we want to share does not has the same common
ancestor, we must lift the state up to one specific level where it has the same
parent component and can be shared. This process will get more complex as the
application grows, which end up making the application hard to maintain and
develop.
20
To solve this problem, Recoil has been created. It works and thinks like React,
some say it is the combination between Redux and Context API, it has the
powerful global state management architecture, and it is a library inclusively for
React. In Recoil, we have a feature called atoms, they are a unit of state,
updatable and subscribable, whenever an atom is updated, the subscribed
component is re-rendered with the new value. Atoms can be used in place of
React local component state and they can be created at runtime too. In addition,
if the same atom is used from multiple components, all those components share
their state /8/. All we need to do is wrap the application inside “RecoilRoot” tag
from recoil, it is like an HOC where its children can use all the attributes and
features in recoil. Then whenever we want to leverage the global state
management from recoil, we can specify the hook we want to use in the needed
place, and manage the state through “atom”.
There are multiple defined hooks in Recoil that help the state management more
efficient, such as:
These are three main hooks that are widely used across the project, more
information can be found at the documentation from RecoilJs official website.
Since this project is a mono-repo project, which means there are multiple of small
projects in one big application, the backend side and database need to be
developed in a way that isolate important part but still link everything together.
Due to the confidential of the company the thesis itself cannot reveal too much
about the logic and working flow under the surface.
22
3 ENVIRONMENT SET UP
3.1 Integrated Development Environment (IDE)
IDE is a playground, a laboratory of developers where they can have a
comprehensive facility to develop software application. IDE provides a source
code editor, a debugger and build automation tools, on another hand, it also
includes multiple of extensions that act as a handy assistant, such as language
snippets, or those that differentiate scopes by adjusting the bracket’s colour.
There are a variety of IDEs on the market right now, such as atom, or sublime text,
or even notepad is also an option, but overall Visual Studio Code (VSC) is the best
IDE among them all. It is not just user friendly with a lot of useful configurations,
it also increases working performance of the user by providing a powerful code
editor with simple configuration and a massive community that always ready to
support and solve any related problem. The VSC market provides a wide range of
extension that is extremely helpful and supportive for the coding performance.
In addition, we will also install npm, which is a package management for node,
what it does is it puts modules in a place where node can find them and resolve
dependencies confliction intelligently. Npm is also used to install dependencies
that are needed in the development process. We can visit Node official website at
https://nodejs.org/en/ to download both node and npm.
Note that npx is not a typo error but it is a package runner tool that comes with
npm 5.2+.
After everything is installed and set up, redirect to that folder and open VSC
Here is the project folder structure, it consists of three main folders and some
crucial files initially, the amount of file and folder can be increase in the future as
the application grows.
24
• public: this folder is where the index.html file, which represents the
whole application located. In index.html file, there is a div tag looks like
this.
25
It is called a root DOM node because everything inside it, will be managed
by React DOM. React application usually only have a single root DOM node,
and in order to render a React element into a root DOM node, pass both
to ReactDOM.render().
• src: this is the folder where we specify and declare our components. The
folder structure will vary based on different company’s convention and
architecture, but overall, we can put everything that are used to build the
application in here.
26
• .gitignore: this file will store everything that we do not want to include in
our commit and be pushed to git.
• package.json: this is the file where we specify all the dependencies with
their version and some scripting command to start, test or build the
project. We can also declare the application information as well as other
configurations for our application.
27
4 USER STORIES
• As a user: I want the application can create a todo for me and show every
todo in an easy-to-read format, so I can efficiently organize my work.
• As a developer: I want the application has a well-structured table that
showing todo, with a pagination so user can easily interact with their data.
• As a developer: I want the application has a filter system, from basic to
advance, so that the user can easily find their needed information from the
app.
• As a tester: I want all the test cases are covered and successfully passed, so
that the application works flawlessly.
29
In the UML diagram, use cases are displayed as oval shapes and user is denoted as
a stick figure. In Figure 24, a use case diagram for this project is showed.
According to the figure, when user is in ListView page, he/she can create a new
todo, leverage the use of filter system, which consists of Basic Filter and
Advanced Filter. Moreover, there is also a table of todo in ListView page, and as
the figure has showed, user is capable of sorting the order of todo in the table as
required. On another hand, with user that has Business Unit enabled, he/she will
additionally has the Business Unit filter in the filter system and can sort the
business attribute in their todo. Finally, every user can open the VisualView page
when they are in ListView page.
30
6 APPLICATION IMPLEMENTATION
The main goal of this application is to create a to-do list where companies can
create and share with each other. A to-do list application has been an important
app since it helps people increase their working efficiency and productivity. It not
just plays the role as a scheduler that support people arranging their upcoming
works, but it is also a reminder that reminding people about tasks that still need
to be done.
This application is built based on the stack that has been introduced in Chapter 2.
The application’s plan is made based on careful discussion, following developing
specifications and company’s convention.
7. All test cases should be passed before making a pull request. Team
members shall be requested to review the code carefully before merge the
branch to main branch.
8. Move on to another issue and follow above steps.
First run “lerna init”, this will create a lerna.json file with some basic lerna
configuration along with a package.json file and also a “packages” folder
where all the packages will be located in here.
And now if we start the “todo-list-app” server, we will see that it resolves
the problem but the application still fails to start because of this error.
This error happens because we are using tsx and jsx code inside out
“components” package and using that inside “todo-list-app” package, but
“create-react-app” configures webpack to use bubble loader for the code
inside the project, but in this case, it does not use the loader for the code
that we are importing from another package. So, what we need to do is to
use bubble loader not only for “todo-list-app” but also for the code from
“components” package.
41
After it has been installed, we are going to open “craco.config.js” file, and add our
modification.
What we are doing inside this config file is that we are importing “getLoader”
and “loaderByName” functions from CRACO, and then we will define a
“packages” array and inside that is the path to all the packages we want to use
42
In order to apply changes that we made, we also need to make some small
adjustments for the react-script inside package.json too. Since we want to start
the server inside “todo-list-app”, we will redirect to package.json file in this
directory, move to scripts section, and update the commands to this.
By updating the existing calls, we are now can leverage the CRACO CLI and apply
our modifications.
Due to the fact that this is a recreation of the already working application, the
development process is closely related to the old UI application, e.g. in order to
create a new todo item for testing purpose, we need to add it from the old UI
application. To add new item, we need to choose the “ADD NEW” button.
Figure 41. Button options to redirect showing page of the old UI Application.
After being redirected to the “Add new” page, user needs to fill in all the
requirement text fields and then click “Save” button, that is how a new todo item
is added. By the time this thesis is being written and presented, the new backend
for add new todo item still in developing process, therefore the new frontend
cannot be created and used to create new item directly.
Additionally, the application use REST API to connect to a backend that includes
different modules like todolists, users and companies. Every time client makes an
action, the application will make a request to the database and return the requested
data
45
Figure 44. Flow chart of how the application get data from database through APIs.
The diagram below shows the architecture of the application. Component is where
user make interaction with the app, then the state will be stored in atom from recoil,
by using setRecoilValue. Then the atom will be used in ListView component, which
is the component that make request to the server, atom will be passed as request’s
parameter.
After the data have been returned from the server to ListView component, it will be
passed to atom again and ready to be used across the application, any component
that need the atom, can import useRecoilValue, and use it inside the component.
46
The styling method used in this application is mainly leveraging MUI components
combine with some scss styling. In addition to build better user experience, the
animation of the application is built with a framework called “framer motion”,
with this framework, we can make the component in the app appears smoother.
47
With recoil, process to store data globally is much simpler due to its clear and
simple syntax, every needed actions are provided as the form of hooks.
The way that this filter system works is that whenever user type something in the
search bar, or click any button, it will send the request to the server with the
corresponding parameters that are recorded from user selections.
Figure 48. Advance Filter for company that does not have business unit enabled
Figure 49. Advance Filter for company that has business unit enabled
The second column includes a “Status” dropdown that help users filter out the
status of todo easily. Finally, the third column includes a “Search” and “Tags”
text field for user to fill in keyword of the item they want to find, then the date
picker in order to find the date range of the items.
As Figure 44 has shown, the table also has its own filtering system too, there are
three tabs on the left corner that let user to choose the type of item to be
shown, whether the type is “Sent”, “Receive” or both of them. In the right corner
there is a dropdown button that let user export the display todo table to either
PDF format or XLS format. When use click the button, it will trigger a function to
export the table and its data with the corresponding format. However right now
this function is not yet being implemented.
We can also see from Figure 44, the table also have a pagination at the bottom
of the table. It allows user choose the display items on one page and forward to
next page if there are still remain other item.
51
There is also a button to add new todo item, the button is sticky, which means it
will scroll along with the user’s scrolling in order to create a friendly user
experience.
7 TESTING
7.1 Unit testing
This application is following the unit testing approach, which means whenever a
new feature is implemented, it needs to be tested before merging. This way the
application will always works as expected and avoid unrelated technical errors.
The purpose of testing is the test itself must act as a user behaviour to make sure
that every feature in the application works appropriately. Debugging process is
also highly used in order to trace out if there are any bug or unnoticed warnings,
then the solution can be quickly applied to fix the problem.
Another test was the UI test, the application must follow “Mobile first”
convention, means that it needs to have a friendly UX/UI on all platform and
different screen. The requirements from this kind of test are that the application
needs to display all the components and features on the UI. This help developer
and tester avoid missing small feature that are needed in the application.
Figure 56. Example of testing UI of the application, a snack bar popup whenever
the data is successfully or fail to return.
54
8 CONCLUSION
As the time grows, JavaScript has proved its huge value toward the web
development field and React has become the most powerful and high demand
front end framework worldwide. React offers a sustainable and easy to improve
application, yet still assure a modern and user friendly UX/UI due to the large
amount of implicitly React’s packages that provides reusable and modern
premade component.
This thesis has demonstrated process of creating a todo list application that is used
as a real product from a professional company and follows strictly with the
convention of application development. All the requirements from the company
for the ListView of this todo list were met and the application itself is ready for
production. The real challenge from this project was to make all the logic from the
filter system works appropriately and smoothly whenever there are any input or
parameter from the user. In addition, the challenge also included building the
folder structure for the whole project, whether divided a piece of code into a
separate component or put functions into utils folder to make the code dry and
clean.
Finally, the main goal of this thesis is to efficiently apply React knowledge to build
a modern and dynamic web application that can works closely with the external
sever and successfully fetches data from database. Moreover, an addition
criterion is the application must meet the demand for a modern and user-friendly
application that give user enjoyment when using it.
56
9 REFERENCES
/1/ Similartech. React js. Accessed 12.12.2021
https://www.similartech.com/technologies/react-js
https://mui.com/
https://en.wikipedia.org/wiki/React_(JavaScript_library)
/4/ Pandit, Nitin. 2021. What And Why React.js. Accessed 2.1.2022
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
https://en.wikipedia.org/wiki/TypeScript
https://www.typescriptlang.org/docs/handbook/2/functions.html#void
https://www.typescriptlang.org/docs/handbook/2/classes.html
https://recoiljs.org/docs/introduction/core-concepts#atoms
https://en.wikipedia.org/wiki/Node.js
https://reactjs.org/docs/create-a-new-react-app.html
57
https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-
is-use-case-diagram/