Un bel giorno ci chiama un cliente e ci chiede se è possibile migrare la loro applicazione da Silverlight a una soluzione web moderna senza toccare il database SqlServer e il backend WCF, in modo che nella transizione fossero disponibili entrambe le applicazioni. Ah, dimenticavo, la UI è dinamica e lo XAML è salvato sul db. Ecco come ci siamo riusciti con Angular e WebApi!

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