Web Dev Workflow in Visual Studio

@Dave_PaquetteMicrosoft MVP (ASP.NET/IIS)

[email protected]://www.davepaquette.com

Web Dev Workflow in the past

HTML .aspx

or .cshtmlCSS JavaScript

Web Dev Today

Web Dev Workflow Today

• Package Management• Bundling and Minification• CDN?• Script / Stylesheet Compilation• Code Improvements• Other Asset Optimization• Unit Tests

Web Dev Workflow Today

So….Many….Options

•Runtime Optimizations•Visual Studio Plugins• Task Runners

Runtime Optimization

• Web Forms / MVC 5 – System.Web.Optimization• MVC 6 – Smidge (https://github.com/Shazwazza/Smidge)

Runtime Optimization Demo

Runtime Optimization

• Pros• Low Complexity• Low Developer Overhead

• Cons• Limited functionality• Server-side Optimization

Visual Studio Plugins

• Bundler and Minifier • https://github.com/madskristensen/BundlerMinifier

• Web Compiler• https://github.com/madskristensen/WebCompiler

• Web Essentials• http://vswebessentials.com/

• https://visualstudiogallery.msdn.microsoft.com/

Visual Studio Plugins Demo

Visual Studio Plugins• Pros• Low-ish Complexity• More Features than Runtime Optimizations• Build Time Optimizations

• Cons• Ensuring developers have plugins installed and up-to-date• Challenging Integration with Build Servers• Clumsy Cache Busting in MVC5

Task Runners

• Build System for Front-End Web Dev• Collection of Node.js packages • Task basked• Asset Pipeline

http://gulpjs.com

Task Runner DemoGulp

Task Runners - Build Server Integration

• TFS / Visual Studio Online• Team City• Jenkins

> npm install> bower install> gulp xxx…usual msbuild stuff…

Task Runners• Pros• Powerful and Flexible• Easy integration with Build Server• Build time optimization

• Cons• Higher complexity• Learning curve• Package Manager Hell

Task Runner Tips

• Upgrade to npm 3.x• Make sure VS is using the right version• Set it and forget it

What should you use?

Runtime Optimization

VS Plugins

Gulp

Bower

Package Manager for JS / CSS librariesUses git to download packages> 20,000 packages

www.davepaquette.comBlogTwitter @Dave_Paquette

www.westerndevs.com@westerndevs

[email protected]

Thank You