Software Engineering for the Web: The state of practice. ICSE 2014
-
Upload
alex-nederlof -
Category
Software
-
view
983 -
download
0
description
Transcript of Software Engineering for the Web: The state of practice. ICSE 2014
![Page 1: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/1.jpg)
Software Engineering for the WebThe State of the Practice
Alex Nederlof
http://bit.ly/sop_icse14
Arie van DeursenAli Mesbah
@alexnederlof@avandeursen
@amesbah
![Page 2: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/2.jpg)
TESTING WEB APPS IS A
PAIN IN THE NECKCan’t we fix that?
![Page 3: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/3.jpg)
SPOILER:WE’RE NOT DOING WELL
![Page 4: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/4.jpg)
Web
Applications?
![Page 5: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/5.jpg)
The web was designed for document sharing
between researchers using
HTML
![Page 6: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/6.jpg)
But thenJavaScript
Happened
![Page 7: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/7.jpg)
![Page 8: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/8.jpg)
![Page 9: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/9.jpg)
COMPLEXITY x DIVERSITY - TESTING
= BUGS
![Page 10: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/10.jpg)
CRAWLJAX JavaScript-Enabled Crawling
![Page 11: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/11.jpg)
sldfjsdfk
![Page 12: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/12.jpg)
<!DOCTYPE HTML> <HTML> <HEADER> <TITLE>Computers Rule</TITLE> </HEADER> <BODY> <H1>Computer says:</H1> <p>NO</p> </BODY> </HTML> !
!
<!DOCTYPE HTML> <HTML> <HEADER> <TITLE>Ultimate Answer</TITLE> </HEADER> <BODY> <H1>Computer says:</H1> <p>42</p> </BODY> </HTML> !
!
![Page 13: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/13.jpg)
STATESARE THE NEW
PAGES
![Page 14: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/14.jpg)
4,221 APPLICATIONS
2,974,641 STATES
![Page 15: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/15.jpg)
How dynamic is the web?
How bad is the web?
![Page 16: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/16.jpg)
MEASURINGDYNAMISM
![Page 17: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/17.jpg)
How dynamic is the web?
States / URL 1.9 states
State invisibility 96%
Post-load DOM manipulations
64% Text 89% DOM
![Page 18: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/18.jpg)
ASSESSINGTHE DAMAGE
![Page 19: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/19.jpg)
DEFINING AMBIGUOUS ID
ATTRIBUTES
![Page 20: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/20.jpg)
<H1 class=”title” id=”first-title”>Hello!</H1>
![Page 21: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/21.jpg)
53% of the sites do on 35% of the states
![Page 22: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/22.jpg)
DEFINE A DOCTYPE
![Page 23: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/23.jpg)
<!DOCTYPE HTML> <HTML> <HEADER> <TITLE>Hello World</TITLE> </HEADER> <BODY> <H1>Hello Msc Thesis!</H1> <A href=”http://ns.nl”>Go to NS</A> </BODY> </HTML>
![Page 24: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/24.jpg)
61.6% RENDER IT
90’s STYLE
![Page 25: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/25.jpg)
FORMULATE VALID HTML
![Page 26: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/26.jpg)
<H1 class=”title” id=”first-title”>Hello!</H1>
13% Forget this
{9% go wrong here
20% misplace elements altogether
![Page 27: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/27.jpg)
53% Contain Double IDs
61% Renders like the 90s
~ 20% Contains invalid HTML
![Page 28: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/28.jpg)
SPEED
![Page 29: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/29.jpg)
Errors in the web
Best practices
![Page 30: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/30.jpg)
THOU SHALL CACHE THY RESOURCES
![Page 31: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/31.jpg)
43% doesn’t
0% Used HTML-5 Caching
![Page 32: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/32.jpg)
THOU SHALL COMPRESS
THY RESOURCES
![Page 33: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/33.jpg)
80% doesn’t
![Page 34: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/34.jpg)
THOU SHALL PUT STYLE SHEETS
ON TOP
![Page 35: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/35.jpg)
56% doesn’t
![Page 36: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/36.jpg)
THOU SHALL ONLY BLOCK JS
WHEN NECESSARY
![Page 37: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/37.jpg)
43% Does not cache
80% Is not compressed
56% Reloads CSS too often
![Page 38: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/38.jpg)
ACCESSIBILITY
![Page 39: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/39.jpg)
FEEL
LISTEN
![Page 40: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/40.jpg)
<IMG src=”lolcat.jpg” alt=”Picture of a cat” />
<LABEL for=”username”> Enter your username </LABEL>
![Page 41: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/41.jpg)
36% Do not label input
![Page 42: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/42.jpg)
<div role=”navigation”>
<HEADER> <ARTICLE>
NAVIGATION
<NAV>
![Page 43: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/43.jpg)
25%
5%11% 60%
No indicatorsJust rolesJust SemanticBoth
NAVIGATION ASSISTANCE
![Page 44: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/44.jpg)
THE WEB IS:• HIGHLY DYNAMIC
• RIDDLED WITH ERRORS
• NOT AS FAST AS IT COULD BE
• NOT NEARLY ACCESSIBLE ENOUGH
![Page 45: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/45.jpg)
What to do?
![Page 46: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/46.jpg)
Modern Web development
All pages are rendered
New pages are rendered client side
![Page 47: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/47.jpg)
STATIC ANALYSIS+ CRAWLER= SUPER POWERS
![Page 48: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/48.jpg)
Generic invariantsValid HTML, JavaScript, CSS
Accessibility support
Performance best practices
Do all images load?
![Page 49: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/49.jpg)
Am I using my framework correctly?
Are all my pages translated?
Are there any JS errors triggered?
Semi-Generic invariants
![Page 50: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/50.jpg)
Is my logo on every page?
Is the feedback button on every page?
Does every page link to the homepage?
App-specific invariants
![Page 51: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/51.jpg)
CRAWLING BONUS!Code coverage
Performance testingRandom testing
![Page 52: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/52.jpg)
CHALLENGESState duplication detection is hard
Deployment seems hard
![Page 53: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/53.jpg)
Testing by crawling works and should be explored further.
![Page 54: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.fdocuments.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/54.jpg)
Automated Error detectionQuestions?
Find me on Twitter: @alexnederlofhttp://crawljax.com