research-article

Understanding JavaScript event-based interactions

Authors:

Saba Alimadadi,

Sheldon Sequeira,

Ali Mesbah,

Karthik PattabiramanAuthors Info & Claims

ICSE 2014: Proceedings of the 36th International Conference on Software Engineering

Pages 367 - 377

https://doi.org/10.1145/2568225.2568268

Published: 31 May 2014 Publication History

Get Access

Abstract

Web applications have become one of the fastest growing types of software systems today. Despite their popularity, understanding the behaviour of modern web applications is still a challenging endeavour for developers during development and maintenance tasks. The challenges mainly stem from the dynamic, event-driven, and asynchronous nature of the JavaScript language. We propose a generic technique for capturing low-level event-based interactions in a web application and mapping those to a higher-level behavioural model. This model is then transformed into an interactive visualization, representing episodes of triggered causal and temporal events, related JavaScript code executions, and their impact on the dynamic DOM state. Our approach, implemented in a tool called Clematis, allows developers to easily understand the complex dynamic behaviour of their application at three different semantic levels of granularity. The results of our industrial controlled experiment show that Clematis is capable of improving the task accuracy by 61%, while reducing the task completion time by 47%.

References

[1]

Clematis. http://salt.ece.ubc.ca/software/clematis/.

Google Scholar

[2]

Phormer PHP photo gallery. http://p.horm.org/er/.

Google Scholar

[3]

S. Alimadadi, S. Sequeira, A. Mesbah, and K. Pattabiraman. Understanding JavaScript event-based interactions. Technical Report UBC-SALT-2014-001, University of British Columbia, 2014. http://salt.ece.ubc.ca/publications/docs/ UBC-SALT-2014-001.pdf.

Google Scholar

[4]

D. Amalfitano, A. Fasolino, A. Polcaro, and P. Tramontana. The DynaRIA tool for the comprehension of Ajax web applications by dynamic analysis. Innovations in Systems and Software Engineering, pages 41–57, 2014.

Digital Library

Google Scholar

[5]

S. Andrica and G. Candea. WaRR: A tool for high-fidelity web application record and replay. In Proceedings of the International Conference on Dependable Systems & Networks (DSN), pages 403––410. IEEE Computer Society, 2011.

Digital Library

Google Scholar

[6]

B. Burg, R. Bailey, A. J. Ko, and M. D. Ernst. Interactive record/replay for web application debugging. In Proceedings of the Symposium on User Interface Software and Technology (UIST), pages 473–484. ACM, 2013.

Digital Library

Google Scholar

[7]

A. Cockburn, A. Karlson, and B. B. Bederson. A review of overview+detail, zooming, and focus+context interfaces. ACM Computing Surveys, 41(1):2:1–2:31, 2009.

Digital Library

Google Scholar

[8]

T. A. Corbi. Program understanding: Challenge for the 1990s. IBM Systems Journal, 28(2):294–306, 1989.

Digital Library

Google Scholar

[9]

B. Cornelissen, A. Zaidman, and A. van Deursen. A controlled experiment for program comprehension through trace visualization. IEEE Transactions on Software Engineering, 37(3):341–355, 2011.

Digital Library

Google Scholar

[10]

B. Cornelissen, A. Zaidman, A. van Deursen, L. Moonen, and R. Koschke. A systematic survey of program comprehension through dynamic analysis. IEEE Transactions on Software Engineering, 35(5):684–702, 2009.

Digital Library

Google Scholar

[11]

R. Gentleman and R. Ihaka. The R project for statistical computing. http://www.r-project.org.

Google Scholar

[12]

Google. Mutation Summary Library. http://code.google.com/p/mutation-summary/.

Google Scholar

[13]

P. Li and E. Wohlstadter. Script InSight: Using models to explore JavaScript code from the browser view. In Proceedings of the 9th International Conference on Web Engineering (ICWE), pages 260–274. Springer-Verlag, 2009.

Digital Library

Google Scholar

[14]

J. Maras, J. Carlson, and I. Crnkovi. Extracting client-side web application code. In Proceedings of the International Conference on World Wide Web (WWW), pages 819–828. ACM, 2012.

Digital Library

Google Scholar

[15]

J. Maras, M. Stula, and J. Carlson. Generating feature usage scenarios in client-side web applications. In Proceeding of the International Conference on Web Engineering (ICWE), pages 186–200. Springer, 2013.

Digital Library

Google Scholar

[16]

J. Mickens, J. Elson, and J. Howell. Mugshot: Deterministic capture and replay for Javascript applications. In Proceedings of the 7th USENIX Conference on Networked Systems Design and Implementation, NSDI’10, pages 159–174. USENIX Association, 2010.

Digital Library

Google Scholar

[17]

P. Montoto, A. Pan, J. Raposo, F. Bellas, and J. López. Automating navigation sequences in Ajax websites. In Proceedings of the International Conference on Web Engineering (ICWE), pages 166–180. Springer, 2009.

Digital Library

Google Scholar

[18]

F. Ocariza, K. Bajaj, K. Pattabiraman, and A. Mesbah. An empirical study of client-side JavaScript bugs. In Proceedings of the ACM/IEEE International Symposium on Empirical Software Engineering and Measurement (ESEM), pages 55–64. IEEE Computer Society, 2013.

Google Scholar

[19]

S. Oney and B. Myers. FireCrystal: Understanding interactive behaviors in dynamic web pages. In Proceedings of the Symposium on Visual Languages and Human-Centric Computing, pages 105–108. IEEE Computer Society, 2009.

Digital Library

Google Scholar

[20]

M. J. Pacione, M. Roper, and M. Wood. A novel software visualisation model to support software comprehension. In Proceedings of the Working Conference on Reverse Engineering, pages 70–79. IEEE Computer Society, 2004.

Digital Library

Google Scholar

[21]

K. Sen, S. Kalasapur, T. Brutch, and S. Gibbs. Jalangi: a selective record-replay and dynamic analysis framework for JavaScript. In Proceedings of the Joint Meeting on Foundations of Software Engineering, ESEC/FSE 2013, pages 488–498. ACM, 2013.

Digital Library

Google Scholar

[22]

W3C. Document Object Model (DOM) level 2 events specification. http://www.w3.org/TR/DOM-Level-2-Events/, 13 November 2000.

Google Scholar

[23]

C. Wohlin, P. Runeson, M. Höst, M. C. Ohlsson, B. Regnell, and A. Wesslén. Experimentation in software engineering: an introduction. Kluwer, 2000.

Digital Library

Google Scholar

[24]

A. Zaidman, N. Matthijssen, M.-A. Storey, and A. van Deursen. Understanding Ajax applications by connecting client and server-side execution traces. Empirical Software Engineering, 18(2):181–218, 2013.

Digital Library

Google Scholar

Cited By

View all

Chiou PWinn RAlotaibi AHalfond WRoychoudhury APaiva AAbreu RStorey M(2024)Automatically Detecting Reflow Accessibility Issues in Responsive Web PagesProceedings of the IEEE/ACM 46th International Conference on Software Engineering10.1145/3597503.3639229(1-13)Online publication date: 20-May-2024
https://dl.acm.org/doi/10.1145/3597503.3639229
Huang RGuo PLerner S(2024)UNFOLD: Enabling Live Programming for Debugging GUI Applications2024 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VL/HCC60511.2024.00041(306-316)Online publication date: 2-Sep-2024
https://doi.org/10.1109/VL/HCC60511.2024.00041
Masoudian MHuang HAmini MZhang C(2024)Mole: Efficient Crash Reproduction in Android Applications With Enforcing Necessary UI EventsIEEE Transactions on Software Engineering10.1109/TSE.2024.342854350:8(2200-2218)Online publication date: 1-Aug-2024
https://dl.acm.org/doi/10.1109/TSE.2024.3428543
Show More Cited By

Index Terms

Understanding JavaScript event-based interactions
1. Social and professional topics
  1. Professional topics
    1. Management of computing and information systems
      1. Software management
        Software maintenance
2. Software and its engineering
  1. Software creation and management
    1. Software post-development issues
    2. Software verification and validation
      1. Software defect analysis
        Software testing and debugging

Recommendations

Understanding JavaScript Event-Based Interactions with Clematis

Web applications have become one of the fastest-growing types of software systems today. Despite their popularity, understanding the behavior of modern web applications is still a challenging endeavor for developers during development and maintenance ...
Understanding asynchronous interactions in full-stack JavaScript
ICSE '16: Proceedings of the 38th International Conference on Software Engineering

JavaScript has become one of the most popular languages in practice. Developers now use JavaScript not only for the client-side but also for server-side programming, leading to "full-stack" applications written entirely in JavaScript. Understanding such ...
Static analysis of event-driven Node.js JavaScript applications
OOPSLA '15

Many JavaScript programs are written in an event-driven style. In particular, in server-side Node.js applications, operations involving sockets, streams, and files are typically performed in an asynchronous manner, where the execution of listeners is ...

Reviews

Reviewer: Bayard Kohlhepp

This is the kind of paper I love. The authors identify a problem, describe the solution, and provide links to downloadable software that implements that solution. I realize not every paper can, or should, do this; we need surveys and experimental results, even for failures. But finding one of these downloadable treasures is like finding a four-leaf clover. The problem in this case is the complexity of JavaScript websites. Asynchronicity, feature-rich third-party libraries, and complex user interfaces (UI) all conspire to create unreadable and unmaintainable web page code. Eventually, one more straw breaks the camel's back and we just can't figure out how to repair the site. The authors have developed a tool named Clematis to record web application interactions and play back and graphically model interactions between events, code, and the document object model (DOM, the underlying “page” being manipulated). This visualization identifies causal relationships, highlighting relationships between events and code execution. The authors quantify improvements of 61 percent in accuracy and 47 percent in task completion time for typical web application development and debugging. The paper is quite readable, one of the better documents I have encountered recently, and only 11 pages long. The results and downloads are useful to any JavaScript developer who would like to reduce their debugging time. However, even developers who work in other interpreted languages should review the authors' approach; it could conceivably be used to create similar tools for their native environments. Online Computing Reviews Service

Access critical reviews of Computing literature here

Become a reviewer for Computing Reviews.

Comments

Information & Contributors

Information

Published In

ICSE 2014: Proceedings of the 36th International Conference on Software Engineering

May 2014

1139 pages

ISBN:9781450327565

DOI:10.1145/2568225

General Chair:
Pankaj Jalote
IIIT-Delhi, India
,
Program Chairs:
Lionel Briand
University of Luxembourg, Luxembourg
,
André van der Hoek
University of California, Irvine, USA

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

In-Cooperation

TCSE: IEEE Computer Society's Tech. Council on Software Engin.

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 31 May 2014

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

ICSE '14

Sponsor:

SIGSOFT

ICSE '14: 36th International Conference on Software Engineering

May 31 - June 7, 2014

Hyderabad, India

Acceptance Rates

Overall Acceptance Rate 276 of 1,856 submissions, 15%

Upcoming Conference

ICSE 2025

2025 IEEE/ACM 46th International Conference on Software Engineering

April 26 - May 3, 2025

Ottawa , ON , Canada

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

50
Total Citations
View Citations
1,189
Total Downloads

Downloads (Last 12 months)72
Downloads (Last 6 weeks)7

Reflects downloads up to 06 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

View all

Chiou PWinn RAlotaibi AHalfond WRoychoudhury APaiva AAbreu RStorey M(2024)Automatically Detecting Reflow Accessibility Issues in Responsive Web PagesProceedings of the IEEE/ACM 46th International Conference on Software Engineering10.1145/3597503.3639229(1-13)Online publication date: 20-May-2024
https://dl.acm.org/doi/10.1145/3597503.3639229
Huang RGuo PLerner S(2024)UNFOLD: Enabling Live Programming for Debugging GUI Applications2024 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VL/HCC60511.2024.00041(306-316)Online publication date: 2-Sep-2024
https://doi.org/10.1109/VL/HCC60511.2024.00041
Masoudian MHuang HAmini MZhang C(2024)Mole: Efficient Crash Reproduction in Android Applications With Enforcing Necessary UI EventsIEEE Transactions on Software Engineering10.1109/TSE.2024.342854350:8(2200-2218)Online publication date: 1-Aug-2024
https://dl.acm.org/doi/10.1109/TSE.2024.3428543
Ganji MAlimadadi STip FChandra SBlincoe KTonella P(2023)Code Coverage Criteria for Asynchronous ProgramsProceedings of the 31st ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering10.1145/3611643.3616292(1307-1319)Online publication date: 30-Nov-2023
https://dl.acm.org/doi/10.1145/3611643.3616292
Jiang PSun FXia H(2023)Log-it: Supporting Programming with Interactive, Contextual, Structured, and Visual LogsProceedings of the 2023 CHI Conference on Human Factors in Computing Systems10.1145/3544548.3581403(1-16)Online publication date: 19-Apr-2023
https://dl.acm.org/doi/10.1145/3544548.3581403
Lima SMorla RRoutar JAl Hasan MXiong L(2022)JavaScript&Me, A Tool to Support Research into Code Transformation and Browser SecurityProceedings of the 31st ACM International Conference on Information & Knowledge Management10.1145/3511808.3557620(4224-4228)Online publication date: 17-Oct-2022
https://dl.acm.org/doi/10.1145/3511808.3557620
Long YChen YChen XShi XZhou F(2022)Test-Driven Feature Extraction of Web ComponentsJournal of Computer Science and Technology10.1007/s11390-022-0673-437:2(389-404)Online publication date: 1-Apr-2022
https://dl.acm.org/doi/10.1007/s11390-022-0673-4
Ricca FStocco A(2021)Web Test Automation: Insights from the Grey LiteratureSOFSEM 2021: Theory and Practice of Computer Science10.1007/978-3-030-67731-2_35(472-485)Online publication date: 25-Jan-2021
https://dl.acm.org/doi/10.1007/978-3-030-67731-2_35
Jung KGascon‐Samson JGoyal SRezaiean‐Asel APattabiraman K(2020)ThingsMigrate: Platform‐independent migration of stateful JavaScript Internet of Things applicationsSoftware: Practice and Experience10.1002/spe.293651:1(117-155)Online publication date: 5-Dec-2020
https://doi.org/10.1002/spe.2936
Sun HBonetta DSchiavio FBinder WKandemir MJimborean AMoseley T(2019)Reasoning about the Node.js event loop using async graphsProceedings of the 2019 IEEE/ACM International Symposium on Code Generation and Optimization10.5555/3314872.3314882(61-72)Online publication date: 16-Feb-2019
https://dl.acm.org/doi/10.5555/3314872.3314882
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Cited By

Index Terms

Recommendations