Date post: | 01-Dec-2014 |
Category: |
Technology |
Upload: | dariusz-luksza |
View: | 668 times |
Download: | 4 times |
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 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 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 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Meet AngularGerrit
Dariusz Luksza CollabNet Engineering, Potsdam, Germany
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, angularroute, angulargerrit.js and plugin code
– angulargerrit.js – wraps Gerrit JS API into AngularJS friendly services
* JAR files are actually ZIP with different extension
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 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>
8 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet AngularGerrit
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 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
How would OpenChanges screen look like?
11 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
How would OpenChanges screen look like?Yes, this was created with Angular!
12 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Twitter Bootstrap? Why not!
Dariusz Luksza CollabNet Engineering, Potsdam, Germany
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 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Q&ADariusz Luksza CollabNet Engineering, Potsdam, Germany
AngularGerrit can be cloned from:https://github.com/dluksza/angulargerrit