Talk "CrossLanguageSpotter: A Library for Detecting Relations in Polyglot Frameworks" event during WWW'14 Dev track, Seoul, Korea

1. CrossLanguageSpotter:CrossLanguageSpotter:
A Library for Detecting RelationsA Library for Detecting Relations
in Polyglot Frameworksin Polyglot Frameworks
Federico Tomassetti, Giuseppe Rizzo, Raphaël Troncy
@giusepperizzo @rtroncy@raindancer

2. CREATE TABLE Persons (
ID int,
FirstName varchar(255),
LastName varchar(255),
City varchar(255)
);
String query = "select ID, FirstName, LastName, "
+ "City " + "from " + dbName
+ ".Persons";
try { ...
while (rs.next()) {
int id = rs.getInt("ID");
String firstName = rs.getString("FirstName");
String lastName = rs.getString("LastName");
String city= rs.getString("City");
} } catch (SQLException e ) {
......
}
data.sql
Person.java

3. CREATE TABLE Persons (
ID int,
FirstName varchar(255),
LastName varchar(255),
City varchar(255)
);
String query = "select ID, FirstName, LastName, "
+ "City " + "from " + dbName
+ ".Persons";
try { ...
while (rs.next()) {
int id = rs.getInt("ID");
String firstName = rs.getString("FirstName");
String lastName = rs.getString("LastName");
String city= rs.getString("City");
} } catch (SQLException e ) {
(Hopefully it does not happen)
}
data.sql
Person.java

4. We were able to identify cross-
language relations at compile time?

5. So I am aware that this ID is
related to something else
If we could automatically identifyIf we could automatically identify
cross-language relations we could:cross-language relations we could:
- Highlight them- Highlight them
- Support refactoring- Support refactoring
- Validate them- Validate them
- Navigate them- Navigate them

6. If I change one end, the
connected elements are updated
If we could automatically identifyIf we could automatically identify
cross-language relations we could:cross-language relations we could:
- Highlight them- Highlight them
- Support refactoring- Support refactoring
- Validate them- Validate them
- Navigate them- Navigate them

7. If we could automatically identifyIf we could automatically identify
cross-language relations we could:cross-language relations we could:
- Highlight them- Highlight them
- Support refactoring- Support refactoring
- Validate them- Validate them
- Navigate them- Navigate them
See broken relations as errors

8. If we could automatically identifyIf we could automatically identify
cross-language relations we could:cross-language relations we could:
- Highlight them- Highlight them
- Support refactoring- Support refactoring
- Validate them- Validate them
- Navigate them- Navigate them
Click to see the other side of
the relation

9. Shared id

10. Shared id
HOW?

11. Shared id
1. Build ASTs1. Build ASTs
2. Look for pairs of ID2. Look for pairs of ID
3. Understand if each pair is3. Understand if each pair is
really related or notreally related or not
exploiting the semantic ofexploiting the semantic of
the contextthe context
HOW?

12. <ul id="types">
<li ng-repeat="t in types" ng-class="{'selected': t.id == type}">
<a ng-href="#/{{t.id}}">{{t.title}}</a>
</li>
</ul>
var types = [
{ id: 'sliding-puzzle', title: 'Sliding puzzle' },
{ id: 'word-search-puzzle', title: 'Word search puzzle' }
];
index.html
app.js
app.controller('slidingAdvancedCtrl', function($scope) {
$scope.puzzles = [
{ src: './img/misko.jpg', title: 'Miško Hevery', rows: 4, cols: 4 },
{ src: './img/igor.jpg', title: 'Igor Minár', rows: 3, cols: 3 },
{ src: './img/vojta.jpg', title: 'Vojta Jína', rows: 4, cols: 3 }
];
});
<div ng-repeat="puzzle in puzzles">
<h2>{{puzzle.title}}</h2>
…
</div>

13. April 10, 2014 13/2123rd
World Wide Web Conference (WWW'14) Dev Track
What about web applications?
Large use of several
programming
languages within the
same application
(HTML, CSS, JS,
python, Java, C#, … )

14. April 10, 2014 14/2123rd
World Wide Web Conference (WWW'14) Dev Track

15. April 10, 2014 15/2123rd
World Wide Web Conference (WWW'14) Dev Track
Let's pick up an example
http://git.io/yh_Q0Q
angular-puzzle

16. April 10, 2014 16/2123rd
World Wide Web Conference (WWW'14) Dev Track
How to integrate?
http://youtu.be/4vi46nCl1Xw

17. April 10, 2014 17/2123rd
World Wide Web Conference (WWW'14) Dev Track
CrossLanguageSpotter
does the magic
AST
builder
Random
Tree
Classifier
.js
.html
<p1> <conf> <true>
<p2> <conf> <false>
…
<pn> <conf> <false>
Feature
Extraction

18. Embedded AST (prendo immagine da paper)
AST Builder

19. April 10, 2014 19/2123rd
World Wide Web Conference (WWW'14) Dev Track
Feature Extraction and Relations Spotter
Feature Extraction
(contextual features)
Tomassetti F., Rizzo G., Torchiano M. (2014), Spotting Automatically Cross-Language Relations. In Conference
on Software Maintenance, Reengineering and Reverse Engineering (CSMR-WCRE'14), Antwerp, Belgium.
<p1> f(1,1) f(1,2) ...
<p2> f(2,1) f(2,2) ...
…
<pn> f(n,1) f(n,2) ...
shared_lengthitfidf_shared%_shared_length_min
%_shared_length_max
diff_minLevenshtein
JaccardJaro
Tversky
<p1> <conf> <true>
<p2> <conf> <false>
…
<pn> <conf> <false>
RandomTree
(classifier)

20. April 10, 2014 20/2123rd
World Wide Web Conference (WWW'14) Dev Track
Principles and experimentally assessed
Tomassetti F., Rizzo G., Torchiano M. (2014), Spotting Automatically Cross-Language Relations. In Conference
on Software Maintenance, Reengineering and Reverse Engineering (CSMR-WCRE'14), Antwerp, Belgium.

21. April 10, 2014 21/2123rd
World Wide Web Conference (WWW'14) Dev Track
Thanks for your time and attention
http://www.slideshare.net/giusepperizzo
http://git.io/rlHrvg
http://youtu.be/4vi46nCl1Xw