Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improve your web dev workflow in Visual Studio

392 views

Published on

The variety and sheer number of libraries used to create the average web application today can be difficult to manage. Add to that cross browser support and constantly changing HTML, CSS and JavaScript specifications: Life as a web developer can be stressful. Luckily, Visual Studio has you covered with support for modern web developer tools. There are options for everyone, whether you prefer a purely IDE based solution like Web Essentials or an extensible node.js based solution like Gulp and Bower.

Published in: Software
  • Login to see the comments

  • Be the first to like this

Improve your web dev workflow in Visual Studio

  1. 1. Web DevWorkflow in Visual Studio @Dave_Paquette Microsoft MVP (ASP.NET/IIS) contactme@davepaquette.com http://www.davepaquette.com
  2. 2. Web Dev Workflow in the past HTML .aspx or .cshtml CSS JavaScript
  3. 3. Web DevToday
  4. 4. Web Dev WorkflowToday • Package Management • Bundling and Minification • CDN? • Script / Stylesheet Compilation • Code Improvements • Other Asset Optimization • UnitTests
  5. 5. Web Dev WorkflowToday
  6. 6. So….Many….Options •Runtime Optimizations •Visual Studio Plugins •Task Runners
  7. 7. Runtime Optimization • Web Forms / MVC 5 – System.Web.Optimization • MVC 6 – Smidge (https://github.com/Shazwazza/Smidge)
  8. 8. Runtime Optimization Demo
  9. 9. Runtime Optimization • Pros • Low Complexity • Low Developer Overhead • Cons • Limited functionality • Server-side Optimization
  10. 10. 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/
  11. 11. Visual Studio Plugins Demo
  12. 12. Visual Studio Plugins • Pros • Low-ishComplexity • More Features than Runtime Optimizations • BuildTime Optimizations • Cons • Ensuring developers have plugins installed and up-to-date • Challenging Integration with Build Servers • Clumsy Cache Busting in MVC5
  13. 13. Task Runners • Build System for Front-EndWeb Dev • Collection of Node.js packages • Task basked • Asset Pipeline http://gulpjs.com
  14. 14. Task Runner Demo Gulp
  15. 15. Task Runners - Build Server Integration • TFS /Visual Studio Online • Team City • Jenkins > npm install > bower install > gulp xxx …usual msbuild stuff…
  16. 16. Task Runners • Pros • Powerful and Flexible • Easy integration with Build Server • Build time optimization • Cons • Higher complexity • Learning curve • Package Manager Hell
  17. 17. Task RunnerTips • Upgrade to npm 3.x • Make sureVS is using the right version • Set it and forget it
  18. 18. What should you use? Runtime Optimization VS Plugins Gulp
  19. 19. Bower Package Manager for JS / CSS libraries Uses git to download packages > 20,000 packages
  20. 20. www.davepaquette.comBlog Twitter @Dave_Paquette www.westerndevs.com @westerndevs Email contactme@davepaquette.com ThankYou

×