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



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, angularroute, angulargerrit.js and plugin code

– angulargerrit.js – wraps Gerrit JS API into AngularJS friendly services

* JAR files are actually ZIP with different extension

https://gerrit-review.googlesource.com/#/c/53341


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


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>


Meet AngularGerrit


How would OpenChanges screen look like?



How would OpenChanges screen look like?Yes, this was created with Angular!


Twitter Bootstrap? Why not!



Twitter Bootstrap? Why not!This page uses different template file, JavaScipt code was reused from original screen.


Q&ADariusz Luksza CollabNet Engineering, Potsdam, Germany

AngularGerrit can be cloned from:https://github.com/dluksza/angulargerrit

https://github.com/dluksza/angular-gerrit

angular revolution in gerrit

Technology