Antonio Manuel Pereira Do Anjo
Antonio Manuel Pereira Do Anjo
Antonio Manuel Pereira Do Anjo
I would like to firstly thank my supervising professors José Creissac Campos and
Rui Couto for their availability and eagerness to help with their knowledge and
experience during the work period.
Secondly, I would like to thank all the Jumpseller team members that I worked
with, who have since the first day made me feel like part of the team and who I have
been lucky to learn from and become friends with.
I would finally like to thank my family, my girlfriend Sara and my good friends
José Francisco, João Miranda and Rui Pereira for the continued support over the
years.
iii
Abstract
The Internet is always evolving. The way content is generated, displayed and ac-
cessed is constantly changing with the advancements of technology.
As such, new tools, frameworks and technologies are constantly surfacing as a
way to deal with the challenges of this evolution. Keeping up with an increasingly
large number of options is, for Web Developers, as important as it is challenging.
With this challenge in mind, this dissertation aims to offer a deep look into the
current state of Front-End Web Development by going through relevant concepts
and doing an in-depth, comparative analysis of the different frameworks. In the
process, data will be collected, a case study will be developed and a developed ap-
proach will be validated, thus obtaining results and taking conclusions that will help
make the best possible decisions in the development process.
The author will be, during the work period, part of the Developer Team at Jumpseller,
working hands-on with these technologies.
iv
Resumo
A Internet está sempre a evoluir. A forma como o conteúdo de uma página é criado,
visualizado, e acedido está constantemente a alterar graças aos avanços tecnológicos.
Como tal, existem novas ferramentas, frameworks, e tecnologias em constante
surgimento, oferecendo métodos para lidar com os desafios desta evolução. O de-
safio de se manter a par de um número cada vez maior de opções é, para os Web
Developers, algo tão importante como é exigente.
Com este desafio em mente, o objetivo desta dissertação é oferecer uma análise a
fundo para o atual estado da arte do Desenvolvimento Web Front-End, percorrendo
vários conceitos relevantes e realizando uma análise comparativa detalhada sobre
as várias frameworks. Para atingir este fim, dados serão obtidos, será desenvolvido
um caso de estudo e uma abordagem será desenvolvida e validada, obtendo assim
resultados e tirando conclusões que irão auxiliar a tomada de decisões no processo
de desenvolvimento.
O autor irá integrar, durante o período de trabalho, a equipa de desenvolvimento
na Jumpseller, trabalhando diretamente com estas tecnologias.
v
Contents
Abstract iii
Resumo iv
1 Introduction 1
1.1 Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.2 Motivation and Challenges . . . . . . . . . . . . . . . . . . . . . 3
1.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
4 Case Study 41
4.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.2 The Languages Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.2.1 Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.2.2 Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.3 Mock-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.3.1 Desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.3.2 Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.3.3 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.4 Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.4.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.4.2 Desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.4.3 Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.5 New Mock-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.5.1 Desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.5.2 Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.6 Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.6.1 Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.6.2 System and Pre-Requisites . . . . . . . . . . . . . . . . . . . . . . 53
4.6.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.6.4 Developed Applications . . . . . . . . . . . . . . . . . . . . . . . 55
4.7 Comparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.7.1 Bootstrapping and CLI tools . . . . . . . . . . . . . . . . . . . . 57
4.7.2 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.7.3 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.7.4 Component Communication . . . . . . . . . . . . . . . . . . . . 61
4.7.5 Conditional Rendering . . . . . . . . . . . . . . . . . . . . . . . . 62
4.7.6 Iterative Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . 63
4.7.7 Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.7.8 Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.7.9 Project Weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.8 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
vii
5 Validation - Jumpseller 67
5.1 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.1.1 Design and Development . . . . . . . . . . . . . . . . . . . . . . 67
5.1.2 Shared Components . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.2 Work Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
5.2.1 Theme Options Remake . . . . . . . . . . . . . . . . . . . . . . . 68
5.2.2 Facebook Messenger Jumpseller App . . . . . . . . . . . . . . . 69
5.2.3 New Admin Panel Menu Layout . . . . . . . . . . . . . . . . . . 73
5.2.4 Product Categories Section . . . . . . . . . . . . . . . . . . . . . 75
5.2.5 Products Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
5.2.6 Product Edition . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
5.3 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
5.3.1 Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
5.3.2 Contribution and Learning Experience . . . . . . . . . . . . . . 84
5.4 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6 Conclusions 85
6.1 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
6.2 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
B Categories Screenshots 92
Bibliography 108
viii
List of Figures
4.17 The developed applications, showing the list of sections within the
language list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.18 The developed applications, showing the strings translation area . . . 56
4.19 Configuring a new Vue app . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.20 Declaring routes in React . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.21 Component Communication in Vue . . . . . . . . . . . . . . . . . . . . 61
4.22 Conditional Rendering in React . . . . . . . . . . . . . . . . . . . . . . . 62
4.23 Iterative Rendering in Vue . . . . . . . . . . . . . . . . . . . . . . . . . . 63
4.24 Event Handling in React . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
D.1 The basic properties in the new Product Edition page, on Desktop. . . 100
D.2 The image gallery and product properties in the new Product Edition
page, on Desktop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
D.3 The shipping properties and the product options and variables table
in the new Product Edition page, on Desktop. . . . . . . . . . . . . . . . 102
D.4 The Custom Fields, Product Files and SEO in the new Product Edition
page, on Desktop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
D.5 Mock-up image of the Product Properties on mobile. . . . . . . . . . . 104
D.6 Mock-up image of the Product Images Gallery on mobile. . . . . . . . . 105
D.7 Mock-up image of the Product Options on mobile. . . . . . . . . . . . . 106
D.8 Mock-up image of the Product Variants on mobile. . . . . . . . . . . . . 107
x
List of Tables
List of Abbreviations
Chapter 1
Introduction
For as long as the Internet has existed and visiting or creating a website has been
something that is available to anyone, the look, design and usability of a web page
has been a very relevant aspect of web development and a major aspect on whether
or not people are going to want to use a website (Flavián, Guinalíu, and Gurrea,
2006).
While this fact has maintained itself throughout the years, its meaning in terms
of what developers need to be able to achieve has always been changing as the Web
itself changes and evolves.
Concepts such as the Web 2.01 emphasized that a page’s content is, nowadays,
rarely ever static. It can be dynamic and user-generated, gathering information from
other places and displaying it as its own, with focus on usability and interoperability.
A computer is no longer the only way to view a website. Phones, Tablets or even
Smart Watches exist now as a very common way for people to access their favorite
websites and most needed services. This means that web pages have to be developed
in such way that they can adapt to different user experiences.
For reasons such as these, many technologies have surfaced over the years. In
different ways, shapes or forms, these technologies have been aiming to solve the
challenges of the ever-evolving Web.
Facing issues like device compatibility and cross-platform development, these
technologies strive to create simple ways for developers to build their projects in
a way where they can focus on their own specific requirements, without having to
worry about general issues. This is, in theory, a good thing for developers, as it
makes the development process faster and easier. But as more and more of these
technologies come to life, the more the issue of choosing which ones to use for each
project becomes prevalent.
As such, this dissertation aims to investigate the currently most popular tech-
nologies related to Front-End Web Development in its current state, presenting con-
clusions about the strengths and weaknesses of each of them.
During the work period, the author of this thesis will be part of the Jumpseller2
development team. As part of this internship, the author will work with front-end
technologies and directly in a Web Development environment. This means that the
work done as part of the Jumpseller team will be strongly tied to the scientific as-
pect of this dissertation, as the experience gathered will help to have a better under-
standing of the state of the art, and the extensive research will help make sure the
best decisions are made, both during the development processes the author will be
a part of and during the case study development and implementation.
1 https://en.wikipedia.org/wiki/Web_2.0 - Web 2.0 (Accessed September 11, 2018)
2 https://jumpseller.com/ - Cloud Ecommerce Solution (Accessed September 11, 2018)
2 Chapter 1. Introduction
1.1 Context
Throughout the work period, several projects will be developed within the scope of
the Jumpseller product (the logo is presented in Figure 1.1), most of which consist-
ing in the development of Web Interfaces, making use of technologies that aim to
improve the user experience of the application.
The developed components and interfaces will be integrated in the production
build of the Jumpseller application. This will be achieved in collaboration with the
company’s development team.
1.1.1 Overview
Aimed at Small and Medium-Sized Enterprises, Jumpseller has clients spread all
over the world, with a large percentage of those coming from Chile and other South
American countries. Table 1.1 shows the country distribution of its clients as of
December 2017, the time of writing of this section of the present document.
Chile 65%
Portugal 10%
Colombia 8%
Mexico 7%
USA 1.5%
Brazil 1%
Others 7.5%
As of this time, the percentage of clients coming from Chile has been decreas-
ing, as Jumpseller keeps growing and gaining popularity in other countries. It is
expected that in the next few years more than 50 percent of the clients will be from
outside of Chile.
In November 2017, Jumpseller hit the milestone of 1000 active paying stores.
• Ease-of-Use Some of the web components currently in use are old, outdated
and generally don’t provide an optimal user experience. This comes as a con-
clusion of the feedback obtained by the application’s user base and the number
of support tickets received over the years. As such, it’s in the company’s in-
terest that they are improved or replaced in order to guarantee interfaces that
are clean, free of unnecessary steps or annoyances and that are as simple as
possible.
• Lightweight Approach The Jumpseller application should work well for ev-
eryone, regardless of their device’s computational power or average Internet
speed. This means that high performance should be a factor in choosing the
right approach to development.
The current problem with the platform is that many of the sections don’t re-
spect these principles: Some are poorly designed and coded, with a difficult-to-
understand flow and confusing layouts. Others don’t function well - or at all - on
mobile devices and some pages load unused code increasing the application’s load-
ing times unnecessarily. This may be a result of the current code having been written
without these principles in mind and without there having been a proper technology
selection methodology prior to their implementation.
During the work period, the author will be working on making the application
a better user experience by firstly analyzing the current implementations and iden-
tifying their problems and, on a second phase, working closely with the researched
technologies and using the most appropriate ones with these key principles in mind.
4 Chapter 1. Introduction
1.2 Objectives
The following objectives have been set for this dissertation.
• Approach Development
• Approach Validation
• Chapter 4 - Case Study Define and implement a case study using the re-
search technologies, obtaining a practical experience and allowing for a more
detailed comparison between them and for validation of the proposed ap-
proach.
Chapter 2
This chapter sets the context in which this dissertation is included, by providing
some key ideas and concepts about the current state of Web Development and Front-
End technologies.
Here, concepts relevant to this work such as Frameworks and Responsive Web
Design will be presented so that they are further explored later on in the document.
Front-End
Front-End (see Figure 2.1, Frontend) refers to the parts of an application which exist
and run on the client-side and are responsible for creating and supporting the ele-
ments visible to the end user, representing its visual and interactive components. In
2.1. Web Applications Development 7
web development, this takes the form of a website. Front-end covers how the con-
tent is presented and includes all the interface elements that are displayed, such as
menus, transitions, dropdowns or modals (Nice, 2017). This part of web develop-
ment is often referred to as ’client-side’, as the code runs on the client’s browser - as
opposed to running on the server.
HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) (Meyer,
2006), DOM (Document Object Model), JavaScript (Crockford, 2008), HTTP (Hy-
perText Transfer Protocol)1 , and browser skills such as debugging and the browser’s
console are assumed for any type of front-end developer (Linley, 2017). In addition
to fluency in these languages and concepts, front-end developers generally need to
be familiar with frameworks and libraries that ensure responsive, usable content on
all devices that is a result of code that respects the principles of these practices.
Figure 2.2 shows the front-page of the Amazon2 website. Front-end elements
such as images, links, buttons and input fields show how content is generated, dis-
played and how it is built to react to the user’s actions.
Back-End
Back-End (see Figure 2.1, Backend) refers to the part of the application that is not vis-
ible to the end user and which lives and runs on the application server - where the
application runs and services such as database operations are provided. As such, it
is often called ’server-side’. The back-end of an application is responsible for the ap-
plication logic, which includes features such as calculations, data management (c.f.
databases) and providing APIs (Application Programming Interfaces, see Figure 2.1,
API). The interaction between the front-end and the back-end makes it possible for
the right data to be sent to the browser and for the client’s actions to be interpreted
and stored by the application and its database.
Back-End developers will generally have expertise in server-side languages such
as Ruby(Thomas, Hunt, and Fowler, 2005), Python3 , PHP4 or Java(Sierra and Bates,
1 https://developer.mozilla.org/en-US/docs/Web/HTTP - HTTP (Accessed September 11, 2018)
2 https://www.amazon.com/ - Amazon (Accessed October 5, 2018)
3 https://www.python.org/ - Python (Accessed September 2, 2018)
4 http://www.php.net/ - PHP : Hypertext Processor (Accessed September 2, 2018)
8 Chapter 2. Technology and Concepts
2005) and the frameworks that run on them, as well as in database management
systems such as MySQL(MySQL, 2001), Oracle5 or MongoDB6 .
It should be noted that, along with these terms, it’s common to find a third type of
Web development, called Full-Stack (Ihrig and Bretz, 2014). A Full-Stack developer
is one who is comfortable with both the client-side and the server-side aspects of
development and can work with both. Full-Stack frameworks also exist and attempt
to provide nearly everything needed to build and application.(Nice, 2017)
HTML, CSS and JavaScript are the foundation of Front-End Development, and
work together to create, style and set the behavior of a web page. They are com-
monly represented by the logos shown on Figure 2.3.
HTML
HTML is the most basic building block of the Web. It describes and defines the
content of a web page. Its current latest major version is HTML5. (Mozilla, 2017b)
HTML uses markup - a system for annotating a document in a way that is syn-
tactically distinguishable from the text 8 - to annotate text, images, and other content
for display in a Web browser. HTML markup includes special "elements" such as
5 https://www.oracle.com - Oracle (Accessed September 2, 2018)
6 https://www.mongodb.com/ - MongoDB (Accessed September 2, 2018)
7 https://www.json.org/ - JSON (Accessed September 2, 2018)
8 https://www.merriam-webster.com/dictionary/markup+language - Markup Language Defini-
CSS
CSS is a stylesheet language used to describe the presentation of a document written
in HTML or XML. (Mozilla, 2017a)
The current latest version, CSS3, is in the process of becoming the standard in
Front-End Development, as it comes with optimizations and is split into smaller
modules.
CSS works together with HTML by describing how elements should be rendered
on screen. It uses properties such as color, background-color, height, width and many
more.
header {
background-color:red;
}
For example, having an HTML page that contains a <header> tag and includes
the CSS code snippet in Listing 1 will result in the header section of the page having
a red background.
JavaScript
JavaScript is an interpreted programming language with object-oriented capabilities.
It is most commonly used in web browsers and, in that context, its general pur-
pose core is extended with objects that allow scripts to interact with the use, con-
trol the web browser, and alter the document content that appears within the web
browser window. This embedded version of JavaScript runs scripts embedded within
HTML web pages. It is commonly called client-side JavaScript to emphasize that the
scripts are run by the client computer rather than the web server.
Client-side JavaScript combines the scripting ability of a JavaScript interpreter
with the DOM defined by a browser. HTML documents may contain JavaScript
scripts - using the <script> tag - and those scripts can use the DOM to modify the
document or control the web browser that displays it (Flanagan, 2006).
In sum, client-side JavaScript adds behavior to otherwise static web content.
10 Chapter 2. Technology and Concepts
Its implementation revolves around some key ideas: Grid-based flexible layouts,
flexible content with dynamic resizing and media queries.
Figure 2.5 shows an example of a website that is not responsive which, when
viewed on a smaller screen, its content becomes illegible.
Flexbox
The Flexible Box Module, usually referred to as flexbox, aims at providing a more
efficient way to lay out, align and distribute space among items in a container, even
when their size is unknown and/or dynamic (Coyier, 2018).
Development with flexbox starts by creating a flex container: an HTML element
with the display:flex CSS property. This establishes the formatting context for its
contents and enables flexbox layout configuration on itself and its child elements.
Beyond establishing the context, several other CSS properties allow for deeper
configuration of the created container and the layout of its contents. This includes,
for example, flex-direction which defines in which direction the container wants
to stack the flex items (row or column, shown in Figure 2.6) or align-items which
is used to align the flex items vertically in a variety of different ways such as center,
the top of the container or using a common baseline.
Additionally, there are properties which can be applied to the flex items, i.e.
the child elements of the container, such as flex-grow, shown on Figure 2.7, or
flex-shrink which specifies how much a flex item will shrink relative to the rest
of the flex items.
12 Chapter 2. Technology and Concepts
This module is used by the Bootstrap10 framework to help create the popular
grid-based layout.
Besides the screen size, media queries can adapt to different scenarios regarding
screen resolution, orientation, light level and more11 .
Grid Systems
A Grid is a two-dimensional structure used to vertically and horizontally structure
a page’s content in rows and columns. For instance, Figure 2.8 shows the 12 column
container, where the header occupies the full width (12 columns), the main content 8
columns and the sidebar the remaining 4 columns. Figure 2.9 shows a similar repre-
sentation, where the different rows are composed of a different amount of columns,
depending on the type of layout desired.
2.3 Frameworks
In general, the term framework describes a real or conceptual structure which serves
as a base or guide towards building a product that expands it into something useful.
In Web Development, a large number of frameworks exist as a way to solve
commonly faced problems and to provide a way to make development easier and
more straight-forward, in such way that developers can focus on creativity and the
specifics of their projects.
Next follows the description of two kinds of web frameworks - Styling and Be-
havior driven - where a brief introduction and comparison of each is made.
CSS Frameworks
A CSS Framework is a set of pre-prepared CSS styles that aim to easily provide
the developer a set of well-designed, standard-compliant layouts or components,
usually in line with the principles of Responsive Web Design. Some of the most
popular CSS frameworks include Bootstrap and Foundation.
More functional frameworks - such as Bootstrap - also come with some JavaScript
based functions and features, although these are generally design-oriented. This in-
cludes components like Dropdowns or Modals.
JavaScript Frameworks
JavaScript Frameworks, such as React (Gackenheimer, 2015)13 or Vue14 , while all with
their own specific features and quirks, aim to offer ways for developers to efficiently
develop their front-end, with focus on metrics such as approachability, versatility
and performance.
This is often achieved by providing unique code syntax, templates and re-usable
components.
The two code examples shown on figures 2.10 and 2.11 demonstrate a “Hello
World“ in React and in Vue, showing how these frameworks work differently and
with different syntax to achieve a similar end - in this case, a blank page with the
text Hello World!.
13 https://reactjs.org/ - React (Accessed September 11, 2018)
14 https://vuejs.org - Vue.js (Accessed September 11, 2018)
2.3. Frameworks 15
2.3.2 Node.js
Node.js (Tilkov and Vinoski, 2010) is a JavaScript runtime built on Chrome’s V8
JavaScript engine15 . This means that the Node run-time environment includes ev-
erything you need to execute a program written in JavaScript16 . Its logo is shown on
Figure 2.12.
15 https://nodejs.org/en/ - Node.js (Accessed September 3, 2018)
16 https://medium.freecodecamp.org/what-exactly-is-node-js-ae36e97449f5 - What exactly is
Node.js? (Accessed September 3, 2018)
16 Chapter 2. Technology and Concepts
Node Modules
Modules in Node.js can be considered the same as JavaScript libraries, and represent
a set of functions one wishes to include in an application.
Node.js has a set of built-in modules which can be used without any further
installation, and additional modules can be imported to an application using the
require() function.
npm
npm, the Node Package Manager, makes it easy for JavaScript developers to share
and reuse code17 as well as managing dependencies within a project. It can be in-
stalled alongside Node.js and commands such as npm install or npm update can be
used to integrate new packages into an existing application or update all the existing
ones to their latest versions.
2.4 Summary
In this chapter some of the key concepts of modern web development such as Front-
End, Responsive Web Design, Frameworks and the technologies that come with
them have been presented, providing technological context for the next sections,
where the most important front-end development frameworks will be analyzed in
higher detail and put to test through a case study. These concepts and technologies
will also be important on relating the work projects the author will work on as part
of the Jumpseller team.
Chapter 3
This chapter presents an overview of the most relevant Front-End frameworks, con-
sidering usage data as the major factor for selecting the set of frameworks for analy-
sis.
This will define the basis for the analysis process to be developed on the later
stages of this dissertation.
Then, a comparative analysis of the frameworks is done, in order to develop an
approach to the issue of selecting the right technologies for a given project.
3.1 Overview
To get an idea of what are, as of December 2017 - the time of writing of the present
document - the most used web development frameworks, GitHub1 data was col-
lected and is displayed on Table 3.1 and Table 3.2. The number of stars and forks
is shown for each framework, respectively indicating GitHub users that liked and
copied the source code of each project.
The first selection of frameworks to be evaluated was made using popularity and
a GitHub collection of front-end JavaScript framework projects 2 as criteria.
Stars Forks
Bootstrap 119k 56k
Semantic-UI 38k 4k
Material-UI 31k 5k
Materialize 30k 4k
Foundation 26k 5k
Bulma 22k 1k
It can be concluded from this data that, looking at the CSS frameworks and based
on the defined criteria, Bootstrap is by far the most popular, with a sizable lead over
its contestants.
1 https://github.com/ - GitHub (Accessed September 11, 2018)
2 https://github.com/collections/front-end-javascript-frameworks - Collections : Front End
JavaScript Frameworks (Accessed October 5, 2018)
18 Chapter 3. Framework Analysis and Approach Development
Stars Forks
React 83k 15k
Vue.js 76k 11k
Angular.js 57k 28k
Angular 31k 7k
Backbone 26k 5k
Ember.js 18k 3k
In the JavaScript category on the other hand, numbers are distributed slightly
more evenly, with React and Vue (the youngest of the three, having started in 2014)
closely on the top spots, and the two versions of Angular - Angular.js (the oldest of
the three, started in 2009) and Angular - Formerly known as Angular 2 on the next
positions.
In the following sections a deeper look will be taken at the most popular frame-
works in each category, evaluating its strengths and weaknesses and taking conclu-
sions about what makes them the most popular. These sections will aim to compare
the frameworks in terms of what their main features are, how certain common oper-
ations can be performed and their strengths and weaknesses.
A look will be taken at the main features that make Bootstrap the most popular
CSS framework as well as how it handles common problems and, on JavaScript
frameworks, a common point of comparison will be how data-binding works. This
refers to how data stored in the JavaScript variables or objects can be used in the
HTML template to be presented to the end user. Along with this, a small example of
a component or page built using each framework will be presented on its respective
section.
3.2 Bootstrap
Sass3 variables (further explained on Section 3.2.1), responsive grid system, exten-
sive pre-built components, and powerful plugins built on jQuery4 , a JavaScript li-
brary designed to simplify the client-side scripting of HTML.
3.2.1 Sass
Since the first beta release of Bootstrap 4, the framework has been built on Sass. Sass
is a CSS extension language which strives to add power and elegance to the basic
language.
It does so by allowing the use of variables, nested rules, mixins and inline im-
ports. This helps keep large style sheets well-organized, and get small style sheets
up and running quickly.
Sass code, written on a .scss file is then compiled to plain CSS to be interpreted
by the browser.
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
The code example on Listing 3 shows the use of nested rules in Sass, and com-
piles to the plain CSS in Listing 4.
#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }
Note that the Sass snippet on Listing 3 was written on the SCSS syntax, which is
similar to regular CSS. There is also the option of using the SASS syntax, which is
more concise and uses indentation rather than brackets to indicate nesting of selec-
tors, and newlines rather than semicolons to separate properties. The fact that it’s
more similar to regular CSS, however, makes SCSS a more popular choice.
3 http://sass-lang.com/ - Sass: Syntactically Awesome Style Sheets (Accessed September 11, 2018)
4 https://jquery.com/ - jQuery (Accessed September 11, 2018)
20 Chapter 3. Framework Analysis and Approach Development
For Bootstrap, Sass brings advantages with its use of variables. This means that
users can customize Bootstrap with a built-in custom variables file and easily tog-
gle CSS preference with the $enable- Sass variables. Some of these variables are
depicted in Figure 3.2.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
3.2.3 Strengths
• Ease of Use Bootstrap allows developers to add good-looking, functional and
responsive components to their web pages with very little knowledge of HTML,
CSS or JavaScript required. Most of the features of Bootstrap are enabled sim-
ply by using certain class attributes on HTML elements.
• Large Community Being the most popular CSS framework, Bootstrap has a
great documentation, tons of community support and a lot of community made
free and professional templates.
3.2.4 Weaknesses
• Customization and Restrictions If developers intend their website to deviate
from the customary design used in Bootstrap, they will have to spend a lot of
time overriding styles and re-writing files, slowing down development.
This further increases one of the inherent issues of using a CSS framework -
the fact that it limits creativity. This has been made less of an issue with the
introduction of Sass variables in version 4.
3.2.5 Example
To get a better visualization and understanding of how Bootstrap works, let’s take
a look of one of the official code examples provided by Bootstrap, shown on Figure
3.4. The is from the Starter Template5 , the most basic of the ones available.
Examining the page source code, we can find the HTML markdown shown in
Listing 6 used to define the layout and its structure.
This section of the code deals with the navigation bar on top of the screen, as
well as its responsive behaviour. Figure 3.5 shows that, on small enough screens, the
navigation bar changes its presentation to provide a better user experience.
This is achieved using the included navbar and collapse classes and their sub-
classes (navbar-header, etc.).
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.
<br>
All you get is this text and a mostly barebones HTML document.
</p>
</div>
</div>
The part of the code shown in Listing 7 refers to the body of the page layout,
where the content is displayed. It should be noted that this HTML uses some classes
that are not defined in the document or part of Bootstrap, such as the starter-template
class.
It can be seen on this example how, even for a simple page, the code is quite
verbose and how this can pose an issue when scaling up to a large application.
3.3 React
Initially created by Jordan Walke and released in March 2013, React is now main-
tained by Facebook, Instagram and community developers and is currently the most
popular front-end JavaScript framework. Its logo is shown on Figure 3.6.
React is a declarative, component-based and compatible JavaScript library for
building user interfaces6 .
6 https://reactjs.org/ - React - A JavaScript library for building user interfaces (Accessed September
11, 2018)
24 Chapter 3. Framework Analysis and Approach Development
• Declarative API & the Virtual DOM The virtual DOM is a programming con-
cept where an ideal, or “virtual”, representation of a UI is kept in memory and
synced with the “real” DOM by a library such as ReactDOM. This enables the
declarative API of React: You tell React what state you want the UI to be in,
and it makes sure the DOM matches that state.
3.3.2 JSX
React components are typically written in JSX, a JavaScript extension syntax allow-
ing quoting of HTML and using HTML tag syntax to render subcomponents.
The code shown in Listing 8 is an example of a simple React component written
in JSX.
JSX code is then compiled into plain JavaScript, meaning that fundamentally,
JSX just provides s̈yntactic sugarf̈or the React.createElement(component, props,
...children) function. The JSX on Listing 9:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
JSX also uses self-closing tags for elements with no children - Note that the clos-
ing slash is syntactically required. Listing 11 shows an example:
While similar to regular HTML, JSX expressions present some differences. For
example, the class HTML attribute does not work in JSX and should be replaced
with className. Similarly, the value of the style attribute should be an object, not a
string, as exemplified on Listing 12.
Plain JavaScript expressions can be inserted into JSX code by using curly braces,
as seen on the example in Listing 13, which shows a select form with dynamically
rendered options.
<select>
{options.map(function(option){
return (
<option value={option.value}>{option.name}</option>
)
})
}
</select>
JSX is optional and not required to use React. However, it provides a more read-
able, easier and faster to write approach.
constructor(props){
super(props);
this.state={
myVariable="Hello";
}
this.onChange = this.onChange.bind(this);
}
onChange(e){
this.setState({
myVariable=e.target.value
})
}
render(){
return(
<div>
Value: {this.state.myVariable}
<input defaultValue={this.state.myVariable}
onChange={this.onChange} />
</div>
)
}
In the example in Listing 14, we want the page to display the value of an input
field and have it automatically update with user input. So we create a function
onChange(e) and set it as the handler for the onChange event of the input. By doing
so, every time the value of the input field changes, the function gets called. When
the function is called, it uses the API method setState to alter the value of a variable
that we declared in the component constructor.
As changing the state of a component triggers a call to the render() function, the
component will be render again and will display the new value for the variable.
The use of props enables components to communicate with each other, by pro-
viding a way for them to pass variables and functions to their child components.
The code shown in Listing 15, when placed on the render() function of a com-
ponent, calls for the rendering of a ChildComponent, and is passing a variable value
and a function handleChange as props. The instance of ChildComponent can then
access them, respectively, with this.props.value and this.props.onChange. This
way, parent components can communicate with their child components and vice-
versa.
28 Chapter 3. Framework Analysis and Approach Development
3.3.4 Strengths
• Performance React introduced impressive performance benchmarks7 . With
the use of an in-memory virtual DOM, the framework knows just what to
change resulting in inexpensive DOM updates.
• Large, Bubbling Community Stemming from a big name like Facebook and
introducing innovative concepts, React enjoyed almost instantaneous adop-
tion from the front-end community, leading to a very large number of auxiliary
libraries and packages to be developed.
3.3.5 Weaknesses
• Getting Started Getting started with React is not as easy as it is with some
other frameworks. Not only does it come with a steep learning curve, but
its installation generally requires an external utility such as create-react-app
and/or a package manager such as yarn or npm.
3.3.6 Seen On
Some popular web applications which heavily use React include Facebook8 , Insta-
gram9 , Twitter10 and Airbnb11 .
3.4 Vue.js
Vue (pronounced like view) is an open-source framework for building user in-
terfaces. Originally created by Evan You, it was initially released in February 2014
and is currently maintained by an international team of developers. As of December
of 2017, its latest version is 2.5.9.
7 http://www.stefankrause.net/js-frameworks-benchmark7/table.html - JS Web Frameworks per-
Vue is a progressive framework for building user interfaces, designed from the
ground up to be incrementally adoptable. The core library is focused on the view
layer only, and is easy to pick up and integrate with other libraries or existing projects12 .
Its logo is shown in Figure 3.7.
• El The el option provides the Vue instance an existing DOM element to mount
on. It can be a CSS selector string or an actual HTML element.
• Data The data object in a Vue instance is what enables its unobtrusive reac-
tivity system. When an object is passed to a Vue instance as its data option,
Vue will walk through all of its properties and convert them to getter/setters.
These are not visible to the user but under the hood they enable Vue to per-
form dependency-tracking and change-notification when properties are ac-
cessed or modified. When a property in the data object is modified - i.e., its
setter method is called - the component will be re-rendered, thus achieving
reactivity.
12 https://vuejs.org/v2/guide/ - Introduction - Vue.js (Accessed September 11, 2018)
13 https://vuejs.org/v2/api/#Options-Data - Vue.js API - Options https://vuejs.org/v2/guide/
30 Chapter 3. Framework Analysis and Approach Development
• Props Properties - or props - refer to a list or hash of attributes that are exposed
to accept data from the parent component. It has an Array-based simple syntax
and an alternative Object-based syntax that allows advanced configurations.
This a way for parent components to pass data to child components.
The mustache tag will be replaced with the value of the msg property on the
corresponding data object. It will also be updated whenever the data object’s msg
property changes.
Directives, first made popular with AngularJS, are markers on a DOM element
(such as an attribute, element name, comment or CSS class) that tell the HTML com-
piler to attach a specified behavior to that DOM element using a JavaScript expres-
sion.
In Vue, directives are special attributes with the v- prefix.
https://vuejs.org/v2/guide/
3.4. Vue.js 31
In the example shown in Listing 18, the v-if directive would remove/insert the
<p> element based on the value of the expression seen.
Directives also enable data binding in Vue. The directive v-bind can be used to
handle a common data binding need - manipulating an element’s HTML attributes
based on a certain variable or condition.
In the example in Listing 19, href is the argument, which tells the v-bind direc-
tive to bind the element’s href attribute to the value of the expression url.
The v-on directive listens for DOM events (such as when the element is clicked
or an input field is changed) and runs a JavaScript expression when triggered.
The example code on Listing 20 shows a button with the v-on:click directive,
meaning that when it is clicked, the expression counter += 1. The handler expres-
sion can be a function call, allowing for complex event handling.
These two directives shown can also be written in a shorthand version, as :href
and @click respectively.
<head>
<script src="https://unpkg.com/vue"></script>
</head>
Installing Vue on a new project is as simple as placing the line of code shown on
Listing 21.
15 https://github.com/vuejs-templates - vuejs-templates (Accessed Semptember 11, 2018)
32 Chapter 3. Framework Analysis and Approach Development
<body>
<div id="app">
<h1>\{{ greeting }}</h1>
<ul>
<li>
To learn more about Vue, visit
<a :href="docsURL" target="_blank">
\{{ humanizeURL(docsURL) }}
</a>
</li>
<li>
For live help with simple questions, check out
<a :href="discordURL" target="_blank">
the Discord chat
</a>
</li>
<li>
For more complex questions, post to
<a :href="forumURL" target="_blank">
the forum
</a>
</li>
</ul>
</div>
</body>
The body section of the template, shown on Listing 22, is fairly straight-forward,
containing a header and a list with three items.
Throughout this section, we can see data binding being done in the form of the
"mustache tag" - displaying the greeting on the header section and by the use of
:href, the short hand version of the v-bind directive, being used to bind the href
attribute of the links to specific variables.
3.4. Vue.js 33
<script>
var app = new Vue({
el: '#app',
data: {
greeting: 'Welcome to your Vue.js app!',
docsURL: 'http://vuejs.org/guide/',
discordURL: 'https://chat.vuejs.org',
forumURL: 'http://forum.vuejs.org/'
},
methods: {
humanizeURL: function (url) {
return url
.replace(/^https?:\/\//, '')
.replace(/\/$/, '')
}
}
})
</script>
A Vue instance called app is created on the script section, shown on Listing 23.
Let’s take a look at this example’s options object.
• The el option has a value of ’#app’. This means that the Vue instance is bound
to the DOM element which has the id "app".
• On the data object, four variables are defined which are then displayed on the
page via data binding. Having been defined on the data object, these variables
are reactive - meaning that their display will update if their values are changed.
3.4.6 Strengths
• Performance Vue is a highly performant framework. Having taken the idea of
the Virtual DOM and intelligent, inexpensive DOM manipulation from React
and having achieved greater performance in other aspects such as loading and
compiling, Vue is an impressively high-performance framework.
• Approachability Vue is quick and easy to set up, is easy to understand and
provides extensive documentation. Combined with the facts that it uses HTML-
based templates and has relatively little code weight, this makes Vue a very ap-
proachable framework that should be simple to learn with a modest amount
of JavaScript knowledge.
• Familiar Concepts Vue sought to combine the best parts of frameworks like
React (Shadow DOM rendering, component encapsulation e.t.c) and Angu-
larJS (Templates, Directives, Reactivity) into one stable system. This means
that rather than introducing new concepts, Vue combines already familiar con-
cepts into a single package, making it approachable to both beginners and de-
velopers experienced in other frameworks.
34 Chapter 3. Framework Analysis and Approach Development
3.4.7 Weaknesses
• Young Age As a framework that combines all the best aspects from its strongest
competitors, it is difficult to point out a weakness in Vue. However, being of
relatively young age, it doesn’t feature the largest amount of supporting li-
braries or answered questions throughout developer forums. This is barely
a weakness, as Vue has impeccable documentation and support as well as a
dedicated, fast-growing community of developers.
3.4.8 Seen On
Some popular websites build using Vue.js include Font Awesome16 , Laravel17 and
Gitlab18 .
3.5 Angular
3.5.2 Typescript
TypeScript - "JavaScript that scales" 22 - is an open source typed superset of JavaScript
that compiles into plain JavaScript. Built for application scale, it adds optional
types, classes, and modules to JavaScript. Typescript supports tools for large-scale
JavaScript applications for any browser, for any host, on any OS.
For a large JavaScript project, adopting TypeScript might result in more robust
software, while still being deployable where a regular JavaScript application would
run.
Angular is component-oriented. This means that Typescript’s classes will be a
very helpful feature when working with a large scale application. Tooling and de-
bugging is another important part of why using Typescript on Angular applications
makes sense.
TypeScript offers classes, modules, and interfaces. It supports optional static
type checking and is a perfect language for developers who are coming from Java
and C#23 .
The Typescript code shown in Listing 24, found on the Typescript Playground24 :
class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
2018)
23 https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341 -
Choosing a front-end framework in 2017 - This Dot Labs - Medium (Last accessed September 29, 2018)
24 http://www.typescriptlang.org/Playground/ - Typescript Playground (Accessed September 11,
2018)
36 Chapter 3. Framework Analysis and Approach Development
Notice how the TypeScript defines the type of member variables and class method
parameters. This is removed when translating to JavaScript, but used by the IDE and
compiler to spot errors, like passing a numeric type to the constructor.
Data binding in Angular can be achieved in different ways, the most basic one
being interpolation, via the use of double curly braces - such as on the example
shown in Listing 26.
The code snippet on Listing 27 uses the *ngIf directive to specify that the element
in which it is included is only displayed if the value of the expression hero is true.
25 https://en.wikipedia.org/wiki/Mode-view-controller - Model-view-controller (accessed Septem-
ber 3, 2018)
26 https://en.wikipedia.org/wiki/Model-view-viewmodel - Model-view-viewmodel (accessed
September 3, 2018)
3.5. Angular 37
The Angular cheat-sheet27 contains a list of all the directives that can be used.
Two Way Binding - The *ngModel directive is a special one that enables two-way
data binding in forms.
<input [(ngModel)]="userName">
The code snippet shown in Listing 28 uses this directive to bind the value of the
input field to the variable username. Two-way data binding means, in this case, that
altering the value of the input field automatically updates the value of the variable,
and, similarly, if the value of the variable changes, the input field will update to
show the new value.
3.5.4 Strengths
• Tooling Angular has a big focus on Productivity. Having been written in Mi-
crosoft’s Typescript, it has extended IDE support for Typescript Angular Apps.
Angular also comes with Angular-CLI (Command Line Tools), which allow
users to very quickly start building, add components or tests and instantly
deploy.
3.5.5 Weaknesses
• Code Load and Weight Angular is a very heavy framework. A simple "Hello
World" application could easily be 1MB plus in size. This becomes less of an
issue as the scale of the application grows, but Angular generally requires a
lot of code and disk space for small achievements. Additionally, the added
compilation time and cost of parsing TypeScript into JavaScript can make de-
velopment builds difficult to work with.
3.5.6 Seen On
Being a Google-developed framework, Angular can be seen being used in a lot of
Google’s internal / smaller projects such as Google Analytics28 or AdSense29 . An-
gular can also be seen being used on Splice30 , NBA 31 or Royal Caribbean32 .
27 https://angular.io/guide/cheatsheet - Angular Cheat Sheet (Accessed Semptember 11, 2018)
28 https://www.google.com/analytics/ - Google Analytics (Accessed September 11, 2018)
29 https://www.google.com/adsense/start/ - AdSense (Accessed September 11, 2018)
30 https://splice.com/ - Splice (Accessed September 11, 2018)
31 http://www.nba.com/ - NBA (Accessed September 11, 2018)
32 https://www.royalcaribbean.com/ - Royal Caribbean (Accessed September 11, 2018)
38 Chapter 3. Framework Analysis and Approach Development
• Use React if You want to take advantage of open-source auxiliary releases from
big names and want to build a fast, powerful application.
• Use Vue if Time is a constraint and you’re looking to quickly and easily build
your project in an approachable yet powerful way.
• Use Angular if You’re building large scale apps with a lot of planned mainte-
nance and debugging and/or if you have plans to develop mobile apps.
These are initial conclusions that will serve as a leading point to a deeper com-
parative analysis that will be made in the next stages of the work period.
3.7 Approach
With these learnings, the goal is to develop an approach, with the intent of helping
developers make the decision on which JavaScript framework to use on their project,
based on their needs and requirements.
An initial idea from which this approach can be fully developed is presented in
Figure 3.10 in the form of a diagram.
In this diagram, only the three previously selected frameworks - React, Vue.js
and Angular - appear as valid choices, as they are the ones that have been previously
analyzed and of which a sufficient amount of knowledge has been gathered at this
point in the work period.
On the diagram, each round element represents a need, requirement or prefer-
ence and the arrow coming out of it will point to the framework or frameworks that
have been selected as more appropriate to deal with it.
For example, the element positioned at the top right of the diagram and labeled
"Performance" will point to Vue.js and React, as the analysis made led to the conclu-
sion that similar applications built using these two frameworks generally perform
better than ones built in Angular.
Additionally, the elements are color-coded, as the ones with the orange back-
ground refer to project requirements or developer-specific conditions such as be-
ing new to Front-End Web Development, having an Object-Oriented programming
background, etc. The elements with the gray background color represent more tech-
nical aspects such as performance requirements or the complexity of the applica-
tion’s component hierarchy.
This represents an initial idea of what the final approach may look like, after it
goes through further development and validation.
40 Chapter 3. Framework Analysis and Approach Development
This initial approach will be validated in Chapters 4 and 5, where a case study
development and the author’s work at Jumpseller will offer a practical test to what
was learned up to this point in this document.
3.8 Summary
In this chapter, an overview of the most popular Front-End frameworks was made,
by firstly collecting usage data considering the number of stars and forks on GitHub
to select the technologies to analyze.
Once selected, a look was taken at each of the frameworks by evaluating its
strengths and weaknesses, and taking conclusions about what makes them the most
popular. On each of these sections the main features of each framework were pre-
sented, small examples were provided and a look was taken at how certain common
operations are performed.
This comparative analysis allowed some initial conclusions to be taken about
how these technologies work and what situations they are most fit to handle. A
Venn Diagram was created to show what was learned about each of the selected
frameworks and how these learnings are shared between the three.
Finally, an initial approach was developed and presented in the form of a Di-
agram in the final section of the present chapter. This diagram presents several
types of requirements, needs or preferences along with an indication of which of
the analyzed JavaScript frameworks better handles the issue. With this, a base is set
for developing an approach which developers can utilize to select which JavaScript
framework to use on a given project, based on its needs and requirements of both
the project and the developer.
41
Chapter 4
Case Study
There is only so much that can be learned and studied about a development frame-
work by reading through its documentation and features list.
As such, this chapter intends to put the selected frameworks to test, by defining
a case study upon which these technologies will be put to use, allowing for a better
understanding of the strengths and weaknesses each one may carry.
To achieve this, the plan is to find a problematic section within the Jumpseller
platform, analyze what could be done to improve it and, with the help and feedback
from the team, envision a new, improved version by creating mock-up images of
what it should look like. After that, the new application will be developed using the
three different JavaScript frameworks previously chosen - React, Vue and Angular -
and comparisons between them and conclusions will be drawn and taken from the
experience.
4.1 Background
To define a case study upon which to work on, a few points were taken into consid-
eration.
Given the context of this work and the opportunity for its validation that comes
with it, it made sense to work on an existing section of the Jumpseller application,
so that one of the new implementations could later be validated by the team and
integrated with the enterprise back-end.
Beyond that, and being that this represents an opportunity to not only solidify
the knowledge and experience about the selected frameworks but also about UI/UX
Design, Design Patterns and Anti-patterns, it makes sense to find a specific applica-
tion, section or page that presents some clear issues and upon which some work can
be done to improve it - A section that could be agreed between the author and the
Jumpseller team had a less-than-ideal user interface, one that is too slow, confusing
or poorly implemented.
In these conditions, work is being done in a real environment in order to achieve
a real solution that will be put to use, solidifying the importance of this study.
42 Chapter 4. Case Study
From a brief analysis of this page it can be understood that this interface is not
ideal in several aspects. Let’s start by listing the features of the page and the actions
which can be performed on it, shown on Figure 4.2
4. Delete a language
5. Cycle through the different sections in which the translated strings are divided.
7. Translate all strings automatically (Using the Google Translate service API).
3. The placement of the Delete and Set as Main actions is odd and unintuitive.
Beyond that, it requires scrolling on certain screen sizes, making it difficult to
find. Being that these are important actions, the user should be able to quickly
identify them.
4.2.1 Mobile
The mobile version of this page shares most of these issues and has a few of its own,
as seen on Figures 4.3 and 4.4.
1. The tab-based navigation works even worse in mobile, as the space is limited
and clashes with the “Add language” button.
2. Finding the section where strings can be translated - which is, ultimately, the
most important feature on this page - requires scrolling and is not immediately
apparent when a section is chosen.
3. The design of the translation area is extremely cluttered - elements clash and
are put out of their position and there are uneven margins and paddings. The
input field is also very small, which represents a problem on longer strings.
4.2. The Languages Section 45
4.2.2 Approach
Considering the issues found, research was done on how to resolve these problems
by looking at examples and studying common design patterns (Van Welie, Van Der
Veer, and Eliëns, 2001).
A few things were decided:
• Separating the language listing from the strings translation area makes a big
difference, as it allow a better distribution of features across interfaces and
results in a cleaner look and a better user experience.
• The language list will be a table-like structure similar to the list of strings in
the translation area, thus getting rid of the tab-based navigation and resulting
in a more coherent interface.
• A status indicator will be added to the language listing, to indicate whether or
not each language is currently in use on the store.
• The mobile version of the section will be completely re-done, using respon-
sive design technologies and implementing design patterns such as Cards and
Vertical Dropdown Menus.
46 Chapter 4. Case Study
With these ideas in mind, design work was done in order to better visualize these
suggestions.
4.3 Mock-ups
The first step towards implementing a new, improved version of this application
is to plan it by setting and end goal consisting of the features and experience that
the final product will offer. With that in mind, an interface design tool - Figma1 -
was used to create mock-up images of what the final implementation will look like,
considering the points and suggestions made on the previous section. These are
shown on Figures 4.5 and 4.6.
4.3.1 Desktop
Looking again at the list of features, we can see that it has changed a bit and,
more importantly, it’s more distributed across the interfaces, allowing them to be
more visible and easy to find and use on a cleaner design.
4.3.2 Mobile
The proposed design for the mobile version of the app, shown on Figures 4.7 and
4.8, brings a lot of changes. Besides the better distribution of tasks among the two
pages, the translation area looks much nicer and distributes the translatable strings
using cards. These changes make it much more usable than the previous version.
48 Chapter 4. Case Study
4.3.3 Components
Additionally, and since this interface was designed keeping in mind its implemen-
tation in JavaScript and in component-based frameworks, Adobe Photoshop2 was
used to create the diagrams shown on Figures 4.9 and 4.10, representative of each
component that will make up the final application. This will help the development
process as it sets a plan of the structure that the application code will take.
4.4 Feedback
After developing the first mock-ups, a small meeting was arranged with the head
designer and the author’s supervisor at Jumpseller, with the objective of obtaining
feedback from someone with experience with real world situations and the Jumpseller
application, as well as UI design.
On this meeting, a few changes were agreed upon.
4.4.1 General
• The addition of an indicator of the language’s status (Active / Disabled) is
unnecessary, as there are no plans or necessity of implementing the feature on
the application back-end.
• With the removal of the status feature, it was agreed that the dropdown menu
in the language list was unnecessary, as the only feature it would unveil
would be the language deletion. This should be replaced with a Delete icon
or button.
• Adding a new language to the store is something that doesn’t happen too of-
ten, so the team felt that the “Add Language” button brought too much at-
tention to itself. It was suggested to find a new, more subtle placement for
it.
• When facing the list of translatable strings, which can be quite long, finding a
specific string that needs work may be complicated. As such, it makes sense to
implement a simple search feature.
• The “Translate All” feature is one that is seen as a necessary evil to the Jumpseller
team. While it has its use, it is costly in both processing and financial power (as
the translation service used for this feature requires that the company pays for
each translated string). As such, the team requested that the “Translate All”
button was presented in a more subtle, less obvious way.
• The team pointed out that, along with simple one-or-two-word strings, longer
and more complicated strings often find their way into the translation system.
As such, it was requested that new interface fully supported and adapted to
long strings.
4.4.2 Desktop
• As part of the principle of supporting long strings, it was requested that the
translation area be full-width, meaning that the sidebar should be removed
and a new place for the section list should be found.
4.4.3 Mobile
• While the horizontal scrolling to navigate the different translation sections in
mobile was positively received, it was pointed that there should still be a way
to view the full list of sections. It was suggested by the author and agreed
upon that clicking the section selection area should open a modal with the full
list of sections.
50 Chapter 4. Case Study
4.5.1 Desktop
Along with the suggested visual changes, a significant change to the mobile ver-
sion was the introduction of an accordion menu where users can choose, from the
language list, the section on which they want to translate strings. This can be seen
on Figure 4.13.
4.5. New Mock-ups 51
A simple search bar was added to the translation area, where users can input a
search term used to filter the displayed translatable strings.
52 Chapter 4. Case Study
4.5.2 Mobile
Most of the changes done to the Desktop version transfered to their Mobile counter-
part, including the removal of the dropdown menu, the inclusion of the Delete icon
and the addition of a search feature, as shown in Figures 4.14 and 4.15.
4.6 Development
After all changes agreed upon were done to the mock-up images, the development
phase could be started.
4.6. Development 53
4.6.1 Data
Being strictly a front-end study, it was decided it was not necessary to develop a
back-end application to serve the data. Instead, mock data was loaded into each app
through a JSON3 file containing the information to be presented. The data object is
shown in Figure 4.16.
• Node 10.0
• npm 5.6.0
• Yarn 1.9.2
The applications were developed in a Linux Mint6 18.2 system and the IDE of
choice was Visual Studio Code7 .
3 https://www.json.org/ - JSON : JavaScript Object Notation (Accessed September 11, 2018)
4 https://www.npmjs.com/ - npm (Accessed September 11, 2018)
5 https://yarnpkg.com/en/ - Yarn (Accessed September 11, 2018)
6 https://www.linuxmint.com/ - Linux Mint (Accessed September 11, 2018)
7 https://code.visualstudio.com/ - Visual Studio Code - Code Editing. Redefined. (Accessed
4.6.3 CSS
Bootstrap
Given that the main goal at this stage was to recreate the same application on dif-
ferent JavaScript frameworks, it was decided that Bootstrap would be used to create
the layout of the interfaces.
SCSS
Since the intention was to maintain visual parity across different components and,
further, different applications, it made sense to make use of Sass and, specifically,
variables and nesting.
Variables were used to set the colors to be used for the whole project. The SCSS
variables that were used to define colors such as green or light-gray are in the context
of the project (i.e. what is the corresponding hex) are listed on Listing 29.
$green: #6FCF97;
$dark-green: #219653;
$red: #d44946;
$yellow: #F2C94C;
$gray: #e6e6e6;
$light-gray: #f4f4f4;
$gray-text: #4f4f4f;
Nesting of CSS properties is one of the most useful features of Sass, and was
used to improve the readability and code weight of the style, specially considering
the naming convention adopted. The excerpt shown on Listing 30 demonstrates
both, as well as the use of the previously defined variables.
4.6. Development 55
.languages {
&__aux {
&--links {
color: $green;
}
&--chevron {
margin-right: 1em;
}
&--badge {
width: 5em;
font-size: 0.7em;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
&--badge-active {
background-color: $green;
}
&--badge-disabled {
background-color: $yellow;
}
}
}
• List the sections and their completion status for each language
Upon choosing a language and section of strings to translate, the following fea-
tures become available:
• Search for a specific string to translate
• Toggle a filter to show all translatable strings or only the currently untranslated
ones
• Translate all the untranslated strings
• Manually translate a string
• Automatically translate a string
All these functionalities are present and working on mobile devices and smaller
screens, as the application is responsive and device-compatible.
4.7 Comparison
During the development of the interface on each of the JavaScript frameworks, some
differences (or similarities) among them came up and, as such, comparisons were
made between the three of them.
On this section, a list of points will be presented upon which a brief comparison of
how each of the framework handles specific stages or situations of development will
be made.
React
The developed React app was bootstrapped using create-react-app9 .
Create-react-app is a Facebook-created tool that allows for users to quickly create
React apps with no build configuration.
The utility is easily installed using a package manager and doesn’t require the
installation or configuration of any additional tools such as Webpack or Babel, as
they come pre-configured and hidden so one can focus on the code. It also sets up
scripts for running the app locally or building it for production.
Vue
The Vue project was started using the vue-cli10 . This is an official CLI tool provided
by Vue that allows for the quick generation of projects using a variety of provided
build setups.
This is achieved by running the vue create script, which prompts a series of con-
figurations and generates a new, ready-to-work-on project, as shown on Figure 4.19.
8 https://cli.angular.io/ - Angular CLI (Accessed September 11, 2018)
9 https://github.com/facebook/create-react-app - facebook/create-react-app (Accessed September
11, 2018)
10 https://cli.vuejs.org/guide/ - Vue CLI (Accessed September 11, 2018)
58 Chapter 4. Case Study
Angular
Angular officially recommends the use of the Angular CLI.
Creating a new project with the Angular CLI is similar to how it is in React or
Vue and is done by running the ng new script, which creates a working application
out of the box, following the officially-recommended best practices.
The Angular CLI however steps up its game from the other CLI tools with the
ng generate command. This command, along with two supplied parameters (type
and name) allows the automatic generation and configuration of new components,
routes, services or pipes along with simple test shells for all of them.
Verdict
4.7.2 Styling
While the ability to easily include CSS files to style components is common to the
three frameworks, Vue and Angular share the fact that styles can be component-
scoped, while React generally imports styles globally.
React
Adding a stylesheet to React is quite conventional and consists of using an import
statement specifying the path of the CSS file to import.
4.7. Comparison 59
Vue
While import statements can be used, Vue components are different in that they have
a <style> element. Within this element, regular CSS properties can be added to the
project.
Additionally, this element can have the scoped property, which makes it so that
properties specified in the element are applied only to the template of the component
it’s inserted in.
Angular
Angular components specify on their constructor which CSS file or files will be
used for styling with the styleUrls parameter. This allows for component-scoped
stylesheets at the expense of creating extra files.
Verdict
4.7.3 Routing
While they each have their specific syntaxes and quirks, routing mostly works in a
similar way in Angular and Vue. Routes are defined beforehand and router links are
used to navigate through the different sections. In React, different options exist, and
the one used in the case study features dynamic routing - Where routes are defined
during the rendering.
React
Although several options exist for implementing routing in React11 , the most com-
monly used one is react-router, a declarative router built with the philosophy of
having dynamic routing. This refers to routing that takes place as the app is render-
ing, not in a configuration or convention outside of a running app12 .
This means that the implementation of routes in React is quite simple for the
developer. As seen on Figure 4.20, and assuming the router has been imported
to the application, the application must be inserted within the <Router></Router>
tags, and routes are defined with the <Route/> component, on which a path is
passed along with which component or object should be rendered when the path
is matched.
11 https://reactjs.org/community/routing.html - Routing - React (Accessed September 4, 2018)
12 https://reacttraining.com/react-router/web/guides/philosophy - React Router (Accessed
September 4, 2018)
60 Chapter 4. Case Study
With the routes set, links can be placed to navigate through the application with
the <Link/> component, which takes a parameter to that indicates the path it should
redirect to.
Vue
Vue Router is the official router for Vue.js13 . Implementing basic routing in a Vue
project consists of three steps. Importing and adding Vue Router to the project, defin-
ing the routes and using them to initialize routing, and defining a <router-view />,
i.e., where the matched route content will be rendered. The first two are done in the
main.js file, whereas the router-view is placed on the template of the desired compo-
nent. This is shown on Listing 31.
const routes = [
{ path: '/', component: Table },
{ path: '/language/:code', component: Language}
]
const router = new VueRouter({
routes
})
Vue.use(VueRouter)
Links can then be created using the <router-link to="/"/> syntax, where the
to parameter refers to the desired target path.
Angular
The Angular Router enables navigation from one view to the next as users perform
application tasks14 . Routing in Angular is done very similarly to Vue, as it has the
same three steps. On the app.module.ts file, the router is imported and the routes
object is defined, and a <router-outlet /> is created on a component’s template.
Verdict
React
In React, when rendering a child component within a parent, data can be passed to
it as props. For example, if the intention is to pass a language object to a component
that renders list elements, one would declare the child component as <TableItem
language=english/>. From there, the child component can access that data using
this.props.language.
Methods can be passed as props, which enables the other way of communicating.
If a child component wants to alert the parent of an event, it can call a method which
was passed to it as props that will be executed in the parent component.
Vue
Vue, similarly, uses props for component communication, the difference being that
when creating a new component, the props that component will accept should be
declared. This is done by adding values to the props object of the Vue instance (As
seen on section 3.4.2).
Child-to-parent communication is, however, slightly different. Instead of calling
a method from the props, the child component can use the $emit function to emit an
event which the parent will be listening for.
For example, if the intention is to alert the parent that a button has been clicked,
the parent can add an event listener to the child component declaration and the
button can, when clicked, emit a corresponding event to pass the information above.
This is shown on figure 4.21.
62 Chapter 4. Case Study
Angular
Passing data to a child component is similar to Vue, as data received by the child
should be declared. This is done by using the @Input() decorator on the child com-
ponent, defining a set of parameters it expects to receive, along with their types. To
declare that the component expects to receive a string called name, one would use
@Input() name: string;.
On the parent, the data is passed down similarly to the other frameworks, by
adding it to the declaration of the child component. For example, <angular-child
name="World"></angular-child> would pass a name to the angular-child compo-
nent.
Child components in Angular can communicate to their parents in a similar way
to Vue, by emitting an event. To do so, the event must be declared by instantiating
an EventEmitter object. Afterwards, the component can call its emit() method to
pass data to the parent, who should have a corresponding event listener.
Verdict
React
Conditional rendering in React works the same way conditions work in JavaScript.
JavaScript operators like if or the conditional operator - as exemplified on Figure
4.22 - can be used to create elements representing the current state letting React up-
date the UI to match them15 .
Vue
On Vue, conditionally rendering a certain element or component consists of adding
the v-if="condition" directive to it. Doing this makes it so that the element is ren-
dered only if the condition is verified as true. This can be a variable or an expression.
Angular
Similarly, Angular offers the *ngIf="condition" directive to determine whether or
not an element should be rendered.
Verdict
React
In React, iterating an object and rendering elements for each for its children makes
use of vanilla JavaScript functions. Specifically, the map() function is used, allowing
to, for each item in an object, run a function that takes it as an argument and returns
an element.
For example, to loop through an object and render an empty div for each of its
items, one would use object.map(function(item)return (<div></div>).
Vue
In Vue, achieving this is simpler, and consists of creating an element to return, and
adding to it the directive v-for="item in object", as shown on Figure 4.23. Then,
each item’s properties can be accessed using item.property.
This results in rendering one of the specified element for each of the items in the
object which the application is iterating.
Angular
In Angular, iterative rendering is identical to Vue, with the difference being purely
syntactical. To achieve the same result, the directive used is *ngFor="item in object".
64 Chapter 4. Case Study
Verdict
4.7.7 Lifecycle
Another feature common to the frameworks is the lifecycle of a component. Each
component has several “lifecycle methods” that can be overridden to run code at
particular times in the process, such as when the component is created, immediately
before, or when it updates.
React
React features lifecycle methods for mounting, updating and unmounting 16 such as
constructor(), componentDidMount(), componentDidUpdate() or
componentWillUnmount().
Vue
Vue comes with lifecycle methods for creation / mounting, updating and unmount-
ing 17 called created(), mounted(), updated() and destroyed().
Angular
Angular features a similar set of lifecycle hooks as React and Angular for each of the
three phases, namely ngOnInit(), ngOnChanges() and ngOnDestroy().
Verdict
4, 2018)
17 https://vuejs.org/v2/guide/instance.html - The Vue Instance - Vue.js (Accessed September 4,
2018)
4.7. Comparison 65
React
Handling events with React elements is very similar to handling events on DOM
elements18 with some small syntactic differences. Camel case is used rather than
lowercase and the value passed should be a function, rather than a string. It can look
something like Figure 4.24, where clicking the a element calls the handleClick()
function.
Vue
On Vue, the v-on directive can be used to listen to DOM events and run some
JavaScript when they’re triggered19 .
For example, adding v-on:click="handleClick" will make it so that clicking the
target element will call the previously defined function handleClick(). The value
passed to the directive is an expression, meaning that creating a separate handler
method is not always necessary. In Vue particularly, just stating the name of the
desired method is enough, with no need of the typical parenthesis that represent a
function.
Angular
Similarly, in Angular, a directive can be added to an element to attach an event
handler to it, with the difference being purely syntactical. For example, <button
(click)="onClickMe()">Click me!</button> will make it so that clicking the tar-
get button will call the onClickMe() method. Similarly to in Vue, the passed value is
an expression.
Verdict
2018)
19 https://vuejs.org/v2/guide/events.html - Event Handling - Vue.js (Accessed September 4, 2018)
66 Chapter 4. Case Study
React
The React project totaled 157,5MB.
Vue
The Vue project was the lightest of the three, at 118,7MB.
Angular
Angular resulted in the largest project, with a total of 299MB.
Verdict
4.8 Summary
In this chapter, a case study was defined and developed, starting with the choice of
a section of the Jumpseller application that showed some issues and would make for
an interesting case study on all stages of Front-End web development.
Having selected the Languages section, an analysis was made of the current state
of the page, listing its issues and discussing what could be done to improve on them.
Once ideas were gathered, mock-up images were created in order to visualize what
a new implementation of the page could look like. These images were brought to
members of the design and development teams at Jumpseller, where they were dis-
cussed and feedback was gathered.
Once the agreed upon changes were made and the final product was envisioned,
the interfaces were developed on the three selected JavaScript frameworks: React,
Vue and Angular.
During and after the development stage, some conclusions were taken by com-
paring how certain aspects of development were handled on each of the frame-
works. Aspects such as initializing a project, adding styles or configuring routes
were compared and a verdict on which one featured considerable advantages on
each area was presented.
67
Chapter 5
Validation - Jumpseller
This chapter aims to portray the author’s experience as part of the Jumpseller de-
velopment team, going over the work methodology and the projects worked on and
technologies used during the work period. This also aims to further validate the
approach developed in earlier chapters through practical experience in a real Web
development setting.
5.1 Methods
5.1.1 Design and Development
The development of new user interfaces would begin on the design team, who
would work with UI Design Tools to develop a mock-up of what new interface
would look like.
Once complete, it would be presented to the development, encouraging discus-
sion and the gathering of feedback.
This would be repeated until the final product was agreed upon, at which point
the project would be passed to the developer, who would build the interface and
integrate it with the Jumpseller application.
The Problem
Before, the Theme Options section had some design issues, as the navigation be-
tween its parts was often unintuitive, had too many buttons or was visually unap-
pealing.
More importantly, some of its features were very difficult - or near impossible
- to work with on devices with smaller screens, as the page content did not scale
properly resulting in a poor user experience.
As such, it was decided that the entire section would be rebuilt from scratch.
Project Requirements
• Device Compatibility : All options and functionality should work on mobile
devices, as the interface should adapt to different-sized screens.
• Ability to link to specific option set : Users should be able to get a link to a
specific part of the options list, to make collaborative work easier.
• New design : As the previous design was very old, the new section will have a
new and improved design. This is done in collaboration with a designer from
the Jumpseller team.
Technologies Used
• React
• Bootstrap 4
1 https://casesandberg.github.io/react-color - React-Color (Accessed Semptember 11, 2018)
2 https://github.com/danawoodman/react-fontawesome - React-FontAwesome on Github (Ac-
cessed Semptember 11, 2018)
3 https://github.com/ReactTraining/react-router - React-Router on Github (Accessed Semptember
11, 2018)
4 https://react-dropzone.js.org/ - React-Dropzone (Accessed Semptember 11, 2018)
5.2. Work Projects 69
• Webpack
Implementation
The Theme Options section is independent from the rest of the store administration
panel. As such, the new Theme Options was developed as a standalone React App.
To setup the basic app, the create-react-app5 utility was used. This tool automat-
ically creates the files needed for a basic React app to start running and be further
developed.
Since responsiveness and device compatibility is the main requirement and, ac-
cording to the methodology presented, it was in mind since the inception of this
project. As such, the next step was to include the Bootstrap framework in the app.
With the foundation set, work started on the basic layout of the application, even-
tually bringing in functionality with sample data.
After most of the intended functionality was achieved, the developed app was
integrated into the Jumpseller project, with the help of the development team. Once
integration was done, the application would start working with the Jumpseller API
to fetch and send real data. This brought some issues and posed an interesting chal-
lenge.
In parallel with the last stages of development, the design team at Jumpseller
worked on CSS styles that would help perfect the new design of the application.
Once everything looked complete, the application was ready to be deployed and
made public to the merchants.
After the application was deployed and made public, its utilization by hundreds
of clients brought to the development team’s eyes some issues in its functioning. As
such, after the release some time was dedicated to fixing bugs and improving parts
of the application.
Final Product
Screenshots of the final product of the Theme Options section can be found on Ap-
pendix A - Theme Options Screenshots.
The Problem
When an order in an online store is placed, the store will sometimes follow up that
order with e-mail messages. For example, alerting the customer when their order
has shipped or if there is a problem with the order or the payment.
5 https://github.com/facebookincubator/create-react-app - Create React App (Accessed Semptem-
11, 2018)
70 Chapter 5. Validation - Jumpseller
While this has been the standard for a while, it is a fact that the average customer
often pays more attention to their Facebook account than to their e-mail inbox. This
means that e-mail may not be the best way for stores to create a means of communi-
cation with their customers.
As such, the Facebook Messenger App was developed as a way to allow mer-
chants to improve communication with their customers.
Project Requirements
• Customizable Opt-In message : Merchants should be able to customize the
message that the client receives when they opt-in to the feature.
• Usability : The App should be autonomous and functional in sending the mes-
sages. These messages should be simple, readable and with a good presenta-
tion.
Technologies Used
• Facebook for Developers
• Jumpseller API
• React
• Bootstrap 4
• Webpack
• Ruby
• PostgreSQL
5.2. Work Projects 71
Implementation
The user application was developed as a standalone React App. As such, the project
was created using the create-react-app utility.
Besides this React App, a Facebook App7 was created. This is a necessary step to
get access to the Facebook API and its functionalities.
The next step was integrating the Facebook SDK into the project. With this came
a good amount of investigation about Facebook for Developers and how the API
works.
With the help of the development team, a Ruby controller was developed to pro-
vide a back-end for the application. This was done using the Sinatra8 framework,
which allows for very simple creation of web applications and endpoints.
This controller also included interaction with the database. The database man-
agement system used in Jumpseller is PostgreSQL. For testing purposes, ngrok9 was
used for creating secure tunnels to localhost, ths allowing the development team to
test the Facebook App while it runs on a local development machine.
Deploying the application and making it public to all stores and merchants meant
that a large number of users would interact with it. As such, a support page10 was
written, with instructions on how to use configure it.
Following the deployment and the influx of users, some bugs came to surface
which mean the following weeks involved support bugfixing tasks.
Being more than a front-end issue, this project posed a good, interesting chal-
lenge and allowed the author to better understand the behavior of the Jumpseller
back-end. This will undoubtedly be useful on future projects where interaction be-
tween front-end and back-end may play a key role.
7 https://developers.facebook.com/ - Facebook for Developers (Accessed September 11, 2018)
8 http://sinatrarb.com/ - Sinatra (Accessed September 11, 2018)
9 https://ngrok.com/ - ngrok (Accessed September 11, 2018)
10 https://jumpseller.com/support/facebook-messengerapp/ - Facebook Messenger App (Accessed
Final Product
The Problem
As each of the sections of the admin panel get re-made with better design and func-
tionality, the sidebar menu that allows navigation between those sections would
have to be re-done to keep up with the evolving designs and content.
As such, the menu was remade with a new, improved design that focuses on
readability and usability on devices of all sizes.
Project Requirements
• Compatibility with both Bootstrap 3 and Bootstrap 4: As the new layout will
be in use in a time period during which all the administration panel sections
are being remade individually - thus migrating from Bootstrap 3 to Bootstrap
4 -, this sidebar should look and function correctly regardless of the version of
Bootstrap the section is using.
Technologies Used
• HTML5, CSS3
• Bootstrap 3
• Bootstrap 4
74 Chapter 5. Validation - Jumpseller
Implementation
Being a menu that will be displayed on the same page as many different standalone
applications, it was decided that this would be a simple HTML/CSS menu with
very minimal snippets of JavaScript, using only Bootstrap as a framework for design
purposes.
Two versions of the same project were created, each one importing a version (3
and 4) of Bootstrap.
Starting with the basic layout and slowly adding the details, the projects were
developed in parallel, with the intent of having them look exactly the same. The
new design was based on mock-ups created by the Jumpseller design team.
Once the design and basic functionality was complete, the menu was integrated
in the Jumpseller project by members of the development team.
Final Product
The Problem
The product category management section of the store administration panel was
previously in the same page with the product listing and management section. This
made for an overly cluttered, busy and complicated interface.
Besides that, the category management part itself was very poorly designed, in
such way that too many clicks were required to do simple actions like editing a
category or moving it around in the list.
This section was also very bad to work with on mobile, as it content did not scale
properly requiring the user to navigate to the edges of the screen to find the desired
actions.
It was decided that a new section would be built from scratch, with a simple,
elegant design and very fast and easy functionality.
76 Chapter 5. Validation - Jumpseller
Project Requirements
• Drag-and-Drop: Users should be able to re-order the list of their store’s cate-
gories by dragging and dropping items in a list. This order should be saved
and remembered on the next visit.
• Searching: Users should be able to search for a specific category or set of cate-
gories by entering a search term.
• New Design: The new section will have a new and modern design, done in
collaboration with a designer from the Jumpseller team.
Technologies Used
• React
• Nestable 2 12
• Bootstrap 4
• Webpack
• Ruby
Implementation
As with previous React-based projects, the section was bootstrapped using create-
react-app. After that, the Bootstrap 4 framework was included in the project to
enable responsive behaviour. Work was firstly done on the categories list, before
moving on to the category edition page.
The first focus was on creating the page layout, keeping in mind the its separation
in components such as the search area, the list and the list item. At this point mock
data was being used and, as functionality started being brought into the application,
the hierarchic drag-and-drop feature presented itself as the biggest challenge. Re-
search was done and after experimenting with different plugins, it was chosen that
the application would use Nestable 2, as this is a modern version of the plugin used
on the old Jumpseller build and offers a way to implement all the desired features.
The plugin works by annotating DOM elements with class names such as dd-list
and dd-item, and initializing the plugin with a callback function, to be called when-
ever a change to the structure is made. On this callback method a request is made to
the back-end via HTTP to update the affected categories’ order and hierarchies.
11 https://react-dropzone.js.org/ - React-Dropzone (Accessed September 11, 2018)
12 https://github.com/RamonSmit/Nestable2 - Nestable 2 (Accessed September 11, 2018)
5.2. Work Projects 77
When functionality appeared done, the page was put to test with real data from
some of the busiest and more complex stores. At this point, and because some stores
have a large number of products and categories, performance presented itself as
an issue. Searching, for example, took an unacceptably long time. This happened
because a search request was being sent each time the user wrote a character in
the search input field. This resulted in too many requests being sent, clogging up
the back-end. As a measure to prevent this, it was made so that the search request
would only be made when the user stopped typing for 2.5 seconds, ensuring only
the necessary requests were made.
The mobile version of this section involved a small amount of changes, as its
content is fairly small and doesn’t cause many issues on smaller screens. Media
queries were added to change the appearance of the delete category button and the
page header.
The category edition page was implemented after the launch of the category
list, and was created as a separated application. Its layout and content were of sim-
ple implementation, as they mostly consisted of input fields. The biggest challenge
faced was the routing, as the page URL should reflect the category it corresponds to
or refer to the creation of a new category.
As such, and using react-router as previously, a method called urlControl()
was included and is called before rendering the page by the componentWillMount()
lifecycle hook. On this method, the URL is checked and, depending on the category
id found there, the page will present its information or open up the option to create
a new category.
Final Product
Screenshots of the final product of the Product Categories section can be found on
Appendix B - Categories Screenshots.
The Problem
The product listing section of the admin panel of the Jumpseller app used an old
layout which was cluttered, unresponsive and not visually appealing.
This is an extremely important section of a store’s administration, as organizing
the products they are selling is a big priority of a merchant. As such, it was very
important that all functionality was simple to use and presented in a clean, simple
way, and that all of it worked on a full range of devices.
Project Requirements
• Filtering: Products should be able to filtered by name (with a simple search
input), categories they’re inserted in, and status (available, out of stock, etc.).
• Sorting: The order in which products are displayed should be able to be cus-
tomized by integrating a drag-and-drop feature to the list.
78 Chapter 5. Validation - Jumpseller
• New Design: The new product list should follow a design mock-up created
by the design team, with a clean and modern look that fits with the overall
aesthetic of the Jumpseller product.
Technologies Used
• React
• Bootstrap 4
• Webpack
• Ruby
Implementation
This was a project that was picked up halfway through its development and had
been started by a former colleague at Jumpseller. As such, the process and the learn-
ing experience was slightly different for the author. This meant some time was spent
learning how the currently implemented features worked and how the code was
structured. Along with this process, the author was able to identify anti-patterns
- such as the "lava flow"15 , code that was at some point used but is not currently,
making it useless - that could easily be fixed, setting a better starting point to work
on.
At the point of picking up this project most of the basic functionality was done,
and the remaining work started with design changes and optimizations to the code.
As, again, the application will be dealing with a large amount of data - as stores
can have up to thousands of products to list, performance was a big thing to be kept
in mind. One of the decisions made in this regard was that the application would
retrieve 30 products at a time from the database. This means that when an user
opens up the product list, only 30 products are displayed immediately. If they wish
13 https://github.com/JedWatson/react-select- GitHub - react-select (Accessed September 5, 2018)
14 https://github.com/reactjs/react-modal
- GitHub - React-Modal (Accessed September 5, 2018)
15 https://sourcemaking.com/antipatterns/lava-flow - Lava Flow (Accessed September 6, 2018)
5.2. Work Projects 79
to see more, scrolling down to the bottom of the page will load 30 more, until all the
products have been loaded. This avoids making a request to the database that will
return all of the products as this is both heavy on the database and will lead to a long
loading time on the front-end application. It should be noted that bulk actions can
still be performed on all products, even if they have not all been loaded, by having
a choice to select products individually, select all loaded products, or select all the
products in the database. To the same effect, the search function is also set to only
make a request if the user has finished typing in the input field, by using a request
timer that waits 2.5 seconds after the last character is inserted.
Final Product
Screenshots of the final product of the Product List can be found on Appendix C -
Product List Screenshots.
The Problem
The main problem with the product edition page in the Jumpseller application is its
usability in mobile devices. Some of the functionalities are very difficult to impossi-
ble to use on smaller screens as the interface is not responsive. Being one of the most
feature-rich and important sections of the admin panel, it’s important that this it is
re-done with a responsive, clean and usable interface.
Project Requirements
• Category Management: When editing a product, it should be easy to specify
which categories it’s inserted in, or create a new one if necessary.
• Image Gallery: The product images should be able to be uploaded and pre-
sented in a grid layout, where they can be sorted, edited or deleted.
• Variants Table: The variants table, generated automatically with the product
options set by the merchant, can become quite large as the number of options
grows. It’s important that performance is not an issue in this section, and that
the table is readable and usable in all devices and screen sizes.
• Tags input: For both the product options and custom fields, multi-value fields
should have only one input field, where users can add comma-separated val-
ues.
• New Design: The new product page should follow a design mock-up created
by the design team, with a clean and modern look that fits with the overall
aesthetic of the Jumpseller product.
5.2. Work Projects 81
Technologies Used
• React
• Redactor Editor17
• Bootstrap 4
• Webpack
• Ruby
Implementation
It was decided that, rather than creating a new application from scratch using create-
react-app as previously done, the product list application would be refactored to
include a new page where products could be created or edited. As such, that was the
first step on implementing the new product edition page, followed by the creation
of the basic page layout according to the mock-up images developed by the design
team.
Being a very functionality-rich page with several different components, all com-
plex on its own, the implementation of each of its features was done in a more
planned and pondered way, taking focus on each of its components at a time.
• Image Gallery: Users can upload multiple images to represent each prod-
uct. For the uploading, a previously-created component was used, where the
React-Dropzone plugin was implemented. This allows users to upload one or
multiple images at a time by dragging them onto a field or manually selecting
the files. Uploaded images should were set to be displayed as squares in a grid
layout - using CSS properties - with buttons that allow users to either delete or
edit the image. Clicking the edit button launches an image editor which is part
of the Redactor Editor. Finally, it was decided that if more than 6 images are
uploaded, only the first 6 are shown at first, with the visibility of the remaining
images being toggled by a "Show More/Less" button.
• Custom Fields: Merchants can add custom fields to their products to display
additional information about them, such as comparisons to other products,
extra labels or instructions. The most important aspect of the re-design was to
simplify the interface. This was achieved by including the list of custom fields
16 https://github.com/olahol/react-tagsinput - GitHub - React-Tagsinput (Accessed September 5,
2018)
17 https://imperavi.com/redactor/ - Redactor WYSIWYG html editor (Accessed September 5, 2018)
82 Chapter 5. Validation - Jumpseller
and corresponding values on the main page and using a modal to display the
field management options.
• Product Attachments: Users can attach digital files to their products. This
usually refers to digital products such as music or films, but it was decided
some changes would be made to accommodate a different scenario: Attaching
public, downloadable files to physical products, such as instruction manuals
for an electronic product. In terms of front-end this was quite simple, as it
consisted in two image uploading sections and, for each, a list of the uploaded
files, where they can be deleted or their names changed.
• Product Options and Variants: The product options section allows users to
add custom options to their products, such as size or color, and automatically
generates variants for every combination of those options, each of which hav-
ing properties which can be edited. This is a very complex component, as with
every change to the options list calculations need to be done to manage the
variants that come from them and the table should automatically update ac-
cordingly. In order to simplify this process for the user, a big change was the
implementation of a tags input field system that allows users to quickly add
values to their options by simply adding the values in an input field, separated
by a comma. Device compatibility was also a very important aspect of this sec-
tion, as the old design didn’t allow users to edit variant properties on mobile
devices. As such, media queries were used to change how the variants table
looks on smaller screens to, according to the design created by the design team,
allow users to have access to all functionality of this page on smaller screens.
After the conclusion of each component, the application was reviewed and tested
by the team, which led to the discovery of small bugs and issues and some discussion
of improvements. As such, the full implementation of the product edition page has
been a lengthy process which is approaching its conclusion at the time of writing
this document.
Final Product
Screenshots of the final product of the Product Edition page can be found on Ap-
pendix D - Product Edition Screenshots.
5.3 Conclusions
In the following sections, conclusions will be taken about the work period and projects
taken part of on the Jumpseller platform, in regards to the technologies used and
how the experience with them contributed to the dissertation, as well as what was
learned and how the work done contributed to the Jumpseller application and its
development team.
5.3.1 Technology
The main technologies used for the interfaces built during the work period at Jumpseller
were React and Bootstrap 4. This section aims to reflect upon the choice of these
technologies and what made them a good option.
5.3. Conclusions 83
With the proposed approach in mind, React was chosen as the JavaScript frame-
work to work with, as its component-based nature, combined with its high per-
formance and how easily it handles routing and complex component hierarchies
made it look ideal given the company’s requirements of performance and code re-
usability. The fact that many different applications with varying features would
be built made the fact that React is a widely popular framework with a very large
amount of community-made resources extremely valuable.
Code Sharing
Creating shareable and re-usable code was, from the beginning, one of the aspects to
keep in mind during development, as it was one of the reasons to adopt a component-
based framework to work with.
During the work period, several components were created with the intent of be-
ing used in multiple parts of the store administration panel, such as the ImageSection
component, which implements a section where users can upload and manage im-
ages, the SEO component that refers to the Search Engine Optimization properties of
a product, page or category, the RedactorEditor component that allowed the easy
implementation of the Redactor Editor on any page or the ShareLinks component,
that easily adds links to share the current page on various social networks.
In conclusion, the choice of React as a JavaScript framework allowed and in-
centivized the principle of code sharing and re-usability to be respected and imple-
mented.
Plug-ins
Being a very popular framework, React has a lot of people contributing with their
own plug-ins. Throughout the work period, various plug-ins were used in response
to specific needs or issues that came up during development. This includes React-
Router, the plug-in used to creating routing within the developed applications, React-
Dropzone, used for image uploading or React-Modal, used for creating modal menus.
This large amount of available plug-ins meant, during development, that there
was a solution already made for almost any issue that could be run into. With a
younger, less popular framework, this might not have been the case. As such, React
was a positive choice in this regard.
Bootstrap Variables
Bootstrap felt like a good choice as a styling framework, not only for its core func-
tionalities as a way to build responsive page layouts and its array of auxiliary classes,
but also for how customizable it is.
Since work was set to be done on multiple sections of the Jumpseller application,
the ability to customize certain aspects of Bootstrap such as the colors used on cer-
tain headings, border styles or the usage of gradients was very helpful. This was
achieved by creating a SCSS file where these customizations were made, and then
importing that file in all the developed interfaces.
As such, Bootstrap’s ability to be customized combined with its usage of SASS
variables made it a good choice in terms of customizing and convenience.
84 Chapter 5. Validation - Jumpseller
5.4 Summary
In this chapter, an overview of each of the work projects taken part of by the author
at Jumpseller was made, focusing on what the problems were and what was done
to fix it. Finally, conclusions were taken in terms of what was learned and how the
practical experience with these technologies helped fulfill the goals of this disserta-
tion, as well as in what ways did this work contribute to the company and how the
chosen technologies fit their needs.
Additionally, the work done in the context of this chapter provided practical use
cases where the approach developed on Chapter 3 could be validated, by seeing
some of the technologies in action and how well they responded to the issues and
requirements of each project.
85
Chapter 6
Conclusions
work methodology, the projects worked on and the technologies used during the
work period.
6.1 Discussion
The detailed analysis and comparison made between the most popular front-end
web development frameworks, along with the case study that was defined and
implemented allowed for a better understanding of how the selected technologies
work, and how each of them responds to common issues and requirements in front-
end web development.
These findings allowed for an initial approach to be developed and to act as a
guideline on when to use which of the analyzed frameworks. The diagram that
was created points developers towards React, Angular or Vue.js, based on which
requirements their project has or what the developer’s background in programming
looks like.
This initial approach represents an open-ended part of this work, as it is currently
a foundation for future work to be done. The requirements shown in the diagram
can be expanded and refined, and their associations with each framework can be
made more accurate and justified.
This approach, while only an initial idea, has some limitations. The number of
frameworks included could and should be larger in order to yield results that are
accurate and contemplate a bigger scope of the available technologies. Additionally,
the approach should cover a wider set of requirements, to ensure it can be used on a
large number of projects with a large variety of given requirements.
The analysis made and the conclusions taken, along with the proposed initial
approach were validated by the two practical components of this dissertation: The
case study that was developed and the author’s experience as part of the Jumpseller
development team. While the latter method worked as a way of validation for this
work, it also represents a very specific domain, meaning that in a different area of
study the results obtained might have been different.
This work also provided a significant contribution to the company, as the combi-
nation of the analytical and the practical sides of this dissertation contributed to the
development of well-implemented, functional interfaces with re-usable code and
components as well as a knowledge base upon which future developers can learn
from and work on their assigned projects.
The company-scoped objectives set at the beginning of the work period of mak-
ing the application a better user experience by analyzing its issues, researching pos-
sible solutions and implementing new interfaces were completed, and validated by
the growth of the company and its user base.
6.2. Future Work 87
Appendix A
F IGURE A.2: The Desktop version allows you to preview how the
store looks when accessed from a mobile device.
90 Appendix A. Theme Options Screenshots
Appendix B
Categories Screenshots
Appendix C
Appendix D
F IGURE D.1: The basic properties in the new Product Edition page,
on Desktop.
Appendix D. Product Edition Screenshots 101
F IGURE D.2: The image gallery and product properties in the new
Product Edition page, on Desktop.
102 Appendix D. Product Edition Screenshots
F IGURE D.3: The shipping properties and the product options and
variables table in the new Product Edition page, on Desktop.
Appendix D. Product Edition Screenshots 103
F IGURE D.4: The Custom Fields, Product Files and SEO in the new
Product Edition page, on Desktop.
104 Appendix D. Product Edition Screenshots
Figures D.5 through D.8 show the mock-up images created by the design team at
Jumpseller, as the final product wasn’t finished at the end of the dissertation’s work
period.
Bibliography
Bryant, Jay and Mike Jones (2012). “Responsive Web Design”. In: Pro HTML5 Perfor-
mance. Berkeley, CA: Apress, pp. 37–49. ISBN: 978-1-4302-4525-4. DOI: 10.1007/
978-1-4302-4525-4_4. URL: https://doi.org/10.1007/978-1-4302-4525-4_4.
Coyier, Chris (2018). “A Complete Guide to Flexbox”. In: URL: https://css-tricks.
com/snippets/css/a-guide-to-flexbox/.
Crockford, Douglas (2008). JavaScript: The Good Parts. O’Reilly Media. URL: http :
//shop.oreilly.com/product/9780596517748.do.
Flanagan, D. (2006). JavaScript: The Definitive Guide. Definitive Guide Series. O’Reilly
Media, Incorporated. ISBN: 9780596101992. URL: https : / / books . google . pt /
books?id=k0CbAgAAQBAJ.
Flavián, Carlos, Miguel Guinalíu, and Raquel Gurrea (2006). “The role played by
perceived usability, satisfaction and consumer trust on website loyalty”. In: In-
formation & Management 43.1, pp. 1 –14. ISSN: 0378-7206. DOI: https://doi.org/
10.1016/j.im.2005.01.002. URL: http://www.sciencedirect.com/science/
article/pii/S0378720605000169.
Fowler, Martin and Matthew Foemmel (2006). “Continuous integration”. In: Thought-
Works) http://www. thoughtworks. com/Continuous Integration. pdf 122, p. 14.
Gackenheimer, Cory (2015). “What Is React?” In: Introduction to React. Berkeley, CA:
Apress, pp. 1–20. ISBN: 978-1-4842-1245-5. DOI: 10.1007/978-1-4842-1245-5_1.
URL : https://doi.org/10.1007/978-1-4842-1245-5_1.
Ihrig, Colin J and Adam Bretz (2014). Full stack Javascript development with MEAN.
SitePoint.
Linley, C. (2017). Front-End Developer Handbook 2017. Frontend Masters. URL: https:
/ / www . gitbook . com / book / frontendmasters / front - end - handbook - 2017 /
details.
Loeliger, J. and M. McCullough (2012). Version Control with Git: Powerful Tools and
Techniques for Collaborative Software Development. O’Reilly Media. ISBN: 9781449345051.
URL : https://books.google.pt/books?id=aM7-Oxo3qdQC.
Meyer, E.A. (2006). CSS: The Definitive Guide: The Definitive Guide. O’Reilly Media.
ISBN: 9781449397258. URL : https://books.google.pt/books?id=rdtCRLXAL78C.
Mozilla (2017a). “CSS-MDN”. In: URL: https://developer.mozilla.org/en- US/
docs/Web/CSS.
— (2017b). “HTML-MDN”. In: URL: https : / / developer . mozilla . org / en - US /
docs/Web/HTML.
— (2017c). “Media Queries -MDN”. In: URL: https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queries.
MySQL, AB (2001). MySQL.
Nice, Bradley (2017). “Front-End vs Back-End vs Full Stack Development”. In: URL:
https : / / medium . com / level - up - web / front - end - vs - back - end - vs - full -
stack-development-78267f545121.
R. Fielding J. Gettys, J. Mogul H. Frystyk L. Masinter P. Leach T. Berners-Lee (1999).
Hypertext Transfer Protocol – HTTP/1.1, RFC 2616. RFC Editor. URL: http://www.
rfc-editor.org/info/rfc2616.
BIBLIOGRAPHY 109
Sampaio, Ana Isabel (2013). “Responsive Web Design”. In: URL: http://mei.di.
uminho . pt / sites / default / files / dissertacoes / /eeum _ di _ dissertacao _
pg20190.pdf.
Sierra, Kathy and Bert Bates (2005). Head First Java: A Brain-Friendly Guide. " OŔeilly
Media, Inc."
Thomas, David, Andrew Hunt, Chad Fowler, et al. (2005). Programming Ruby: the
pragmatic programmersǵuide. Raleigh, NC: Pragmatic Bookshelf,
Tilkov, S. and S. Vinoski (2010). “Node.js: Using JavaScript to Build High-Performance
Network Programs”. In: IEEE Internet Computing 14.6, pp. 80–83. ISSN: 1089-7801.
DOI : 10.1109/MIC.2010.145.
Toxboe, Anders (2009). “User Interface Anti-Patterns”. In: URL: http://ui-patterns.
com/blog/User-Interface-AntiPatterns.
Van Welie, Martijn, Gerrit C Van Der Veer, and Anton Eliëns (2001). “Patterns as
tools for user interface design”. In: Tools for Working with Guidelines. Springer,
pp. 313–324.