Whim - Hardbound For Hardbound - v1 PDF

Whim: A Mobile Integrated Development Environment
For JavaScript Applications
A Research Project
Presented to the
Faculty of the College of Computer Studies and Systems
University of the East, Manila
In Partial Fulfillment
Of the Requirements for the Degree in
Bachelor of Science in Computer Science
By
Abinal, Gil Francis S.
Aborot, Rea A.
Hipolito, Jose Marcelius S.
September 14, 2014
ii
APPROVAL SHEET
iii
DEDICATION
This research is dedicated to our families. A special feeling of gratitude to our

loving parents whose words of encouragement and tireless efforts have supported us
during our education. They have always been our best cheerleaders and our greatest
inspiration.
We would also like to dedicate this research to our adviser, Professor Roselle
Basa, whose guidance and patience helped us greatly during the course of our research.
We will always appreciate all that shes done for us.
We would also like to dedicate all of our many friends, who supported us and
never left our side during the process.
We would also like to dedicate this research to the University of the East
College of Computer Studies and Systems Research and Development Unit who would
use the results of our research to further improve their skills and talents.
Finally we would like to dedicate this research to all web developers and
designers.
iv
ACKNOWLEDGEMENT
We wish to acknowledge and thank the advisers who were more than generous
with their expertise and precious time. A special thanks to Professor Roselle Basa, our
adviser, for her countless hours of reflecting, reading, encouraging and most of all
patience throughout the entire process. A special thanks also to Dr. Rex Bringula for his
guidance during the early phases of our research process.
We would also like to acknowledge and thank the Philippine Web Designers
Organization for allowing them to conduct our research and providing any assistance
requested. Their excitement and willingness to provide feedback made the completion of
this research an enjoyable experience.
We would like acknowledge as well the many friends and colleagues who
assisted, advised, and supported our research. Especially, we want to express our
gratitude and deep appreciation to Sean Michael Amador and Aaron Noel de Leon
whose friendship, knowledge, and wisdom have supported, enlightened, and entertained
us during the course of the research.
Finally we would like to thank all our families for their trust and encouragement. It
is with their never-ending support that we found the courage and determination to finish
this research.
v
ABSTRACT
The study is about Whim, a mobile integrated development environment for

JavaScript applications and the factors affecting its usability according to efficiency,
effectiveness, aesthetics, error tolerance and ease of use. Whim is a hybrid application
that allows users to create a JavaScript application without going through the setup
process needed to create one hence, allowing the user to focus more on the coding
structure itself. It runs on web browsers such as Mozilla Firefox and Google Chrome and
on smartphones. Users are required to have a GitHub account before creating a project
and upon project creation, a virtual space is created in the cloud where the project is
saved.
Evaluation on the software was done using a usability study and quantitative
analysis. WHIM was evaluated by 48 respondents from the Philippine Web Designers
Organization to assess its effectiveness, efficiency, aesthetics, ease of use and error
tolerance. By conducting a remote test where the respondents performed a series of
tasks within a given time limit, WHIM was found to be acceptable in terms of the usability
criteria. User feedback and response were generally favorable, with a Chi square
analysis (n=48) verifying that these results were unlikely to have resulted from chance.
vi
TABLE OF CONTENTS
TITLE
Whim: A Mobile Integrated Development Environment
For JavaScript Applications .................................................................................i
Approval Sheet............................................................................................................... ii
Dedication ..................................................................................................................... iii
Acknowledgement......................................................................................................... iv
Abstract ..........................................................................................................................v
Table of Contents .......................................................................................................... vi
List of Tables ............................................................................................................... viii
List of Figures................................................................................................................ ix
CHAPTER
1 THE PROBLEM AND ITS BACKGROUND ............................................................ 1
Introduction ............................................................................................................... 1
Background of the Study .......................................................................................... 3
Statement of the Problem......................................................................................... 4
Scope and Limitations of the Study ......................................................................... 5
Significance of the Study.......................................................................................... 6
2 REVIEW OF RELATED LITERATURE AND STUDIES ......................................... 7
Review of Related Literatures .................................................................................. 7
Review of Related Works ....................................................................................... 13
Conceptual Framework .......................................................................................... 24
Hypothesis .............................................................................................................. 26
Operational Definition of Terms ............................................................................. 27
3 METHODOLOGY ................................................................................................... 29
Software Design and Development Approach....................................................... 29
Software Process Model ............................................................................ 30
Requirements Gathering and Project Planning Phase .............................. 31
System Design Phase ................................................................................ 31
Development Phase ................................................................................... 32
Transition Phase......................................................................................... 32
Software Framework .............................................................................................. 39

Research Design .................................................................................................... 41
vii
Determination of Sample Size................................................................................ 41
Sampling and Design Techniques ......................................................................... 41
The Subjects........................................................................................................... 42
Research Instrument .............................................................................................. 42
Statistical Treatment of Data .................................................................................. 43
4 RESULTS AND DISCUSSIONS ............................................................................ 43
Software Description .............................................................................................. 43
Features and Capabilities ....................................................................................... 43
5 SUMMARY OF FINDINGS, CONCLUSIONS AND RECOMMENDATIONS ....... 63
Summary of Findings ............................................................................................. 63
Conclusion .............................................................................................................. 64
Recommendations.................................................................................................. 64
BIBLIOGRAPHY ........................................................................................................ 65
APPENDIX A Performance measures.................................................................. 70
APPENDIX B Survey Form.................................................................................... 71
viii
LIST OF TABLES
Table 1. Some features of an Integrated Development Environment.............................. 10

Table 2. Usability attributes of various models................................................................. 18
Table 3. Sub-characteristics of usability as defined by Quesenbery ............................... 19
Table 4. Data Collection Method for Usability Testing ..................................................... 20
Table 5. Methods used in usability testing ....................................................................... 21
Table 6 . Profile of Respondents According to Gender .................................................... 51
Table 7 Profile of Respondents According to Years of Experience ................................. 51
Table 8 Profile of Respondents According to Web Technologies Used .......................... 52
Table 9 Profile of Respondents According to Web Development Software Used........... 52
Table 10 Chi Square Test for Question 1 ......................................................................... 52
Table 15 Chi Square Test for Question 6........................................................................ 55
Table 19 Chi Square Test for Question 10....................................................................... 57
Table 25 Chi Square Distribution...................................................................................... 61
ix
LIST OF FIGURES
Figure 1. A screenshot of Touchqode .............................................................................. 13

Figure 2. A screenshot of DeuterIDE ............................................................................... 14
Figure 3. A screenshot of DroidEdit.................................................................................. 15
Figure 4. A screenshot of TouchDevelop ......................................................................... 16
Figure 5. An Input Process Output Diagram .................................................................... 24
Figure 6. Rapid Application Development Model ............................................................. 30
Figure 7. Hierarchical Input Process Output Diagram ..................................................... 33
Figure 8. End-user module diagram ................................................................................. 34
Figure 9. Login sub-module diagram................................................................................ 35
Figure 10. Account sub-module diagram ......................................................................... 36
Figure 11. Workspace sub-module diagram .................................................................... 37
Figure 12. Feedback sub-module diagram....................................................................... 38
Figure 13. System Framework ......................................................................................... 39
Figure 14 Login Screen .................................................................................................... 44
Figure 15 Github Authentication Screen .......................................................................... 45
Figure 16 Options Screen ................................................................................................. 46
Figure 17 Account Explorer .............................................................................................. 47
Figure 18 Project Creation Screen ................................................................................... 48
CHAPTER 1
THE PROBLEM AND ITS BACKGROUND
Introduction
Mobility is quickly becoming a driving factor in shaping the lifestyles of different
consumers all around the globe (Donner, 2008; Mort & Drennan, 2007; Skierkowski &
Wood, 2012), resulting in an increase of its production in the global market (Gerpott,
2010; Yoo, Lyytinen, & Yang, 2005). The popularity of mobile phones has generated a
huge demand for various mobile applications resulting in mobile phones achieving a
large penetration rate in many markets (Kimiloglu & Nasir, 2010). Its growing and
evolving development to connect to people in different ways has enabled it to
become more than just a communication device in the forms of smartphones at tablet
devices. (Walsh, White, Cox, & Young, 2011), and this phenomenon is very much
observable in the Philippines.
With the advent of mobile technology, there has been a significant growth in
mobile users in the Philippines. As of 2013, Globe Telecom reported a subscriber base
of 36.1 million (Globe Telecom, Inc. Annual Report," 2013) while Smart Communications
reported 74.4 million subscribers (Philippine Long Distance Telephone, Co. Annual
Report," 2013). In addition to that, a study conducted by Flurry Analytics (2013),
revealed that 80% of the time a mobile user spend on smartphones is spent on
applications. Hence, it will not be long before subscribers will acknowledge that mobile
phones will become a part of everyday lives, both in the business setting and at the
home (Liao et al., 2007; Mort & Drennan, 2007; Walsh et al., 2011).
In this increasingly mobile online world, JavaScript can be found in every devices
and applications. It is used on search engines, word processors, mobile browsers and it
could possibly be running the applications on your phone. (Vance. 2010). W3Techs
(2014) has estimated that 88.1% of sites online today use JavaScript. Dubbed the
2
Assembly Language of the Internet, JavaScript is used not only for writing
applications, but also as the target language for web applications written in other
languages, such as Java (Fortuna, et al., 2010).
JavaScript is an imperative, object-oriented language. Its syntax is similar to C
and Java, but it employs a prototype-based object system. JavaScript also supports
anonymous functions, closures, and many other features traditionally associated with
functional languages. Every function in JavaScript has the potential to be a constructor
for a class" of objects, and contains a field prototype, initially referencing an empty
object (Lebresne, et al., 2009). The main reason for this is the arduous steps needed to
configure and run a JavaScript application. To be able to run a JavaScript application, it
must be first embedded in a HTML document. As it must be embedded in a HTML file,
the developer must also familiarize himself with the syntax of the HTML. JavaScript also
does not compile. Being initially developed as a browser scripting language, it needs an
internet browser with a native console or terminal application in order to be executed
such as the Google Chrome and the Mozilla FireFox extension, FireBug.
Hence, this is the time where an application that lets developer turn their ideas
into a working application without needing the use third party applications matters most
on JavaScript developers. The goal of this study is to develop Whim, a Mobile Integrated
Development Environment for JavaScript Applications. The name Whim comes from the
noun of the same meaning which means a sudden desire. Whim was also chosen
because of its accessibility that will allow the users to build applications whenever they
want without being limited by the compatibility issues of the run-time environment and
eliminating the task of configuring the tools to run the JavaScript source code.
3
Background of the Study
The popularity of the web development industry has resulted in the increased
production of different Computer Aided Software Engineering (CASE) tools. One of
these tools is the Integrated Development Environment (IDE). IDEs automates repetitive
and well defined actions therefore reducing the tasks of software engineers (Carrington,
2004). Modern desktop IDEs, such as Netbeans and Eclipse, provide a number of
facilities that increase the productivity of software developers. This includes general
facilities such as project management and language-specific facilities such as code
formatting and auto-completion. In addition to that, mobile IDEs have also been
developed. However, different factors posed extremely high-end barriers to mobile
programming (Athreya, Bahmani, Diede & Scaffidi, 2012)
The researchers created a mobile IDE upon these innovations in the form of
Whim. A study following the usability qualities set by Quesenberry was conducted to
gauge the softwares effectiveness. The motivation of this study came from the lack of
mobile IDEs intended for JavaScript applications. Whim aims to improve the
development of JavaScript applications by removing the use of third party applications
and making it easier to learn by adding a visual interface. Moreover, it is intended that
the mobile IDE should do most of the mundane work for the user like compiling, code
hinting and unit testing. Aforementioned on the related study, usage of CASE tools
automates repetitive tasks, hence the mobile IDE is packaged with the same basic
features of a desktop IDE while also considering that the development environment will
be mobile.
4
Statement of the Problem
The goal of this study is to develop Whim, a Mobile Integrated Development
Environment for JavaScript Applications. Specifically, the study intends to answer the
following questions:
1.) What are the profiles of the respondents as to:
a. Gender
b. Years of experience in Web Development
c. Web technologies used (HTML, CSS, JavaScript, etc.)
d. Web development software used?
2.) What is the perception of the respondents on the usability of the mobile IDE in
terms of:
a. Ease in learning
b. Effectiveness
c. Efficiency
d. Engaging
e. Error Tolerant
3.) Do respondents have equal rating on the usability factors of the mobile IDE?
5
Scope and Limitations of the Study
Whim is a mobile integrated development environment for JavaScript application
that allows the user to easily handle and add code blocks into an application source file.
Users can execute both client-side and server-side JavaScript codes directly without
using third party applications. Whim runs on Android devices with at least 480 by 800
pixels in resolution. Moreover, it will also be accessible using internet browsers such as
Google Chrome and Mozilla Firefox.
Whilst having said that Whim is a mobile application, it is a hybrid type of mobile
application, this means that the application was partly a web application and a native
mobile application. Hybrid mobile application allows cross-platform development - same
web components can be reused on different mobile operating system, reducing
significantly the development costs.
Upon completion of user registration, Whim creates a secured space in the
virtual private server for the registered user which allows the application to store user
files, perform several operations including file manipulation and run executables while
protecting system files from being accessed outside the users designated directory.
As an added feature of Whim being an IDE, it will also include project
management functionalities like version control, dependency management and project
scaffolding. This allows faster development allows source code management. Besides
those powerful features, Whim allows creation of HTML and CSS files in the project
explorer but these type of files will not be supported by the code editor.
Whim needs internet connectivity to run. Files are synced using data transfers
across the cloud and the application.
The development of Whim is also be accompanied by a usability study, with
professional web developers
as
respondents.
This
measures
effectiveness, aesthetics, ease of use and error tolerance of the software
the efficiency,
6
Significance of the Study
The development of Whim is significant to the following: web developers, web
development teachers and students and future researchers.
Web Developers
Web developers have an access to a convenient programming playground where
they can piece together their thoughts during a project development. Web developers
can start and configure project using common project seed like an AngularJS project or
an ExpressJS project easily using few button clicks. Web developers can build
applications efficiently and without the difficulty of moving from application to application
to update and execute a code during development. This reduces time to do
programming routines a web developer come across every time they build an
application.
Web Development Students and Teachers

Students can create and apply actions to their JavaScript applications and view
the generated flow of the program to understand the underlying structure of their
application. Web development teachers can use Whim to teach web development
concepts easier. Whim also allow both the students and teachers to experience new
technologies.
Future Researchers
The findings and methodology of this study can be added to the body of
knowledge concerning the field of web development tools and mobile usability thus
providing the future researchers references and confirmations on aspects and
possibilities of mobile programming.
CHAPTER 2
REVIEW OF RELATED LITERATURE AND STUDIES
This chapter discusses the significant topics related to the study. It also presents
the conceptual framework as well as the operational definition of terms.
Web Development Process

Text and HTML editors such as Notepad and Sublime can be used to write
websites. Other editors like Adobe Dreamweaver or Wikipedia VisualEditor allow
dragging and dropping of elements into the page. Editors that allow the dragging and
dropping of elements are collectively called as What You See Is What You Get
(WYSIWYG) Editor. Though non-programmers and some developers use WYSIWYG
editors, most prefer the use of text and HTML editors (Rosson, Ballin & Rode, 2005).
They state that WYSIWYG editors override codes written by the developers themselves
and lack support for HTML tags (Vora, 1998).
The web development process starts with the coding of the markup using the
Hypertext Markup Language (HTML). HTML, as well as its Extensible Markup Language
(XML) version, XHTML, are the lingua franca for creating, publishing and displaying
hypertext on the World Wide Web (World Wide Web Consortium, 2012). Cascading
Style Sheets are then used to add style elements to the markup (World Wide Web
Consortium, 2008). Following this, web scripting languages like PHP, JavaScript and
ASP.Net are used to add interactive elements (Ecma International, 2011). Web scripting
languages can also be used for server-side transactions. Web development, however,
does not follow only one process and developers may skip certain steps.
Web designers often use image manipulation software such as Adobe
Photoshop and GIMP first to design their sites before applying CSS to the full website.
(Dorn & Guzdial, 2010). These sites are then connected to a database and added scripts
8
by programmers. Most of the time, developers not only create websites themselves but
also maintain sites developed by other developers. Some web developers are a
combination of both. (Rosson, Ballin, & Rode, 2005).
Flaws of Existing Web Development Process

Web development is quite difficult to learn because of the different skills needed
before a website can even be published. In addition to that, the styling and scripting
standards of the web development, CSS and JavaScript, both have their own problems
which often confuse even the most experienced of developers (Bunz, 2003).
JavaScript is the most popular Web scripting language, with 88.3% worldwide
browser usage as of January, 2014 (W3Techs, 2014). However, despite its popularity, it
is an extremely permissive and error-tolerant language (Mikkonen & Taivalsaari, 2007).
JavaScripts dynamic language coupled with its permissive nature gave a lot of
developers a hard time as a simple syntax error like a lack of brackets [] or
parentheses () is very difficult to track.
Errors in the styling of web applications lie in the CSS specifications. As web
pages link to more than one style sheets, HTML elements get their CSS properties from
different sources. However, this may also cause any errors to come from any of those
sources making it hard to debug. (Quint & Vatton, 2007). In addition, CSS properties
often overlap each other and major browsers interpret each properties differently leading
to the creation of addition CSS properties that is specific to different browsers such as
Google Chrome and Mozilla Firefox.
9
Transition from Desktop to Mobile
As
evidenced by the growing trends and movements in the market
("Telecoms industry report: Philippines," 2010), the rapid growth of mobile users brought
a wide range of mobile applications especially with the introduction of newer, more
advanced types of mobile phones namely the smartphones such as Apples iPhone
and the Google-powered Android phones and table devices such as Apples iPad or
Samsungs Galaxy (Capistrano, 2013). For a large variety of applications and services,
users favour mobile applications over browser based applications. In a study conducted
by Vserv.mobi (2013), a leading global mobile ad network, 78% of internet users in the
Philippines have downloaded a mobile app or game in the month of August alone. In a
similar study conducted by Flurry Analytics (2013), 80% of the time a mobile user spend
on smartphones is spent on applications.
Integrated Development Environments

Modern desktop Integrated Development Environments (IDEs) provides a
number of facilities that increase the productivity of software developers. This includes
general facilities such as project management and language-specific facilities such as
code formatting and auto-completion. IDEs must include a plugin model which provides
a framework to extend its features. Furthermore, it must also support the entire software
development cycle. (Kats, Vogelij, Kalleberg, & Visser, 2012).
Over the past five decades, desktop IDEs have become mature and are now
prevalent in modern software engineering. They provide tools that allows developers to
work with a wide range of languages and can be used for a large range of software
projects and software engineering tools (Kats, Vogelij, Kalleberg, & Visser, 2012).
10
Table 1. Some features of an Integrated Development Environment
Feature
Description
Intellisense (Code completion)
Completes the code before the user

finishes typing
Source File Management
Lists all the files, folders and structure of

a given project
Syntax Highlighting
Highlights a languages reserved words
Autoformatting
Automatically indents and formats the

code into a more readable form
Find and replace text
Automated finding and/or replacing of a

given word in the source code
Table 1 lists the common features implemented on most Integrated Development

Environment. They increase developer productivity by incorporating many different kinds
of editor services specic to the syntax and semantics of a language. These services
assist developers in understanding and navigating through the code, they direct
developers to inconsistent or incomplete areas of code, and they even help with editing
code by providing automatic indentation, bracket insertion, and content completion
(Kats, Vogelij, Kalleberg, & Visser, 2012).
11
Feasibility of Mobile Programming
Questions such as the possibility of creating a program on mobile phones have
been in question for the past few years as there was no practical way for end users to do
so. Instead, users generally had to install a suite of programming tools on their personal
computers, write a program in a C-like programming language such as Objective-C,
Java and C#, configure the phone to work with the development computer and deploy
the program to the phone via USB or cable. These tools, languages and configuration
posed extremely high-end barriers to mobile programming (Athreya, Bahmani, Diede &
Scaffidi, 2012).
Currently, the creation of applications for mobile devices and mobile phones, is
done on personal computers. Most of the development toolkits include a mobile phone
emulator where the generated applications can be debugged and tested. However, this
approach on mobile programming leads to some problem. In a study conducted by
Pfleging, et. al. in 2010, they stated one of the problems stem from the widespread of
mobile phones. This means that in underdeveloped regions, citizens currently are unable
to create custom applications for their mobile phones, as most of them do not have their
own PC or they prefer the use of their smartphones more.
In addition to this, new communication features and behaviour integrated in
mobile phones, such as Bluetooth, WIFI, and GPS, cannot be fully recreated on the
emulators of desktop development kits. Thus, developers code on a PC, then they
debug and test on the mobile device and for changing code parts they have to return to
the PC. All of this leads to a time-wasting switching between PC and mobile device and
vice versa as many times as the programmer wants to test the program existing and
prototyping techniques do not allow adding full functionality of mobile applications. To
counter these problems, a development framework that enables users to rapidly develop
prototypes and real applications directly on the mobile phone should be implemented
12
(Pfleging, Hermes, Bahamondez, Nolte & Schmidt, 2010). The most prominent one is
the in-situ framework where it supports the creation of low to high fidelity applications
that allows the combination of scanned hand drawings with digital images. Additionally,
this framework allows users to edit the properties of the interface both on the PC and
directly on the mobile device (De S & Carrico, 2009).
If one intends to develop applications directly on the phone, problems such as
hardware constraints, screen size and interaction modes will often arise. Additionally,
most mobile phones lack of an efficient typing method. Upcoming technologies like
mobile projectors and the limitation of the typing effort may be a solution (Pfleging,
Hermes, Bahamondez, Nolte & Schmidt, 2010).
Banu and Viyakumar (2013) adopted the Jigloo GUI package of the Eclipse IDE
to perform their study on extending the functionalities of an IDE for Android Phones
using the best methodologies.
The outcome is an IDE that lets the users develop
applications designed for Android Smart Phones.

Through a grounded theory approach, Joorabchi, Mesbah and Krutchen (2013)
performed interviews with 12 senior mobile app developers for 9 different companies
who are experts in mobile platforms. Based on the outcome of these interviews, they
discussed the current challenges faced by mobile developers in practice, such as
developing apps across multiple platforms. On the other hand, various I.T. companies
have started developing similar software.
Commercial mobile integrated development environment have also been
produced. One of the most famous is the Microsoft TouchDevelop.
Microsoft
TouchDevelop is a programming environment enabling users use their phones to create

scripts that run on the mobile phones. This is achieved via a semi-structured editor and
a programming language with several distinctive features, such as support for using
smartphone hardware (Athreya, Bahmani, Diede & Scaffidi, 2012).
13
Software Review
As mentioned, some commercial mobile based IDEs have been developed
namely: touchqode, deuterIDE, droidEdit and TouchDevelop. This section will introduce
each of the IDEs along with their features.
Figure 1. A screenshot of Touchqode

One of these systems is Touchqode (www.touchqode.com, 2010), a mobile
integrated development environment (IDE) for Android Smartphones that uses the
IdeOne API to compile and return results to the application. It comes with syntax
highlighting, autocomplete and other features found in a desktop IDE. Touchqode works
in two main modes. The view mode allows users to review code and text. This mode
disables the keyboard. The other main mode is Edit which enables changes to be made
14
to the code. ALT lets you input special characters, use TAB or ALT+TAB to show
autocomplete.
Figure 2. A screenshot of DeuterIDE

DeuterIDE (www.deuteride.com, 2013) is another software developed for Android
devices. Developed by the company, Didactic Development, it is mobile based
programming text editor, compiler, and IDE built for Android. Complete with virtual keys
for commonly used programming symbols, syntax highlighting, and support for over 40
programming languages. Includes a functionality that enable the user to share their code
on multiple platforms including Twitter and Facebook. The android app also supports
15
customization to from the colors of the button to the entire theme of the syntax
highlighting functionality.
Figure 3. A screenshot of DroidEdit

DroidEdit (droidedit.wordpress.com, N.D.) is a text and source code editor for
android tablets and phones that supports Syntax Highlighting for several languages like
C, C++, C#, Java, HTML, CSS and JavaScript. It allows users to share documents with
other services like Dropbox and preview HTML files in browser. DroidEdit comes also
with a free version and a paid version of the app, whereas the paid version includes
more bleeding edge features like being able to customize theme, having a Dropbox
support and allow file transfers because of the SFTP and FTP support it provides.
16
Figure 4. A screenshot of TouchDevelop

TouchDevelop (Tillman, 2011) is a complete app creation ecosystem designed
for touch, cloud connected, mobile devices developed by Microsoft. TouchDevelop is a
novel application development environment which allows anyone to script their mobile
devices anywhere it does not need a separate PC. TouchDevelop scripts, e.g. apps
written using TouchDevelop, can access data, media, and sensors on phone, tablet or
PC. The script can interact with cloud services including storage, computing, and social
network.
In fact, the abstract syntax, typing rules, and basic semantics of the language are
fairly similar to corresponding fragments of mainstream programming languages like
Java or C#. This similarity lets the user transfer expertise between the TouchDevelop
17
language and a traditional programming environment, in both directions. The language
mixes imperative, object-oriented, and functional aspects. The imperative parts are most
visible: assignment statements can update local variables and state of global objects.
A program consist of a set of actions; each action contains statements gives an
overview of the abstract syntax of statements and expressions that can appear in
actions. The language provides built-in primitives that make it easy to access the rich
sensor data available on a mobile device. Instead of a traditional text editor,
TouchDevelop employs a semi-structured code editor. The motivation for structured
editing is not to entirely eliminate the possibility of syntax errors, but instead to ensure
that every navigation task between dierent syntax elements can be easily achieved by
tapping on a nger-sized user interface element on the screen instead of relying on a full
physical or on-screen keyboard that enables editing of code at the level of individual
characters from which words and in turn sentences are formed.
The study entitled The Future of Teaching Programming is on Mobile Devices
(Tillman et al., 2012) is an evaluation of the performance of the students upon using the
software, Touch Develop. The software was proposed to be used by 30 students in
grades 11-12 in a computer Science class for 90 minutes. The students had recently
started the class and were already introduced to some programming concepts but they
had no experience in developing mobile applications. 12 phones were provided for
students to work in groups of three. After a brief introduction to TouchDevelop, the
students had 45 minutes to explore the language and write their own mobile
applications. All groups were able to write applications on their own, including a program
that changes the color of the screen based on the direction in 3D space that the phone is
facing, a peek-a-boo game that utilized the direction the phone was facing to display a
covered face or an open face with the audio track to accompany it, and a role playing
game where the user has to answer questions to progress.
18
Usability
Usability is the extent to which a product can be used by specified users to
achieve specified goals with effectiveness, efficiency, and satisfaction in a specified
context of use as set by the international standard ISO 9214 (International Organization
for Standardization, 2000). Usability expert Nigel Bevan also defined that usability plays
two roles it is a part of detailed software design and provides the goal that the
developers meet the needs of the users. (Bevan, 2001).
Usability is a quality attribute that asses how easy user interface are to use.
(Neilsen, 2012). However, as a quality attribute, usability is a difficult factor to define for
it depends on the nature of the task, environment and the user (Padda, 2003).
Table 2. Usability attributes of various models

Preece,
et. al
(1994)
Shackel
(1991)
Speed
of
Efficiency
performance
Throughp
ut
Effectivenes
s
(Speed)
Time to learn
Learnability
Learnabilit
y
Time
learn
Rememberabilit Effectivenes
y
s
Retention
over time
Memorabilit
y
Attitude
Retention
Reliability
use
Rate
errors
Constantine &
Lockwood
(1999)
Efficiency
use
in
Learnability
User
Satisfaction
in
ISO 924111
(1998)
Schneiderma
n
(1992)
Efficiency
Satisfaction
Subjective
satisfaction
Nielsen
(1993)
of Errors/Safet
y
Satisfaction
to
Effectivenes
s
(Errors)
Attitude
Table 2 lists the different usability attributes used in various models and it shows
that like all standards, usability is not specific enough guide decisions instead it is rather
used as a template or a starting point that researchers must fill in for each project
19
(Quesenbery, 2003). Usability attributes are often qualitative and different methodologies
are followed to measure them.
Usability expert Whitney Quesenbery defines usability along the following subcharacteristics (Quesendbery, 2003):
Table 3. Sub-characteristics of usability as defined by Quesenbery

Sub characteristics
Description
Effectiveness
The completeness and accuracy with

which users achieve their goals.
Efficiency
The speed (with accuracy) with which this

work can be done.
Engaging
How pleasant, satisfying or interesting an

interface is to use.
Error Tolerant
How well the product prevents errors, and

helps the user recover from any that do
occur.
Easy to Learn
How well the product supports both initial

orientation and deeper learning.
Table 3 lists sub-characteristics of usability according to the 5Es of usability

expert Whitney Quesenbery. Usability attributes are often qualitative and different
methodologies are followed to collect and measure them.
20
Table 4. Data Collection Method for Usability Testing
Method
Explanation
Observation
Data collection by observing the users

behaviour throughout the usability testing.
Interview/Verbal Report
Data collection by the users verbal report

using interview after completing the
usability testing.
Thinking-Aloud
Data collection using users thought

throughout the usability testing.
Questionnaire
Data collection using question items that

address information and attitude about
usability of the software.
Video Analysis
Data collection by one or more videos

used to capture data about user
interactions during usability testing.
Auto Data-Logging Program
Data collection by auto-logging programs

used to track user actions throughout the
usability testing.
Software Support
Data collection using a software designed

to support the evaluation expert during
the usability testing process and to
provide an evaluation summary
Table 4 lists some data collection methods used for usability testing. These
methods vary from traditional testing methods like asking respondents to fill out some
questionnaire or by requesting the user to undergo an interview up to modern means
that automates logging of data results like usage video records and/or log the interaction
of users towards the system while computing the rate of completion of designated tasks.
21
Table 5. Methods used in usability testing
Method
Description
Heuristic Evaluation Methods
To use a predefined list of heuristics to

find usability problems.
Pluralistic Walkthroughs
To evaluate a product
perspective of the end-user.
Formal Usability Inspections
To test within the context of specific user

profiles
and
defined
goal-oriented
scenarios.
Empirical Methods
An experimental test to prove or disprove

a hypothesis
Cognitive Walkthroughs
To test the ease of learning to use product

by exploration.
Formal Design Analysis
To test the understanding of the task

requirements to be performed.
from
the
Table 5 shows some of the different methods used in usability testing. Each
method can be applied to any software depending on its nature and the number of its
users. Usability testing can be done on different technologies and studies.
Carstens and Patterson (2005) conducted a study to test the efficiency of travel
websites by giving the participants the task of finding the same itinerary on different
websites. The three (3) websites tested were Expedia.com, Orbitz.com, and
Travelocity.com. Each participant was given general instructions and a pre-survey to
determine their demographics and level of Internet experience. The study learned that
the color of the website or fonts utilized didnt have a significant impact on whether or not
a person will use the site as the individuals tested were willing to undergo usability
discomfort provided the individual was receiving the best flight fare deal. A common
problem among the sites is the display and search of arrival and departure time of the
flights. The study recommended the use of a less cluttered simpler layout which will help
22
highlight flight times for quicker referral of the different flights and therefore will result in a
faster transaction.
Balakrishnan
&
Yeow
(2008)
identified
the effects
of mobile phone
keypad/screen sizes to users. The study concluded that when thumb circumference
increased, users satisfaction towards key size and space between keys decreased. In
addition, results also indicated that thumb length affects the difficulty of reaching key that
are placed at the right most column of the keypad. With this knowledge, the researchers
recommended a change in the keypad layout and size such as rearranging some of the
keys and letters particularly the ones commonly used in the English language.
In a study conducted by Wallace and Yu (2009), a link between culture and
usability was established. To understand usability as a whole, both subjective and
performance-based measures of usability were considered. As a result, user satisfaction
and perceptions of effectiveness and efficiency were proven to be different based on
culture.
Whim and Usability of IDEs

The study aims to test the usability, as defined by the 5Es of Quesenbery, of the
Whim software not only because of its perceived importance by international standards
but also because Whim is designed to make the development of JavaScript applications
easier.
Ideally, an environment should support multiple views for both presentation and
behaviour (Henderson Jr., 1986). Window managers should allow multiple windows to
be open at the same time. Interface builders make graphical expressible in graphical
means (Myers, Hudson & Pausch, 2000). A project on Whim will have three views one
for the source code, one for viewing the JavaScript conversion of the underlying code
and another for the button interface.
23
Studies conducted by Kline & Seffah (2005) on usability of desktop IDEs showed
usability problems common to multiple studies too much technical jargon, poor error
prevention and handling, ambiguous error messages and a steep learning curve. The
studies recommended improving the mapping of the interface. Debuse (2011) identified
key features in IDEs that included code completion, code coloring, bracket matching and
line numbers. These features improved productivity and made the IDE more user
friendly for novice users.
24
Conceptual Framework
PROCESS
INPUT
Knowledge
Requirements
- Software Model (Rapid
Application
Development)
- Web
Technologies(HTML,
CSS, JavaScript, PHP)
- Version Control
- Server Management
- Write-ups about Usability
- Research and
Development Planning
- Project Development
Scope Analysis
- Engineering
- Transition
OUTPUT
WHIM: A Mobile
Integrated
Development
Environment for
JavaScript
Applications
Technological
Requirements
- Hardware
Virtual private server
Personal computers
Testing devices
- Software
Development
Platforms
Internet Browsers
Project Management
Tools
Development
Environment
Development
Frameworks and
Libraries
Image Editing
Software
- Third Party Services
Remote code
repository and
version control
system
EVALUATION
- Feedback
Bug Reports
Error Logs
Evaluation
Figure 5. An Input Process Output Diagram
25
Figure 5 shows the conceptual schema or the input process output diagram of
the study. Inputs for the study are classified as knowledge and technological
requirements, whereas knowledge requirements include the software development
model the researchers are going to use, which in this case is a Rapid Application
Development Model, the web technologies which were used during development and
production and the usability guidelines that were implemented all throughout the
development. The study also requires knowledge of version control system to facilitate
progression on building the proposed application. Moreover, handling a virtual private
server as described on technological requirements require deep familiarity on server
management.
Technological requirements shall include the tools needed for development like:
Hardware items, a personal computer, a virtual private server, and a testing device were
used during development, production and testing phases. LAMP and NodeJS is a
bundle of a virtual server and a language compiler or run time engine. Yeoman, Bower,
and Grunt are command line interfaces that were used to scaffold, manage
dependencies, and do mundane tasks during the development. Netbeans, Sublime Text
and Vim are IDEs and text editors that are used interchangeably as our primary
development environment. Interface design, concept and wireframes were produced
using Adobe Photoshop. Various versions of Google Chrome and Mozilla Firefox are
used to execute and debug the application, it also serves as the run time environment
for it. External code frameworks and libraries such as AngularJS, jQuery, Ace, Repl.it,
CoffeeScript are used as primary components of Whim.
The process starts in planning the research and development of Whim, this
involved setting the project scope, timeline and gathering of requirements, including the
software model the researchers will use during the development of the application.
Detailed analysis of functionalities and resolution of uncertainties were done in project
26
development scope analysis. Working prototypes of the system were developed during
the engineering phase as well as the implementation of Quesenberrys usability
characteristics. Project development scope analysis and engineering were repeated until
the current iterations scope have been met. Minor modifications to prototypes to resolve
issues raised upon development deployment were conducted every repetition.
Whim: a mobile based Integrated Development Environment will be the final
output of the research and development. Feedbacks of different sorts will be collected
after production and testing of the application to allow the researchers assess the
experience of the users towards the use of Whim. Feedbacks will include user
evaluation, bug reports, error logs and completed survey form accomplished by the
respondents.
Hypothesis
The hypotheses to that the study intends to answer are given below:
H0: Respondents have equal rating on the usability factors of the system in terms of
effectiveness, ease of use, error tolerance, efficiency and aesthetics of the software.
H1: Respondents do not have equal rating on the usability factors of the system in terms
of effectiveness, ease of use, error tolerance, efficiency and aesthetics of the software.
27
Operational Definition of Terms
Account Explorer is a module where users can view or edit his profile.
Browser is a software used in viewing webpages.
Cascading Style Sheets (CSS) is a styling language used for designing the
presentation of a web page
Clone means creating a copy of a project in your specified repository.
Container is virtual space created by Whim to store a cloned project from
Github. This enables users to modify his existing source code without modifying the
original.
Easy to learn is a usability characteristic that explains how well the product
supports both initial orientation and deeper learning
Effectiveness is a usability characteristic that explains the completeness and
accuracy with which users achieve their goals.
Efficiency is a usability characteristic that explains the speed (with accuracy)
with which this work can be done.
Engaging is a usability characteristic that shows how pleasant, satisfying or
interesting an interface is to use.
Error Tolerant is a usability characteristic that shows how well the product
prevents errors, and helps the user recover from any that do occur.
Feasibility is the quality of a study to be accomplished or brought about.
Github is a web-based revision control service for software development and
code-sharing.
Integrated Development Environment (IDE) is a tool that aides developers in
application development by automating certain tasks.
JavaScript is a client side scripting language that adds interactivity to web pages
28
Mobile are low-power handheld devices, such as personal digital assistants,
enterprise digital assistants or mobile phones. In this study, mobile is also defined as
something that is adaptable and versatile that can be used in different platforms.
Mobile Programming is the process by which application software is developed
for low-power handheld devices, such as personal digital assistants, enterprise digital
assistants or mobile phones.
Repository is a place where a history of your work is stored.
Syntax are the rules governing the formation of statements in a programming
language.
Usability is the extent to which a product can be used by specified users to
achieve specified goals with effectiveness, efficiency, and satisfaction in a specified
context of use (International Organization for Standardization, 2000).
Web Applications are software applications loaded in a web browser.
Web Developers are people who are either web designers or web programmers.
Web Designers are people focused on the aesthetic and presentation of web
pages.
Web Programmers are people who specialize in web application including
server side languages as well as client side languages like JavaScript.
World Wide Web Consortium an international community where members and
the public work together to develop web standards.
CHAPTER 3
METHODOLOGY
This chapter discusses the software process model, system framework, process
flow, research design, subjects, statistical treatment of data, research instruments and
data gathering procedure.
Software Design and Development Approach

Whim used the Rapid Application Development methodology. It is a class of tools
that allow for speedy object development, graphical user interfaces, and has the ability
to build higher quality systems that are more maintainable, reusable, and extensible.
James Martin in the early 1990s, distinguished RAD methodology from the traditional
waterfall model for systems development. RAD refers to a development life cycle
designed to give much faster development and higher quality results than the traditional
life cycle. It is designed to take maximum advantage of powerful development software
that has evolved recently. [Martin, J. Rapid Application Development. Macmillan, New
York, 1991.].
Rapid Application Development (RAD) is a software development methodology
that involves application prototyping and iterative development. RAD compromises with
usability issues and execution speed making it very popular for applications that needed
to be completed in a short amount of time (CorePartners, 2005).
The RAD methodology was chosen because allows faster progression and
quality results that fits the restricted timeframe of the development as well as the
production of functional prototypes that enables the researchers to offer a proof of
concept in the early phases of the research.
30
Software Process Model
Figure 6. Rapid Application Development Model
Figure 6 shows the Rapid Application Development Model. The rapid application
model is composed of four phases requirements gathering and project planning phase,
system design phase, development phase and transition phase. RAD begins with the
requirements gathering and project planning phase where the researchers discusses the
project scope, constraints and system requirement. Next is the system design phase
where they formalizes business rules, develop test plans and create screen flows and
layouts for essential parts of the system. Then they enter the development phase. The
development phase involves the construction of the application in iterative cycles of
building, testing, requirements refining and building again until the application is
prepared for another iteration. The last phase is the transition phase where the
developers will prepare the process of implementing the system or managing change
from version to version.
31
Requirements Gathering and Project Planning Phase
Whims planning phase assessed both the technical and the logistic
requirements of the study. The initial planning phase focused on developing a list of
initial requirements and tasks while setting the project scope and timeline. These
requirements include the choice of technology to be used in the development of Whim
as well as determining the set of respondents to test the software. In addition, the
feasibility of the different functionalities of the proposed system was also reviewed.
Potential risks and limitations of the tools and technologies to be used and the usability
standards to be followed were also defined during this phase.
System Design Phase

Whims system design phase involved a detailed analysis of its functionalities as
defined during the requirement gathering and project planning phase. This also involved
the resolution of uncertainties encountered during the previous iterations and the
application of the information gathered during the planning phase.
The outline of the system was done during the initial system design phase. Early
iterations involved the creation of the system interface. The scope was reviewed and
refined to ensure that critical functions will be delivered in the required time frame. Later
iterations of the system design phase involved the adjustment of the design based on
the data gathered during the previous iterations.
These data included the usability standards to be met and the problems
encountered by mobile applications users such as the lack of space in their keypads.
This resulted into the design of a multiple window interface wherein to allow a more user
friendly wherein users can click a button and a code will be generated. The user
interface design is continuously modified to meet the usability standards set by
Quesenbery.
32
Development Phase
A prototype that followed the structure set during the system design phase of the
current iteration process was developed and tested. A usability study was
simultaneously conducted which allowed the researchers to properly implement of
usability concepts and to improve the current design of later iterations.
The initial development of the system was synchronously be tested by the
researchers to determine initial usability issues as well as look for possible bugs and
errors. A remote test among a group of professional web developers will be conducted
once the software is determined to be in production state.
Each development iteration reflected the resolutions on issues and constraints
raised during the system design phase and some further functionalities were dropped to
keep the development of the software within the timeline. On the final iteration of the
development phase, the researchers updated their documentation and properly identify
the processes needed for a successful implementation.
Transition Phase
All data gathered during the previous phases were assessed to be prepare for
the transition of the system from development to production status. User were provided
access to online documentation and update instructions to assist them transfer from their
old to new ones that involve the new system. A bug reporting and system evaluation
feature will also be integrated to track potential enhancements and allow continuous
user evaluation.
33
Hierarchal Input Process Output
Figure 7. Hierarchical Input Process Output Diagram
34
Figure 7 shows Whims HIPO. New users can create account in order to access
the dashboard where they will be able to manage their projects. Users can also view the
users manual and other information regarding the system through the documentation
tab.
End-User Module
Figure 8. End-user module diagram
Figure 8 module contains Whims main sub-modules: login, registration,

documentation and feedback. The login sub-module lets users sign in to their account
and access their dashboard to start a new session with Whim. The registration submodule enables new users to create an account. The documentation sub-module
contains helpful information such as users manual and check for updates. While the
feedback sub-module allows the user to provide a usage evaluation for the system and
issue reports. Moreover it is the one responsible for collating automatic feedbacks like
error logs.
Registration Sub-Module
After the application has been downloaded, users will be redirected to the
registration sub-module. The registration sub-module enables new users to create an
account. This enables the application to set up a working environment for the user. The
35
registration also requires a GitHub account. Using a GitHub account for registration
allows the application to easily fetch user information for users with existing GitHub
account thus saving a lot of time upon registration. GitHub is where a copy of their
projects is uploaded, in a remote repository of the projects sources can optionally be
synced.
Login Sub-Module
Figure 9. Login sub-module diagram
Figure 9 show the diagram of Whims login sub-module. After users have
successfully logged in to Whim, they are redirected to the dashboard which allows them
to manage their accounts and configure their workspace. Account Manager allows the
user to modify their credentials as well as manage connection to GitHub whilst the
workspace manager enables users manage their projects.
36
Account Sub-module
Figure 10. Account sub-module diagram

Figure 10 show the diagram of Whims account sub-module. The account submodule allows the user to manage his credentials as well as update the information of a
third party service connected to his account such as GitHub information.
37
Workspace Sub-module
Figure 11. Workspace sub-module diagram
Figure 11 show the diagram of Whims workspace sub-module. The workspace

sub-module is where the primary capabilities of Whim takes place. It includes two
primary sub-module, explicitly the Manage Project sub-module and the Load Project
sub-module whereas the Manage Project sub-module shows the user a list of existing
projects in his workspace and allows him to create another, update existing or delete a
project. On the other hand the Load Project sub-module loads Whims code editor where
users can start programming, running and debugging an application. The user also has
access to several functions like managing files and execute further utilities such as Git
commands.
38
Documentation Sub-Module
The documentation sub-module contains helpful information such as users

manual and check for updates. If there are updates available, users will be given
instructions on how to update their current software. Change logs will also be available
for viewing to keep new users informed.
Figure 12. Feedback sub-module diagram

Feedback Sub-Module
Figure 12 show the diagram of Whims feedback sub-module. The feedback submodule allows the user to an interface for user evaluation and bug reporting. Additionally
this sub-module provides the researchers a place where they can issue the respondents
a survey form that will be used for statistical evaluation of the research.
39
Software Framework
Figure 13. System Framework
40
Figure 13 shows the overview of the system. New users will have to register for
an account. Users will also be asked to create or enter their GitHub accounts in order to
register successfully. Existing users can access their projects after logging in through
the main menu.
Once authenticated, the users can create or manage their project as described in
the User Login Sub Module. Users can also manage their account. They can edit their
credentials or update their GitHub connections in the account settings.
Users can interact with the application using the graphical user interface to
perform actions which will be interpreted as a request object, sends it to the server and
the server will then process this request based on its type and content. The server is
responsible for file and database operations requested by the application and is in
charge for providing a response to each request.
Once a project has been loaded, users can edit their codes through the editor.
The editor will consist of four windows the code editor, the JavaScript translation
window, the console window and the main menu window. The code editor is similar to a
desktop IDEs editing environment and allows users to enter the code using the
CoffeeScript programming language. Several features such as auto completion, syntax
highlighting and a find and replace feature is also included to assist the users while
coding. The JavaScript translation window lets the users see the equivalent JavaScript
codes. The console window shows the output of the code the users entered as well as
allow the users to enter input. The main menu window lets users access the different
functions of the software such as save, open, save as, run and others.
41
Research Design
Descriptive research was used in this study because it will focuses on
determining the perception of the respondents on Whims software usability based on
Quesenberys usability attributes effectiveness, efficiency, engaging, error-tolerant and
easy to learn.
A remote test where respondents tried the software on their own was conducted
in order to make quantitative and statistical feedback.
Determination of Sample Size

In order to determine the effectiveness of the developed system, the respondents
were asked to participate in the remote test. A sample size of thirty (30) professional
web developers was used in order to fit with the minimum requirements of the Chi
square tests to limit errors and outliers. The respondents came from the Philippine Web
Designers Organization.
Sampling and Design Techniques

The study used purposive sampling to gather the respondents to make sure that
the respondents will have certain characteristics pertinent to the study. Professional web
developers could be considered as experts and may represent the expected users of the
system. Neilsen (1993) also stated that the non-random way of choosing respondents is
in part of the niche nature of the studies and in part of the usability testing forgoes nonrandom sampling in order to get respondents that would likely be able to point out as
many usability issues as possible.
To gather the participants for the remote test, the researchers invited members of
the Philippine Web Designers Organization (PWDO).
42
The Subjects
The respondents of the remote tests were professional web developers or
designers coming from a community of web developers, the Philippine Web Designers
Organization (http://www.pwdo.org/).
The Philippine Web Designers Organization is a non-stock, non-profit
organization with several hundreds of members. The organization conducts web design
conferences, seminars and workshops as well as host hackathon competitions. Their
events are usually targeted towards students. Members of the organizations are
professional or independent web designers, web developers or both.
Research Instrument
Before conducting the usability test, the researchers conducted a test among
themselves in order to refine the possible flaw of the procedure (Neilsen, 1993).
The remote test will be a series of three tasks will be given. Respondents will be
asked to complete them within thirty (30) minutes. The tasks were used to expose as
much of the features of Whim as possible. After completing the tasks, respondents were
asked to fill up a survey.
Respondents were asked to fill up the survey once all the tasks are complete.
The questionnaire was based on Quesenberrys usability characteristics and measured
the following: effectiveness, efficiency, engaging, error-tolerance and ease of use.
Efficiency and effectiveness would be determined by the increase in the
respondents productivity while error tolerance would assist in the production of a
syntactically working project. Engaging would be determined by the favorable user
experience. Whims learnability would be determined by how fast the users would be
able to create their projects. Task completion rate would help evaluate the usability of
43
Whim when it comes to application programming. These would be as implied in the subcharacteristics of usability as defined in by Quesenbery.
Statistical Treatment of Data

The respondents were asked to answer the different questions which responded
to the study. The results were treated by using the following statistical tools.
The Frequency (F) is the number of occurrences in a single variable. It is a count
of individual responses. The Percentage (P) explains the information as a proportion of
the whole. Percentage are calculated by taking the number of the subcategory and
dividing by the number of the population.
P = F/N x 100
Where:
P = Percentage
F = Frequency
N = Total number of the respondents
The Frequency and Percentage are statistical tools used to determine the
definite percentage and number of information collected for the profile of the
respondents referring to their year of experience.
The results of the equation serve as the basis to determine whether the system is
acceptable or not. In addition to that, the use of the Chi-square will be used to prove if
the hypothesis of the study will be accepted.
44
=
Where:
fo = observed frequency
fe = expected frequency
( )2
CHAPTER 4
RESULTS AND DISCUSSIONS
This chapter discusses the software description, software structure, project
evaluation and the results of both the quantitative and qualitative analysis.
Software Description
Whim is a hybrid application which means that the application is partly a web
application and a native mobile application. Hybrid mobile application allows cross platform development - same web components can be reused on different mobile
operating system, reducing significantly the development costs. It allows the users to
easily handle and add code blocks into a new or existing applications. It runs on android
devices with at least 480 by 800 pixels in resolution. Moreover, it runs on web browsers
like Google Chrome and Mozilla Firefox.
Features and Capabilities

Whim provides the user a development environment where you can store,
evaluate and execute JavaScript applications. Since JavaScript applications exist on
both frontend (client side or in-browser) and backend (server-side or in a server), Whim
creates a more generic environment that would shorten the gap between two sides of
JavaScript, which means an environment that accepts native capabilities of JavaScript.
44
Whim Login Page
Whim is currently hosted at whim.icodemostly.com. Upon access, users will be
redirected to whims login page where the software will require the users to login with
their existing Github accounts or create a new one.
Figure 14 Login Screen
45
Figure 15 Github Authentication Screen

When existing github users log in their accounts, their projects will automatically
be synced allowing them to view their projects on whim anytime.
46
Options Screen
Whim provides users an online documentation screen where they can receive
updates as well as task-oriented help. This also allows users to send feedback, bug
reports and evaluation to the developers.
Figure 16 Options Screen
47
Account Explorer
Whims account explorer show users their github organizations and existing whim
project containers. Once click, they will be redirected to the respected links.
Figure 17 Account Explorer
48
Figure 18 Project Creation Screen
Creating a Project
Upon clicking a user on the account explorer, he will then be redirected to the
users github account. In this window, users can clone their github projects before they
can access it using Whim. Before cloning, Whim will prompt the user to create a
container where the cloned project will be stored.
49

When a users github project is cloned using Whim. The software will then create
a small virtual repository in the cloud which allows the user to access the projects
anywhere with internet connection.
50
Code Explorer

Figure 20 shows the default workspace of the Whim IDE. A user can create a
JavaScript application direct without the setting up the JavaScript environment as it will
automatically be set up upon creating a new project.
51
Project Evaluation
This phase reflects the results from the experiment. To have a sufficient
number of respondents for statistical treatment, the researchers were able to get
48 respondents for
remote
testing.
These respondents are professional web
developers and designers who are members of the Philippine Web Designers
Organization (http://pwdo.org/).
Table 6 . Profile of Respondents According to Gender

Gender
Male
Female
Total
Frequency
30
18
48
Percentage
62.5%
37.5%
100%
Table 6 shows the gender distribution of the respondents. Thirty respondents are
male while eighteen respondents are female.
Table 7 Profile of Respondents According to Years of Experience

Years of Experience
11-15
6-10
1-5
Total
Frequency
6
17
25
48
Percentage
12.5%
35.42%
52.08%
100%
Table 7 shows the years of experience among the respondents. Six respondents
had eleven to fifteen years of experience, seventeen had six to ten, and twenty-five had
one to five years of experience.
52
Table 8 Profile of Respondents According to Web Technologies Used
Web Technology
JavaScript
PHP
Ruby
Frequency
41
28
17
Percentage
85.42%
58.33%
35.42%
Table 8 shows the distribution of web technologies used by the respondents. As

Whim is more focused on server-side programming, the researchers did not ask the
respondents about their knowledge of front-end technologies (HTML, CSS, etc.). Forty
one respondents knew about JavaScript, twenty eight knew about PHP and seventeen
knew about Ruby.
Table 9 Profile of Respondents According to Web Development Software Used

Web Development Software
IDE
Text Editor
Mobile
Frequency
42
48
0
Percentage
87.5%
100%
0%
Table 9 shows the distribution of web development software used by the

respondents. All respondents used a text editor while forty two used IDE (an IDE can be
categorized as a text editor with more features. None of the respondents have used a
mobile development software.
Table 10 Chi Square Test for Question 1

Question 1. Whim would enable me to
accomplish tasks more quickly
Yes
39
No
9
Tabulated Chi square value at df = 1 and = 0.05
*O: Observed, E: Expected
O-E
(O-E)
24
24
15
-15
225
225
x2
3.84
(O-E)2
/E
9.38
9.38
18.75
53
Table 10 shows the chi square test for Question 1 which states that Whim
enables user to accomplish tasks more quickly. Using the observed (O) and expected
(E) frequencies, the chi square (x2) was computed. Since the computed chi square value
(18.75) is greater than the tabulated chi square value (3.84) with a degree of freedom
(df) equal to 1 and a level of significance equal to 0.05, the respondents had unequal
rating on this aspect of Whim.

Question 2. Whim would make it easier
O
to do my job
Yes
38
No
10
O-E
(O-E)
24
24
14
-14
196
196
x2
3.84
(O-E)2
/E
8.17
8.17
16.33

Table 11 shows the chi square test for Question 2 which states that Whim helps
user to do their jobs easier. Using the observed (O) and expected (E) frequencies, the
chi square (x2) was computed. Since the computed chi square value 16.33 is greater
than the tabulated square value (3.84) with a degree of freedom (df) equal to 1 and a
level of significance equal to 0.05, the respondents had an unequal rating on this
aspect of Whim.
54
Question 3. Whim saves me more time
O
when I use it
Yes
39
No
9
O-E
(O-E)
24
24
15
-15
225
225
x2
3.84
(O-E)2
/E
9.38
9.38
18.75

Table 12 shows the chi square test for Question 3 which states that Whim saves
the user more time when they use the software. Using the observed (O) and expected
(18.75) is greater than the tabulated square value (3.84) with a degree of freedom (df)
equal to 1 and a level of significance equal to 0.05, the respondents had unequal rating
on this aspect of Whim.

Question 4. Whim would enhance my
O
effectiveness for the job
Yes
36
No
12
E
24
24
3.84
O-E
12
-12
(O-E)
144
144
x2
(O-E)2
/E
6.00
6.00
12.00

enhances the users effectiveness. Using the observed (O) and expected (E)
frequencies, the chi square (x2) was computed. Since the computed chi square value
55

Question 5. Whim does everything I
O
expect it to do.
Yes
30
No
18
O-E
(O-E)
24
24
6
-6
36
36
x2
3.84
(O-E)2
/E
1.50
1.50
3.00

Table 14 shows the chi square test for Question 5 which states that Whim meets
the users minimum requirement for an effective IDE. Using the observed (O) and
expected (E) frequencies, the chi square (x2) was computed. Since the computed chi
square value (3.00) is less than the tabulated chi square value (3.84) with a degree of
freedom (df) equal to 1 and a level of significance equal to 0.05, the respondents had
equal rating on this aspect of Whim.

Question 6. Whim helps me to be
O
more productive.
Yes
42
No
6
O-E
(O-E)
24
24
18
-18
324
324
x2
3.84
(O-E)2
/E
13.50
13.50
27.00

Table 15 shows the chi square test for Question 6 which states that Whim helps
a user to be more productive. Using the observed (O) and expected (E) frequencies, the
chi square (x2) was computed. Since the computed chi square value (27.00) is greater
than the tabulated chi square value (3.84) with a degree of freedom (df) equal to 1 and a
56
level of significance equal to 0.05, the respondents had equal rating on this aspect of
Whim.

Question 7. Whim provides a familiar
O
working environment
Yes
44
No
4
O-E
(O-E)
24
24
20
-20
400
400
x2
3.84
(O-E)2
/E
16.67
16.67
33.33

provides a familiar working environment. Using the observed (O) and expected (E)
(df) equal to 1 and a level of significance equal to 0.05, the respondents had an unequal

Question 8. Whim looks pleasing
Yes
31
No
7
O-E
(O-E)
24
24
7
-17
49
289
x2
3.84
(O-E)2
/E
2.04
12.04
14.08

Table 17 shows the chi square test for Question 8 which states that Whim looks
aesthetically pleasing. Using the observed (O) and expected (E) frequencies, the chi
square (x2) was computed. Since the computed chi square value (14.08) is greater than
the tabulated chi square value (3.84) with a degree of freedom (df) equal to 1 and a level
57
of significance equal to 0.05, the respondents had an unequal rating on this aspect of
Whim.

Question 9. Whims layout is not
O
Complicated
Yes
45
No
3
O-E
(O-E)
24
24
21
-21
441
441
x2
3.84
(O-E)2
/E
18.38
18.38
36.75

provides a friendly user interface. Using the observed (O) and expected (E) frequencies,
the chi square (x2) was computed. Since the computed chi square value (36.75) is
greater than the tabulated chi square value (3.84) with a degree of freedom (df) equal to
1 and a level of significance equal to 0.05, the respondents had unequal rating on this
aspect of Whim.

Question 10. Whim provides easy-to-use
O
task oriented help
Yes
41
No
7
O-E
(O-E)
24
24
17
-17
289
289
x2
3.84
(O-E)2
/E
12.04
12.04
24.08

provides an easy-to-use help functions for different tasks. Using the observed (O) and
expected (E) frequencies, the chi square (x2) was computed. Since the computed chi
square value (24.08) is greater than the tabulated chi square value (3.84) with a degree
58
of freedom (df) equal to 1 and a level of significance equal to 0.05, the respondents had
unequal rating on this aspect of Whim.

Question 11. Whim is flexible to interact
O
with.
Yes
37
No
11
O-E
(O-E)
24
24
13
-13
169
169
x2
3.84
(O-E)2
/E
7.04
7.04
14.08

provides a flexible interaction with its users. Using the observed (O) and expected (E)

Question 12. Whim is designed for all
O
levels of users.
Yes
28
No
20
O-E
(O-E)
24
24
4
-4
16
16
x2
3.84
(O-E)2
/E
0.67
0.67
1.33

Table 21 shows the chi square test for Question 12 which states that Whim is
designed for all levels of users. Using the observed (O) and expected (E) frequencies,
the chi square (x2) was computed. Since the computed chi square value (1.33) is less
59
level of significance equal to 0.05, the respondents had unequal rating on this aspect
of Whim.

Question 13. Whim diagnoses the source
O
and cause of problems and suggests a
solution.
Yes
37
No
11
O-E
(O-E)
24
24
13
-13
169
169
x2
3.84
(O-E)2
/E
7.04
7.04
14.08

diagnoses a problem and provides the user a possible solution. Using the observed (O)
and expected (E) frequencies, the chi square (x2) was computed. Since the computed
chi square value (14.08) is greater than the tabulated chi square value (3.84) with a
degree of freedom (df) equal to 1 and a level of significance equal to 0.05, the
respondents had unequal rating on this aspect of Whim.

Question 14. Whim provides error
O
recoveries and reversal of actions.
Yes
44
No
4
E
24
24
O-E
20
-20
3.84
(O-E)
400
400
x2
(O-E)2
/E
16.67
16.67
33.33

provides error recoveries and reversal of actions. Using the observed (O) and expected
60

Question 15. Whim makes it difficult
O
to commit errors.
Yes
34
No
14
O-E
(O-E)
24
24
10
-10
100
100
x2
3.84
(O-E)2
/E
4.17
4.17
8.33

makes it difficult to commit errors. Using the observed (O) and expected (E) frequencies,
the chi square (x2) was computed. Since the computed chi square value (8.33) is greater
level of significance equal to 0.05, the respondents had unequal rating on this aspect of
Whim.
61
Table 25 Chi Square Distribution
Questions
Observed
Frequency
Yes
X2
No
1. Whim would enable me to accomplish tasks more

quickly.
39
18.75
2. Whim would make it easier to do my job.
38
10
16.33
3. Whim saves me time when I use it.
39
18.75
4. Whim would enhance my effectiveness on the job
36
12
12.00
5. Whim does everything I would expect it to do
30
18
3.00
6. Whim helps me be more productive
42
27.00
7. Whim provides a familiar development environment.
44
33.33
8. Whim looks pleasing.
31
14.08
9. Whims layout is not complicated.
45
36.75
10. Whim provides easy-to-use task-oriented help
41
24.08
11. Whim is flexible to interact with
37
11
14.08
12. Whim is designed for all levels of users
28
20
1.33
13. Whim diagnoses the source and cause of a problem

and suggest a solution.
37
11
14. Whim provides error recoveries and reversal of

actions.
44
15. Whim makes it difficult to commit errors.
34
14
14.08
33.33
8.33
*Expected values for YES and NO is 24 respectively

* Tabulated value with df = 1 and = 0.05 is 3.84
Table 25 shows the chi square distribution of all the questions. Responses
to questions 1 to 3, which pertain to Whims efficiency, are generally positive. Since the
computed chi square value is greater than the tabulated chi square value, the null
62
hypothesis is rejected. Therefore, the responses are unequal and there is a significant
difference between the observed and expected frequencies that cannot be due to
chance alone.
Responses to questions 4 to 6, which pertain to Whims effectiveness, are
generally positive. Since most of the computed chi square value is greater than the
tabulated chi square value, the null hypothesis is rejected. Therefore, most of the
responses are unequal and there is a significant difference between the observed
and expected frequencies that cannot be due to chance alone.
Responses to questions 7 to 9, which pertain to Whims aesthetics, are generally
positive. Since the computed chi square value is greater than the tabulated chi
square value, the null hypothesis is rejected. Therefore, the responses are unequal
and there is a significant difference between the observed and expected frequencies
that cannot be due to chance alone.
Responses to questions 10 to 12, which pertain to Whims user friendliness, are
generally positive. Since most of the computed chi square value is greater than the
tabulated chi square value, the null hypothesis is rejected. Therefore, most of the
responses are unequal and there is a significant difference between the observed
and expected frequencies that cannot be due to chance alone.
Lastly, responses to questions 13 to 15, which pertain to Whims error tolerance
are generally positive. Since the computed chi square value is greater than the
tabulated chi square value, the null hypothesis is rejected. Therefore, the responses
are unequal and there is a significant difference between the observed and expected
frequencies that cannot be due to chance alone.
All responses are generally positive. Because the computed chi square value is
greater than the tabulated value among most of the questions, the generally
positive responses are unlikely to result from sampling or experimental errors.
CHAPTER 5
SUMMARY OF FINDINGS, CONCLUSIONS AND RECOMMENDATIONS
This chapter discusses the result of the evaluation after the development of the
system.
This includes qualitative feedback from the respondents regarding the
software's usability, quantitative test results, conclusions, and further recommendations .
Summary of Findings
The researchers were able to collect information from 48 respondents, 30 of
which are male and 18 are female. Among the 48 respondents, 4 had 5 years of
experience, 5 had 4 years, 9 had 3 years, 12 had 2 and 18 had one year of experience
and 20 with a year of experience. All of them have used text editors, 42 have used IDEs
while none have used mobile editors before. 41 of them are familiar with JavaScript, 28
knows how to code in PHP and 17 in Ruby.
For the survey, the respondents had a generally positive feedback with Whims
efficiency, effectiveness, aesthetics, ease of use and error tolerance characteristics.
Most of the responses are unequal. Therefore, these positive responses are unlikely to
have resulted from chance.
Some of the issues found with the system are: lack of tooltips which explain what
a function does, lack of validation and interface reaction to what a user does and a steep
learning curve when you are a new Github user.
Positive feedback included a familiar interface, easy reversal of actions and a
reactive error detection mechanism. Feedbacks also included the efficient way of
running a JavaScript Application without the actual setup.
64
Conclusion
The study was aimed to develop a mobile integrated development environment
for JavaScript applications and view the factors affecting its usability according to five
factors (effectiveness, efficiency, aesthetics, ease of use and error tolerance). The
researchers were able to uncover some usability problems when using a mobile
JavaScript IDE and categorized them into four categories. These usability issues are
keys to improving the future version of the software.
Chi-square analysis revealed that the respondents had unequal ratings on
the software on most of the usability factors..
Therefore, the generally positive
responses are unlikely to have resulted from chance.
Recommendations
While the developers got positive feedback from the respondents regarding the
complexity and ingenuity of Whim, some recommendations were made. Below are the
researchers' recommendations:
Add extensive documentation of the software, to assist new users.
Add support for working with slow internet connection
Provide additional features such a code-completion to optimize workflow
Test a revised version of Whim to uncover more usability issues.
65
BIBLIOGRAPHY
Books
Albers, M. & Mazur, B. (2003). Content and complexity: Information design in
technical communication. London, United Kingdom: Routledge.
Carrington, D. (2004). Guide to the software engineering body of knowledge. Los
Alamitos, CA: IEEE Computer Society Press.
Martin, J. (1991). Rapid application development. New York, NY, USA: McMillan
Coll Div.
Nielsen, J. (1993). Usability engineering. San Francisco, CA, USA: Morgan
Kaufmann Publishers Inc.
Thesis
Amador, S., De Leon, A., Ramos, J, & Santos, D. (2013). RIANT: Web-based
development software for JavaScript-Based Rich Internet Applications.
Undergraduate Thesis. University of the East, Manila, Philippines.
Journals
Balakrishnan, V., & Yeow, P. (2008). A Study of the effect of thumb sizes on
mobile phone texting satisfaction. Journal of Usability Studies, (3)3, 118-128.
Bevan, N. (2001). International standards for HCI and usability. International
Journal of Human-Computer Studies, 55, 4.
Bunz, U. (2003). Website creation as a valuable exercise seven steps to
communicating significance online. The Technology Teacher, 63(5), 7-9.
Carstens, D., & Patterson, P. (2005). Usability study of travel websites. Journal of
Usability Studies, (1)1, 47-61.
Capistrano, E. (2013). Investigating product involvement issues for mobile phone
services: A study of Filipino mobile phone users. Philippine Management
Review, 20, 1-16.
66
Donner, J. (2008). Research approaches to mobile use in the developing world:

A review of the literature. The Information Society: An International Journal,
24(3), 140-159.
Gerpott, T. J. (2010). Impacts of mobile internet use intensity on the demand for
SMS and voice services of mobile network operators: An empirical multimethod study of German mobile internet customers. Telecommunications
Policy, 34, 430-449.
Kimiloglu, H., & Nasir, V. A. (2010). Discovering behavioral segments in the
mobile phone market. Journal of Consumer Marketing, 27(5), 401413.
Kline, R. B., & Seffah, A. (2005). Evaluation of integrated software development
environments: challenges and results from three empirical studies.
International Journal of Human-Computer Studies, 63(6), 607-627.
Liao, C. H., Tsou, C.W., & Huang, M.F. (2007). Factors influencing the usage of
3G mobile services in Taiwan. Online Information Review, 31(6), 759-774.
Mort, G., & Drennan, J. (2007). Mobile communications: A study of factors
influencing consumer use of m-services. Journal of Advertising Research,
47(3), 302-312.
Myers, B., Hudson, S. E., & Pausch, R. (2000). Past, present, and future of user
interface software tools. ACM Transactions on Computer-Human Interaction
(TOCHI) - Special issue on human-computer interaction in the new millennium,
Part 1, 7(1), 3-28.
Padda, H., Seffah, A., Donyaee, M., & Kline, R. (2006). Usability measurement
and metrics: A consolidated model. Software Quality Journal, 14, 159-178.
Skierkowski, D., & Wood, R. M. (2012). To text or not to text? The importance of
text messaging among college aged youth. Computers in Human Behavior,
28, 744-756.
Walsh, S. P., White, K. M., Cox, S., & Young, R. M. (2011). Keeping in touch:
The predictors of young Australians mobile phone involvement. Computers in
Human Behavior, 27, 333342.
Vora, P. (1998). Design/methods & tools: designing for the web: a survey.
Interaction, 5(3), 13-30.
Wallace, S., & Yu, H. (2009). The Effect of Culture on Usability: Comparing the
Perceptions and Performance of Taiwanese and North American MP3 Player
Users. Journal of Usability Studies, (4)3, 136-146.
Yoo, Y., Lyyitnen, K., & Yang, H. (2005). The role of standards in innovation and
diffusion of broadband mobile services: The case of South Korea. Journal of
Strategic Information Systems, 14, 323353.
67
Proceedings
Athreya, B., Bahmani, F., Diede, A. & Scaffidi, C. (2012). End-user programmers
on the loose: A study of programming on the phone for the phone. In M. Erwig,
G. Stapleton & G. Costagliola (eds.), VL/HCC (75-82), : IEEE. ISBN: 978-14673-0852-6 Retrieved from http://dblp.uni-trier.de/db/conf/vl/vlhcc2012.html#
AthreyaBDS12
De Sa, M., & Carrico, L. (2009). A mobile tool for in-situ prototyping. Proceedings
of the 11th International Conference on Human-Computer Interaction with
Mobile Devices and Services (1-4). Retrieved from
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.177.3507&rep=
rep1&type=pdf
Dorn, B., & Guzdial, M. (2010). Learning on the job: Characterizing the
programming knowledge and learning strategies of web designers.
Proceedings of the SIGCHI Conference on Human Factors in Computing
Systems (703-712). Atlanta, Georgia, USA: ACM. Retrieved from http://
dl.acm.org/ft_gateway.cfm?id=1753430
Fortuna, E., Anderson, O., Ceze, L., & Eggers, S. (2010). A limit study of
JavaScript parallelism, Proceedings of the IEEE International Symposium on
Workload Characterization (IISWC'10), 1-10. Washington, DC, USA: IEEE
Computer Society. Retrieved from http://homes.cs.washington.edu/~luisceze
publications/fortuna-iiswc2010.pdf
Henderson Jr., D. A. (1986). The Trillium user interface design environment.
Proceedings of the SIGCHI Conference on Human Factors in Computing
Systems (221-227). New York, NY, USA: ACM. Retrieved from http://dl.acm.org/
ft_gateway.cfm?id=22375
Joorabchi, M., Mesbah, A., & Kruchten, P. (2013), Real Challenges in Mobile
App Development, Proceedings of the ACM/IEEE International Symposium on
Empirical Software Engineering and Measurement (ESEM), 2013, 1524.
Retrieved from http://www.ece.ubc.ca/~amesbah/docs/mona-esem13.pdf
Kats, L. C., Vogelij, R. G., Kalleberg, K. T., & Vissler, E. (2012). Software
development environments on the web: A research agenda. Proceedings of
the ACM international symposium on New ideas, new paradigms, and
reflections on programming and software (99-116). New York, NY, USA: ACM.
Retrieved from http://dl.acm.org/ft_gateway.cfm?id=2384603
Lebresne, S., Richards, G., Ostlund, J., Wrigstad, T. & Vitek, J. (2009).
Understanding the dynamics of JavaScript, Proceedings for the 1st workshop
on Script to Program Evolution (STOP 09), 30-33. New York, NY, USA: ACM.
Retrieved from https://www.cs.purdue.edu/homes/jostlund/papers/ stop09.pdf
68
Pfleging, B., Bahamondez, E., Schmidt A., Hermes, M., & Nolte, J. (2010).
MobiDev: a mobile development kit for combined paper-based and in-situ
programming on the mobile phone, Proceedings of the 2010 CHI Symposium
on Extended Abstracts on Human Factors in Computing Systems (3733-3738).
Atlanta, Georgia, USA. Retrieved from http://www.hcilab.org/wp-content/
uploads/pfleging2010mobidev.pdf
Quint, V., & Vatton, I. (2007). Editing with style. Proceedings of the 2007 ACM
symposium on Document engineering (151-160). Winnipeg, Manitoba,
Canada: ACM. Retrieved from http://dl.acm.org/ft_gateway.cfm?id=1284460
Rosson, M. B., Ballin, J., & Rode, J. (2005). Who, what, and how: A survey of
informal and professional web developers. Proceedings of the 2005 IEEE
Symposium on Visual Languages and Human-Centric Computing (VLHCC '05)
(199-206). Washington, DC, USA: IEEE
Computer Society. Retrieved
from http://dl.dropbox.com/u/16760174/Papers/VLHCC05.pdf
Tillman, N., Moskal, M., de Halleux, J., Fahndrich, M., Bishop, J, Samuel, A., & T,
Xie. (2012). The Future of Teaching Programming is on Mobile Devices.
Proceedings of the 17th Annual Conference on Innovation and Technology in
Computer Science Education. (199-206). Retrieved from http://research.
microsoft.com/pubs/164416/TheFutureOfTeachingIsOnMobiledevices.pdf
Technical Reports
Globe Telecom, Inc. (2011). Annual Report.
Mikkonen, T., & Taivalsaari, A. (2007). Using JavaScript as a real programming
language. Technical Report SMLI TR-2007-168. Mountain View, CA: Sun
Microsystems, Inc. Retrieved from http://research.sun.com/techrep/2007/
smli_tr-2007-168.pdf
Mikkonen, T., & Taivalsaari, A. (2007). Web applications spaghetti code for the
21st century. Technical Report SMLI TR-2007-166. Mountain View, CA, USA:
Sun Microsystems, Inc. Retrieved from http://research.sun.com/techrep/2007/
smli_tr-2007-166.pdf
Philippine Long Distance Telephone, Co. (2013). Annual Report.
The Economic Intelligence Unit. (2010). Telecoms industry report: Philippines.
Retrieved from http://www.eiu.com/technology
69
Internet Resources
Corepartners. (2005). Rapid Application Development. Retrieved from
http://www.corepartners.com/pdf/rad.pdf
Ecma International. (2011, June). ECMAScript Language Specification.
Retrieved from http://www.ecma-international.org/publications/files/ECMAST/ECMA-262.pdf
International Organization for Standardization. (2011). International Standard
ISO/IEC 25010-2011: Systems and software engineering - Systems and
software quality requirements and evaluation (SQuaRE) - System and
software quality models. Retrieved from http://www.iso.org/iso/iso_catalogue/
catalogue_tc/catalogue_detail.htm?csnumber=35733
Khalaf, S. (2013). Flurry Five-Year Report: Its an App World. The Web Just
Lives in It. Retrieved from http://blog.flurry.com/bid/95723/Flurry-Five-YearReport-It-s-an-App-World-The-Web-Just-Lives-in-It
Quesenbery, W. (2003). What Does Usability Mean: Looking Beyond Ease of
Use. Retrieved from http://www.wqusability.com/articles/more-than-ease-ofuse.html
Vance, A. (2010). Revamped Microsoft Office Will Be Free on the Web.
Retrieved from http://www.nytimes.com/201005/12/technology/12soft.html
Vserv. (2013). Mobile-Internet-Consumer-Philippines. Retrieved from http://
www.vserv.mobi/wp-content/uploads/2013/09/Mobile-Internet-ConsumerPhilippines.pdf
W3Techs. (2014). Usage of client-side programming languages for website.
Retrieved from http://w3techs.com/technologies/overview/client_side_
language/all
World Wide Web Consortium. (2008). Cascading style sheets, level 1. Retrieved
from http://www.w3.org/TR/REC-CSS1/
World Wide Web Consortium. (2012). XHTML2 working group home page.
Retrieved from http://www.w3.org/MarkUp/
___________________________
Librarians Signature
70
APPENDIX A PERFORMANCE MEASURES
This is a guide in creating various applications using Whim. The applications
should be able to make use of different functionalities the mobile IDE provides:
1. Print a simple string in the console.
2. Create applications using different control structures.
3. Manage files using the project explorer.
4. Use different JavaScript frameworks to scaffold an application.
Account Setup (1 minute)

1. Register or Login using your GitHub account.
2. Authorize GitHub to access to user information (note: you will to do this
once.)
Create and Load a Project (1 minute)

1. Create a new project (from scratch or using a pre-structured project).
2. Load the project to the code-editor.
Completing tasks
1. Output Hello World! (20 seconds).
2. Print first N numbers of Fibonacci sequence (1 minute).
3. Build a console-based rock-paper-scissors game (10 minutes).
4. Scaffold a single page application project using a front-end JavaScript
framework and define at least three or more routes. (3 minutes).
5. Scaffold a server-side JavaScript project using a NodeJS framework and
define at least three or more routes (3 minutes).
71
APPENDIX B SURVEY FORM

Name (optional): ____________________________________________
Years of Experience: _____
Web Technologies Used:
Software Used:
Gender:
Male
JavaScript
Female
PHP
Ruby
Text Editor (Vim, Emacs, Notepad++)

IDE (Eclipse, Netbeans etc)
Mobile (TouchDevelop, DroidEdit, etc.)
Questions
Yes
No
Efficiency
16. Whim would enable me to accomplish tasks more quickly.
a.
17. Whim would make it easier to do my job.
a.
18. Whim saves me time when I use it.
a.
Effectiveness
19. Whim would enhance my effectiveness on the job
a.
20. Whim does everything I would expect it to do
a.
21. Whim helps me be more productive
a.
Engaging
22. Whim provides a familiar development environment.
a.
23. Whim looks pleasing.
a.
24. Whims layout is not complicated.
a.
Ease of use
25. Whim provides easy-to-use task-oriented help
a.
72
26. Whim is flexible to interact with

27. Whim is designed for all levels of users
a.
a.
b.
28. Whim diagnoses the source and cause of a problem and

suggest a solution.
a.
b.
29. Whim provides error recoveries and reversal of actions.
a.
b.
30. Whim makes it difficult to commit errors.
a.
b.
Error Tolerant
73

Whim - Hardbound For Hardbound - v1 PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Whim - Hardbound For Hardbound - v1 PDF

Caricato da

Copyright:

Formati disponibili

Whim: A Mobile Integrated Development Environment

For JavaScript Applications

September 14, 2014

This research is dedicated to our families. A special feeling of gratitude to our

The study is about Whim, a mobile integrated development environment for

Software Process Model ............................................................................ 30

Requirements Gathering and Project Planning Phase .............................. 31

System Design Phase ................................................................................ 31

Development Phase ................................................................................... 32

Software Framework .............................................................................................. 39

Table 1. Some features of an Integrated Development Environment.............................. 10

Figure 1. A screenshot of Touchqode .............................................................................. 13

effectiveness, aesthetics, ease of use and error tolerance of the software

Web Development Students and Teachers

Web Development Process

Flaws of Existing Web Development Process

evidenced by the growing trends and movements in the market

Integrated Development Environments

Intellisense (Code completion)

Completes the code before the user

Source File Management

Lists all the files, folders and structure of

Highlights a languages reserved words

Automatically indents and formats the

Find and replace text

Automated finding and/or replacing of a

Table 1 lists the common features implemented on most Integrated Development

The outcome is an IDE that lets the users develop

applications designed for Android Smart Phones.

TouchDevelop is a programming environment enabling users use their phones to create

Figure 1. A screenshot of Touchqode

Figure 2. A screenshot of DeuterIDE

Figure 3. A screenshot of DroidEdit

Figure 4. A screenshot of TouchDevelop

Table 2. Usability attributes of various models

Table 3. Sub-characteristics of usability as defined by Quesenbery

The completeness and accuracy with

The speed (with accuracy) with which this

How pleasant, satisfying or interesting an

How well the product prevents errors, and

How well the product supports both initial

Table 3 lists sub-characteristics of usability according to the 5Es of usability

Data collection by observing the users

Data collection by the users verbal report

Data collection using users thought

Data collection using question items that

Data collection by one or more videos

Auto Data-Logging Program

Data collection by auto-logging programs

Data collection using a software designed

Heuristic Evaluation Methods

To use a predefined list of heuristics to

Formal Usability Inspections

To test within the context of specific user

An experimental test to prove or disprove

To test the ease of learning to use product

Formal Design Analysis

To test the understanding of the task

Whim and Usability of IDEs

Figure 5. An Input Process Output Diagram

Software Design and Development Approach

Figure 6. Rapid Application Development Model