Hybrid DOM-Sensitive Change Impact Analysis for JavaScript Saba - PowerPoint PPT Presentation

Hybrid DOM-Sensitive Change Impact Analysis for JavaScript Saba Alimadadi, Ali Mesbah and Karthik Pattabiraman ECOOP 2015 saba@ece.ubc.ca

Change Impact Analysis (CIA) ! • Software must continually change to adapt to the changing environment. • Goal : identifying parts of the program that are potentially affected by a change. 1!

Challenges of CIA for JavaScript ! JavaScript DOM Server 2!

Challenge 1: Impact through the DOM ! JavaScript DOM body function calculateTax() { $(‘.price’).each(function(index) { $(this).text(addTaxToPrice( $(this).text()); }); fieldset } div div function checkPrice() { class=price . . . var cad_price = $(‘#price_ca’).innerText(); id=price_ca . . . } 3!

Challenge 2: Impact through Event Propagation ! JavaScript DOM body $(‘#price_ca’).bind(‘click’, checkPrice); $(‘prices’).bind(‘click’, calculateTax); name=prices fieldset function calculateTax() { . . . div div } id=price_ca function checkPrice() { . . . } 4!

Challenge 3: Impact through XHRs ! JavaScript Server function checkPrice() { var itemName = extractName($(‘item231’)O; $.ajax({ url : ‘prices/latest.php’, XHR! type : ‘POST’, data : itemName, success : eval(getAction() + ‘item’) }); } function updateItem(xhr) { var updatedInfo = getUpdatedPrice(xhr.responseText); suggestItem.apply(this, updatedInfo); } 5!

Challenges of CIA for Client-Side JavaScript 1. JavaScript and Document Object Model (DOM) 2. Events and event propagation 3. JavaScript and XMLHttpRequests (XHRs) + High dynamism of JavaScript 6!

Exploratory Study: DOM-related and Event-based Impacts • Subject: 10 web apps (online contests, GitHub trending, etc.) • Gathered data: – JavaScript-DOM interactions (write-read pairs) – Event propagation • Further analysis of the structure of graphs. – Measured metrics: fan-in and fan-out of functions and DOM elements, and average path lengths 7!

Exploratory Study: Results ! • W-R DOM elements: • Propagated handlers: 42% 14% DOM Elements Event Handlers Propagated 14% W-R 42% Elements 58% 86% foo() elem bar() 8!

Hybrid Analysis ! Static Analysis Hybrid Ranked Model Impact Sets Dynamic Analysis 9!

Static Analysis ! Static Ranked Analysis Hybrid Impact Model Dynamic Sets Analysis Control (and data) Partial data-flow dependencies analysis 10!

Example: Static Model ! Function checkPrice()! XHR object DOM element Directed and XHR! labeled edge getUpdatedPrice()! updateItem()! calculateTax()! suggestItem()! addTaxToPrice()! 11!

Dynamic Analysis ! Impact through DOM Static Ranked Analysis Hybrid Impact Model Dynamic Sets elem foo() bar() Analysis Impact through events Dynamic call graph XHR relations JavaScript dynamism (open, send, response) (eval(), function variadicity) 12!

Example: Dynamic Model ! Function #item231! checkPrice()! XHR object DOM element #priceGca! Directed and XHR! .price! labeled edge getUpdatedPrice()! updateItem()! calculateTax()! displaySuggesKon()! suggestItem()! 13!

Static Analysis Hybrid Ranked Model Impact Sets Dynamic Analysis 14!

Example: Hybrid Analysis ! Vertices Function #item231! checkPrice()! XHR object DOM element #priceGca! Directed and XHR! .price! labeled edge Edges getUpdatedPrice()! updateItem()! calculateTax()! displaySuggesKon()! suggestItem()! addTaxToPrice()! 15! 15!

Static Analysis Hybrid Ranked Model Impact Sets Dynamic Analysis 16!

Impact Metrics and Impact Set Ranking • Problem: size of impact sets • Solutions: impact ranks, based on impact metrics – f in (d) : Number of functions f such that f W d – f in (f) : Number of elements d such that f R d – f out (f) : Number of elements d such that f W d – L avg (P) : Average length of impact paths in the app – D m (e) : Minimum distance of e from the change set – IR pr (e) : Impact of previous entity 17!

Tool Implementation: Tochal • Tochal: open source – https://github.com/saltlab/tochal • Proxy (Java, JavaScript) – Esprima, Estraverse, Escodegen, Mutation Summary, WALA • Client-side (Google Chrome extension) – Chrome DevTools 18!

Research Question 1 Does Tochal outperform static and dynamic analysis methods in terms of the completeness of the results obtained? 19!

Study: Static vs. Dynamic vs. Tochal • 10 web applications • 3 random functions as change sets • Comparing: – Size of impact sets – Number of functions in dependency graphs 20!

Results: Impact Sets • Comparing size of impact sets 2 Static : 26% 1.5 Static Hybrid Dynamic 1 Tochal Dynamic 0.5 : 80% Hybrid 0 21

Results: Graphs • Comparing size of model graphs Dynamic Static Static : 59% Hybrid Dynamic : 84% Hybrid 22

Results: Graphs • Comparing size of model graphs Dynamic Pure Static Static : 15% Hybrid Pure Dynamic : 42% Hybrid 23

Research Question 2 Does Tochal help developers in practice to perform change impact analysis? 24!

Experiment: Design • 12 participants from industry Task Description Finding the potential impact of a DOM element T1 Finding the potential impact of a JavaScript function T2 • Performed 4 tasks T3 Finding a conflict after making a new change (no ranking) Finding a bug in JavaScript code T4 • We measured task completion duration and accuracy 25!

User Experiment: Results ! Accuracy Duration 2400 100 2100 1800 Tochal Tochal 80 1500 Other Other 60 1200 900 40 600 20 300 0 0 T1 T2 T3 T4 Total T1 T2 T3 T4 Total 80% faster 2 times more accurate 26!

Results: Ranking Accuracy Duration 7:12! 100 6:00! 80 4:48! W/O rank 60 3:36! 40 W/ rank 2:24! 20 1:12! 0:00! 0 2~3 times faster 25% more accurate

28!