The document discusses software analysis for web applications. It outlines the evolution of web technologies from static to dynamic and rich internet applications. It describes achievements in web code analysis including static, dynamic, and hybrid analysis techniques. Challenges in web code analysis are also discussed such as the asynchronous and event-driven nature of JavaScript. Future prospects include cross-language analysis, program support in IDEs, empirical studies on web applications, and semi-automatic learning. The document concludes that JavaScript is ubiquitous in web, mobile, and hardware applications and more software will be developed as web applications.

1. Software Analysis for the Web:
Achievements and Prospects
Ali Mesbah
University of British Columbia
http://ece.ubc.ca/~amesbah/

2. 2
Web Evolution Challenges
Achievements Prospects

3. STATIC WEBSITES
File ServerBrowser
HTML
HTTP
Request
Response
HTML
HTML
HTML
HTML
Internet
HTML

4. DYNAMIC WEBSITES
ServerBrowser
HTML
HTTP
Request
Response
Internet
HTML
Generate
HTML

5. RESTFUL WEBSITES
Stateless ServerBrowser
HTML
HTTP
Request
Response
Internet
HTML
Generate
HTML
“Principled design of the modern Web architecture”, Fielding and Tylor, ICSE 2000

6. RICH INTERNET APPS
ServerBrowser
Flash
HTTP
Request
Response
Internet
Flash
Generate
Flash
RIA Plugin

7. MODERN WEB APPS
Stateless ServerBrowser
Async HTTP
Request
Response
Internet
JSON
Generate
JSON
DOMCSS
JS

8. Web Apps

9. 9
“write once, run
anywhere”
Instantaneous
software delivery

10. Web-based services such as and
have changed how people develop
software
10

11. 11
Web Evolution Challenges
Achievements Prospects

12. 12
Challenges
Heterogeneous
Async
Dynamic
Interactions
Distributed Stateless
Event-driven
Stateless ServerBrowser
Async HTTP
Request
Response
Internet
JSON
JS, Java,
PHP, Ruby,
etc
DOMCSS
JS

13. JavaScript: the Difficult Parts
1. Dynamic and weakly-typed
• types can change dynamically
• objects/functions can change
• First-class functions
2. Event-driven
3. Asynchronous callbacks
4. Prototype-based
• objects inherent from objects
• can be redefined at runtime
5. Constructs such as eval
6. Interactions with DOM
7. Interpreted (not compiled)
8. …
Make Software
Analysis Challenging
13

14. 14
Web Evolution Challenges
Achievements Prospects

15. Industrial Achievements
Mocha
Esprima Rhino
jsHint
jsLint
Qunit
Selenium
Istanbul
Closure Compiler
Flow

16. Web Code Analysis
• Static Analysis
• Points-to analysis (WALA)
• Approximate call graphs
• Data-flow analysis
• Dynamic Analysis
• Code quality checking
• Tracing and visualization
• Unused code detection

17. Web Code Analysis
• Static Analysis
• Points-to analysis
• Approximate call graphs
• Data-flow analysis
• Hybrid Analysis
• Taint and blended analysis
• Change impact analysis
• Event-flow analysis
• Dynamic Analysis
• Code quality checking
• Tracing and visualization
• Unused code detection

18. 18
checkPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
addTaxToPrice()
Function
XHR object
DOM
element
Directed and
labeled edge
Static analysis

19. Dynamic analysis
checkPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
#item231
#price-ca
.price
displaySuggesCon()
Function
XHR object
DOM
element
Directed and
labeled edge

20. Hybrid analysis
checkPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
addTaxToPrice()
#item231
#price-ca
.price
displaySuggesDon()
Function
XHR object
DOM
element
Directed and
labeled edge

21. Web Code Testing
• Different types of testing
• Cross-Browser testing
• Deterministic capture/replay
• Regression testing
• Test Adequecy
• Guided mutation analysis
• State-based coverage
• Code coverage
• Test Generation
• Event-based Crawling
• Feedback-directed execution
• (Dynamic) symbolic execution

22. 22
State Coverage

23. 23

24. 24
Web Evolution Challenges
Achievements Prospects

25. Cross-Language Analysis
We don’t know how to infer proper
control flow graphs for web code.
Stateless ServerBrowser
Async HTTP
Request
Response
Internet
JSON
JS, Java,
PHP, Ruby,
etc
DOMCSS
JS

26. Cross-Language Program Slicing
Nguyen et al, FSE’14

27. Cross-Language Bug Detection
Ocariza et al, ICSE’15

28. Programmer Support in IDEs
• Code completion
• Refactoring
• Bug alerts
• Smell detection

29. Web Programmer Support in IDEs
• Code completion
• Refactoring
• Bug alerts
• Smell detection

30. Callback Hell

31. Refactoring to Promises

32. Test Case Maintenance
We need better:
Web element locators
Repair techniques

33. Benchmarks for Comparison
33
SIR
Defect4J
BugBench
?
DroidBench

34. Empirical Studies
Web analysis tools mainly built by reading best
practices or through developer intuition and
anecdotal observation
Example: what are the most common cross-project bug
patterns in web code?

35. Mining Repositories
Largely unexplored gold mines!

36. modules 250K

37. repositories 3.4M

38. developers 26K
MSR’13

39. Semi-automatic Learning

40. 40
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}
@Test
public void testAddNote(){
get("http://localhost:8080/theorganizer/");
findElement(By.id("logon_username")). sendKeys("user");
findElement(By.id("logon_password")). sendKeys("pswd");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText());
findElement(By.id("newNote")). click();
findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example");
findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example");
findElement(By. cssSelector("input type ="image"")).click();
assertEquals("Note has been created.", findElement(By.id("mainContent")). getText());
findElement(By.id("logoff")).click();
}

41. Learning Assertions
A classification problem:
• Is a web element important to be checked by an assertion?
Apply machine learning to train a classier
• Features: position, size, page-rank, LinkNum, ChildNum, …

42. FROM MONOLITHIC APPS
Stateless ServerBrowser
Async HTTP
Request
Response
Internet
JSON
Generate
JSON
DOMCSS
JS
42

43. TO MICRO SERVICES
Micro ServicesBrowser
Restful HTTP
Request
Response
Internet
JSON
DOMCSS
JS
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service
Micro
Service

44. 44
On the client Even in hardware!On the server
JavaScript is everywhere

45. 45
“write once, run
anywhere”
Instantaneous
software delivery
Anything that can be written as a web
app, will be written as a web app
(eventually)