Varis: IDE Support for Embedded Client Code in PHP Web Applications

Abstract

Abstract-In software development, IDE services such as syntax highlighting, code completion, and "jump to declaration" are used to assist developers in programming tasks. In dynamic web applications, however, since the client-side code is dynamically generated from the server-side code and is embedded in the server-side program as string literals, providing IDE services for such embedded code is challenging. In this work, we introduce Varis, a tool that provides editor services on the client-side code of a PHP-based web application, while it is still embedded within server-side code. Technically, we first perform symbolic execution on a PHP program to approximate all possible variations of the generated client-side code and subsequently parse this client code into a VarDOM that compactly represents all its variations. Finally, using the VarDOM, we implement various types of IDE services for embedded client code including syntax highlighting, code completion, and "jump to declaration". The video demonstration for Varis is available at http://www.youtube.com/watch?v=w1TECeRXGrg.

Cross-language program analysis for dynamic web applications

“…A VarDOM, the core of our analysis framework, is similar to the Document Object Model (DOM) for HTML except that it contains condition nodes to indicate that certain subtrees of the HTML document may vary depending on some condition. • For call graphs in embedded client code [101,103], we create call-graph edges in different languages: between opening and corresponding closing HTML tags, between CSS rules and affected HTML elements, and between JS function calls and corresponding function declarations.…”

“…• IDE services for embedded client code: We develop Varis [101,103] and Babel-Ref [106] to provide editor services on the client-side code of a PHP-based web application, while it is still embedded within server-side code. We implement various types of IDE services for embedded client code including syntax highlighting, code completion, "jump to declaration", and refactoring.…”

“…We illustrate three analyses to extract conditional call graphs for IDE support in HTML ("jump to opening/closing tag"), CSS ("jump to affected nodes" and "find applicable CSS rules"), and JS ("jump to declaration"), each while embedded in server-side code [101,103].…”

“…• Basic cross-language analyses: Based on the VarDOM, we develop concepts, techniques, and tools (1) to build call graphs for embedded client code in different languages [101,103], (2) to compute cross-language program slices [102], and 3to support testing dynamic web applications via a novel test coverage criterion called output coverage.…”

“…• A number of software development services for dynamic web applications: We developed various tools and Eclipse plug-ins to support syntax highlighting, code completion, and code navigation for embedded code [101,103], refactoring on embedded entities [106], cross-language program slicing [102], detecting dangling ref-…”