Seminario renuto all'IRES di Udine sulla migrazione, attraverso UpgradeModule, o la riscrittura di un'applicazione AngularJs in una applicazione Angular 2/4

1. Angular 4
convertire o migrare un’applicazione AngularJs

2. CHI SONO?
in collaborazione conconvertire o migrare
un’applicazione AngularJs
2

3. GIOVANNI BUFFA
in collaborazione conconvertire o migrare
un’applicazione AngularJs
Front-End ~ Web ~ Drupal Developer
3

4. QUANTI UTILIZZANO
AngularJs?
in collaborazione conconvertire o migrare
un’applicazione AngularJs
4

5. QUANTI UTILIZZANO
Angular?
in collaborazione conconvertire o migrare
un’applicazione AngularJs
5

6. in collaborazione conconvertire o migrare
un’applicazione AngularJs
TIMELINE DI
ANGULAR
2010
4
2017
2
2016
5
6

7. COSA CAMBIA ORA
RISPETTO A PRIMA?
in collaborazione conconvertire o migrare
un’applicazione AngularJs
7

8. 1.Scrittura del codice
2.Design patterns
3.Nuove possibilità built-in
4.Leggerezza
in collaborazione conconvertire o migrare
un’applicazione AngularJs
8

9. in collaborazione conconvertire o migrare
un’applicazione AngularJs
1.
SCRITTURA
DEL CODICE
9

10. this
in collaborazione conconvertire o migrare
un’applicazione AngularJs
class
let
const
() => { }
map
forEach
(a = 10) { }
[…params]
`Awesome string ${interpolation}`{ x, y }
export
import
extends
Symbol
Typed Arrays
Promise
ES6
(…b) { }
10

11. in collaborazione conconvertire o migrare
un’applicazione AngularJs
TypeScript
npm install -g typescript
https://www.typescriptlang.org/
11

12. in collaborazione conconvertire o migrare
un’applicazione AngularJs
2.
DESIGN
PATTERNS
12

13. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Component
Everything is a component!
Un componente rappresenta
l’entità più piccola all’interno di
una applicazione Angular.
Può essere impostato per
utilizzare Shadow DOM.
13

14. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Hierarchical
Dependency
Injection
Ogni servizio è iniettabile sia
all’interno di altri servizi, che in
componenti o direttive.
Il punto in cui viene iniettato,
tuttavia, è molto importante:
solamente i figli erediteranno la
dipendenza.
14

15. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Mixin
È possibile utilizzare degli
insiemi di classi per generare una
nuova classe.
15

16. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Model
Injection
È possibile utilizzare una classe
anche come blueprint per i
modelli di dati*.
* Oltre alle classi, è possibile utilizzare anche interface.
16

17. in collaborazione conconvertire o migrare
un’applicazione AngularJs
3.
NUOVE
POSSIBILITÀ
BUILT-IN
17

18. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Observables
RxJS
http://reactivex.io/
18

19. in collaborazione conconvertire o migrare
un’applicazione AngularJs
OBSERVABLE
OBSERVER
HANDLE ERROR COMPLETION
19

20. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Routing
ngRoute su AngularJs
rappresentava il sistema di
routing più semplice, seppur
adatto per molti casi. Per tutti gli
altri casi si ricorreva ad uiRouter.
RouterModule, invece, permette
fin da subito di avere una suite
completa per il routing in
Angular.
20

21. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Change
Detection
Strategy
In AngularJs, ogni volta che
veniva modificato lo stato
dell’applicazione, il Digest Cycle
verificava lo stato di ogni singolo
controller.
In Angular, questo meccanismo
molto pesante è stato
rimpiazzato da NgZone*.
*Angular change detection explained - Thoughtram
21

22. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Forms
FormsModule permette di creare
form in due modi diversi:
Template-Driven – definiti e
gestiti dalla view – o Reactive
Forms – definiti e gestiti dal
componente.
22

23. in collaborazione conconvertire o migrare
un’applicazione AngularJs
4.
LEGGEREZZA
23

24. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Change
Detection
Strategy
Grazie ad NgZone, viene
renderizzato nuovamente solo il
componente il cui stato si
modifica.
Questo rende, ad esempio,
*ngFor nettamente più
performante di ng-repeat.
24

25. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Ahead
Of
Time
Un’applicazione Angular può
arrivare a pesare anche svariati
megabyte. Per rendere il tutto
più fruibile, soprattutto per
dispositivi mobile, è stata creata
una compilazione AOT, che
permette di compilare
progressivamente l’applicazione.
25

26. It’s
coffee break
time!

27. UpgradeModule

28. in collaborazione conconvertire o migrare
un’applicazione AngularJs
UpgradeModule permette di avviare
un’applicazione AngularJs all’interno
di un'applicazione Angular.
28

29. 1.Segui le style guide di AngularJs
I.One component per file
II.Modularity: folder-by-feature structure
2.Utilizza un module loader anche su AngularJs
3.Utilizza TypeScript anche su AngularJs
4.Utilizza possibilmente .directive e .component
I.Non utilizzare replace, compile, priority e terminal
in collaborazione conconvertire o migrare
un’applicazione AngularJs
29

30. in collaborazione conconvertire o migrare
un’applicazione AngularJs
1.
PREPARARE
ANGULAR
30

31. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Angular CLI
npm install -g @angular/cli
https://cli.angular.io/
31

32. in collaborazione conconvertire o migrare
un’applicazione AngularJs
WebStorm
https://www.jetbrains.com/webstorm/
32

33. in collaborazione conconvertire o migrare
un’applicazione AngularJs
ng new upgradeDemo
33
Se devi utilizzare SASS: ng new upgradeDemo --style=scss

34. in collaborazione conconvertire o migrare
un’applicazione AngularJs
2.
PREPARARE
ANGULARJS
34

35. in collaborazione conconvertire o migrare
un’applicazione AngularJs
npm install --save angular
35
Attenzione alla versione di AngularJs del tuo progetto!

36. in collaborazione conconvertire o migrare
un’applicazione AngularJs
36
/* src/ng-app/app.module.ts */
import * as angular from 'angular';
import { homeComponent } from './components/home/home.component';
import { ItemComponent } from './components/item/item.component';
angular.module('ng1App', [])
.component('ng1Home', homeComponent)
.component('ng1Item', ItemComponent);

37. in collaborazione conconvertire o migrare
un’applicazione AngularJs
37
/* src/ng-app/components/home/home.component.ts */
export let homeComponent = {
template: `<h1>{{ $ctrl.title }}</h1>`,
bindings: {
'title': '<'
}
};

38. in collaborazione conconvertire o migrare
un’applicazione AngularJs
38
/* src/ng-app/components/home/item.component.ts */
class ItemComponentController {
constructor() {
console.log('Hello!');
}
}
export let ItemComponent = {
template: `<p>Item component: {{ $ctrl.title }}</p>`,
bindings: {
'title': '<'
},
controller: ItemComponentController
};

39. in collaborazione conconvertire o migrare
un’applicazione AngularJs
3.
BOOTSTRAP DI
ANGULARJS
39

40. in collaborazione conconvertire o migrare
un’applicazione AngularJs
npm install --save @angular/upgrade
40

41. in collaborazione conconvertire o migrare
un’applicazione AngularJs
41
/* src/app/app.module.ts */
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['ng1App'], { strictDi: true});
}
}

42. in collaborazione conconvertire o migrare
un’applicazione AngularJs
42
/* src/index.html */
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UpgradeModule Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<ng1-home title="'Test'"></ng1-home>
</body>
</html>

43. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Downgrade
Strategy
Creare un componente Angular
per utilizzarlo all’interno di un
componente AngularJs
43

44. in collaborazione conconvertire o migrare
un’applicazione AngularJs
44
/* src/app/user/user.component.ts */
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
export class UserComponent {
@Input() username: string;
@Output() fromOutside: EventEmitter<string> = new EventEmitter;
constructor() { }
onClick() {
this.fromOutside.emit(`Hello from the outside ${this.username}!`);
}
}

45. in collaborazione conconvertire o migrare
un’applicazione AngularJs
45
/* src/app/user/user.component.ts */
...
import { UserComponent } from './user/user.component';
@NgModule({
declarations: [
...
UserComponent
],
imports: [...],
entryComponents: [UserComponent]
})
export class AppModule { ... }

46. in collaborazione conconvertire o migrare
un’applicazione AngularJs
46
/* src/app/ng-app/app.module.ts */
...
import { downgradeComponent } from '@angular/upgrade/static';
import { UserComponent } from '../user/user.component';
angular.module('ng1App', [])
.directive('user', downgradeComponent({component: UserComponent}) as
angular.IDirectiveFactory);

47. in collaborazione conconvertire o migrare
un’applicazione AngularJs
47
/* src/app/ng-app/components/home/home.component.ts */
class HomeComponentController {
username = 'Pippo';
constructor() { }
$onInit = function() {
setTimeout(() => {
this.username = 'Pluto';
}, 3000);
};
handleClick = function(string) {
console.log(string);
}
}
export let homeComponent = {
template: `
<h1>{{ $ctrl.title }}</h1>
<user [username]="$ctrl.username" (from-outside)="$ctrl.handleClick($event)"></user>
`,
bindings: {
'title': '<'
},
controller: HomeComponentController
};
😱😨

48. in collaborazione conconvertire o migrare
un’applicazione AngularJs
Upgrade
Strategy
Creare un componente
AngularJs per utilizzarlo
all’interno di un componente
Angular
48

49. in collaborazione conconvertire o migrare
un’applicazione AngularJs
49
/* src/app/ng-app/components/item/upgraded.component.ts */
class UpgradedComponentController {
constructor() {}
}
export let UpgradedComponent = {
template: `<h3>This come from an upgraded component</h3>`,
controller: UpgradedComponentController
};

50. in collaborazione conconvertire o migrare
un’applicazione AngularJs
50
/* src/app/ng-app/app.module.ts */
...
import { UpgradedComponent } from './components/item/
upgraded.component';
angular.module('ng1App', [])
.component('ng1Upgraded', UpgradedComponent);

51. in collaborazione conconvertire o migrare
un’applicazione AngularJs
51
/* src/app/item/item.directive.ts */
import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({
selector: 'app-item'
})
export class ItemDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('ng1Upgraded', elementRef, injector);
}
}

52. in collaborazione conconvertire o migrare
un’applicazione AngularJs
52
/* src/app/app.module.ts */
...
import { ItemDirective } from './item/item.directive';
@NgModule({
declarations: [
...
ItemDirective
],
imports: [...],
entryComponents: [...]
})
export class AppModule { ... }

53. in collaborazione conconvertire o migrare
un’applicazione AngularJs
53
/* src/app/user/user.component.html */
...
<app-item></app-item>

54. Breakfast time!

55. Riscrivere l'applicazione

56. .module
.run
.config
.controller
.directive
.component
.value
.constant
.service
.factory
.provider
.filter
in collaborazione conconvertire o migrare
un’applicazione AngularJs
56
// main.ts
platformBrowserDynamic().bootstrapModule();
// app.module.ts
@NgModule({})
export class AppModule { }

57. .module
.run
.config
.controller
.directive
.component
.value
.constant
.service
.factory
.provider
.filter
in collaborazione conconvertire o migrare
un’applicazione AngularJs
57
export class ClassName { }

58. .module
.run
.config
.controller
.directive
.component
.value
.constant
.service
.factory
.provider
.filter
in collaborazione conconvertire o migrare
un’applicazione AngularJs
58
// my.directive.ts
@Directive({})
export class MyDirective { }
// my.component.ts
@Component({})
export class MyComponent { }

59. .module
.run
.config
.controller
.directive
.component
.value
.constant
.service
.factory
.provider
.filter
in collaborazione conconvertire o migrare
un’applicazione AngularJs
59
// my.service.ts
export class MyService { }
// my-injectable.service.ts
@Injectable()
export class MyInjectableService { }

60. .module
.run
.config
.controller
.directive
.component
.value
.constant
.service
.factory
.provider
.filter
in collaborazione conconvertire o migrare
un’applicazione AngularJs
60
// my.pipe.ts
@Pipe({})
export class MyPipe implements PipeTransform {
}

61. in collaborazione conconvertire o migrare
un’applicazione AngularJs
61

62. in collaborazione conconvertire o migrare
un’applicazione AngularJs
62

63. in collaborazione conconvertire o migrare
un’applicazione AngularJs
63
https://api.pokedex.lab-web.it/api/v1

64. in collaborazione conconvertire o migrare
un’applicazione AngularJs
1.
BOOTSTRAP
64

65. in collaborazione conconvertire o migrare
un’applicazione AngularJs
ng new Pokedex4
65
Se devi utilizzare SASS: ng new Pokedex4 --style=scss

66. in collaborazione conconvertire o migrare
un’applicazione AngularJs
66
/* src/main.ts */
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-
dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

67. in collaborazione conconvertire o migrare
un’applicazione AngularJs
2.
@NgModule
67

68. in collaborazione conconvertire o migrare
un’applicazione AngularJs
68
/* src/app/app.module.ts */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

69. in collaborazione conconvertire o migrare
un’applicazione AngularJs
3.
ROOT COMPONENT
69

70. in collaborazione conconvertire o migrare
un’applicazione AngularJs
70
/* src/app/app.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
}

71. in collaborazione conconvertire o migrare
un’applicazione AngularJs
4.
RouterModule
71

72. in collaborazione conconvertire o migrare
un’applicazione AngularJs
72
/* src/app/app-routing.module.ts */
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PokemonsComponent } from './pokemons/pokemons.component';
import { PokemonComponent } from './pokemons/pokemon/pokemon.component';
const appRoutes: Routes = [
{ path: '', component: PokemonsComponent },
{ path: 'pokemon/:id', component: PokemonComponent },
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

73. in collaborazione conconvertire o migrare
un’applicazione AngularJs
73
/* src/app/app.module.ts */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

74. in collaborazione conconvertire o migrare
un’applicazione AngularJs
5.
Il resto sono solo componenti...
74

75. DOMANDE?
in collaborazione conconvertire o migrare
un’applicazione AngularJs
75

76. GRAZIE A TUTTI!
in collaborazione conconvertire o migrare
un’applicazione AngularJs
76