Migrating to Angular 4 for Spring Developers

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

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

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

Audience - What do you use?
4
Other
(20%)
React
(20%)
Nothing Yet
(20%)
Angular 2+
(20%)
AngularJS
(20%)

Demo
5

Our old stack
6

Upgrading from AngularJS to Angular
7
AngularJS Angular 5
Grunt npm
Bower npm
Grunt Plugin Angular CLI (Weppack)
Less Saas
RequireJS Angular Modules / Webpack

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

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

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

Starter Projects
• Angular Webpack Starter
• Angular CLI (official)
11

Angular CLI
$ npm install -g @angular/cli
$ ng new demo-project --style=scss --routing
$ cd demo-project
$ ng serve
12

TypeScript
• Super-set of JavaScript
• Classes
• Interfaces
• [optional] Types (incl. intersection, union types)
• Inheritance
• Generics
13

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

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 = '';
…
}

Remember your Flex skills?
16

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>

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

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

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

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

Documentation
JSDoc - http://usejsdoc.org/
TypeDoc - http://typedoc.org/
CompoDoc - https://compodoc.github.io/website/
22

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

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?

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
😃

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

Migrating to Angular 4 for Spring Developers

Recommended

More Related Content

What's hot (20)

Similar to Migrating to Angular 4 for Spring Developers (20)

More from VMware Tanzu (20)

Recently uploaded (20)

Migrating to Angular 4 for Spring Developers