Are you tired by GWT or maybe frustrated with the time you waste during Gerrit GWT plugin development? Flow of compile-package-deploy-test is not for you? Or maybe GWT is just not your style? Have you heard about AngularJS? Did you give it a try? What would you say if you could implement Gerrit Web UI plugin using AngularJS? During this presentation I will show the new way of creating Gerrit Web UI plugins, the AngularJS way! Will present what leads us in CollabNet to invest our time in angular-gerrit module. What are the benefits of using Angular instead of GWT. Will show you some parts of Gerrit Web UI reimplemented in AngularJS based plugin. Sounds interesting? Then come and see the AngularJS revolution in Gerrit!

1. 1 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
The Angular revolution in Gerrit
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany

2. 2 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
●
Why and what for?
●
Meet Angular-Gerrit
●
How would OpenChanges screen look like?
●
Twitter Bootstrap? Why not!
●
Q&A

3. 3 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Why and what for?
● Day to day development
– Debugging
– Compilation time (no compilation!)
– Dependency injection
– Testability
– Lower entry barrier to Gerrit WEB UI plugin development
● Branding
– Not only colors but also document structure

4. 4 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Meet Angular­Gerrit
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany

5. 5 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● Preconditions
– Modified Gerrit with change #53341 (and its dependencies) is required
you can just put JS code in $gerrit_site/plugins/$plugin_name/static/init.js
● Development flow
– $gerrit_site/plugins/$plugin_name/static/*
● Build
– Zip the 'static' directory, then change archive extension to jar
● Angular­Gerrit
– init.js – loads all JavaScript dependencies like jquery, angular, angular­
route, angular­gerrit.js and plugin code
– angular­gerrit.js – wraps Gerrit JS API into AngularJS friendly services
* JAR files are actually ZIP with different extension

6. 6 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● Angular­Gerrit services:
– GerritRoute – wraps angular­route and prefixes page URLs
with '/x/$plugin_name/' and template URL with '/plugins/
$plugin_name/static/'
– GerritSrv – wraps Gerrit JS APIs
– GerritPluginSrv – wraps Gerrit 'plugin aware' JS APIs
– GerritScreenSrv – wraps Gerrit Screen service

7. 7 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● How to actually use it?
– Your plugin code goes to 'static/plugin.js':
– Template code goes to `static/templates/hello.html`:
AngularGerrit.install([/* additional modules goes here */],
function(app) {
app.config(function(GerritRouteProvider) {
GerritRouteProvider
.when('/', {controller: 'HelloCtrl',
templateUrl: 'templates/hello.html'});
});
app.controller('HelloCtrl', function($scope) {
$scope.greeting = 'Hello Diffy!';
});
});
<h1>{{greeting}}</h1>

8. 8 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet Angular­Gerrit

9. 9 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
How would OpenChanges screen look
like?
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany

10. 10 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
How would OpenChanges screen look like?

11. 11 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
How would OpenChanges screen look like?
Yes, this was created with Angular!

12. 12 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Twitter Bootstrap? Why not!
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany

13. 13 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Twitter Bootstrap? Why not!
This page uses different template file, JavaScipt code was reused from original screen.

14. 14 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Q&A
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany
Angular­Gerrit can be cloned from:
https://github.com/dluksza/angular­gerrit