In this talk that we gave on April 21st, 2015 at the GDG Brussels, we presented the Requirements Bazaar with a special focus on its front end that is built with AngularJS and Polymer. http://www.requirements-bazaar.org

1. http://Learning-Layers-euhttp://Learning-Layers-eu
Learning Layers
Scaling up Technologies for Informal Learning in SME Clusters
Requirements Bazaar
powered by AngularJS & Polymer
Talk at Google Developer Group Brussels
István Koren, Kristjan Liiva and Ádám Gavronek – RWTH Aachen University
1

2. http://Learning-Layers-eu
User Feedback Today –
Android Bug Tracker
2

3. http://Learning-Layers-eu
User Feedback Today –
JIRA Create Issue
3

4. http://Learning-Layers-eu
User Feedback Today –
Google Play Store
4

5. http://Learning-Layers-eu
Continuous Innovation
• Involve end users in the development
• Allow developers to talk with end users
• Faster innovation cycles
• Web-based tool
• Mobile friendly
http://www.requirements-bazaar.org
5
Continuous Innovation
Continuous Integration
Continuous Delivery
Continuous Deployment

6. http://Learning-Layers-eu
Why AngularJS?
• Widely-used, modern framework
• Model-View-Whatever pattern
– Better code readability
• Single-page application
– Load application resources initially
– Lazy-loading data
• Two-way data binding
– Comfortable
• Using existing modules
6

7. http://Learning-Layers-eu
Why Polymer?
• Attractive for users and mobile usable
 Material Design
• Web Components are the next big thing!
– Already today many components exist
• Responsive
– Sidebar
– Inputs
• Code separation & readability
7

8. http://Learning-Layers-eu
Why AngularJS & Polymer
together? 
• AngularJS moves into the direction of
Web Components
• Complement each other
– Polymer in the view
– AngularJS in the controller
 Because we can! 
8

9. http://Learning-Layers-eu
App Architecture
9

10. http://Learning-Layers-eu
AngularJS Architecture
CreateRequirementCtrl
10

11. http://Learning-Layers-eu
Used Polymer Components
• Polymer elements
– core-scaffold
– core-collapse
– paper-action-dialog
– paper-toast
– icons
• Polymer has great demos
11

12. http://Learning-Layers-eu
Combining AngularJS and
Polymer
• 1-way data binding
• For 2-way binding
– OS library for basic components
– https://github.com/GabiAxel/ng-polymer-
elements
– Polymer changes
– Binding some values, e.g. dialog opened
12

13. http://Learning-Layers-eu
Experiences & Recommendations
• The bad
– AngularJS refactoring
– Getting stuck is usual
– Performance
• The good
– Amazing progress
– Mistakes are easy to find
13
http://goo.gl/eOQDsk

14. http://Learning-Layers-eu
Polymer 0.8 (alpha)
14

15. http://Learning-Layers-eu
What will change with
AngularJS 2.0?
• Change of philosophy – Web components
– NO BACKWARD COMPATIBILITY!
15
Angular 1 Angular 2
Pure JavaScript (ES5) Preferably TypeScript (ES6)
Controllers Component, Viewport, Decorator
Two-way data-binding One-way data-binding
$scope Implicit from components
ngRoute New router (usable in Angular 1)

16. http://Learning-Layers-eu
What will keep us busy…
• Libraries for HTML5, WebView for Android
• Plugins for WordPress
• Gamification
– Requirements Prioritization
– Development
• Personalized release notes
– ”Your idea has been implemented!“
16

17. http://Learning-Layers-eu
Thank you!
Find these and other ReqBaz slides on SlideShare.
István Koren, Kristjan Liiva, Ádám Gavronek
reqbaz@dbis.rwth-aachen.de
We‘re on GitHub:
https://github.com/rwth-acis/RequirementsBazaar
Docker images available:
https://registry.hub.docker.com/repos/rwthacis/
http://www.requirements-bazaar.org
17