sviluppare applicazioni web (completamente) on-line con visual studio online "monaco"

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

VS11 - SVILUPPARE APPLICAZIONI WEB (COMPLETAMENTE) ON-LINE CON VISUAL STUDIO ONLINE "MONACO"

Marco ParenzanPordenone


Grazie a

Sponsor

http://www.aspitalia.com/

http://www.domusdotnet.org/

http://www.dotdotnet.org/

http://www.dotnetcampania.org/

http://www.dotnetliguria.net/

http://www.dotnetside.org/

http://www.ugidotnet.org/


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

http://bit.ly/regazurebcit2014

http://www.innovazionefvg.net/

http://www.cgn.it/

https://twitter.com/marco_parenzan

https://twitter.com/marco_parenzan

http://it.linkedin.com/in/marcoparenzan

http://it.linkedin.com/in/marcoparenzan

http://www.facebook.com/parenzan.marco

http://www.marcoparenzan.it/

http://www.slideshare.net/marco.parenzan

https://github.com/marcoparenzan

https://github.com/marcoparenzan

http://www.innovazionefvg.net/




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


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)?


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 Uno dei personaggi storici della «Gang of Four» Entrato in Microsoft nel 2011

• Ci sono «pezzi di Monaco» in diverse applicazioni web: 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

http://c9.io/

https://codeanywhere.net/

http://cloud-ide.com/

http://cloud-ide.com/

https://codenvy.com/

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


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

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


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





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


Abilitare «Monaco» nei Web Sites

Abilita

Entra


Agenda• L’IDE di «Monaco»

• Rich Editing Experience

• Controllo del Codice Sorgente

• Controllare tutto dalla Console

• Scrivere Codice

• Conclusioni


L’IDE di «Monaco»NavBar

ToolBar

Activity Bar


L’IDE di «Monaco» [2]

Web Site Menu


L’IDE di «Monaco» [3]

ConfigurazioneIDE


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


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/SFTP:// TFS WEBDEPL

OYDROPBOX


Comparazione dei files• Permette di comparare i files

tra versione in linea e branch in Git


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


Tutti i comandi (F1)


Apertura Rapida (CTRL+E)• Quick Open (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


Altre caratteristiche dell’editor• AutoSave

• Format Code

• Upload from menu and Drag & Drop

• iPad Keyboard


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


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


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


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-full-stack-javascript/)

• Molti dei comandi da usare sono packages di Node node-sass=npm install node-sass Editor & intellisense experience

http://coding.smashingmagazine.com/2013/11/21/introduction-to-full-stack-javascript/








Console Multiple• 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

Nuova C

onsole

Selettore C

onsole


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….


Less & Sass• LESS & SASS sono disponibili

come editor

• SASS si scarica come package Node Web Sites non supportano Ruby

[supportabile solo con IaaS]


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


Supported Web Frameworks


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


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


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


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)


Q&ATutto 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

http://www.communitydays.it/

sviluppare applicazioni web (completamente) on-line con visual studio online "monaco"

Technology