-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
283 lines (281 loc) · 22.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Swiftcity</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/icons.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body class="white">
<div class="navbar-fixed nav-style">
<nav>
<div class="nav-wrapper white">
<a target="_blank" href="https://github.com/swiftcity"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="grey-text text-darken-3 material-icons">menu</i></a>
<ul class="right hide-on-med-and-down" style="margin-right: 50px">
<li><a class="grey-text text-darken-3" href="#content">Home</a></li>
<li><a class="grey-text text-darken-3" href="#examples">Examples</a></li>
<li><a class="grey-text text-darken-3" href="#about">About</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a class="grey-text text-darken-3" href="#content">Home</a></li>
<li><a class="grey-text text-darken-3" href="#examples">Examples</a></li>
<li><a class="grey-text text-darken-3" href="#about">About</a></li>
</ul>
</div>
</nav>
</div>
<div id="content">
</br>
</br>
<div class="row center">
<div class="col s12 m12 l12">
<img src="./imgs/main-title.png" height="280px" width="650px">
<p class="light center">Download the extractor and the guide to run over your Swift project. <br>Run this tool to your Swift project and use the generated metadata file into the visualizer to view your project as a city!<p>
</div>
</div>
</br>
</br>
</br>
<div class="row center" style="width: 80%">
<div class="col s12 m6 l6">
<div class="mouse-hover">
<i class="blue-text text-accent-3 large material-icons">system_update_alt</i>
<h5 class="">Download the Extractor!</h5>
<p class="light center">Download the extractor and the guide to run over your Swift project. This tool extracts information from Swift projects that is necessary for them to be visualized as cities.<p>
</div>
</div>
<div class="col s12 m6 l6">
<div class="mouse-hover" onclick='openInNewTab("https://swiftcity.github.io/swiftcity-app/")'>
<i class="blue-text text-accent-3 large material-icons">play_circle_filled</i>
<h5 class="">Run The Visualizer!</h5>
<p class="light center">Presents information about Swift projects in 3D using the Software as Cities metaphor. Accounts for the many types of modules that exist in Swift and presents them as buildings in this city representation.</p>
</div>
</div>
</div>
<div class="row center" style="width: 80%">
<br><br>
<div class="divider"></div>
<div class="light">
<br><br>
<i class="medium news-align orange-text text-darken-3 material-icons">new_releases</i>
<strong style="font-size: 2em">News!</strong>
</div>
<ul>
<li class="light">
19/12/2016 - Swiftcity app is <a href="https://swiftcity.github.io/swiftcity-app/" target="_blank">online</a>!
</li>
<ul>
<br>
</div>
<div class="row center grey lighten-4" id="examples">
<div class="row" style="width: 80%">
<br><br>
<h3 class="light">Cities!</h3>
<h5 class="light center">We took open source projects and visualized them using our tool.
</br>
See the cities below for some of the most starred Swift projects in GitHub.
</h5>
<h6>
<a target="_blank" href="https://github.com/Mozharovsky/CVCalendar">CVCalendar</a>, <a target="_blank" href="https://github.com/Alamofire/Alamofire">Alamofire</a>, <a target="_blank" href="https://github.com/ReactiveX/RxSwift">RxSwift</a>, <a target="_blank" href="https://github.com/Ramotion/animated-tab-bar">Animated-Tab-Bar</a>,
<a target="_blank" href="https://github.com/duemunk/Async">Async</a>,
<a target="_blank" href="https://github.com/robb/Cartography">Cartography</a>,
<a target="_blank" href="https://github.com/PerfectlySoft/Perfect">Perfect</a>,
<a target="_blank" href="https://github.com/SnapKit/SnapKit">SnapKit</a>,
<a target="_blank" href="https://github.com/MengTo/Spring">Spring</a>,
<a target="_blank" href="https://github.com/SwiftyJSON/SwiftyJSON">Swift JSON</a>.
</h6>
</div>
<div class="img-slider col s12 m12 l12">
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Alamofire project." src="./imgs/alamofire.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Animated Tab Bar project." src="./imgs/animated-tab-bar.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Async project." src="./imgs/async.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Cartography project." src="./imgs/cartography.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the CVCalendar project." src="./imgs/cvcalendar.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Perfect project." src="./imgs/perfect.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the RxSwift project." src="./imgs/rxswift.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Snap Kit project." src="./imgs/snapkit.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Sprong project." src="./imgs/spring.png">
</div>
<div class="img-container">
<img class="img-size materialboxed" data-caption="City of the Swift JSON project." src="./imgs/swiftjson.png">
</div>
</div>
<div class="row" style="width: 80%">
<h3 class="light">Try it yourself!</h3>
<h5 class="light center">Take the samples used for these views above and run it yourself using the Visualizer tool! </br><a href="https://github.com/swiftcity/swiftcity-app/tree/master/data-samples" target="_blank">Download here.</a></h5>
</div>
<div class="row" style="width: 80%">
<div class="row faq-style">
<div class="divider"></div>
<h4 class="light">What is the City Metaphor?</h4>
<h6 class="light justify-text">Introduced by Wettel (2007), the <a href="http://www.inf.usi.ch/faculty/lanza/Downloads/Wett07b.pdf" target="_blank">City Metaphor</a> proposes to analyse and view software systems as cities. The software system is represented as a city that can be traversed and interacted with, provinding the viewer a sense of locality to ease program comprehension. </br></br>The key point in conceiving a realistic software city is to map the information about the source code in meaningful ways in order to take the approach beyond beautiful pictures. It proposes several concepts that contributes to create the urban feeling, such as appropriate layouts, topology, and facilities to ease navigation and interaction.</h6>
</div>
</br>
</br>
</div>
</div>
<div class="row" id="about">
</br>
<div class="row" style="width: 80%">
<h3 class="light center">How does the Visualizer look like?</h3>
<h5 class="light center">A simple demo reveals you the view and application interface!</h5>
</div>
<div class="row" style="width: 80%">
<div class="col s12 m12 l12 app-view">
<iframe class="iframe-view" width="100%" height="600"
src="https://www.youtube.com/embed/ArQ7Y5N5ptA" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="row faq-style">
<div class="divider"></div>
<h4 class="light">GitHub</h4>
<h6 class="light justify-text">Look forward our organization on <a href="https://github.com/swiftcity" target="_blank">GitHub!</a></h6>
</div>
<div class="row faq-style">
<div class="divider"></div>
<h4 class="light">How does the Extractor work?</h4>
<h6 class="light justify-text">We use two tools to collect and generate the data that will be visualized. The first is a custom Xcode toolchain that exports an AST representation of the project to an output file, by using the -dump-ast command of Swift's compiler. We then use another tool to parse the AST representation and allow its visualization. </h6>
</div>
<div class="row faq-style">
<div class="divider"></div>
<h4 class="light">Metaphor applied to Swift</h4>
<h6 class="light justify-text">This project proposes its own way to translate Swift systems into the city metaphor, which allows the understanding of the usage of the language particularities. </h6>
<h6 class="light justify-text">Check out <a target="_blank" href="./poster - abstract - swiftcity.pdf">here</a> an extended abstract that explains in details the project and its challenges.</h6>
<br>
<h5 class="light center">The buildings in the city</h5>
<div class="valign-wrapper row">
<div class="col s12 m2 l2 no-padding-margin left-align">
<img class="img-container materialboxed" data-caption="Block dimensions." src="./imgs/blocksize.png" alt="Block dimensions.">
</div>
<div class="col s12 m12 l10 valign no-padding-margin">
<p style="padding-left: 55px !important" class="light justify-text">A block is the fundamental element of the metaphor, representing a city building. In the original metaphor, a block was mapped to represent a class of the system. However, Swift has several elements that must be represented that were not available in Java or Javascript (e.g., structs and extensions). In a Swift context a block can represent one of these types: <strong><big>Classes, Structs, Protocols, Enumerations or Extensions</big></strong>. Several metrics can be applied in order to define the measurements of a block. For this work, the block height is given the number of <strong><big>lines of code</big></strong> (LOC) of the element, while the width and length are defined by the <strong><big>number of methods</big></strong> (NOM).</p>
</div>
</div>
<h5 class="light center">The colors of the objects</h5>
<div class="valign-wrapper row">
<div class="col s12 m12 l8 valign no-padding-margin">
<p class="light justify-text" style="padding-right: 15px !important">We decided to differentiate the types of elements by using <strong><big>different colors</big></strong> for each kind since, according to <a href="http://www.sciencedirect.com/science/article/pii/S0010945207001177" target="_blank">Zanolie</a>, forms are usually associated with the representation of elements of different nature, yet all elements are Swift types that belong to different categories. Moreover, the use of different forms would go against the metaphor, translating the elements into objects that do not necessarily create the immersion of a city.</p>
</div>
<div class="col s12 m12 l4 no-padding-margin right-align">
<img class="img-container materialboxed" data-caption="Color pallet." src="./imgs/pallet.png" alt="Color pallet to types.">
</div>
</div>
<h5 class="light center">The city Topology</h5>
<div class="valign-wrapper row">
<div class="col s12 m12 l3 no-padding-margin left-align">
<img class="img-container materialboxed" data-caption="City of the Animated Tab project." height="250px" width="300px" src="./imgs/animated-tab-bar.png" alt="City of the Animated Tab project.">
</div>
<div class="col s12 m12 l9 valign no-padding-margin">
<p style="padding-left: 55px !important" class="light justify-text">The city topology is usually mapped to elements of the system hierarchy. Since there are no packages, namespaces or anything equivalent in Swift, the mapping limits itself to two clear levels: <strong><big>the project and the files</big></strong>. The lowest layer represents the city limits as being the whole project (dark gray), and each element of the second layer represents a district, which translates to a file within the project (light gray).</p>
</div>
</div>
<h5 class="light center">Handling extensions</h5>
<div class="valign-wrapper row">
<div class="col s12 m12 l6 valign no-padding-margin">
<p class="light justify-text" style="padding-right: 15px !important">A challenge was how to represent the relations between extensions and other elements. Two approaches were considered satisfactory:
<br>
<ul>
<li class="light justify-text">a) <strong><big>Stacking extensions</big></strong> to the element, so they would become a single building.</li>
<li class="light justify-text">b) <strong><big>Adding another layer</big></strong> that would contain the element and its extensions.</li>
</ul>
</p>
<p class="light justify-text valign no-padding-margin" style="padding-right: 15px !important">
There are, however, advantages and disadvantages of each. The first, for example, better translates the complexity of the elements. On the other hand, the second allows a cleaner view as the city elements are more spread.
</p>
</div>
<div class="col s12 m12 l6 no-padding-margin center">
<img height="270px" width="290px" style="float: left;" class="img-container materialboxed" data-caption="Stacking up blocks method.." src="./imgs/stacking.png" alt="Stacking up blocks method.">
<img height="270px" width="264px" style="margin-left: 10px !important ; float: left;" class="img-container materialboxed" data-caption="Groupping by floor method." src="./imgs/groupping.png" alt="Groupping by floor method.">
</div>
</div>
</div>
<div class="row faq-style">
<div class="divider"></div>
<h4 class="light">Simple analysis</h4>
<h6 class="light justify-text">Using our Visualizer you can quickly make analysis and conclusions about the project just spending a few minutes looking at the city. Look some analysis made bellow:</h6>
<div class="valign-wrapper row">
<div class="col s12 m12 l9 no-padding-margin center">
<img width="100%" height="490px" class="img-container materialboxed" data-caption="Simple analysis made on project using the visualizer." src="./imgs/alamofire-analysis.png" alt="Simple analysis made on project using the visualizer.">
</div>
<div class="col s12 m12 l3 no-padding-margin">
<p class="light justify-text" style="padding-left: 15px !important"><strong>Alamofire</strong>: API for HTTP networking.</p>
<ul class="browser-default" style="padding-left: 30px !important">
<li class="light justify-text">Extensions as a pattern, but there are some huge classes in the city.</li>
<li class="light justify-text">Two strangely large blue towers (enums). This is unusual for enums. Therefore, they could be subject to inspection.</li>
</ul>
</div>
</div>
<div class="valign-wrapper row">
<div class="col s12 m12 l9 no-padding-margin center">
<img width="100%" height="490px" class="img-container materialboxed" data-caption="Simple analysis made on project using the visualizer." src="./imgs/rxswift-analysis.png" alt="Simple analysis made on project using the visualizer.">
</div>
<div class="col s12 m12 l3 no-padding-margin">
<p class="light justify-text" style="padding-left: 15px !important"><strong>RxSwift</strong>: reactive programming framework.</p>
<ul class="browser-default" style="padding-left: 30px !important">
<li class="light justify-text">Few extensions that extend classes;</li>
<li class="light justify-text">More extensions to native Swift types, shown as ungrouped yellow blocks in the city;</li>
<li class="light justify-text">53 extensions to a protocol (ObservableType);</li>
<li class="light justify-text">Structs are not as often used as in Alamofire.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col l3 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a target="_blank" class="grey-text text-lighten-3" href="https://github.com/swiftcity">
<i class="icon-align material-icons">description</i>
Github
</a>
</li>
<li>
<a target="_blank" class="grey-text text-lighten-3" href="https://github.com/orgs/swiftcity/people">
<i class="icon-align material-icons">person_pin</i>
Contact the team
</a>
</li>
</ul>
</div>
<div class="col l6 s12">
<h5 class="white-text">About the project</h5>
<p class="justify-text grey-text text-lighten-4">This application is the result of a research project under the tutorship of Professor <a href="https://sites.google.com/a/cin.ufpe.br/castor/" target="_blank">Fernando Castor</a>. The goal is to colaborate to the professor research about Swift and its usage. However, it is an open-source platform to visualize software systems written in Swift. The extractor tool was made by <a href="https://github.com/marcel-reboucas" target="_blank">Marcel Rebouças</a>, master's student. The visualization tool was developed by <a href="http://github.io/peaonunes" target="_blank">Rafael Nunes</a> as his graduation project.</p>
</div>
</div>
</div>
<div class="center footer-copyright grey darken-4">
@ 2017 Swiftcity. Some rights are reserved.
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize/materialize.min.js"></script>
<script type="text/javascript" src="./js/interface.js"></script>
</body>
</html>