Visual Studio Code

Nei giorni scorsi si è svolta a San Francisco la più importante conferenza Microsoft dell’anno: //build/. Tante sono state le novità, tra cui un nuovo editor di sviluppo della famiglia di Visual Studio, il cui nome è Visual Studio Code. Questo editor, che è stato rilasciato attualmente in preview, consente la creazione di progetti orientati al cloud e al web ed è cross-platform: supporta infatti Windows, Linux e OSX. Il motivo principale che ha portato la nascita di questo IDE è stata la volontà di mettere a disposizione degli sviluppatori un ambiente leggero e di semplice utilizzo che aiuti a creare applicazioni che coinvolgono diverse tecnologie tra cui: ASP.NET, Node.js, HTML, CSS, LESS, SASS e JSON. E’ interessante sapere che questo IDE nasce come customizzazione di un editor già esistente chiamato Electron, che è stato utilizzato dietro le quinte anche da Visual Studio “Monaco” (il famoso editor online di Visual Studio). Inoltre, la presenza come il debugger, l’intellisense o l’integrazione con git, lo rendono un ambiente davvero attraente per il front-end developer. Il primo passo da fare per usare Visual Studio Code è quello di scaricare il pacchetto appropriato per il proprio sistema operativo da https://code.visualstudio.com/Download e installarlo sulla propria macchina (figura 1):

Figura 1 – Le diverse piattaforme supportate da Visual Studio Code

Inoltre, possiamo scegliere di installare oltre al pacchetto base, a seconda del nostro sistema operativo o di ciò che abbiamo già installato sullo stesso, una serie di tool aggiuntivi che ci aiuteranno nella realizzazione delle nostre applicazioni:

  • NET 5;
  • NodeJS (incudes NPM);
  • git: (command line tools);
  • Yeoman: un tool per fare lo scaffolding di applicazioni, ovvero genera per noi la struttura di un progetto;
  • generator-aspnet: generatore di yeoman per ASP.NET 5;
  • hottowel: un generatore di yeoman per applicazioni che usano AngularJS;
  • Express: un application framework per Node;
  • gulp: un task runner system;
  • mocha: un JavaScript test framework per Node;
  • bower: un client side package manager;
  • TypeScript: un framework tipizzato per estendere Javascript;
  • TypeScript definition manager: un repository di definition file da usare con Typescript.

Al termine dell’installazione possiamo aprire l’editor per cominciare ad usarlo (figura 2):

Figura 2 – Visual Studio Code

L’IDE si presenta in questo modo: un menù principale (File, Edit…), un menù laterale con quattro pulsanti (Explore, Search, Git, Debug), al centro l’area di editing (in cui si possono affiancare fino a tre finestre) e in basso una barra di stato. Inoltre abbiamo una command palette che ci consente di eseguire comandi all’interno dell’ambiente in maniera rapida (figura 3).

Figura 3 – La command palette

Il primo aspetto interessante di Visual Studio Code riguarda il suo funzionamento: infatti si tratta di un editor file e folder based, che significa che basterà puntare ad una cartella o ad un file e non ad un file di progetto per iniziare a lavorare. Inoltre l’editor è in grado di riconoscere qualsiasi tecnologia supportata nel momento in cui viene aperta una cartella leggendo il suo contenuto. Per impostare invece una nuova cartella di lavoro, si può cliccare sul primo pulsante sul menù laterale (Explore), che apre una sezione che ci consente di visualizzare, aprire o aggiungere dei file presenti alla cartella selezionata (figura 4). In questa sezione, troviamo 2 sottosezioni, ovvero “Working Files”, dove troviamo i file aperti per la modifica, e “No Folder Loaded” (il cui nome cambierà a seconda della cartella in cui stiamo lavorando).

Figura 4 – Scelta della cartella di lavoro

Dopo aver cliccato su “Open folder”, siamo pronti per selezionare una cartella che rappresenterà il nostro workspace. Al suo interno possiamo aggiungere file usando i pulsanti accanto il nome della nostra cartella (figura 5):

Figura 5 – I pulsanti di gestione dell’attuale workspace

Supponendo di aver creato un file HTML, possiamo utilizzare il browser per visualizzarne il risultato (figura 6).

Figura 6 – Un esempio di applicazione in Visual Studio Code

Questa è per il momento solo una piccola introduzione su Visual Studio Code. Nei prossimi post entreremo in dettaglio sulle funzionalità di questo nuovo editor, come realizzazione di applicazioni ASP.NET e Node.js, supporto a Git, Debugging e configurazione.

0  

VS 2015–Novità sul debugging

Nel recente evento Connect() di Microsoft è stato rilasciato in preview Visual Studio 2015. Questa nuova versione di Visual Studio introduce tante novità per noi sviluppatori, tra cui quelle legate al debugging. Questo post ha l’intento di mostrarvi come sfruttare al meglio queste nuove feature.

Partiamo dalla prima novità: l’interfaccia grafica. Infatti, in Visual Studio 2015, quando creiamo un nuovo punto di interruzione (o passiamo sopra uno già esistente), compare un menù contestuale con 2 icone che ci consentono o di aprire il menù delle impostazioni del debugger o abilitare/disabilitare il punto di interruzione (figura 1).

 

1

Figura 1

Nel caso in cui selezioniamo il pulsante delle impostazioni, viene aperta una finestra nell’editor che ci mostra 2 cose: conditions e actions (figura 2).

Le conditions ci consentono di stabilire in base ad una o più condizioni quando l’esecuzione del codice si deve fermare in corrispondenza del punto di interruzione (figura 3). Le tipologie di condizioni che possiamo applicare ad un punto di interruzione sono 3:

  • Conditional Expression, che consente di verificare una condizione su una variabile, proprietà o oggetto nel codice;
  • Hit Count, che consente di indicare il numero di volte che il codice in corrispondenza del breakpoint deve essere eseguito prima che Visual Studio fermi l’esecuzione
  • Filter, che aiuta a debuggare codice che viene eseguito in parallelo (ad esempio è possibile specificare l’id o il nome del thread).

 

2

Figura 2

Le actions invece consentono (per il momento!) di stampare un messaggio nella finestra di Output con la possibilità di inserire sia il valore di variabili presenti nel contesto tramite le parentesi graffe, che di poter utilizzare delle variabili preimpostate precedute dal carattere $ (dollaro). In tale contesto, è anche possibile impostare se l’esecuzione del codice si deve fermare oppure no (Continue execution).

 

3

Figura 3

 

Alcune novità ci sono anche nel menù contestuale associato al punto di interruzione, infatti adesso contiene solo i collegamenti ad alcune opzioni essenziali come in figura 4 (visto che le altre sono state spostate nella piccola popup della figura 1):

 

4

Figura 4

Una delle grandi novità di Visual Studio 2015 è la possibilità di eseguire le lambda expression nell’Immediate window o nella Watch window. Questa è una feature che è stata richiesta tantissimo e che farà felice tanti sviluppatori. Nella seguente figura (5), si può vedere un esempio di utilizzo:

 

5

Figura 5

 

Ultima novità di questo post sono i performance tips: si tratta di informazioni visualizzate durante il debugging che mostrano il tempo di esecuzione e il tempo di CPU legato all’istruzione eseguita (figura 6). E’ inoltre possibile accedere alle opzioni per questi ultimi cliccando su di essi (figura 7).

 

6

Figura 6

7

Figura 7

 

Non vi resta che scaricare la preview di Visual Studio 2015 da qui e iniziarla ad usare!

0  

Sorgenti del .Net Framework in Visual Studio e oltre…

Avete mai avuto voglia di navigare facilmente nei sorgenti del .Net Framework senza usare diversi programmi o escamotage?

Per chi non lo sapesse, da qualche mese a questa parte è stato pubblicato il portale Reference Source che vi consente di navigare agevolmente all’interno dei sorgenti .Net Framework in maniera molto simile all’object browser di Visual Studio. La cosa interessante, è che è anche possibile scaricare i sorgenti in un pacchetto .zip e navigarlo all’interno di una soluzione.

Ma le novità non finiscono qui! Infatti tramite l’estensione Ref12 potete usare il tasto F12 per navigare direttamente da Visual Studio su Reference Source e visualizzare i sorgenti interessati. Bello, no?

E se volessi debuggare il mio codice e quello del .Net Framework? Beh, per quello potete seguire questo utile post che vi spiega come fare: Allow developers to step through .NET Framework sources

 

Vi lascio con un video riepilogativo delle funzionalità esposte dal portale:

 

 

 

Enjoy it!

0  

Load-Balance Virtual Machine in Windows Azure (parte II)

Nel precedente articolo abbiamo visto come creare e configurare un Load Balancer associato a 2 macchine virtuali su Windows Azure. In questo articoli, affrontiamo il problema di come gestire i due nodi (le due VM).

Il primo passo che facciamo sulle due VM è abilitare il ruolo di IIS. Possiamo effettuare questa installazione connettendoci in remote desktop sulle macchine virtuali.

Connettersi in remote desktop sulla VM

All’interno della dashboard della prima VM, nel pannello di amministrazione di Windows Azure, è possibile scaricare un file con estensione .rdp già pronto per la connessione.

Sebbene questa feature sia utilissima, nel momento in cui si devono gestire una moltitudine di VM su Azure (o anche on-premise), può tornare sicuramente utile il Remote Desktop Connection Manager, di cui ho già parlato in un precedente TuriTip.

L’unica attenzione che occorre fare è verificare la porta associata ad ogni VM per la connessione RDP. Questa informazione può essere recuperata dalla sezione Endpoints all’interno della dashboard della VM su portale di gestione di Windows Azure.

Una volta entrati sulla macchina virtuale, dal server manager basterà selezionare “Manage” e poi “Add Roles and Features” e procedere come al solito con l’abilitazione di IIS con le sue opzioni.

Occorre poi effettuare la stessa operazione anche sulla seconda macchina virtuale.

Una volta terminate le installazioni siamo pronti per verificare il corretto funzionamento del Load Balancer.

Per tale motivo, apriamo la console di amministrazione di IIS e modifichiamo l’HTML della pagina iniziale del server (Default Web Site\iisstart.htm) in modo da mostrare il nodo che ci ha risposto aggiungendo subito dopo il tag di apertura del body:

Infine, apriamo il browser sulla nostra macchina (non le VM!), digitiamo nella barra dell’indirizzo l’url legata al nostro cloud service (*.cloudapp.net) e refreshiamo la pagina con F5 fintanto che non abbiamo almeno una risposta da entrambi i nodi.

In questo modo ci siamo accertati del corretto funzionamento del Load Balancer.

Happy load balancing!

0  

Load-Balance Virtual Machine in Windows Azure (parte I)

In questa serie di articoli vedremo:

  • Come configurare un Load Balancer per due macchine virtuali su Windows Azure (prima parte);
  • Verificare il corretto funzionamento del Load Balancer.

I requisiti necessari per la realizzazione di queste procedure richiedono una sottoscrizione a Windows Azure attiva.

Creazione della prima macchina virtuale

Per creare una nuova macchina virtuale occorre entrare nel pannello di amministrazione di Windows Azure relativo al proprio account ed accedere alla sezione Virtual Machine. Da qui si può creare una nuova macchina virtuale seguendo il wizard in basso sulla sinistra: New –> Virtual Machine  -> From Gallery.

Dalla finestra che compare selezionare Windows Server 2012 R2 Datacenter.

Una volta avviata la procedura di creazione della VM, nella prima finestra di configurazione della macchina virtuale, occorre impostare un nome alla macchina virtuale (per identificarle successivamente ho usato un nome con il suffisso “nomevm01”) e le credenziali necessarie per l’accesso.

Nella seconda schermata occorre creare un Servizio Cloud assegnandogli un nome. Questo dovrà essere lo stesso per tutte le VM accessibili dallo stesso Load Balancer. Occorre inoltre impostare un set di disponibilità con un relativo nome e l’endpoint HTTP a quelli già presenti.

Le altre impostazioni possono essere lasciate con i valori di default (anche quelle dello step successivo). Una volta confermata la procedura comincia il provisioning della VM.

Creazione della seconda macchina virtuale

La creazione della seconda macchina virtuale è simile agli step effettuati per la prima. L’unica differenza è la necessità di selezionare il Cloud Service e il set di disponibilità già creato per la prima VM. Per il momento non è necessario aggiungere l’endpoint HTTP.

Anche in questo caso occorre terminare il wizard lasciando le impostazioni di default. Al termine della fase di provisioning, nella sezione della macchine virtuali del portale di Azure troviamo una situazione simile

Se si vuole verificare quali siano tutte le VM collegate ad un Cloud Service, possiamo andare nella relativa pagina del portale di Windows Azure e selezionare sulla voce “Instances”:

Creazione del Load Balancer

Una volta che le due VM sono state provisionate, occorre creare il Load Balancer. Questo può essere creato nella pagina di configurazione della prima macchina virtuale nella sezione “Endpoints”. Da qui selezionare HTTP e poi “Edit” in basso

Nella finestra che compare, mettere il segno di spunta alla voce “Create a load-balanced set”.

Nel secodo step di questo wizard scegliere il nome per il Load Balancer e lasciare le impostazioni di default per le altre opzioni:

 
Una volta confermate queste impostazioni, occorre configurare la seconda VM. Sempre nella sezione “Endpoints” bisogna aggiungere un endpoint per il protocollo HTTP e selezionare il Load Balancer appena creato

Nella seconda schermata scegliere “HTTP” come nome dell’Endpoint e salvare.

A questo punto abbiamo creato e configurato due macchine virtuali su Windows Azure che usano lo stesso Load Balancer. Nel prossimo articolo vediamo come verificarne il corretto funzionamento.

0  

Personalizzare l’editor di Visual Studio

Se non vi piacciono i colori dell’editor di Visual Studio e non vi va di perdere tempo nei settaggi nella scelta di tutti i colori, potete come me scegliere uno degli schemi già pronti all’uso da questo sito: StudioStyles. Qui potete trovare oltre 2000 schemi da importare direttamente all’interno del vostro Visual Studio oppure potete scegliere di creare con pochi passi uno schema personalizzato.

Se scegliamo la prima opzione, una volta scaricato il file .vssettings basterà importarlo all’interno di Visual Studio nella voce Tools –> Import & Export Settings e poi seguite il wizard che consente di

– fare un backup dell’attuale profilo (consigliato);

– importazione lo schema scaricato dal sito.

Se una volta importato lo schema vi siete accorti che non vi piace e volete tornare ai settaggi precedenti, basterà o re-importare lo schema di cui avete il backup, oppure, se non avete mai fatto modifiche all’aspetto grafico dell’editor, potete direttamente fare un reset dalla schermata di importazione:

Keep Calm and Use Visual Studio!

0  

Incoming Changes Indicator in Codelens–TFS 2013.2

Qualche settimana fa è stato rilasciato il secondo update per Visual Studio e Team Foundation Server.

In questa release ci sono un pò di novità su alcune feature già presenti nelle versioni precedenti e in particolare per TFS si tratta di una release “go live” visto che come riferito da Brian Harry, siamo alla versione RC per questo prodotto.

Alcune delle novità di questo update sono le seguenti:

Work Item Tagging;
Novità nella gestione del BackLog (PerfImprovements, Non-working days…);
Personalizzazione dei Charts;
Esportazione del test plan in HTML;
Tags in Release Management;
Implementazione di nuovi comandi nel supporto a Git.
L’elenco completo delle nuove features lo potete trovare qui nella KB: http://support.microsoft.com/kb/2927432

Una delle grandi novità per questo update è qualcosa legato al CodeLens e che si chiama “Incoming Changes Indicator”. Questa feature ci fornisce informazioni sulle modifiche effettuate sul codice fra i diversi branches del progetto. Questo da quindi la possibilità allo sviluppatore di identificare da quale branch deriva una modifica trovata sul codice.

Questo è un esempio di visualizzazione di questa funzionalità (tratta da MSDN):

Questo è invece l’elenco delle differenti icone che possono essere visualizzate nella prima colonna (MSDN):

Da questa finestra possiamo poi seguire diverse strade come (MSDN):

Vi ricordo il che il CodeLens è disponibile solo per la versione di Ultimate di Visual Studio e a seconda dell’infrastruttura di cui disponiamo, possiamo o no avere determinate funzionalità.

Non vi resta che scaricare l’update, se non lo avete già fatto e vedere come vi semplifica la vita.

Keep Calm and Use Visual Studio!

0  

Usare uno script Powershell come Post Build Event

Fino a poco fa mi è capitato di lavorare su un applicativo WPF che in base ai propri requisiti aveva la necessità di memorizzare le risorse grafiche e i file dei testi localizzati in una cartella diversa da quella di installazione.

In fase di sviluppo e testing però, avere una situazione del genere significa che dopo aver compilato occorre andare nella cartella Bin\Debug e copiare i file interessati nella cartella di destinazione (nel mio caso, una subfolder creata appositamente in %LocalAppData%).

Per tale motivo ho deciso di automatizzare la procedura utilizzando gli eventi di Post Build presenti nelle proprietà del progetto in Visual Studio 2013.

Ma partiamo con ordine. La prima cosa che ho creato è un semplice script Powershell che esegue le copie dei file interessati:

Da notare è la prima riga di codice, param($ProjectDir), che non fa altro che recuperare un parametro passato in input allo script, e come si evince dal nome del parametro, si tratta della cartella dove risiede il nostro progetto. Dove aver impostato un po’ di path, viene effettuata una pulizia delle cartelle di destinazione e poi la copia dei file aggiornati dalla cartella Bin alla cartella di destinazione. Una volta terminato lo script, l’ho salvato nella cartella dell’intera soluzione del progetto, e visto che mi trovavo, l’ho aggiunto alla soluzione stessa, in una cartella specifica in modo da avere anche lo script sotto TFS per il versionamento

Per richiamare questo script subito dopo aver compilato il progetto, possiamo utilizzare gli eventi di PostBuild. Li possiamo localizzare cliccando con il pulsante destro sul nome del progetto, poi “Proprietà”, e poi “Build Events”.

Da qui, selezioniamo il pulsante “Edit Post-build” e richiamiamo il nostro script Powershell con il seguente comando

Come notate, ho semplicemente richiamato l’eseguibile di Powershell e ho passato in input il file dello script e 1 argomento. In questo caso ho fatto uso delle macro (che potete trovare cliccando sul pulsante ‘Macros’), per recuperare le informazioni relative alla directory della soluzione e del progetto. E’ importante fare attenzione agli spazi nella costruzione di questi comandi, che potrebbero portare a comportamenti inaspettati e difficili da individuare. Sempre sulla pagina degli eventi ho lasciato selezionata l’esecuzione dello script solo quando la compilazione va a buon fine (On successful build).

Adesso ogni volta che compilate, in automatico le cartelle scelte saranno copiate all’interno della cartella di destinazione. Se volete verificare ogni passaggio eseguito dallo script, potete aggiungere un po’ di Write-Output allo script e osservare l’Output Window in Visual Studio.

Keep Calm and Use Visual Studio!

0  

Bing Code Search per C#

Bing Code Search per C# – Turibbio’s Blog

Avete mai cercato Bing dentro Bing? Beh di sicuro non succede quello che capita ad un famoso gruppo di ragazzi napolitani, conosciuti come i “The Jackal”, che vengono inghiottiti da Google e si perdono letteralmente nell’etere internettiano.

Ma se invece pensiamo ad un Bing dentro Visual Studio? Quali potrebbero essere i benefici? La risposta l’hanno trovata per noi in Microsoft Research dove hanno pensato bene di creare una estensione (al momento solo per VS2013) chiamata “Bing Code Search for C#”, scaricabile da qui:  http://visualstudiogallery.msdn.microsoft.com/a1166718-a2d9-4a48-a5fd-504ff4ad1b65

Tramite questa estensione possiamo incrementare la nostra produttività cercando direttamente nell’IDE, invece che attraverso l’uso di un browser esterno e di un motore di ricerca, porzioni di codice che ci servono per completare le nostre applicazioni. Il tutto integrato all’interno del nostro IDE con l’uso dell’intellisense. Tutto questo è stato reso possibile tramite un accordo tra Microsoft, StackOVerflow, DotNetPearls, e CSharp411, siti da cui i risultati vengono recuperati. Per ogni risultato viene verificata la compatibilità con la tipologia di progetto con cui stiamo lavorando attaverso un processo dietro le quinte che usa Roslyn il codice viene adattato per essere inserito nel nostro progetto.

L’utilizzo è semplicissimo. Dopo aver installato l’estensione, basta che nel nostro progetto apriamo il menù dell’intellisense (CTRL+Spazio) e selezioniamo la voce “How Do I

Bing Code Search per C# – Turibbio’s Blog

Da qui basta digitare le parole relative alla funzionalità da implementare e ci compaiono un insieme di risultati già pronti all’uso

Bing Code Search per C# – Turibbio’s Blog

Come vedete al momento la mia ricerca, “Connect to SQL Server”, ha prodotto 4 risultati ed il primo è stato recuperato dal noto sito Stack Overflow.

Al momento le ricerche possono essere effettuate solo in lingua inglese. Visto che è una estensione appena uscita, di sicuro non conterrà tutte le porzioni di codice che possono tornarci utili, ma, anche grazie ai numerosi feedback positivi, con il passare del tempo la codebase sarà sempre più ampia.

Se vi interessa tutta la storia dietro la nascita di questo progetto,http://blogs.technet.com/b/inside_microsoft_research/archive/2014/02/17/bing-code-search-makes-developers-more-productive.aspx

Se invece siete interessati ai “The Jackal” vi lascio qui il link al primo episodio di “lost in google”: http://youtu.be/Jul_dB_wZes

Bing Code Search per C# – Turibbio’s Blog

Keep Calm and Use Visual Studio!

0  

CodeLens: navigare nel proprio codice in modo semplice!

CodeLens è una nuova feature di Visual Studio 2013 che consente di migliorare il proprio lavoro attraverso l’integrazione nel nostro codice di una “LinkBar” associata ad ogni definizione di classe o di elementi interni ad una classe (proprietà e metodi).

Tale barra può contenere:

  • Riferimenti ai punti in cui la classe o il metodo è usato (con la possibilità di aprire un popup di anteprima)
  • Storico del codice, associato ai changeset creati su TFS, work items e review
  • Unit tests

Vediamo in dettaglio le singole feature.

Referenze

E’ possibile visualizzare sopra ogni metodo o proprietà il numero di occorrenze in cui lo/a stesso/a è stato usato/a, con la possibilità attraverso un popup di identificare i punti precisi nel codice dove le stesse si trovano. Da qui è anche possibile cliccare sulle voci  visualizzate (doppio click) e andare nel punto di utilizzo. E’ anche possibile richiamare tramite questo popup la funzionalità CodeMap (di cui parleremo in un prossimo articolo).

Storico del codice

E’ una feature che consente di visualizzare da chi sono state apportate le modifiche al codice accedendo all’intera history dei changeset

CodeLens - More changesets on server than locally

[fonte: http://msdn.microsoft.com/en-us/library/vstudio/dn269218(v=vs.120).aspx]

E’ anche possibile visualizzare I bug associati, I work items e le review. Da qui, inoltre, tramite l’uso di Lync, è possbile mettersi in contatto con gli sviluppatori.

CodeLens - Contact your team

[fonte: http://msdn.microsoft.com/en-us/library/vstudio/dn269218(v=vs.120).aspx]

Unit Test

E’ possibile attraverso CodeLens visualizzare i test ed eseguirli direttamente dal popup che appare:

CodeLens - Choose test status in code editor

[fonte: http://msdn.microsoft.com/en-us/library/vstudio/dn269218(v=vs.120).aspx]

E’ inoltre possibile verificare il motivo per cui un test non è andato a buon fine:

CodeLens - See unit test result

[fonte: http://msdn.microsoft.com/en-us/library/vstudio/dn269218(v=vs.120).aspx]

CodeLens è attualmente supportato solo per la versione di Visual Studio Ultimate 2013 e richiede per alcune funzionalità come l’integrazione dei work items la presenza di TFS 2013. Per le funzionalià di comunicazione richiede invece Lync 2013, Lync Basic 2013 o Lync 2010.

In sostanza, CodeLens == Produttività!

Enjoy it! Smile

0