Angular revolution in Gerrit

974 views
801 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
974
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×