You have the goal to migrate your project from AngularJS 1.x to Angular 4 and Angular 5. This should be straightforward, except you are realizing that your 3 year old technology stack is totally outdated (Grunt, RequireJS, Bower et al). Furthermore, you are using an older AngularJS 1.x version and your architecture does not conform with the latest 1.x architectural recommendations. At this point things start to look daunting. In this talk we discuss the challenges, experiences and reasons for migrating the Spring Cloud Data Flow Dashboard from using AngularJS 1.x to Angular 5. We also show how we effectively integrate our Angular front-end with Spring Boot.

1. Migrating to Angular 5 for Spring Developers
By Gunnar Hillert
@ghillert
1

2. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
What is this talk about?
Spring Cloud Data Flow Dashboard
“Spring Cloud Data Flow is a toolkit for building data
integration and real-time data processing pipelines.”
• Upgrade from Angular 1.x to 5.0
• Issues we ran into
• How does Angular fit into the Spring developer
experience
2

3. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Me
• (Java+Spring) developer since 2005
• Java Champion
• Spring Integration, Spring XD, Spring Cloud Data Flow
• Angular since Jan 2014
• DevNexus co-founder (2009)
• Coffee farmer
3
Berlin
Atlanta
Hawaii

4. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Audience - What do you use?
4
Other
(15%)
React
(5%)
Nothing Yet
(20%)
Angular 2+
(30%)
AngularJS
(30%)

5. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Demo
5

6. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Our old stack
6

7. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Upgrading from AngularJS to Angular
7
AngularJS Angular 5
Grunt npm
Bower npm
Grunt Plugin Angular CLI (Weppack)
Less Saas
RequireJS Angular Modules / Webpack

8. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Libraries to Migrate
• Busy Indicator to Angular2 Busy
• angularUtils dirPaginate to Angular Pagination (ngx-pagination)
• Growl like status messages to Angular2 Toasty
• Instead of UI Router we use Angular’s built-in router (Much better than in 1.x)
8

9. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Expected Benefits
• TypeScript delivers refactorability
• Classes and almost Spring-like dependency injection (constructor)
• Modern Stack
• ReactiveX library for JavaScript (RxJS)
• Much simpler directives/components
9

10. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Upgrade options
• Upgrading with ngUpgrade
• Follow the AngularJS Style Guide
• E.g. Use the ControllerAs syntax (never use $scope)
• Rewrite
• Something else … e.g. React.
10

11. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Starter Projects
• Angular Webpack Starter
• Angular CLI (official)
11

12. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Angular CLI
$ npm install -g @angular/cli
$ ng new demo-project --style=scss --routing
$ cd demo-project
$ ng serve
12

13. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
TypeScript
• Super-set of JavaScript
• Classes
• Interfaces
• [optional] Types (incl. intersection, union types)
• Inheritance
• Generics
13

14. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Rich Domain Model 1/2
• In 1.x we just used the raw JSON data (no domain model)
• You can cast JSON responses to domain objects
• Don’t Pass JSON objects to your UI!
14

15. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Rich Domain Model 2/2
• Much better: Deserialize JSON into TypeScript classes explicitly
• Do validation + ensure clean models
15
export class AppRegistration
implements Selectable,
Serializable<AppRegistration> {
…
public deserialize(input) {
this.name = input.name;
this.type = input.type as ApplicationType;
this.uri = input.uri;
return this;
}
…
}
export class Page<T> {
totalPages: number;
totalElements: number;
pageNumber = 0;
pageSize = 10;
items: T[] = [];
filter = '';
…
}

16. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Remember your Flex skills?
16

17. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
RxJS - ReactiveX library for JavaScript
• Observable, the new Promise
• Only fulfilled if you subscribe()
• Mind the async pipe and consider share()
• Enhanced ngIf template syntax with Angular 4:
17
<div *ngIf="streams | async; let stream; else loading">
<li>{{stream.name}} {{stream.status}}</li>
</div>
<ng-template #loading>Loading …</ng-template>

18. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Pain points
• Security and @angular/http (deprecated with Angular 5)
• Favor @angular/http (since 4.3) over @angular/common/http
• APP_INITIALIZER
• Cannot await an Observable … converting to promise
• Enum support is a bit underwhelming (coming from Java)
• If you need full enum support, check out ts-enums
18

19. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
More Pain points
• Form Handling, dualism: Reactive Forms versus Template Forms
• Dualism of data-binding and vaguenesses on state-management
• Dashboard trackBy for (default: object uniqueness by reference)
19

20. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Upgrading from Angular 4 to 5
• Ahead-of-Time (AOT) compilation issues with ng —prod
• Early adoption issues, "JavaScript heap out of memory”
• PhantomJS issues — deprecated, switch to Headless Chrome
• ngx-bootstrap update to 2.0.0
• Linting more demanding e.g.:
import { Observable } from ‘rxjs/Rx’
vs import { Observable } from ‘rxjs/Observable’
20

21. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
State Management
• Stateful components using RouteReuseStrategy
• State in interacting components
• bind data downward emit changes in events upward
• Using services (Singleton) to manage state
• State in services using in Observables
• Use a state library such as @ngrx/store
21

22. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Documentation
JSDoc - http://usejsdoc.org/
TypeDoc - http://typedoc.org/
CompoDoc - https://compodoc.github.io/website/
22

23. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Integration with Spring Boot and Maven
Maven Frontend Plugin (https://github.com/eirslett/frontend-maven-plugin)
• downloads + installs Node & NPM locally
• executes NPM install
• /META-INF/resources/, /resources/, /static/, /public/
• Make Boot modules (UI) Pluggable
23

24. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Open Issues
• Upgrade underlying Bootstrap 3
• Bootstrap 4, Clarity (VMware), Material Design
• Clarity looks tempting, used by over 35 product teams within VMware
• Browser E2E Testing
• State Management/Performance
• Workflow library - JointJS
• jQuery, Lodash, Backbone
• Messaging to push notifications
24
😵
Or something with CSS Grid?

25. Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
General Tips and Learning
• Keep it simple + Keep Current
• Follow the Angular style guide - https://angular.io/guide/styleguide
• Follow the TypeScript Coding-guidelines and Do’s and Don’ts
• Test build again Linux AND Windows (Node is a bit finnicky)
• Always test against production build as well (AOT magic)
• Udemy - Angular 5 - The Complete Guide
• Pluralsight (Courses by John Papa) and Safari
• Have fun & contribute at to the project on GitHub
25
😃

26. Learn More. Stay Connected.
Reactive Frontends with RxJS and Angular (Sergi Almar)
Wednesday, 17:00, Room: 2020
26
#springone@s1p
Slides: https://www.slideshare.net/hillert
@ghillert | linkedin.com/in/hillert/ | blog.hillert.com