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