Marco AssandriTorino Technologies Group – 13 novembre 2012

Novità in Visual Studio 2012per lo sviluppo Web

• Preparazione dell’ambiente• Novità principali• Web Essentials• LESS• Typescript

Agenda

• Gli esempi mostrati durante questa presentazione presuppongono la configurazione di Visual Studio 2012 come Web Development environment.

Preparazione dell’ambiente

• Ai plugin di default che vanno aggiornati

Preparazione dell’ambiente

• vanno aggiunti i seguenti plugin:– TypeScript for Microsoft Visual Studio 2012– Web Essentials 2012– Image Optimizer

Preparazione dell’ambiente

• Che portano a questa configurazione finale

Preparazione dell’ambiente

• Compatibilità della soluzione con Visual Studio 2010 SP1– I progetti, anche dopo l’upgrade a Visual Studio 2012,

possono essere letti e modificati con Visual Studio 2010 SP1

– Favorisce la condivisione e elimina la necessità di avere tutti lo stesso ambiente

Novità principali

• Supporto HTML5 e correlati– Supporto dei nuovi tag semantici introdotti da HTML5– Supporto Web Accessibility Initiative - Accessible Rich

Internet Applications (WAI-ARIA)– Disponibili snippet specifici per HTML5– Rinomina automatica del fine tag– Smart Tasks, estrai user control e event binding– Intellisense nel page source migliorato– Possibilità di visualizzare con browser differenti– Nuovi template (MVC 4, Mobile, …) e miglioramento dei

vecchi– DEMO

Novità principali

• Supporto Javascript– Supporta ECMAScript 5– Funzionalità di match delle parentesi e di collapse di

regioni– Intellisense migliorato e miglior supporto del DOM– Go to definition– Documentazione <signature>– DEMO

Novità principali

• Supporto CSS3– Scelta dello stile di riformattazione– Intellisense migliorato e auto riduzione delle voci di

completamento– Indentazione– Support CSS Hacks e caratteristiche Vendor Specific– Commenti disponibili dall’IDE, region collapse– Color picker– Snippet per cross browser styles e scenari avanzati(media

queries, …)– DEMO

Novità principali

• Page Inspector• Publish Settings nei file di configurazione• DEMO

Novità principali

• Minification• Utility varie encoding, decoding e trasformazioni di stringhe

(maiscolo, hash, …)• Make visible only for IE• Aggiunta proprietà Vendor Specific e standard ai CSS • Visualizzazione dei browser supportati per ogni proprietà

(http://realworldvalidator.com)• Identificazioni classi di Modernizr• Intellisense per Add region, important, custom fonts,

animations, url picker, gradienti• Indicazione degli errori che possono portare ad

incompatibilità tra i browser• Embed immagini in base64• DEMO

Web Essentials 2012

• Rimozione di proprietà duplicate, ordinamento, rimozione di proprietà non supportate

• Shortcuts per variazione dei colori e delle proprietà (SHIFT+CTRL+ARROW UP/DOWN)

• F1 per informazioni aggiuntive sulla proprietà• Preview Font e immagini• Supporto a TypeScript, LESS e CoffeeScript con

finestra di preview laterale e generazione automatica dei file finali minificati

• DEMO

Web Essentials 2012

• Minificazione dei file da menù contestuale con file di mapping per debug facilitato (supportato su chromeabilitando Enable Source Maps)

• Supporto JsDoc usato da diverse librerie• Paste JSON as classes• Paste XML as classes• ZenCoding (http://www.johnpapa.net/zen-coding-

in-visual-studio-2012/)• DEMO

Web Essentials 2012

• Ottimizza le immagini senza perdita di qualità• Funzionalità spesso sottovalutata ma molto utile• Esempio di utilizzo in codice proprio• DEMO

Image Optimizer

• Estende i CSS con variabili, mixins, funzioni e operazioni (http://lesscss.org/)

• Con Web Essentials viene già generato il codice CSS• Senza Web Essentials conviene installare DotLess

(http://www.dotlesscss.org/) per la generazione dei CSS a runtime

• DEMO

LESS

• Estende Javascript ed è pensato per scrivere applicazioni complesse in Javascript

• Il codice finale risultante è Javascript• Ogni codice Javascript è un codice Typescript valido• Rispetto a Script#, legge tutte le librerie JS in quanto

alla fine si tratta di un Javascript esteso• Disponibile plugin per Visual Studio 2012 oppure si può

sperimentare senza installazione http://www.typescriptlang.org/Playground/

• Implementazione basata su ES6• Compila in ES5 o ES3• Funziona il renaming• DEMO

Typescript