Let's talk about JavaScript

Michael K. Snead

msnead@paylocity.com

https://github.com/aikeru/LetsTalkJavaScript2

Part 2: Using Modern Tooling Today

https://github.com/aikeru/BenefitsCenter

Part One:

Part Two:

Topic of Discussion

  • Tooling Today with VS2013
  • Workflow with Plugins
  • Workflow with Gulp
  • Visual Studio 2013, 2015
  • ASP.NET vNext

I hope to answer these questions...

  • Why should I care about gulp?
  • How can this help me today?
    (VS2013, ES3/5)

I can't cover everything in depth, so be sure to send me questions or reach out to the community on yammer.

Out of the Box

  • Intellisense
  • Go-To-Definition

PresentationIntellisense.sln

Out of the Box

  • Global functions, objects, fields
  • Intellisense includes type information
  • Dynamic expressions, IIFEs and the objects they expose
  • Prototypal objects, their inherited functions and fields, those initialized by the constructor and those on their prototype

MSDN Create JS Intellisense XML Comments
https://msdn.microsoft.com/en-us/library/bb514138.aspx

Visual Studio provides intellisense and go to definition for...

Decorating Fields in JavaScript XML Comments
https://msdn.microsoft.com/en-us/library/hh542725.aspx

Out of the Box

Make sure to check your _references.js file if you aren't getting intellisense for a file you want.

/// <autosync enabled="true" />
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="jquery-1.10.2.js" />
/// <reference path="bootstrap.js" />
/// <reference path="respond.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="app/widget.js" />

If autosync is enabled, new .js files will be added. You can also reference files directly within a file.

Plugin Based

  • Linting
  • Unit Testing
  • Use Web Essentials, Chutzpah

Linting via Web Essentials

Out of the box, Web Essentials provides support for JSHint, a very good linter. 

https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

Linting via Web Essentials

Teams often have their own rules and conventions. JSHint is configurable to be as strict or loose as you need.

http://jshint.com/docs/options/

Web Essentials 2015

Mads is working on two new plugins to provide features for VS2015 RTM.

https://github.com/madskristensen/BundlerMinifier

https://github.com/madskristensen/WebCompiler

Unit Testing via Chutzpah

Chutzpah provides JavaScript unit testing within Visual Studio alongside your C# unit tests with a complete DOM (webkit).

https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe

Unit Testing via Chutzpah

Chutzpah works with a number of scenarios and frameworks too.
 

If you use ReSharper, you can configure ReSharper to use PhantomJS and it should automatically pick up your unit tests.

Task Based

  • Everything
  • Use Gulp, Task Runner Explorer

Using Gulp for Workflow

Step 1: Install Task Runner Explorer

If you don't install it, you may not even notice a gulp-enabled project and you can keep working just as you always have.

This plugin isn't necessary in VS2015.

https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708

One-Time

Step 2: Install node, npm and gulp globally

  • Download node.js and it install it as an administrator
    https://nodejs.org/download/
  • Open a new administrator command prompt and run:


     
  • To verify things are installed correctly, you can run:
npm install -g gulp
node -v
npm -v
gulp -v

One-Time

Anything go wrong?

If node, npm or gulp aren't accessible, try adding these to your path:

C:\Program Files\nodejs

C:\Users\<UserName>\AppData\Roaming\npm

Step 3: Setup your project

Project Specific

  • Add package.json
  • Run npm install
    (not needed on VS2015)
  • Add gulpfile.js
  • Add some tasks
  • Bind the task to project open
  • Profit!!!

LetsTalkJS2.sln

Thanks for your time.

Made with Slides.com