Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
The Angular...
2 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
●
Why and w...
3 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Why and what for?
● Day to day development
– Debugging
– Compilatio...
4 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Meet Angula...
5 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● Preconditions
– Modified Gerrit with chang...
6 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● Angular­Gerrit services:
– GerritRoute – w...
7 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet angular­gerrit.js
● How to actually use it?
– Your plugin code...
8 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Meet Angular­Gerrit
9 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
How would O...
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...
12 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Twitter Bo...
13 Copyright ©2014 CollabNet, Inc. All Rights Reserved.
Twitter Bootstrap? Why not!
This page uses different template file...
14 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT
Q&A
Darius...
Upcoming SlideShare
Loading in …5
×

Angular revolution in Gerrit

1,281 views

Published on

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!

Published in: Technology
  • Be the first to comment

Angular revolution in Gerrit

  1. 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. 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. 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. 4 Copyright ©2014 CollabNet, Inc. All Rights Reserved.ENTERPRISE CLOUD DEVELOPMENTENTERPRISE CLOUD DEVELOPMENT Meet Angular­Gerrit Dariusz Luksza CollabNet Engineering, Potsdam, Germany
  5. 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. 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. 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. 8 Copyright ©2014 CollabNet, Inc. All Rights Reserved. Meet Angular­Gerrit
  9. 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. 10 Copyright ©2014 CollabNet, Inc. All Rights Reserved. How would OpenChanges screen look like?
  11. 11. 11 Copyright ©2014 CollabNet, Inc. All Rights Reserved. How would OpenChanges screen look like? Yes, this was created with Angular!
  12. 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. 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. 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

×