Windows Azure e Team Foundation Server hanno cominciato a cambiare in una maniera incredibile il modo di gestire i progetti software e tutta l'attività professionale dello sviluppatore. Ora il passaggio ulteriore: un Visual Studio, al momento ancora agli inizi, ma molto promettenti, completamente Web che gira nel browser. Vediamo cosa possiamo farci, tra sviluppo software, scelte tecnologiche, gestione del progetto e deployment.

1. Marco Parenzan
4 aprile 2014
SVILUPPARE APPLICAZIONI WEB
(COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE "MONACO"

2. feedback
10
Marco Parenzan
1nn0va
» www.innovazionefvg.net
» @marco_parenzan
» it.linkedin.com/in/marcoparenzan
» www.facebook.com/parenzan.marco
» www.marcoparenzan.it
» www.slideshare.net/marco.parenzan
» github.com/marcoparenzan
» marco [dot] parenzan [at] libero/live [dot] it
Chi sono

3.  Piattaforma di Cloud Computing di
Microsoft
 È la controparte pubblica della visione
«Cloud OS»
 Tutti i servizi online di Microsoft sono (o
saranno) su Windows Azure
 Quindi anche Visual Studio Online
Windows Azure

4.  (aka Team Foundation Services)
 Spostare parte della nostra quotidianità di
sviluppatori online
 Team Management
 Source Code Management
 Build Tasks
 Bug Tracking
 E riguardo la scrittura del codice?
 Se Office 365 sta a Office Online (aka
Office Web Apps) e Office (2013 on
Premise), cosa sta tra Visual Studio Online
e Visual Studio (2013 on Premise)?
Visual Studio Online

5.  È il progetto (ancora agli inizi, ma molto
promettenti) di un ambiente di sviluppo
Web-Based
 Come spesso succede, Microsoft non è
la prima
 Cloud9
 Codeanywhere
 Cloud IDE
 Codenvy
 Ciò che è esclusivo sono la pervasività
ed uniformità , in stile Microsoft
Visual Studio Online «Monaco»

6.  In Microsoft ci lavora il team di Erich Gamma
 Uno dei personaggi storici della «Gang of Four»
 Entrato in Microsoft nel 2011
 Ci sono «pezzi di Monaco» in diverse
applicazioni web:
 IE F12 Developer Tools
 http://www.typescriptlang.org/Playground/
 http://www.tryfsharp.org/Learn
 http://try.buildwinjs.com/
 OneDrive (quando i files memorizzati hanno estensione .html,
.js e soprattutto .css)
 Mobile Services in Windows Azure
 Source Code Management in VSO
 App for Office by using "Napa" Office 365 Development Tools
Visual Studio Online «Monaco»

7. IE F12 Source Code Viewer

8. TypeScript
http://www.typescriptlang.org/Playground/

9. F#
http://www.tryfsharp.org/Learn/getting-started

10. OneDrive

11. Mobile Services in Windows Azure

12. Source Code Management in VSO

13. App for Office by using "Napa" Office 365
Development Tools
http://blogs.msdn.com/b/officeapps/archive/2013/08/27/use-napa-office-
365-development-tools-to-build-apps-for-office-and-sharepoint-on-the-
browser.aspx

14. WinJS
http://try.buildwinjs.com/

15. The Road to Monaco

16.  Server uses node.js
 Migrated server to TypeScript once a node.d.ts file
became available
 Client
 migrated to AMD and converted to TypeScript
 Common module syntax enables code
sharing between client and server
Monaco

17. demo
Monaco in azione con Typescript

18. Attualmente unica esperienza IDE per «Monaco»
Dal Windows Azure Training Kit

19. Models for Building and Running Apps
Virtualization
O/S
Hardware
Native Code
Custom Software
Network
Data
Applications
Firewall
Applications
Data
Native Code
Startup Tasks
Applications
Firewall Rules
Data
Virtual Network
Native Code
Custom Software
Virtual Network
Data
Applications
Firewall Rules
O/S
Applications
Data
Auth
Notifications

20.  “The engine behind git deployments on
Windows Azure”
 Open source
(www.github.com/projectkudu/kudu)
 Provides git deployments
 Provides builds
 Provides sandboxing
 Provides hosting
Project Kudu

21. Choice of language
Choice of frameworks and languages.

22. Git TFS
Web
Deploy
FTP
CodePlex,
BitBucket &
GitHub
Supported Publishing Methods

23. Abilitare «Monaco» nei Web Sites
Abilita
Entra

24. L’IDE di «Monaco»
NavBar
ToolBar
Activity Bar

25. L’IDE di «Monaco» [2]
Web Site
Menu

26. L’IDE di «Monaco» [3]
Configurazione
IDE

27. SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Rich Editing Experience

28. Tutti i comandi (F1)

29.  Quick Open (CTRL+E)
Apertura Rapida (CTRL+E)
CTRL+E
Apri recente (CTRL+Q)

30. Vai alla riga (CTRL+G)

31. Trova il simbolo (CTRL+SHIFT+O)
Quick Open + «@»
Quick Open + «@:»
Raggruppato per tipologia

32. Cerca (CTRL+F) Sostituisci (CTRL+H)
CTRL+F/H
Find all references

33. Cerca
Cerca

34. Autocomplete (CTRL+spazio)

35. Snippet di codice (decisors)
Decisors
Snippet (Template)

36. Incrementa valori numerici (CTRL+↑)
CTRL+↑

37. Markdown
Decisors
Snippet (Template)

38. Open to the Side + markdown preview

39.  AutoSave
 Format Code
 Upload from menu and Drag & Drop
 iPad Keyboard
Altre caratteristiche dell’editor

40. SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Controllare tutto dalla Console

41.  Tutti i comandi di elaborazione
(compilazione, generazione) vengono
dati da riga di comando
 Alcuni comandi:
 Md/mkdir, rd/rmdir, per la creazione delle cartelle
 Dir, cd, per navigare tra le cartelle
 Touch, open, per gestire i files
Console, disco e directory

42. • È possibile avere una visuale
console del progetto Web
• Si vede il file system con i
contenuti di files e cartelle
• È possibile crere una cartella
md Content
• È possibile spostarsi in una
cartella
cd Content
• È possibile creare un file
touch main.less
• È possibile aprire un file
open main.less
Navigare tra le cartelle

43. • Se si usa un task runner
come ad esempio
«grunt», la console
viene «bloccata» ed
impedirebbe
l’esecuzione di altri
comandi
• È possibile creare più
console, una per
lanciare grunt e una
per
lanciare i comandi
ordinari
Console Multiple
NuovaConsole
SelettoreConsole

44.  Tutti i comandi di elaborazione
(compilazione, generazione) vengono
dati da riga di comando
 Alcuni comandi:
 Nuget, per scaricare packages da nuget.org
 Unzip per decomprimere files zip
 Ps, per eseguire script Poweshell
 cUrl,per poter interagire via http con altri siti Web
 Npm, per installare comandi da eseguire in
ambiente node.js
 Git, per interagire con il CVS
Console e comandi

45.  Nuget è disponibile a riga di comando
 È possibile scaricare i files da nuget.org
(o
 Problemi:
 La carella Content non si copia in radice del
progetto (probabilmente perché siamo in un Web
Site….)
 Il file install.ps1 non si esegue…
 Devo spostare i file a mano…
 …ma spero in questi giorni di chiarirmi le
idee qui in Microsoft….
nuget

46.  Il nuovo compagno per lo sviluppatore
Web
 Un modello server side
 Tanti nuovi comandi per la console
Node.js

47.  Node.js è pervasivo in Azure Web Sites
e Monaco
 È un pilastro del Javascript Full Stack
(http://coding.smashingmagazine.com/2
013/11/21/introduction-to-full-stack-
javascript/)
 Molti dei comandi da usare sono
packages di Node
 node-sass=npm install node-sass
 Editor & intellisense experience
Npm in Console

48. • LESS & SASS sono
disponibili come editor
• SASS si scarica come
package Node
– Web Sites non supportano
Ruby [supportabile solo
con IaaS]
Less & Sass

49.  Una particolarità (ma nemmeno tanto):
«Monaco» è scritto in Typescript
 Editor & intellisense (best!) experience
 Typescript è un package node (di nuovo:
npm install typescript)
TypeScript

50. SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Scrivere Codice

51.  È possibile sviluppare qualsiasi applicazione
ASP.NET
 L’ambiente non è maturo…manca
l’intellisense e tutto l’aiuto cui siamo
abituati in Visual Studio
 …ma è solo una questione di risorse e di
tempo
 Si impara a gestire un .csproj come xml…ed
è la cosa più importante
 msbuild
 La compilazione .NET parte da qui
 Si impara a scrivere file .csproj
 Integrato con il nuovo Build System di Visual Studio
Online
One ASP.NET

52. SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Controllo del Codice Sorgente

53. • Un progetto software non
si gestisce senza controllo
di codice sorgente
• Git è lo standard nel
mondo open
• Attualmente è l’unico
protocollo supportato in
«Monaco» (a differenza
dei W/S)
• Git si sposa con gli
standard espressi da
«Monaco» e gli Azure
W/S
Git

54. • Permette di comparare
i files tra versione in
linea e branch in Git
Comparazione dei files

55. SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Conclusioni

56.  Ambiente molto promettente
 Non siamo in un ambiente .NET-centrico
 Decisamente utile per
 Prototyping
 Interventi rapidi
 Training
 Javascript Fullstack
 Soprattutto…un mondo di device
 Da verificare per progetti di classe enterprise (ripeto: è una
questione di tempo)
 E dobbiamo capire quale sarà il nuovo modello di applicazioni Enterprise
 //Build/Universal Apps
 Abbiamo capito che è già diventato pervasivo nelle
soluzioni Microsoft
 La community deve crescere
 Mi aspetto (come per Napa) avere un IDE «Monaco»
indipendente dal Windows Azure (per quel che può avere
senso)
Conclusioni

57. feedback
10
Marco Parenzan
1nn0va
» www.innovazionefvg.net
» @marco_parenzan
» it.linkedin.com/in/marcoparenzan
» www.facebook.com/parenzan.marco
» www.marcoparenzan.it
» www.slideshare.net/marco.parenzan
» github.com/marcoparenzan
» marco [dot] parenzan [at] libero/live [dot] it
Q&A