2016 IEEE 23rd International Conference on Software Analysis, Evolution, and Reengineering

Towards Detection and Analysis of Interlanguage
Clones for Multilingual Web Applications
Yuta Nakamura∗ , Eunjong Choi∗ , Norihiro Yoshida† , Shusuke Haruna∗ and Katsuro Inoue∗∗ Osaka University, Japan{n-yuuta@ist, ejchoi@osipp, haruna@ist, inoue@ist}.osaka-u.ac.jp† Nagoya University, Japanyoshida@ertl.jp
Abstract—In this position paper, we introduce an instance ofinterlanguage clones in a multilingual web application system andthen discuss research challenges on the detection and analysis.

1(a)) of the interlanguage clone (a, b), they have to consider
if the HTML ﬁle (Fig. 1(c)) of its clone pair, (c, d), should
be modiﬁed or not. For another example, if developers add anexception handling to updateGroup (Fig. 1(b)), they have todetermine that they should add the code to updateChannel(Fig. 1(d)).
Assuming that a clone pair in the ‘html’ ﬁles (Fig. 1(a),Fig. 1(c)) and the ‘js’ ﬁle (Fig. 1(b), Fig. 1(d)) is detected,
respectively, developers should check these two clone pairs.
However, if a clone pair is detected as a larger-granularity
code clones, they only check a clone pair (Fig. 1 (a) and (b),Fig. (c) and (d). As a result, they can save time and efforts forchecking all the detected code clones. Therefore, we expectthat detecting these code clones from web applications helps
developers to easily perform maintenance.
Although some previous approaches detect code clones frommultilingual software systems [1][2], the granularity of thedetection is a code fragment written in only one language.
Therefore, they are against our purpose of detecting interlanguage clones which detection granularity is a code fragment
spanning multiple languages.
In order to detect these code clones from web applications, we discuss a method to detect interlanguage clones(i.e., larger-granularity code clones spread throughout different
programming languages). We expect that larger-granularity
can decrease efforts to check all of the detected code clones
from web applications.

I. M OTIVATIONThe number of web applications have rapidly increased
over the last decades. In order to speed up web application
development, developers frequently write code clones [4]. As
a result, many web applications contain more than 50% codeclones [2][3][4]. Since code clones can be one of the factorsthat increase maintenance costs in general, code clones in a
web application system should be detected and managed toalleviate maintenance costs [2][4].
Web application systems are typically written in multiple
programming languages (e.g. HTML and JavaScript) wheredifferent languages rely on each other [2][4]. This causesinterlanguage clones, each of which spans different programﬁles that are written in different programming languages inthe development of web application systems. In this position
paper, we deﬁne an interlanguage clone as a set of codefragments So that satisﬁes the following conditions:• So span multiple ﬁles F (where |F | ≥ 2)
• multiple programming languages are used in ﬁles F• each code fragment ci ∈ S is callee or caller of a setof the other code fragments Sa (where |Sa | ≥ 1, Sa ∈So , ci ∈/ Sa )• ∃Sc (Sc ≡ So ) where ≡ means that each code fragment in
So has its clone in Sc and the same callee/caller relations
exist between the code fragments in Sc .
To give a clear idea of interlanguage clones across multiple
program ﬁles in web application systems, we introduce apair of interlanguage clones in Webogram1 , an open-source
telegram web application (Fig. 1). This pair of interlanguage
clones is spread across view and logic ﬁles implemented
by HTML and JavaScript. Each of the code fragments in
the HTML ﬁles (Fig. 1(a) and 1(c)) calls the functions updateGroup (Fig. 1(b)) and updateChannel (Fig. 1(d)) inthe ‘controller.js’ ﬁle, respectively. The pair of interlanguage
clones (a, b) and (c, d) in Fig. 1 is considered to be maintained
simultaneously (e.g. enhancement, bug ﬁx). For example inFig. 1, if developers change a view of the HTML ﬁle (Fig.

II. R ESEARCH C HALLENGES
Target programming languages: Web applications aremainly written in multiple programming languages. In orderto detect interlanguage clones from web applications, we canadopt a language-independent approach. However, we needto detect code clones using a language dependent approachbecause program dependent approach is more precise thanan independent one. In order to use a program dependent
approach, we should decide on the target programming languages. To solve this problem, we investigated frequenciesof co-used programming language combinations used in web
applications. In detail, at ﬁrst, we randomly selected 109,547
open source web applications that were developed until 2014
from GitHub2 . After that, we excluded applications written

1 https://web.telegram.org

978-1-5090-1855-0/16 $31.00 © 2016 IEEE
DOI 10.1109/SANER.2016.55

2 https://github.com/17фĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺǁƌĂƉΗŵǇͲŵŽĚĂůͲƉŽƐŝƚŝŽŶхфĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺďŽĚǇΗх͗фͬĚŝǀхфĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺĨŽŽƚĞƌΗхфďƵƚƚŽŶĐůĂƐƐсΗďƚŶďƚŶͲŵĚΗŶŐͲĐůŝĐŬсΗΨĚŝƐŵŝƐƐ;ͿΗŵǇͲŝϭϴŶсΗŵŽĚĂůͺĐĂŶĐĞůΗхфͬďƵƚƚŽŶхфďƵƚƚŽŶĐůĂƐƐсΗďƚŶďƚŶͲŵĚďƚŶͲŵĚͲƉƌŝŵĂƌǇΗŶŐͲĐůĂƐƐсΗ΂ĚŝƐĂďůĞĚ͗ŐƌŽƵƉ͘ƵƉĚĂƚŝŶŐ΃ΗŶŐͲĐůŝĐŬсΗƵƉĚĂƚĞ'ƌŽƵƉ;ͿΗŶŐͲďŝŶĚсΗŐƌŽƵƉ͘ƵƉĚĂƚŝŶŐ͍ΖŐƌŽƵƉͺĞĚŝƚͺƐƵďŵŝƚͺĂĐƚŝǀĞΖ͗ΖŐƌŽƵƉͺĞĚŝƚͺƐƵďŵŝƚΖͮŝϭϴŶΗŶŐͲĚŝƐĂďůĞĚсΗŐƌŽƵƉ͘ƵƉĚĂƚŝŶŐΗхфͬďƵƚƚŽŶхфͬĚŝǀхфͬĚŝǀхΨƐĐŽƉĞ͘ƵƉĚĂƚĞ'ƌŽƵƉсĨƵŶĐƚŝŽŶ;Ϳ΂ŝĨ;͊ΨƐĐŽƉĞ͘ŐƌŽƵƉ͘ŶĂŵĞͿ΂ƌĞƚƵƌŶ͖΃͗ΨƐĐŽƉĞ͘ŐƌŽƵƉ͘ƵƉĚĂƚŝŶŐсƚƌƵĞ͖ǀĂƌĂƉŝWƌŽŵŝƐĞ͖͗ƌĞƚƵƌŶĂƉŝWƌŽŵŝƐĞ͘ƚŚĞŶ;ĨƵŶĐƚŝŽŶ;ƵƉĚĂƚĞƐͿ΂ƉŝhƉĚĂƚĞƐDĂŶĂŐĞƌ͘ƉƌŽĐĞƐƐhƉĚĂƚĞDĞƐƐĂŐĞ;ƵƉĚĂƚĞƐͿ͖ǀĂƌƉĞĞƌ^ƚƌŝŶŐсƉƉŚĂƚƐDĂŶĂŐĞƌ͘ŐĞƚŚĂƚ^ƚƌŝŶŐ;ΨƐĐŽƉĞ͘ĐŚĂƚ/Ϳ͖ΨƌŽŽƚ^ĐŽƉĞ͘ΨďƌŽĂĚĐĂƐƚ;ΖŚŝƐƚŽƌǇͺĨŽĐƵƐΖ͕΂ƉĞĞƌ^ƚƌŝŶŐ͗ƉĞĞƌ^ƚƌŝŶŐ΃Ϳ͖΃Ϳ΀ΖĨŝŶĂůůǇΖ΁;ĨƵŶĐƚŝŽŶ;Ϳ΂ĚĞůĞƚĞΨƐĐŽƉĞ͘ŐƌŽƵƉ͘ƵƉĚĂƚŝŶŐ͖΃Ϳ͖͗;ĂͿĐŚĂƚͺĞĚŝƚͺŵŽĚĂů͘Śƚŵů;ďͿĐŽŶƚƌŽůůĞƌƐ͘ũƐфĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺǁƌĂƉΗŵǇͲŵŽĚĂůͲƉŽƐŝƚŝŽŶхфĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺďŽĚǇΗх͗͗фͬĚŝǀхфĚŝǀĐůĂƐƐсΗŵĚͺƐŝŵƉůĞͺŵŽĚĂůͺĨŽŽƚĞƌΗхфďƵƚƚŽŶĐůĂƐƐсΗďƚŶďƚŶͲŵĚΗŶŐͲĐůŝĐŬсΗΨĚŝƐŵŝƐƐ;ͿΗŵǇͲŝϭϴŶсΗŵŽĚĂůͺĐĂŶĐĞůΗхфͬďƵƚƚŽŶхфďƵƚƚŽŶĐůĂƐƐсΗďƚŶďƚŶͲŵĚďƚŶͲŵĚͲƉƌŝŵĂƌǇΗŶŐͲĐůĂƐƐсΗ΂ĚŝƐĂďůĞĚ͗ĐŚĂŶŶĞů͘ƵƉĚĂƚŝŶŐ΃ΗŶŐͲĐůŝĐŬсΗƵƉĚĂƚĞŚĂŶŶĞů;ͿΗŶŐͲďŝŶĚсΗĐŚĂŶŶĞů͘ƵƉĚĂƚŝŶŐ͍ΖĐŚĂŶŶĞůͺĞĚŝƚͺƐƵďŵŝƚͺĂĐƚŝǀĞΖ͗ΖĐŚĂŶŶĞůͺĞĚŝƚͺƐƵďŵŝƚΖͮŝϭϴŶΗŶŐͲĚŝƐĂďůĞĚсΗĐŚĂŶŶĞů͘ƵƉĚĂƚŝŶŐΗхфͬďƵƚƚŽŶхфͬĚŝǀхфͬĚŝǀхΨƐĐŽƉĞ͘ƵƉĚĂƚĞŚĂŶŶĞů сĨƵŶĐƚŝŽŶ;Ϳ΂ŝĨ;͊ΨƐĐŽƉĞ͘ĐŚĂŶŶĞů͘ƚŝƚůĞ͘ůĞŶŐƚŚͿ΂ƌĞƚƵƌŶ͖΃ǀĂƌ ƉƌŽŵŝƐĞƐс΀΁͖͗ΨƐĐŽƉĞ͘ĐŚĂŶŶĞů͘ƵƉĚĂƚŝŶŐ сƚƌƵĞ͖ƌĞƚƵƌŶΨƋ͘Ăůů;ƉƌŽŵŝƐĞƐͿ͘ƚŚĞŶ;ĨƵŶĐƚŝŽŶ;Ϳ΂ǀĂƌ ƉĞĞƌ^ƚƌŝŶŐ сƉƉŚĂƚƐDĂŶĂŐĞƌ͘ŐĞƚŚĂƚ^ƚƌŝŶŐ;ΨƐĐŽƉĞ͘ĐŚĂƚ/Ϳ͖ΨƌŽŽƚ^ĐŽƉĞ͘ΨďƌŽĂĚĐĂƐƚ;ΖŚŝƐƚŽƌǇͺĨŽĐƵƐΖ͕΂ƉĞĞƌ^ƚƌŝŶŐ͗ƉĞĞƌ^ƚƌŝŶŐ΃Ϳ͖΃Ϳ΀ΖĨŝŶĂůůǇΖ΁;ĨƵŶĐƚŝŽŶ;Ϳ΂ĚĞůĞƚĞΨƐĐŽƉĞ͘ĐŚĂŶŶĞů͘ƵƉĚĂƚŝŶŐ͖΃Ϳ͖΃͖;ĚͿĐŽŶƚƌŽůůĞƌƐ͘ũƐ;ĐͿĐŚĂŶŶĞůͺĞĚŝƚͺŵŽĚĂů͘ŚƚŵůFig. 1: An Example of Clone Pair in Webogram

including JavaScript between <script> and </script>tags). These tangled ﬁles are an obstacle to analyze for clone
detection tools described above. Therefore, it is necessary forour approach to separate them to ﬁles written in only onelanguage.
Management for detected clones: After code clones aredetected from web applications, results of detected code clones
should be reported. However, because code clones might bespread throughout web applications, we face the challengeof how detected code clones should be presented to thedeveloper and in what format. These design decisions willaffect management of detected code clones.

in only single language and then found 66,825 applications
using multiple languages. Finally, we applied a pattern mining
approach to these applications to identify frequently co-usedprogram languages. As a result, we found out that Html
and JavaScript are the most frequently co-used (22.9%) languages for web applications. They are followed by PHP andJavaScript (6.5%), C and C++ (6.1%), and HTML and Ruby
(6.0%). These results imply that an approach that detects codeclones across HTML and JavaScript ﬁles is necessary.
Approach for detecting clones: Web applications containsource code written in co-dependent multiple programming
languages. Therefore, detecting interlanguage code clones
from web applications is a challenging issue. One of thesolutions for detecting interlanguage code clones from webapplications is merging co-dependent code clones detectedfrom each programming language. In detail, after detectingcode clones from ﬁles written in each programming language,
the code clones are merged into an interlanguage clone basedon call relationship or data ﬂows among the code clones.
In order to detect code clones from each programming
language of web applications, we can use existing code clone
detection tools [5]. However, as shown in Fig. 1, some code
clones might have gaps such as addition or insertion ofstatements. Therefore, tools that detect Type-3 code clones
can be a good candidate for detecting code clones[5].
However, we have one problem on this domain. Some ﬁles
are written in two or more languages (e.g., an HTML ﬁleACKNOWLEDGMENT
This work was supported by JSPS KAKENHI Grant Numbers 25220003, 26730036 and 15H06344.
R EFERENCES[1] N. Kraft, B. Bonds, and R. Smith. Cross-language clone detection. InProc. of SEKE 2008, pages 54–59, 2008.
[2] T. Muhammad, M. F. Zibran, Y. Yamamoto, and C. K. Roy. Near-missclone patterns in web applications: An empirical study with industrialsystems. In Proc. of CCECE 2013, pages 1–6, 2013.
[3] D. C. Rajapakse and S. Jarzabek. An investigation of cloning in webapplications. In Proc. of ICWE 2005, pages 252–262, 2005.
[4] D. C. Rajapakse and S. Jarzabek. Using server pages to unify clones
in web applications: A trade-off analysis. In Proc. of ICSE 2007, pages
116–126, 2007.
[5] C. K. Roy, J. R. Cordy, and R. Koschke. Comparison and evaluation ofcode clone detection techniques and tools: A qualitative approach. Sci.
Comput. Program., 74(7):470–495, 2009.

18