software engineering for the web: the state of practice. icse 2014
DESCRIPTION
Today’s web applications increasingly rely on client-side code execution. HTML is not just created on the server, but ma- nipulated extensively within the browser through JavaScript code. In this paper we seek to understand the software en- gineering implications of this. We look at deviations from many known best practices in such areas of network per- formance, accessibility, and correct structuring of HTML documents. Furthermore, we assess to what extent such deviations manifest themselves through client-side code ma- nipulation only. To answer these questions, we conducted a large scale experiment, involving automated client-enabled crawling of over 4000 web applications, resulting in over 100,000,000 pages analyzed, and close to 1,000,000 unique client site user interface states. Our findings show that the majority of sites contain a substantial number of problems, making sites unnecessarily slow, inaccessible for the visually impaired, and with layout that is in unpredictable due to errors in the dynamically modified DOM trees http://salt.ece.ubc.ca/publications/docs/icse14-seip.pdfTRANSCRIPT
![Page 1: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/7.jpg)
![Page 8: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.vdocument.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/8.jpg)
![Page 9: Software Engineering for the Web: The state of practice. ICSE 2014](https://reader033.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.in/reader033/viewer/2022051609/5479d13bb37959932b8b4855/html5/thumbnails/54.jpg)
Automated Error detectionQuestions?
Find me on Twitter: @alexnederlofhttp://crawljax.com