requirements bazaar powered by angularjs and polymer - talk at google developer group brussels

http://Learning-Layers-euhttp://Learning-Layers-eu

Learning Layers

Scaling up Technologies for Informal Learning in SME Clusters

Requirements Bazaar

powered by AngularJS & PolymerTalk at Google Developer Group Brussels

István Koren, Kristjan Liiva and Ádám Gavronek – RWTH Aachen University

1

http://Learning-Layers-eu

User Feedback Today –

Android Bug Tracker

2

http://Learning-Layers-eu

User Feedback Today –

JIRA Create Issue

3

http://Learning-Layers-eu

User Feedback Today –

Google Play Store

4

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

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

http://Learning-Layers-eu

Why Polymer?

• Attractive for users and mobile usableMaterial Design

• Web Components are the next big thing!– Already today many components exist

• Responsive– Sidebar

– Inputs

• Code separation & readability

7

http://Learning-Layers-eu

Why AngularJS & Polymer

together?

• AngularJS moves into the direction ofWeb Components

• Complement each other

– Polymer in the view

– AngularJS in the controller

Because we can!

8

http://Learning-Layers-eu

App Architecture

9

http://Learning-Layers-eu

AngularJS Architecture

CreateRequirementCtrl

10

http://Learning-Layers-eu

Used Polymer Components

• Polymer elements

– core-scaffold

– core-collapse

– paper-action-dialog

– paper-toast

– icons

• Polymer has great demos

11

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

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

http://Learning-Layers-eu

Polymer 0.8 (alpha)

14

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)

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

http://Learning-Layers-eu

Thank you!

Find these and other ReqBaz slides on SlideShare.

István Koren, Kristjan Liiva, Ádám Gavronekreqbaz@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