Windows Azure sta cambiando profondamente la nostra vita professionale portando le nostre risorse nel Cloud. Rinominando Team Foundation Services in Visual Studio Online, si è pronti a fare un passaggio ulteriore: portare parte dell'attività di sviluppo totalmente online. "Monaco" è un progetto ancora agli inizi, ma molto promettenti, per sviluppare progetti web completamente nel browser. Vediamo cosa possiamo farci, tra sviluppo , scelte tecnologiche, gestione del progetto e deployment.

1. VS11 - SVILUPPARE APPLICAZIONI WEB
(COMPLETAMENTE) ON-LINE CON VISUAL
STUDIO ONLINE "MONACO"
Marco Parenzan
Pordenone
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

2. Grazie a
Sponsor
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

3. Marco Parenzan
•
Formazione & Divulgazione con 1nn0va
•
Ricerca e Innovazione con Servizi Cgn








@marco_parenzan
it.linkedin.com/in/marcoparenzan
www.facebook.com/parenzan.marco
www.marcoparenzan.it
www.slideshare.net/marco.parenzan
github.com/marcoparenzan
www.innovazionefvg.net
marco [dot] parenzan [at] libero/live [dot] it
•
Developer e Architect in .NET e Web
•
(Tentative of) Cloud Developer
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
http://bit.ly/regazurebcit2014

4. Windows Azure
•
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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

5. Visual Studio Online
•
(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)?
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

6. Visual Studio Online «Monaco»
•
È 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
•
In Microsoft ci lavora il team di Erich Gamma
•
Ci sono «pezzi di Monaco» in diverse applicazioni web:
 Uno dei personaggi storici della «Gang of Four»
 Entrato in Microsoft nel 2011





http://www.typescriptlang.org/Playground/
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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

7. TypeScript
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
http://www.typescriptlang.org/Playground/

8. OneDrive
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

9. Mobile Services in Windows Azure
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

10. Source Code Management in VSO
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

11. 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-toolsto-build-apps-for-office-and-sharepoint-on-the-browser.aspx
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

12. Dal Windows Azure Training Kit
Attualmente unica esperienza IDE per «Monaco»
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

13. Abilitare «Monaco» nei Web Sites
Entra
Abilita
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

14. Agenda
•
L’IDE di «Monaco»
•
Rich Editing Experience
•
Controllo del Codice Sorgente
•
Controllare tutto dalla Console
•
Scrivere Codice
•
Conclusioni
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

15. L’IDE di «Monaco»
NavBar
ToolBar
Activity Bar
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

16. L’IDE di «Monaco» [2]
Web Site
Menu
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

17. L’IDE di «Monaco» [3]
Configurazione
IDE
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

18. VS11 - SVILUPPARE APPLICAZIONI
WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE
"MONACO"
Controllo del Codice Sorgente
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

19. Git
•
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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

20. Comparazione dei files
•
Permette di comparare i files tra
versione in linea e branch in Git
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

21. VS11 - SVILUPPARE APPLICAZIONI
WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE
"MONACO"
Rich Editing Experience
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

22. Tutti i comandi (F1)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

23. Apertura Rapida (CTRL+E)
•
Quick Open (CTRL+E)
CTRL+E
Apri recente (CTRL+Q)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

24. Vai alla riga (CTRL+G)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

25. Trova il simbolo (CTRL+SHIFT+O)
Quick Open + «@»
Raggruppato per tipologia
Quick Open + «@:»
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

26. Cerca (CTRL+F) Sostituisci (CTRL+H)
CTRL+F/H
Find all references
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

27. Cerca
Cerca
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

28. Autocomplete (CTRL+spazio)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

29. Snippet di codice (decisors)
Snippet (Template)
Decisors
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

30. Incrementa valori numerici (CTRL+↑)
CTRL+↑
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

31. Markdown
Snippet (Template)
Decisors
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

32. Open to the Side + markdown preview
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

33. Altre caratteristiche dell’editor
•
AutoSave
•
Format Code
•
Upload from menu and Drag & Drop
•
iPad Keyboard
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

34. VS11 - SVILUPPARE APPLICAZIONI
WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE
"MONACO"
Controllare tutto dalla Console
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

35. Console
•
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
Nuget, per scaricare packages da nuget.org
Git, per interagire con il CVS
Npm, per installare comandi da eseguire in ambiente node.js
Unzip per decomprimere files zip
Ps, per eseguire script Poweshell
cUrl,per poter interagire via http con altri siti Web
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

36. Navigare tra le cartelle
•
È 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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

37. Npm in Console
•
Node.js è pervasivo in Azure Web Sites e Monaco
•
È un pilastro del Javascript Full Stack
(http://coding.smashingmagazine.com/2013/11/21/introduction-to-fullstack-javascript/)
•
Molti dei comandi da usare sono packages di Node
 node-sass=npm install node-sass
 Editor & intellisense experience
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

38. 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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Nuova Console
•
Selettore Console
Console Multiple

39. nuget
•
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….
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

40. Less & Sass
•
LESS & SASS sono disponibili come
editor
•
SASS si scarica come package Node
 Web Sites non supportano Ruby
[supportabile solo con IaaS]
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

41. VS11 - SVILUPPARE APPLICAZIONI
WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE
"MONACO"
Scrivere Codice
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

42. Supported Web Frameworks
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

43. One ASP.NET
•
È 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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

44. Node.js e TypeScript (e Javascript!)
•
TypeScript
 Una particolarità (ma nemmeno tanto): «Monaco» è scritto in Typescript
 Editor & intellisense (best!) experience
 Typescript è un package node (di nuovo: npm install typescript)
•
Node.js
 Il nuovo compagno per lo sviluppatore Web
 Un modello server side
 Tanti nuovi comandi per la console
•
Insieme permettono di avere implementare il Javascript Full-Stack
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

45. VS11 - SVILUPPARE APPLICAZIONI
WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE
"MONACO"
Conclusioni
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

46. Conclusioni
•
Ambiente molto promettente
•
Non siamo in un ambiente .NET-centrico
•
Decisamente utile per




Prototyping
Interventi rapidi
Training
Javascript Fullstack
•
Da verificare per progetti di classe enterprise (ripeto: è una questione di
tempo)
•
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)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

47. Q&A
Tutto il materiale di questa sessione su
http://www.communitydays.it/
Lascia il feedback su questa sessione,
potrai essere estratto per i nostri premi!
Seguici su
Twitter @CommunityDaysIT
Facebook http://facebook.com/cdaysit
#CDays14
#CDays14 – Milano 25, 26 e 27 Febbraio 2014