Angular revolution in Gerrit

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

●
Why and what for?
●
Meet Angular-Gerrit
●
How would OpenChanges screen look like?
●
Twitter Bootstrap? Why not!
●
Q&A

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

Meet AngularGerrit
Dariusz Luksza

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

● 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

● 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>

Meet AngularGerrit

How would OpenChanges screen look
like?
Dariusz Luksza

Yes, this was created with Angular!

Dariusz Luksza

This page uses different template file, JavaScipt code was reused from original screen.

Q&A
Dariusz Luksza
AngularGerrit can be cloned from:
https://github.com/dluksza/angulargerrit

Angular revolution in Gerrit

Angular revolution in Gerrit

Recommended

More Related Content

Recently uploaded

Recently uploaded(20)

Featured

Featured(20)

Angular revolution in Gerrit