Post on 11-Jan-2015
description
Marco Parenzan4 aprile 2014
SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE
CON VISUAL STUDIO ONLINE "MONACO"
feedback
10
Marco Parenzan1nn0va
» 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
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
(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
È 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»
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»
IE F12 Source Code Viewer
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-office-365-development-tools-to-build-apps-for-office-and-sharepoint-on-the-browser.aspx
The Road to Monaco
Small 50 kLOC
ModulesClasses
Promises
10% Typescript
Medium100 kLOC
“AMD”Lazy Loaded Contributions
50% Typescript
Larger200 kLOC
ComponentsAPI
Dependency Injection
100% Typescript
patterns
TypeScript
2011
2013
2012
size
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
demo
Monaco in azione con Typescript
Windows Azure Web Sites
start simple code smart go live
powerful web sites in seconds
start free, scale up and out as you go, friction-free and without the headaches
with classic asp, asp.net, php or node.js, develop on Windows, OSX or Linux
deploy live in seconds, easily monitor performance, rapidly diagnose and fix issues
Attualmente unica esperienza IDE per «Monaco»
Dal Windows Azure Training Kit
On-Premises
Models for Building and Running Apps
Virtualization
O/S
Hardware
Native Code
Custom Software
Network
Data
Applications
Firewall
Web Sites
Applications
Data
Cloud Services
Native Code
Startup Tasks
Applications
Firewall Rules
Data
Virtual Network
Virtual Machines
Native Code
Custom Software
Virtual Network
Data
Applications
Firewall Rules
O/S
Mobile Services
Applications
Data
Auth
Notifications
“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
Choice of language
Node.js: 0.6.17, 0.6.20, 0.8.2
PHP: 5.3PHP: 5.4
ASP.NETNET: 3.5, 4.5, 4.5.1 Python: 2.7
Bring a stack: FastCGI basedRubyJava
Choice of frameworks and languages.
Git TFSWeb
Deploy
FTP
CodePlex, BitBucket &
GitHub
Supported Publishing Methods
Abilitare «Monaco» nei Web Sites
Abilita
Entra
L’IDE di «Monaco»
NavBarToolBar
Activity Bar
L’IDE di «Monaco» [2]
Web Site Menu
L’IDE di «Monaco» [3]
ConfigurazioneIDE
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, rd/rmdir, per la creazione delle
cartelle Dir, cd, per navigare tra le cartelle Touch, open, per gestire i files
Console, disco e directory
• È 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
• 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 perlanciare i comandi ordinari
Console Multiple
Nuova C
onso
le
Sele
ttore
C
onso
le
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
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
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.smashingmagazine.com/2013/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
• LESS & SASS sono disponibili come editor
• SASS si scarica come package Node– Web Sites non
supportano Ruby [supportabile solo con IaaS]
Less & Sass
Una particolarità (ma nemmeno tanto): «Monaco» è scritto in Typescript
Editor & intellisense (best!) experience
Typescript è un package node (di nuovo: npm install typescript)
TypeScript
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 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
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 è 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
FTP:// TFS WEBDEPLOY
DROPBOX
• 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 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
feedback
10
Marco Parenzan1nn0va
» 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