Download to read offline
Uploaded byDavid Paquette
Improve your web dev workflow in Visual Studio
This document discusses different options for web development workflows in Visual Studio, including using runtime optimizations, Visual Studio plugins, and task runners. It provides examples of specific plugins and task runners like Bundler and Minifier, Web Compiler, Web Essentials, Gulp, and Bower. The document analyzes the pros and cons of each approach and recommends the best option depending on a project's complexity, build integration needs, and optimization goals.
More Related Content
Similar to Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
- 1. Web DevWorkflow in VisualStudio @Dave_Paquette Microsoft MVP (ASP.NET/IIS) contactme@davepaquette.com http://www.davepaquette.com
- 2. Web Dev Workflowin the past HTML .aspx or .cshtml CSS JavaScript
- 3.
- 4. Web Dev WorkflowToday •Package Management • Bundling and Minification • CDN? • Script / Stylesheet Compilation • Code Improvements • Other Asset Optimization • UnitTests
- 5.
- 6. So….Many….Options •Runtime Optimizations •Visual StudioPlugins •Task Runners
- 7. Runtime Optimization • WebForms / MVC 5 – System.Web.Optimization • MVC 6 – Smidge (https://github.com/Shazwazza/Smidge)
- 8.
- 9. Runtime Optimization • Pros •Low Complexity • Low Developer Overhead • Cons • Limited functionality • Server-side Optimization
- 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.
- 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. Task Runners • BuildSystem for Front-EndWeb Dev • Collection of Node.js packages • Task basked • Asset Pipeline http://gulpjs.com
- 14.
- 15. Task Runners -Build Server Integration • TFS /Visual Studio Online • Team City • Jenkins > npm install > bower install > gulp xxx …usual msbuild stuff…
- 16. Task Runners • Pros •Powerful and Flexible • Easy integration with Build Server • Build time optimization • Cons • Higher complexity • Learning curve • Package Manager Hell
- 17. Task RunnerTips • Upgradeto npm 3.x • Make sureVS is using the right version • Set it and forget it
- 18. What should youuse? Runtime Optimization VS Plugins Gulp
- 19. Bower Package Manager forJS / CSS libraries Uses git to download packages > 20,000 packages
- 20.
Editor's Notes
- #4 It all started with jQuery, which allowed us to do more interesting things in JS than we used it. As a result, we started writing a lot more JS in our apps Some people wanted a little more from JS as a language. We ended up with languages like CofffeeScript and TypeScript that compile down to JS. While all this was happening, the HTML5 and CSS3 specs were evolving, again allowing us to do more interesting things in the browser. Much like we have CoffeeScript and TypeScript for JS, we ended up with higher level languages like LESS and SASS that compile down to CSS. These languages extended CSS by allowing for things like reusable methods and variables in CSS. Again though, this meant that our source could not simply be published directly to the server. There are steps that need to happen in between. Some very smart people built great CSS frameworks like Bootstrap and Foundation for us so that we didn’t have to reinvent the wheel for every app we built. As more and more complex applications were being built, people started to want features like data binding that we were used to in platforms like WPF. That’s how Knockout came to be. That just seemed to open up the flood gates as everyone and their dog developed a javascript application framework. It looked like we were at least generally settling on a common approach when Facebook decided to join the show. Finally, with all these great frameworks and libraries that we can use, people realized we needed a way to manage packages and their dependencies. Enter npm for node and bower for client libraries.
- #5 I like to think of these tasks as a few different things. Web Optimization – Tasks like bundling and minification Tedious Developer Tasks – Compiling TypeScript or Less files, Ensuring browser compat with vendor prefixes Code Improvements – Code checkers like jshint…similar conceptually to fxcop
- #6 With all these tasks that we need to manage before publishing a web application, we needed some kind of solution to help coordinate it all. Enter Grunt an Gulp, the most popular task runners.
- #8 Bundles are configured in C# and created at runtime based on environment settings
- #9 Defining bundles Toggling Optimization Limitations
- #12 Show how JS bundles work with the Bundler extension Talk about Less / Bootstrap -Themes: http://bootstrap-live-customizer.com/ Customize bootstrap by adding LESS and including the right files Talk about Cache Busting. Show how this can be accomplished ---http://madskristensen.net/post/cache-busting-in-aspnet
- #20 The fact that it uses git is actually really important. You can easily fork an existing library and point to your fork instead of waiting on some stale project to get a bug fix.
- #21 Remember to add western devs here