Date post: | 13-Apr-2017 |
Category: |
Software |
Upload: | ali-mesbah |
View: | 685 times |
Download: | 1 times |
Software Analysis for the Web:Achievements and Prospects
Ali MesbahUniversity of British Columbia http://ece.ubc.ca/~amesbah/
2
Web Evolution Challenges
Achievements Prospects
STATIC WEBSITESFile ServerBrowser
HTML
HTTPRequest
ResponseHTMLHTMLHTMLHTML
Internet
HTML
DYNAMIC WEBSITESServerBrowser
HTML
HTTPRequest
Response
Internet
HTML
Generate HTML
RESTFUL WEBSITESStateless ServerBrowser
HTML
HTTPRequest
Response
Internet
HTML
Generate HTML
“Principled design of the modern Web architecture”, Fielding and Tylor, ICSE 2000
RICH INTERNET APPSServerBrowser
Flash
HTTPRequest
Response
Internet
Flash
GenerateFlash
RIA Plugin
MODERN WEB APPS Stateless ServerBrowser
Async HTTPRequest
Response
Internet
JSON
GenerateJSON
DOMCSS
JS
Web Apps
9
“writeonce,runanywhere”
Instantaneoussoftwaredelivery
Web-basedservicessuchasandhavechangedhowpeopledevelop
software
10
11
Web Evolution Challenges
Achievements Prospects
12
Challenges
Heterogeneous
Async Dynamic Interactions
Distributed Stateless
Event-driven
Stateless ServerBrowser
Async HTTPRequest
Response
Internet
JSON
JS, Java, PHP, Ruby,
etc
DOMCSS
JS
JavaScript:theDifficultParts
1. Dynamic and weakly-typed• types can change dynamically• objects/functions can change
• First-class functions2. Event-driven3. Asynchronous callbacks4. Prototype-based
• objects inherent from objects• can be redefined at runtime
5. Constructs such as eval 6. Interactions with DOM7. Interpreted (not compiled)8. …
Make Software Analysis Challenging
13
14
Web Evolution Challenges
Achievements Prospects
Industrial Achievements
Mocha
Esprima Rhino
jsHint
jsLint
QunitSelenium
Istanbul
Closure Compiler
Flow
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
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
checkPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
addTaxToPrice()
Function XHR object DOM element Directed and labeled edge
Static analysis
Dynamic analysis
checkPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
#item231
#price-ca.price
displaySuggesCon()
Function XHR object DOM element Directed and labeled edge
Hybrid analysischeckPrice()
XHR
updateItem()
suggestItem()
getUpdatedPrice() calculateTax()
addTaxToPrice()
#item231
#price-ca.price
displaySuggesDon()
Function XHR object DOM element Directed and labeled edge
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
State Coverage
23
24
Web Evolution Challenges
Achievements Prospects
Cross-Language Analysis
We don’t know how to infer proper control flow graphs for web code.
Stateless ServerBrowser
Async HTTPRequest
Response
Internet
JSON
JS, Java, PHP, Ruby,
etc
DOMCSS
JS
Cross-Language Program Slicing
Nguyen et al, FSE’14
Cross-Language Bug Detection
Ocariza et al, ICSE’15
Programmer Support in IDEs
• Code completion• Refactoring• Bug alerts• Smell detection
Web Programmer Support in IDEs
• Code completion• Refactoring• Bug alerts• Smell detection
Callback Hell
Refactoring to Promises
Test Case Maintenance
We need better: Web element locators
Repair techniques
Benchmarks for Comparison
33
SIR
Defect4J
BugBench?
DroidBench
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?
Mining Repositories
Largely unexplored gold mines!
modules 250K
repositories 3.4M
developers 26K
������������
���������
��
�� ��
����������
��������
�������� �
������ �
��������
������
�������� �
������ �
�
�
�
�
�
��
MSR’13
Semi-automatic Learning
40
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
@Testpublic 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();}
Learning AssertionsA 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, …
FROM MONOLITHIC APPS
Stateless ServerBrowser
Async HTTPRequest
Response
Internet
JSON
GenerateJSON
DOMCSS
JS
42
TO MICRO SERVICES
Micro ServicesBrowser
Restful HTTPRequest
Response
Internet
JSON
DOMCSS
JS
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
MicroService
44
On the client Even in hardware! On the server
JavaScriptiseverywhere
45
“writeonce,runanywhere”
Instantaneoussoftwaredelivery
Anythingthatcanbewrittenasawebapp,willbewrittenasawebapp
(eventually)