JavaScript Web Tools with Visual Studio 2015 and ASP.NET 5 April 2015. 1 Readme Welcome! This document contains a set of articles that introduce the most commonly used JavaScript/frontend web development tools (libraries, task runners, frameworks…). Frontend development ecosystem is growing fast and getting complex, and we hope this brief doc will help you put the pieces together and decide on the ones that best fit your needs. You’ll be able to find updated versions of these articles (and more!) on the asp.net page at http://aka.ms/webdevdocs. You can get a good understanding just by reading the different articles, but we really recommend you follow the step by step samples to gain exposure to these tools, we created the samples with the free Visual Studio 2015 Preview. We hope you find it useful!! If you have any question, comment or feedback about the articles, we’ll be listening on the #jswebtoolsdoc hashtag on twitter. - Developer Platform team at Microsoft 2 Contents Grunt and Gulp. JavaScript task runners. .................................................................................................... 6 Using Grunt ............................................................................................................................................... 7 Preparing the Application ..................................................................................................................... 7 Configuring NPM ................................................................................................................................... 8 Configuring Grunt ............................................................................................................................... 10 All Together Now ................................................................................................................................ 14 Watching for Changes ......................................................................................................................... 15 Binding to Visual Studio Events ........................................................................................................... 15 Using Gulp ............................................................................................................................................... 16 NPM Package Differences ................................................................................................................... 16 Gulpfile vs Gruntfile Examples ............................................................................................................ 16 The Gulp Stream ................................................................................................................................. 17 All Together ......................................................................................................................................... 17 Summary ................................................................................................................................................. 18 Bower. Package Manager. ......................................................................................................................... 19 Getting Started ........................................................................................................................................ 19 Exploring the Client Build Process .......................................................................................................... 22 Define Packages .................................................................................................................................. 22 Install Packages to the Web Application ............................................................................................. 25 Reference Packages ............................................................................................................................ 26 Use the Installed Packages .................................................................................................................. 27 Summary ................................................................................................................................................. 28 Bootstrap. Responsive Web Framework. .................................................................................................. 29 Getting Started ........................................................................................................................................ 29 Basic Templates and Features ................................................................................................................ 30 The Bootstrap Theme ............................................................................................................................. 35 More Themes .......................................................................................................................................... 39 Components ............................................................................................................................................ 39 JavaScript Support .................................................................................................................................. 40 Summary ................................................................................................................................................. 41 Less, Sass & Font Awesome. Styling applications ..................................................................................... 42 CSS Preprocessor Languages ................................................................................................................... 42 3 Less .......................................................................................................................................................... 43 Getting Started .................................................................................................................................... 44 Sass .......................................................................................................................................................... 49 Less or Sass? ............................................................................................................................................ 52 Font Awesome ........................................................................................................................................ 53 Summary ................................................................................................................................................. 54 TypeScript. Enterprise-scale JavaScript. .................................................................................................... 55 Getting Started ........................................................................................................................................ 55 Language Features .................................................................................................................................. 57 TypeScript Ecosystem ............................................................................................................................. 61 Summary ................................................................................................................................................. 63 Knockout.js . MVVM JavaScript Library..................................................................................................... 64 Getting Started ........................................................................................................................................ 64 Observables, ViewModels, and Simple Binding ...................................................................................... 65 Control Flow ............................................................................................................................................ 69 Templates................................................................................................................................................ 72 Components ............................................................................................................................................ 73 Communicating with APIs ....................................................................................................................... 73 Summary ................................................................................................................................................. 73 Backbone.js. MVC Library ........................................................................................................................... 74 Getting Started ........................................................................................................................................ 74 Backbone Objects ................................................................................................................................... 74 Views ....................................................................................................................................................... 78 Collections ............................................................................................................................................... 80 Routers ...................................................................................................................................................