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

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-office-365-development-tools-to-build-apps-for-office-and-sharepoint-on-the-browser.aspx

WinJS

http://try.buildwinjs.com/

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