Skip to content

Commit 43b897e

Browse files
avandeursenavandeursen
committed
Merge pull request #35 from delftswa/pdf
Made markdown ready for pdf generation.
2 parents 661c6cd + 01c1b01 commit 43b897e

File tree

22 files changed

+407
-408
lines changed

22 files changed

+407
-408
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
_site
22
.vagrant
33
target
4+
/images
5+
zzz-epub-extract
6+
.DS_Store

‎Makefile‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ EXTRACTDIR=zzz-epub-extract
1111
TARGET_DIR=target
1212

1313
EPUB_OUT=$(TARGET_DIR)/$(DOC).epub
14+
PDF_OUT=$(TARGET_DIR)/$(DOC).pdf
1415

1516
all:
1617
$(MAKE) clean img epub
@@ -37,10 +38,24 @@ check:
3738
# An epub file is just a zip file with html content.
3839
# Provide target for unzipping to help fixing incorrect epubs.
3940
unzip:
40-
rm -rf $(TMPDIR)
41-
mkdir -p $(TMPDIR)
42-
cp $(DOC).epub $(TMPDIR)/$(DOC).zip
43-
cd $(TMPDIR); unzip $(DOC).zip
41+
rm -rf $(EXTRACTDIR)
42+
mkdir -p $(EXTRACTDIR)
43+
cp $(EPUB_OUT) $(EXTRACTDIR)/$(DOC).zip
44+
cd $(EXTRACTDIR); unzip $(DOC).zip
4445

4546
clean:
4647
rm -rf images $(EXTRACTDIR) $(TARGET_DIR)
48+
49+
pdf:
50+
mkdir -p $(TARGET_DIR)
51+
pandoc \
52+
--include-in-header=preamble.tex \
53+
--smart \
54+
--toc \
55+
--chapters \
56+
--number-sections \
57+
--toc-depth=2 \
58+
--output=$(PDF_OUT) \
59+
index.md \
60+
$(CHAPTERS_MD)
61+

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ highlighter: pygments
22
relative_permalinks: false
33

44
timezone: UTC
5-
exclude: ['provision.sh','Vagrantfile','README.md','test_links.rb']
5+
exclude: ['provision.sh','Vagrantfile','README.md','test_links.rb','Makefile','preamble.tex']
66

77
# Server settings
88
host: 0.0.0.0

‎chapters/angulardart/index.md‎

Lines changed: 122 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ chapter: true
99
*Delft University of Technology*
1010

1111

12-
![](images/angulardart_logo.png "AngularDart")
12+
![Angular Dart Logo](images/angulardart_logo.png "AngularDart")
13+
<!-- -->
1314

1415
**Abstract**
1516

@@ -37,83 +38,78 @@ AngularDart combines the client-side framework Angular with the programming lang
3738
### What it is all about - A Quick Example
3839

3940
HTML:
40-
<pre>
41-
<code>
42-
43-
&lt;!doctype html&gt;
44-
&lt;html&gt;
45-
&lt;head&gt;
46-
&lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
47-
&lt;/head&gt;
48-
&lt;body&gt;
49-
&lt;h2&gt;Todo&lt;/h2&gt;
50-
&lt;div todo-list ng-cloak&gt;
51-
&lt;span&gt;
52-
{{TodoCtrl.remaining()}} of {{TodoCtrl.todos.length}} remaining
53-
&lt;/span&gt;
54-
[ &lt;a href=&quot;&quot; ng-click=&quot;TodoCtrl.archive()&quot;&gt;archive&lt;/a&gt; ]
55-
&lt;ul class=&quot;unstyled&quot;&gt;
56-
&lt;li ng-repeat=&quot;todo in TodoCtrl.todos&quot;&gt;
57-
&lt;input type=&quot;checkbox&quot; ng-model=&quot;todo.done&quot;&gt;
58-
&lt;span class=&quot;done-{{todo.done}}&quot;&gt;{{todo.text}}&lt;/span&gt;
59-
&lt;/li&gt;
60-
&lt;/ul&gt;
61-
&lt;form ng-submit=&quot;TodoCtrl.addTodo()&quot;&gt;
62-
&lt;input type=&quot;text&quot; ng-model=&quot;TodoCtrl.todoText&quot; size=&quot;30&quot;
63-
placeholder=&quot;add new todo here&quot;&gt;
64-
&lt;input class=&quot;btn-primary&quot; type=&quot;submit&quot; value=&quot;add&quot;&gt;
65-
&lt;/form&gt;
66-
&lt;/div&gt;
67-
&lt;script type=&quot;application/dart&quot; src=&quot;todo.dart&quot;&gt;&lt;/script&gt;
68-
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
69-
&lt;/body&gt;
70-
&lt;/html&gt;
71-
72-
</code>
73-
</pre>
41+
42+
<!doctype html>
43+
<html>
44+
<head>
45+
<link rel="stylesheet" href="todo.css">
46+
</head>
47+
<body>
48+
<h2>Todo</h2>
49+
<div todo-list ng-cloak>
50+
<span>
51+
{{TodoCtrl.remaining()}} of {{TodoCtrl.todos.length}} remaining
52+
</span>
53+
[ <a href="" ng-click="TodoCtrl.archive()">archive</a> ]
54+
<ul class="unstyled">
55+
<li ng-repeat="todo in TodoCtrl.todos">
56+
<input type="checkbox" ng-model="todo.done">
57+
<span class="done-{{todo.done}}">{{todo.text}}</span>
58+
</li>
59+
</ul>
60+
<form ng-submit="TodoCtrl.addTodo()">
61+
<input type="text" ng-model="TodoCtrl.todoText" size="30"
62+
placeholder="add new todo here">
63+
<input class="btn-primary" type="submit" value="add">
64+
</form>
65+
</div>
66+
<script type="application/dart" src="todo.dart"></script>
67+
<script src="packages/browser/dart.js"></script>
68+
</body>
69+
</html>
70+
71+
7472

7573
In this HTML example you can see some unusual properties inside the tags often prefixed with `ng-`.
7674
These are standard Angular _directives_ that add behaviour or functionality to those tags.
7775
This is done by the Angular library by scanning the HTML client-side. The `todo-list` attribute in the top `<div>` refers to the controller written in Dart below, which manages the logic of adding todos:
7876

7977
Dart:
80-
<pre><code>
81-
import ‘package:angular/angular.dart’;
82-
import ‘package:angular/application_factory.dart’;
83-
84-
@Controller(
85-
selector: &#39;[todo-list]&#39;,
86-
publishAs: &#39;TodoCtrl&#39;)
87-
class TodoController {
88-
List&lt;Todo&gt; todos;
89-
String todoText;
90-
91-
TodoController() {
92-
todos = [...];
93-
}
94-
95-
void addTodo() {
96-
todos.add(new Todo(todoText, false));
97-
todoText = &#39;&#39;;
98-
}
99-
100-
int remaining() {...}
101-
102-
void archive() {...}
103-
}
104-
}
105-
106-
class Todo {...}
107-
108-
class TodoModule extends Module {...}
109-
110-
main() {
111-
applicationFactory()
112-
.addModule(new TodoModule())
113-
.run();
114-
}
115-
</code>
116-
</pre>
78+
79+
import ‘package:angular/angular.dart’;
80+
import ‘package:angular/application_factory.dart’;
81+
82+
@Controller(
83+
selector: &#39;[todo-list]&#39;,
84+
publishAs: &#39;TodoCtrl&#39;)
85+
class TodoController {
86+
List&lt;Todo&gt; todos;
87+
String todoText;
88+
89+
TodoController() {
90+
todos = [...];
91+
}
92+
93+
void addTodo() {
94+
todos.add(new Todo(todoText, false));
95+
todoText = &#39;&#39;;
96+
}
97+
98+
int remaining() {...}
99+
100+
void archive() {...}
101+
}
102+
}
103+
104+
class Todo {...}
105+
106+
class TodoModule extends Module {...}
107+
108+
main() {
109+
applicationFactory()
110+
.addModule(new TodoModule())
111+
.run();
112+
}
117113

118114
In the next section the Angular framework is described: Its stakeholders are analyzed, as well as the project's organization. Then, the implementation and its functions are assessed, after which the evolution is described and the metrics for evaluation are introduced. Lastly, the contributions made are discussed.
119115

@@ -153,31 +149,33 @@ Now that we looked into the people involved in Angular, its architecture is expl
153149
Modules are functional, largely independent, units in the project that contain multiple files of source code. It is an 'encapsulation' of a specific aspect of the project. The two main advantages of the modular programming method are (1) simplification of code through limitation of dependencies between modules and (2) easier organisation of distributed programming because teams (or individuals) can specialize on single modules instead of having to know all the source code [Sun Microsystems, 2007](https://netbeans.org/project_downloads/usersguide/rcp-book-ch2.pdf).
154150

155151
Although the AngularDart repository could be considered to be relatively small, it also benefits from modules to structure the source code. The code section below illustrates a folder structure in the AngularDart project. It depicts the /lib folder, which actually contains 15 folders and 10 files.
156-
<pre><code>
157-
angular.dart/lib
158-
/animate # contains files that provide animation functionality for angular.dart
159-
animation_loop.dart
160-
animation_optimizer.dart
161-
animations.dart
162-
css_animate.dart
163-
module.dart
164-
[...]
165-
/core # folder with core elements of angular.dart
166-
/parser # sub-folder of /core containing parsing functions
167-
[...]
168-
module.dart
169-
annotation.dart # source code file that adds annotation
170-
exception handler.dart # source code file that handles exceptions in angular.dart
171-
[...]
172-
</code></pre>
152+
153+
angular.dart/lib
154+
/animate # contains files that provide animation functionality for angular.dart
155+
animation_loop.dart
156+
animation_optimizer.dart
157+
animations.dart
158+
css_animate.dart
159+
module.dart
160+
[...]
161+
/core # folder with core elements of angular.dart
162+
/parser # sub-folder of /core containing parsing functions
163+
[...]
164+
module.dart
165+
annotation.dart # source code file that adds annotation
166+
exception handler.dart # source code file that handles exceptions in angular.dart
167+
[...]
168+
173169
The modules in AngularDart can be identified through the 'module.dart' file in a directory. In the example above, 'animate' is a module where 'core' contains the parser.
174170

175171
[Christopher Hiller](https://github.com/boneskull), a Software Architect and contributor to AngularJs, explained how developers can modularize their projects when using Angular.
176172
His blog is a good addition on the explanation above and focuses on creating modules in an organically grown coding project ([Hiller, 2014](https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/)).
177173

178174
The overall tendency is that the main modules in `/lib` are loosely decoupled, with only the Core module binding all the modules together.
179175
In the image below, the different modules and the dependencies between them are illustrated by a network analysis graph: Larger modules have more imcoming dependencies whilst small modules rely on such dependencies.
180-
![Module dependency graph analysis](images/module _graph_analysis.png "Module dependency graph analysis of /lib")
176+
177+
![Module dependency graph analysis of /lib](images/module _graph_analysis.png)
178+
_Module dependency graph analysis of /lib_
181179

182180
AngularDart is written with a Dependency Injection (DI) framework, used for the decoupling of classes, allowing for re-usability.
183181
It allows the import of some software library in such a way that the DI module handles the discovery and import of this library.
@@ -196,7 +194,7 @@ The functional capabilities define what AngularDart does. AngularDart is a port
196194
We derived the following functions in AngularDart:
197195

198196
| Function | In component |
199-
|----------|--------|
197+
|----------------------------------------------------|------------|
200198
| Animating HTML elements | Animate |
201199
| Teach the browser new HTML syntax | HTML Compiler |
202200
| Binding data in the view and in the model | Two-way data binding |
@@ -218,24 +216,23 @@ Also the differences between AngularJs and AngularDart are taken into account, r
218216
* AngularDart is built on top of Shadow DOM, so when implementing a Component the Shadow DOM is used.
219217

220218
An example of the DI system differing between both versions, can be made clear as follows by an example from the blog [[2](http://victorsavkin.com/post/86909839576/angulardart-1-0-for-angularjs-developers)] of Victor Savkn:
221-
<pre><code>
222-
//JS:
223-
// The name here matters, and since it will be minified in production,
224-
// we have to use the array syntax.
225-
m.factory("usersRepository", ["$http", function($http){
226-
return {
227-
all: function(){/* ... */}
228-
}
229-
}]);
230-
231-
//DART:
232-
@Injectable()
233-
class UsersRepository {
234-
// Only the type here matters, the variable name does not affect DI.
235-
UsersRepository(Http h){/*...*/}
236-
all(){/* ... */}
237-
}
238-
</code></pre>
219+
220+
//JS:
221+
// The name here matters, and since it will be minified in production,
222+
// we have to use the array syntax.
223+
m.factory("usersRepository", ["$http", function($http){
224+
return {
225+
all: function(){/* ... */}
226+
}
227+
}]);
228+
229+
//DART:
230+
@Injectable()
231+
class UsersRepository {
232+
// Only the type here matters, the variable name does not affect DI.
233+
UsersRepository(Http h){/*...*/}
234+
all(){/* ... */}
235+
}
239236

240237

241238
#### Interfaces
@@ -257,7 +254,8 @@ Connectors are the pieces of code of the architecture that link the elements, or
257254
#### External entities
258255
AngularDart has "other systems, software programs, hardware devices or other entities with which the system interacts" (Rozanski and Woods, p. 272), or external entities. These can be extracted from the Context view image below.
259256

260-
![Context view with logos](images/Context_view_with_logos.png "Context view with logos")
257+
![PIETJE PUK](images/Context_view_with_logos.png)
258+
_Context view with logos_
261259

262260
* HTML: AngularDart extends the HTML with several directives, as discussed earlier, such as "ng-class". By using this directive, AngularDart attaches to that DOM element a specified behavior, or it can transform that DOM element (and its children).
263261
* DOM: AngularDart relies on the DOM, which all browsers have implemented. Furthermore, it can make use of the Shadow DOM, which is a polyfiller if it is not already natively supported by the browser.
@@ -281,10 +279,13 @@ Version 2 will also add support for Web Components, which are a collection of fo
281279

282280
Angular 2.0 will be built using TypeScript from Microsoft. However, because no browser supports TypeScript natively yet, it will be transpiled (a source-to-source compiler, that *trans*lates code to another programming language) to EcmaScript 5. TypeScript differs from EcmaScript 5 by the addition of types to the language (type annotations, compile-time type checking and type inference). This also counts for classes, interfaces, modules and more. TypeScript is a superset of EcmaScript 5, which means that any current JavaScript program is a valid TypeScript program. However, Angular 2.0 does not offer any backwards compatibility to version 1.
283281

284-
![Alt text](images/angular2_transpile_architecture.png "Angular 2 Transpile Architecture")
282+
![Angular 2 Transpile Architecture](images/angular2_transpile_architecture.png)
283+
_Angular 2 Transpile Architecture_
284+
285285
In the image above you can see the way the Angular 2 is built. Since the development started on version 2 of Angular, both teams of the JavaScript and Dart version are combined into one team. Version 2 uses the facada pattern, which uses abstracted functions to improve readability of the library and the make a coherent API that is easy to use. Also, the most important reason that these facades are necessary is for the differences between JavaScript and Dart APIs. The transpiler uses these facades to compile the correct API for both languages. Traceur is the component responsible for tranpsiling the code to EcmaScript 5 and Dart.
286286

287-
![](images/angular2_team.png "The team of Angular 2")
287+
![The team of Angular 2](images/angular2_team.png)
288+
_The team of Angular 2_
288289

289290
This compiler actually adds an extra option to develop Angular apps. Besides EcmaScript 5, EcmaScript 6, TypeScript and Dart, it is also possible to write Angular apps using the Traceur compiler in EcmaScript 6 and having it transpile to any number of the just mentioned languages.
290291

@@ -347,18 +348,16 @@ The level of achievement of the goal can be measured by comparing the deltas of
347348
For example: the number of issues being raised in AngularJs might be higher than in AngularDart or Angular 2.0, but that cannot directly concluded that AngularJs is more fragile, AngularJs has more users and contributors.
348349
So the improvement of 2.0 over 1.0 in this measure `M` should measured as:
349350

350-
<pre><code>
351-
Mjs = Issues(Ajs) / Contributors(Ajs)
352-
Mdart = Issues(Adart) / Contributors(Adart)
353-
M2 = Issues(A2) / Contributors(A2)
354-
</code></pre>
351+
Mjs = Issues(Ajs) / Contributors(Ajs)
352+
Mdart = Issues(Adart) / Contributors(Adart)
353+
M2 = Issues(A2) / Contributors(A2)
355354

356355
Resulting in: `M2 < Mdart < Mjs`
357356

358357
#### Goal for Angular
359358

360359
| Goal | |
361-
|---------|-------|
360+
|---------|---------------------------------|
362361
| Purpose | Lower |
363362
| Issue | The barrier |
364363
| Object | For contributing towards Angular (2.0) |
@@ -443,7 +442,8 @@ An application called `cloc` is used to count the number of lines of code and th
443442

444443
<br />
445444

446-
![Ratio Comment/LOC](images/ratio_loc_comments.png "Ratio Comment / LOC")
445+
![Ratio Comment / LOC](images/ratio_loc_comments.png)
446+
_Ratio Comment / LOC_
447447

448448
**Total volume of documentation (word count)**
449449

@@ -478,7 +478,9 @@ Finally, general checking metrics are needed to define whether the goal, namely
478478
* **Mapping**: Monitoring the number of contributors, to see if this increases
479479

480480
This metric is performed and obtained from GitHub, with the results depicted in the following graph:
481-
![Number of contributors](images/number_of_contributors.png "Number of contributors")
481+
482+
![Number of contributors](images/number_of_contributors.png)
483+
_Number of contributors_
482484

483485
The number of contributors reached a peak in November 2014, and has steadily declined. This might be just because of start of the AngularJs 2.0, the new framework.
484486

0 commit comments

Comments
 (0)