Download presentation
Presentation is loading. Please wait.
1
Software Refactoring Group
Nikolaos Tsantalis Assistant Professor Concordia Research Chair in Web Software Technologies Laleh Eshkevari Postdoctoral Fellow Davood Mazinanian PhD Student Shahriar Rostami M.Sc. Student Asif Al-Waqfi M.Sc. Student Matin Mansouri M.Sc. Student
2
Recent Projects and Highlights
Software Clone Refactoring Assessing the Refactorability of Software Clones IEEE Transactions on Software Engineering, Featured article of the Nov issue JDeodorant: Clone Refactoring 38th International Conference on Software Engineering (ICSE’16) Tool Demo Cascading Style Sheets (CSS) Refactoring Discovering Refactoring Opportunities in Cascading Style Sheets 22nd ACM SIGSOFT International Symposium on the Foundations of Software Engineering (FSE'14) Artifact evaluated An Empirical Study on the Use of CSS Preprocessors 23rd IEEE International Conference on Software Analysis, Evolution, and Reengineering (SANER'16) Best paper candidate
3
The Cascading Style Sheets that we do Or CSS Habits Die Hard
Davood Mazinanian PhD Candidate Department of Computer Science & Software Engineering Concordia University
4
I don’t recall…. what was it again?
CSS is a Style Sheet language Presentation for documents written in a markup language (HTML, SVG, …) Layout, colors, fonts, …
5
CSS can make links blue.
6
Use CSS for style reusability
HTML CSS <html> … <a>My cool link</a> </html> a { color: blue; } Style Structure + Content
7
So, CSS can make links blue.
8
And its only that.
9
Håkon Wium Lie
10
Håkon Wium Lie
11
Developing it is not a big deal.
Because it has a simple syntax. What if I tell you…. 200,000 LoC of CSS
12
How do we do that then?
13
How do we do that then?
14
What the heck academia is doing then?
Finding dead code in CSS (3 works) One CSS for multiple pages (states)
15
What the heck academia is doing then?
Quality of CSS code (1 work) Code smells in CSS (1 M.Sc. Thesis) Change impact analysis (1 work)
16
What did we do? Code duplication in CSS (Mazinanian et al, FSE’14)
color: red } table { color: #f00 On average, 60% duplication in CSS
17
What did we do? Code duplication in CSS (Mazinanian et al, FSE’14)
Up to 40% size reduction in CSS Using refactoring Refactoring is not always possible! p { color: red } table { color: #f00 p, table { color: red; } Refactoring
18
Why duplication in CSS? No notion of functions
Limited support for CSS variables p { color: red } table { color: blue
19
Why duplication in CSS? Solution: CSS Preprocessors!
{ } p { .function(red); table { .function(blue); p { color: red; } … table { color: blue; Transpile
20
What did we do? How developers use preprocessors? (Mazinanian and Tsantalis, Saner’16) Some of the findings: Functions are called mostly more than two times Often they have 1 or less parameters …
21
What the heck academia is doing then?
Migrating CSS to Preprocessors (just submitted!) { } p { .function(red); table { .function(blue); p { color: red; } … table { color: blue; Migration
22
The road ahead More empirical studies on how developers develop and maintain CSS Seriously, 200K LoC?! How do bugs look like in CSS? Developing tools for extracting existing “style semantics” for reuse Refactoring for removing code smells Refactoring for improving performance/power consumption
Similar presentations
