research-article

Unravel: Rapid Web Application Reverse Engineering via Interaction Recording, Source Tracing, and Library Detection

Authors:

Joshua Hibschman,

Haoqi ZhangAuthors Info & Claims

UIST '15: Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology

Pages 270 - 279

https://doi.org/10.1145/2807442.2807468

Published: 05 November 2015 Publication History

Abstract

Professional websites with complex UI features provide real world examples for developers to learn from. Yet despite the availability of source code, it is still difficult to understand how these features are implemented. Existing tools such as the Chrome Developer Tools and Firebug offer debugging and inspection, but reverse engineering is still a time consuming task. We thus present Unravel, an extension of the Chrome Developer Tools for quickly tracking and visualizing HTML changes, JavaScript method calls, and JavaScript libraries. Unravel injects an observation agent into websites to monitor DOM interactions in real-time without functional interference or external dependencies. To manage potentially large observations of events, the Unravel UI provides affordances to reduce, sort, and scope observations. Testing Unravel with 13 web developers on 5 large-scale websites, we found a 53% decrease in time to discovering the first key source behind a UI feature and a 32% decrease in time to understanding how to fully recreate a feature.

Supplementary Material

MP4 File (p270.mp4)

Download
73.57 MB

References

[1]

Saba Alimadadi, Sheldon Sequeira, Ali Mesbah, and Karthik Pattabiraman. 2014. Understanding JavaScript event-based interactions. In Proceedings of the 36th International Conference on Software Engineering. ACM, 367--377.

Digital Library

[2]

John J Barton and Jan Odvarko. 2010. Dynamic and graphical web page breakpoints. In Proceedings of the 19th international conference on World wide web. ACM, 81--90.

Digital Library

[3]

Matthew Berland, Taylor Martin, Tom Benton, Carmen Petrick Smith, and Don Davis. 2013. Using learning analytics to understand the learning pathways of novice programmers. Journal of the Learning Sciences 22, 4 (2013), 564--599.

[4]

Joel Brandt, Philip J Guo, Joel Lewenstein, Mira Dontcheva, and Scott R Klemmer. 2009. Two studies of opportunistic programming: interleaving web foraging, learning, and writing code. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 1589--1598.

Digital Library

[5]

Simon Breslav, Azam Khan, and Kasper Hornbæk. 2014. Mimic: visual analytics of online micro-interactions. In Proceedings of the 2014 International Working Conference on Advanced Visual Interfaces. ACM, 245--252.

Digital Library

[6]

Brian Burg. 2013. Answering program understanding questions on demand with task-specific runtime information. In Visual Languages and Human-Centric Computing (VL/HCC), 2013 IEEE Symposium on. IEEE, 167--168.

[7]

Brian Burg, Richard Bailey, Andrew J Ko, and Michael D Ernst. 2013. Interactive record/replay for web application debugging. In Proceedings of the 26th annual ACM symposium on User interface software and technology. ACM, 473--484.

Digital Library

[8]

Kerry Shih-Ping Chang and Brad A Myers. 2012. WebCrystal: understanding and reusing examples in web authoring. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 3205--3214.

Digital Library

[9]

Pierre Dragicevic, Stéphane Huot, and Fanny Chevalier. 2011. Gliimpse: Animating from markup code to rendered documents and vice versa. In Proceedings of the 24th annual ACM symposium on User interface software and technology. ACM, 257--262.

Digital Library

[10]

James R Eagan, Michel Beaudouin-Lafon, and Wendy E Mackay. 2011. Cracking the cocoa nut: user interface programming at runtime. In Proceedings of the 24th annual ACM symposium on User interface software and technology. ACM, 225--234.

Digital Library

[11]

Paul Gross and Caitlin Kelleher. 2010. Non-programmers identifying functionality in unfamiliar code: strategies and barriers. Journal of Visual Languages & Computing 21, 5 (2010), 263--276.

Digital Library

[12]

Paul Gross, Jennifer Yang, and Caitlin Kelleher. 2011. Dinah: An interface to assist non-programmers with selecting program code causing graphical output. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 3397--3400.

Digital Library

[13]

Ariya Hidayat. 2015. Detecting JavaScript Libraries and Versions. Don't Code Today What You Can't Debug Tomorrow. (2015). http://ariya.ofilabs.com/2013/ 07/detecting-js-libraries-versions.html

[14]

Raphael Hoffmann, James Fogarty, and Daniel S Weld. 2007. Assieme: finding and leveraging implicit references in a web search interface for programmers. In Proceedings of the 20th annual ACM symposium on User interface software and technology. ACM, 13--22.

Digital Library

[15]

Andrew Jensen Ko, Brad A Myers, and Htet Htet Aung. 2004. Six learning barriers in end-user programming systems. In Visual Languages and Human Centric Computing, 2004 IEEE Symposium on. IEEE, 199--206.

Digital Library

[16]

Tom Lieber, Joel R Brandt, and Rob C Miller. 2014. Addressing misconceptions about code with always-on programming visualizations. In Proceedings of the 32nd annual ACM conference on Human factors in computing systems. ACM, 2481--2490.

Digital Library

[17]

Einar Lielmanis. 2015. Beautify-web/js-beautify. (2015). https://github.com/beautify-web/js-beautify

[18]

Josip Maras, Jan Carlson, and Ivica Crnkovi. 2012. Extracting client-side web application code. In Proceedings of the 21st international conference on World Wide Web. ACM, 819--828.

Digital Library

[19]

Stephen Oney and Brad Myers. 2009. FireCrystal: Understanding interactive behaviors in dynamic web pages. In Visual Languages and Human-Centric Computing, 2009. VL/HCC 2009. IEEE Symposium on. IEEE, 105--108.

Digital Library

[20]

David Williamson Shaffer and Mitchel Resnick. 1999. -- Thick Authenticity: New Media and Authentic Learning. Journal of interactive learning research 10, 2 (1999), 195--215.

Digital Library

[21]

Steve Souders. 2008. High-performance web sites. Commun. ACM 51, 12 (2008), 36--41.

Digital Library

[22]

Bipin Upadhyaya, Foutse Khomh, and Ying Zou. 2012. Extracting RESTful services from Web applications. In SOCA. 1--4.

Digital Library

Cited By

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
Matos GCosta DLins ABezerra EBarroso LAguiar CFerraz TTeixeira I(2023)Watson: Web Application Interface Data Collector for Feedback Reporting2023 IEEE 30th Annual Software Technology Conference (STC)10.1109/STC58598.2023.00007(3-6)Online publication date: 25-Sep-2023
https://doi.org/10.1109/STC58598.2023.00007
Chaqfeh MCoke RHu JHashmi WSubramanian LRahwan TZaki Y(2022)JSAnalyzer: A Web Developer Tool for Simplifying Mobile Web Pages through Non-critical JavaScript EliminationACM Transactions on the Web10.1145/355035816:4(1-31)Online publication date: 16-Nov-2022
https://dl.acm.org/doi/10.1145/3550358
Show More Cited By

Index Terms

Unravel: Rapid Web Application Reverse Engineering via Interaction Recording, Source Tracing, and Library Detection
1. Human-centered computing
  1. Human computer interaction (HCI)

Recommendations

Telescope: Fine-Tuned Discovery of Interactive Web UI Feature Implementation
UIST '16: Proceedings of the 29th Annual Symposium on User Interface Software and Technology

Professional websites contain rich interactive features that developers can learn from, yet understanding their implementation remains a challenge due to the nature of unfamiliar code. Existing tools provide affordances to analyze source code, but ...
Understanding Ajax applications by connecting client and server-side execution traces

Ajax-enabled Web applications are a new breed of highly interactive, highly dynamic Web applications. Although Ajax allows developers to create rich Web applications, Ajax applications can be difficult to comprehend and thus to maintain. For this reason,...
Rapid Web Application Development: A Ruby on Rails Tutorial

Ruby on Rails is a powerful Web application development framework based on the dynamic object-oriented programming language Ruby. With several popular Web sites based on it, its prominence is rapidly rising. Ruby on Rails fully supports Web 2.0 and Web ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

UIST '15: Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology

November 2015

686 pages

ISBN:9781450337793

DOI:10.1145/2807442

General Chair:
Celine Latulipe
UNC Charlotte, USA
,
Program Chairs:
Bjoern Hartmann
UC Berkeley, USA
,
Tovi Grossman
Autodesk Research, Canada

Copyright © 2015 ACM.

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].

Sponsors

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 05 November 2015

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

UIST '15

Sponsor:

UIST '15: The 28th Annual ACM Symposium on User Interface Software and Technology

November 11 - 15, 2015

NC, Charlotte, USA

Acceptance Rates

UIST '15 Paper Acceptance Rate 70 of 297 submissions, 24%;

Overall Acceptance Rate 561 of 2,567 submissions, 22%

Upcoming Conference

UIST '25

Sponsor:
sigchi
sigchi

The 38th Annual ACM Symposium on User Interface Software and Technology

September 28 - October 1, 2025

Busan , Republic of Korea

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

23
Total Citations
View Citations
469
Total Downloads

Downloads (Last 12 months)16
Downloads (Last 6 weeks)0

Reflects downloads up to 25 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

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
Matos GCosta DLins ABezerra EBarroso LAguiar CFerraz TTeixeira I(2023)Watson: Web Application Interface Data Collector for Feedback Reporting2023 IEEE 30th Annual Software Technology Conference (STC)10.1109/STC58598.2023.00007(3-6)Online publication date: 25-Sep-2023
https://doi.org/10.1109/STC58598.2023.00007
Chaqfeh MCoke RHu JHashmi WSubramanian LRahwan TZaki Y(2022)JSAnalyzer: A Web Developer Tool for Simplifying Mobile Web Pages through Non-critical JavaScript EliminationACM Transactions on the Web10.1145/355035816:4(1-31)Online publication date: 16-Nov-2022
https://dl.acm.org/doi/10.1145/3550358
Hashmi WChaqfeh MSubramanian LZaki Y(2022)QLUE: A Computer Vision Tool for Uniform Qualitative Evaluation of Web PagesProceedings of the ACM Web Conference 202210.1145/3485447.3512112(2400-2410)Online publication date: 25-Apr-2022
https://dl.acm.org/doi/10.1145/3485447.3512112
Samudio DLaToza T(2022)Barriers in Front-End Web Development2022 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VL/HCC53370.2022.9833127(1-11)Online publication date: 12-Sep-2022
https://doi.org/10.1109/VL/HCC53370.2022.9833127
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: 31-Mar-2022
https://doi.org/10.1007/s11390-022-0673-4
Chen YGrossman T(2021)Umitation: Retargeting UI Behavior Examples for Website DesignThe 34th Annual ACM Symposium on User Interface Software and Technology10.1145/3472749.3474796(922-935)Online publication date: 10-Oct-2021
https://dl.acm.org/doi/10.1145/3472749.3474796
Chen YLee SOney SKitamura YQuigley AIsbister KIgarashi TBjørn PDrucker S(2021)CoCapture: Effectively Communicating UI Behaviors on Existing Websites by Demonstrating and RemixingProceedings of the 2021 CHI Conference on Human Factors in Computing Systems10.1145/3411764.3445573(1-14)Online publication date: 6-May-2021
https://dl.acm.org/doi/10.1145/3411764.3445573
Nejati JBalasubramanian A(2020)WProfX: A Fine-grained Visualization Tool for Web Page LoadsProceedings of the ACM on Human-Computer Interaction10.1145/33949754:EICS(1-22)Online publication date: 18-Jun-2020
https://dl.acm.org/doi/10.1145/3394975
Hibschman JGergle DO’Rourke EZhang H(2019)IsoplethACM Transactions on Computer-Human Interaction10.1145/331027426:3(1-42)Online publication date: 24-Apr-2019
https://dl.acm.org/doi/10.1145/3310274
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.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Figures

Tables

Media

View Table of Conten