Overcoming Barriers in Front-End Web Development

Front-end web developers frequently encounter challenges such as asynchronous behaviors and complex API interactions, often due to barriers in programming and debugging interfaces that obscure the relationship between code and its execution. These challenges, highlighted in Stack Overflow posts, emphasize the difficulties in modifying existing code and navigating through code idioms—distinct code patterns with similar semantics. For example, the semantics of System.out.println() and console.log() pertain to externalizing internal data. Our analysis of these posts has led to the categorization of API interactions into a set of idioms and the identification of associated barriers, revealing a clear need for tools that can trace, scrub, and search across the execution to locate visual elements or runtime values without losing their linkage to the corresponding code. SeeCode.Run, an innovative online IDE, directly tackles these needs with features like per-expression always-on execution recording and interactive visualizations that bring to light execution facts about code. This integration of live programming and debugging techniques provides developers with in-editor widgets for immediate execution insights, facilitating code fact-checking and continuous editing. Its omniscient search capability and scope navigation enable developers to effortlessly understand and manage the myriad of framework interactions, addressing barriers like silent invalid references, unclear scopes, and the tracking of state changes within asynchronous flows. The effectiveness of SeeCode.Run's fact-driven approach was empirically tested against CodePen, a standard in online live programming IDEs. This comparison demonstrated that developers using SeeCode.Run experienced a significant reduction in task completion time and an increase in success rates, validating the platform's potential to overcome front-end development challenges and enhance productivity through a more intuitive workflow.

Author

• Gonzalez Samudio, David Ignacio

• debugging
• empirical studies
• live programming
• software comprehension
• user experience

Identifier

hdl:1920/13880

OAI identifier oai:identifier

oai:MARS:1920/13880