Building modern SharePoint apps (AngularJS, npm, bower, grunt, VS2015)

by SERGEI SERGEEV, SHAREPOINT DEVELOPER

AgendaSPAs issues

Tooling overview

DEMO

AngularJS alternatives

Possible issues with SPAs (and not only)Transpiling code, preprocessing (TypeScript, CoffeeScript, …; LESS, Sass, …)

“Live” updates

Bundling and minification (w\out source maps)

Dependencies

Code style analysis

Code checker

JS Unit testing

…Others

Package managers

- VS2013 - packages.config, VS2015 - project.json

- package.json

- bower.json

Web Essentials

GRUNT:The JavaScript Task Runner

GRUNT: The JavaScript Task RunnerAutomation

Pure javascript

gruntfile.js

Multiple configuration (debug, release, dev, prod, etc.)

Multiple plugins

Customizable (you can write your own tasks (plugins))

Cross-platform

GRUNT VS supportVS 2013.3: Task Runner Explorer

Package Intellisense (for bower)

VS 2015: Built-in

DEMOVS2013 vs VS2015

Bower

NPM

GRUNT

Source maps

Custom tasks

Source maps - notesFireFox – mystic issues

Chrome – breakpoints may not hit when break inside results from async request.

Chrome – breakpoint may not hit at all - Compiled script is not shown while source map is being loaded! – try to enable cache.

IE 11 – simply PERFECT!

Question?

Thanks!