Angular revolution in Gerrit1. 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 AngularGerrit
Dariusz Luksza
CollabNet Engineering, Potsdam, Germany
5. 5 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angulargerrit.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
● AngularGerrit
– init.js – loads all JavaScript dependencies like jquery, angular, angular
route, angulargerrit.js and plugin code
– angulargerrit.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 angulargerrit.js
● AngularGerrit services:
– GerritRoute – wraps angularroute 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 angulargerrit.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>
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
AngularGerrit can be cloned from:
https://github.com/dluksza/angulargerrit