0
Marco Parenzan
4 aprile 2014
SVILUPPARE APPLICAZIONI WEB
(COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE "MONACO"
feedback
10
Marco Parenzan
1nn0va
» www.innovazionefvg.net
» @marco_parenzan
» it.linkedin.com/in/marcoparenzan
» www.face...
 Piattaforma di Cloud Computing di
Microsoft
 È la controparte pubblica della visione
«Cloud OS»
 Tutti i servizi onlin...
 (aka Team Foundation Services)
 Spostare parte della nostra quotidianità di
sviluppatori online
 Team Management
 Sou...
 È il progetto (ancora agli inizi, ma molto
promettenti) di un ambiente di sviluppo
Web-Based
 Come spesso succede, Micr...
 In Microsoft ci lavora il team di Erich Gamma
 Uno dei personaggi storici della «Gang of Four»
 Entrato in Microsoft n...
IE F12 Source Code Viewer
TypeScript
http://www.typescriptlang.org/Playground/
F#
http://www.tryfsharp.org/Learn/getting-started
OneDrive
Mobile Services in Windows Azure
Source Code Management in VSO
App for Office by using "Napa" Office 365
Development Tools
http://blogs.msdn.com/b/officeapps/archive/2013/08/27/use-napa...
WinJS
http://try.buildwinjs.com/
The Road to Monaco
 Server uses node.js
 Migrated server to TypeScript once a node.d.ts file
became available
 Client
 migrated to AMD an...
demo
Monaco in azione con Typescript
Attualmente unica esperienza IDE per «Monaco»
Dal Windows Azure Training Kit
Models for Building and Running Apps
Virtualization
O/S
Hardware
Native Code
Custom Software
Network
Data
Applications
Fir...
 “The engine behind git deployments on
Windows Azure”
 Open source
(www.github.com/projectkudu/kudu)
 Provides git depl...
Choice of language
Choice of frameworks and languages.
Git TFS
Web
Deploy
FTP
CodePlex,
BitBucket &
GitHub
Supported Publishing Methods
Abilitare «Monaco» nei Web Sites
Abilita
Entra
L’IDE di «Monaco»
NavBar
ToolBar
Activity Bar
L’IDE di «Monaco» [2]
Web Site
Menu
L’IDE di «Monaco» [3]
Configurazione
IDE
SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Rich Editing Experience
Tutti i comandi (F1)
 Quick Open (CTRL+E)
Apertura Rapida (CTRL+E)
CTRL+E
Apri recente (CTRL+Q)
Vai alla riga (CTRL+G)
Trova il simbolo (CTRL+SHIFT+O)
Quick Open + «@»
Quick Open + «@:»
Raggruppato per tipologia
Cerca (CTRL+F) Sostituisci (CTRL+H)
CTRL+F/H
Find all references
Cerca
Cerca
Autocomplete (CTRL+spazio)
Snippet di codice (decisors)
Decisors
Snippet (Template)
Incrementa valori numerici (CTRL+↑)
CTRL+↑
Markdown
Decisors
Snippet (Template)
Open to the Side + markdown preview
 AutoSave
 Format Code
 Upload from menu and Drag & Drop
 iPad Keyboard
Altre caratteristiche dell’editor
SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Controllare tutto dalla Console
 Tutti i comandi di elaborazione
(compilazione, generazione) vengono
dati da riga di comando
 Alcuni comandi:
 Md/mkdir...
• È possibile avere una visuale
console del progetto Web
• Si vede il file system con i
contenuti di files e cartelle
• È ...
• Se si usa un task runner
come ad esempio
«grunt», la console
viene «bloccata» ed
impedirebbe
l’esecuzione di altri
coman...
 Tutti i comandi di elaborazione
(compilazione, generazione) vengono
dati da riga di comando
 Alcuni comandi:
 Nuget, p...
 Nuget è disponibile a riga di comando
 È possibile scaricare i files da nuget.org
(o
 Problemi:
 La carella Content n...
 Il nuovo compagno per lo sviluppatore
Web
 Un modello server side
 Tanti nuovi comandi per la console
Node.js
 Node.js è pervasivo in Azure Web Sites
e Monaco
 È un pilastro del Javascript Full Stack
(http://coding.smashingmagazin...
• LESS & SASS sono
disponibili come editor
• SASS si scarica come
package Node
– Web Sites non supportano
Ruby [supportabi...
 Una particolarità (ma nemmeno tanto):
«Monaco» è scritto in Typescript
 Editor & intellisense (best!) experience
 Type...
SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Scrivere Codice
 È possibile sviluppare qualsiasi applicazione
ASP.NET
 L’ambiente non è maturo…manca
l’intellisense e tutto l’aiuto cui...
SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Controllo del Codice Sorgente
• Un progetto software non
si gestisce senza controllo
di codice sorgente
• Git è lo standard nel
mondo open
• Attualmente...
• Permette di comparare
i files tra versione in
linea e branch in Git
Comparazione dei files
SVILUPPARE
APPLICAZIONI WEB
(COMPLETAMENTE)
ON-LINE CON
VISUAL STUDIO
ONLINE "MONACO"
• Conclusioni
 Ambiente molto promettente
 Non siamo in un ambiente .NET-centrico
 Decisamente utile per
 Prototyping
 Interventi r...
feedback
10
Marco Parenzan
1nn0va
» www.innovazionefvg.net
» @marco_parenzan
» it.linkedin.com/in/marcoparenzan
» www.face...
Upcoming SlideShare
Loading in...5
×

2014.04.04 Sviluppare applicazioni web (completamente) on line con Visual Studio Online monaco

238

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
238
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "2014.04.04 Sviluppare applicazioni web (completamente) on line con Visual Studio Online monaco"

  1. 1. Marco Parenzan 4 aprile 2014 SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO"
  2. 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. 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. 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. 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. 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. 7. IE F12 Source Code Viewer
  8. 8. TypeScript http://www.typescriptlang.org/Playground/
  9. 9. F# http://www.tryfsharp.org/Learn/getting-started
  10. 10. OneDrive
  11. 11. Mobile Services in Windows Azure
  12. 12. Source Code Management in VSO
  13. 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. 14. WinJS http://try.buildwinjs.com/
  15. 15. The Road to Monaco
  16. 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. 17. demo Monaco in azione con Typescript
  18. 18. Attualmente unica esperienza IDE per «Monaco» Dal Windows Azure Training Kit
  19. 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. 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. 21. Choice of language Choice of frameworks and languages.
  22. 22. Git TFS Web Deploy FTP CodePlex, BitBucket & GitHub Supported Publishing Methods
  23. 23. Abilitare «Monaco» nei Web Sites Abilita Entra
  24. 24. L’IDE di «Monaco» NavBar ToolBar Activity Bar
  25. 25. L’IDE di «Monaco» [2] Web Site Menu
  26. 26. L’IDE di «Monaco» [3] Configurazione IDE
  27. 27. SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO" • Rich Editing Experience
  28. 28. Tutti i comandi (F1)
  29. 29.  Quick Open (CTRL+E) Apertura Rapida (CTRL+E) CTRL+E Apri recente (CTRL+Q)
  30. 30. Vai alla riga (CTRL+G)
  31. 31. Trova il simbolo (CTRL+SHIFT+O) Quick Open + «@» Quick Open + «@:» Raggruppato per tipologia
  32. 32. Cerca (CTRL+F) Sostituisci (CTRL+H) CTRL+F/H Find all references
  33. 33. Cerca Cerca
  34. 34. Autocomplete (CTRL+spazio)
  35. 35. Snippet di codice (decisors) Decisors Snippet (Template)
  36. 36. Incrementa valori numerici (CTRL+↑) CTRL+↑
  37. 37. Markdown Decisors Snippet (Template)
  38. 38. Open to the Side + markdown preview
  39. 39.  AutoSave  Format Code  Upload from menu and Drag & Drop  iPad Keyboard Altre caratteristiche dell’editor
  40. 40. SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO" • Controllare tutto dalla Console
  41. 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. 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. 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. 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. 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. 46.  Il nuovo compagno per lo sviluppatore Web  Un modello server side  Tanti nuovi comandi per la console Node.js
  47. 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. 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. 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. 50. SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO" • Scrivere Codice
  51. 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. 52. SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO" • Controllo del Codice Sorgente
  53. 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. 54. • Permette di comparare i files tra versione in linea e branch in Git Comparazione dei files
  55. 55. SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO" • Conclusioni
  56. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×