Il documento descrive un progetto di modernizzazione delle applicazioni che prevede la migrazione da Silverlight a Angular senza modificare il backend. I requisiti includono mantenere la stessa UI/UX, utilizzare un framework specifico e formare il team sulle nuove tecnologie, con una demo prevista tra sei mesi. Vengono anche discussi i dettagli tecnici della migrazione, come la trasformazione di elementi XAML in componenti Angular e l'implementazione delle funzionalità di binding.

1. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Da Silverlight a Angular senza toccare il
backend: fatto!
#APPMODERNISATION #UGIDOTNET
Michele Aponte- CEO/CTO @ Blexin Srl
michele.aponte@blexin.com
https://github.com/apomic80
Twitter: @apomic80

2. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
Kudos
#APPMODERNISATION

3. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Un giorno ci chiama un cliente…

4. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Requisiti
• Back end e Database non si possono toccare
• Vorremmo mantenere la stessa UI e UX
• La UI viene generata dinamicamente
• XAML (standard e verticale) sul database
• Bisogna usare il nostro «framework»
• Formare il team interno sulle tecnologie
adottate
• Dobbiamo fare una demo tra 6 mesi a un
cliente

5. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Requisiti
• Back end e Database non si possono toccare
• Vorremmo mantenere la stessa UI e UX
• La UI viene generata dinamicamente
• XAML (standard e verticale) sul database
• Bisogna usare il nostro «framework»
• Formare il team interno sulle tecnologie
adottate
• Dobbiamo fare una demo tra 6 mesi a un
cliente

6. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION

7. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Perché Angular?
• Dobbiamo realizzare una Single Page
Application
• Elementi XAML -> Componenti Angular
• C# -> TYPESCRIPT
• XAML Binding -> RxJS e Observable
• Controlli Telerik -> Kendo UI

8. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Lo XAML dal database al browser

9. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Lo XAML dal database al browser

10. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Lo XAML dal database al browser

11. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION

12. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Dal Binding XAML al Binding Angular

13. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Dal Binding XAML al Binding Angular
[(ngModel)]
Angular si accorge delle modifiche agli elementi
bindati con la Change Detection:
 Aggiorna
automaticamente la UI
 Bello, ma costoso
 Si può parzialmente
disabilitare

14. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION

15. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Binding tra elementi e Converter

16. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
Binding tra elementi e Converter
I componenti devono essere
autonomi ma devono poter
comunicare tra loro:
- padre/figlio => @Input e @Output
- fratelli => il padre come
mediatore e @Input e @Output
- relazione qualsiasi => Dependency
Injection, Observable e operatori
RxJS

17. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION

18. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION
… sparate pure
sul pianista!
Grazie a tutti per
la pazienza e …

19. #UGIDOTNET
APP MODERNISATION DAY 2019
#APPMODERNISATION