14
Building modern SharePoint apps (AngularJS, npm, bower, grunt, VS2015) by SERGEI SERGEEV, SHAREPOINT DEVELOPER

Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

Embed Size (px)

Citation preview

Page 1: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

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

by SERGEI SERGEEV, SHAREPOINT DEVELOPER

Page 2: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

AgendaSPAs issues

Tooling overview

DEMO

Page 3: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)
Page 4: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

AngularJS alternatives

Page 5: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

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

Page 6: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

Package managers

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

- package.json

- bower.json

Page 7: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

Web Essentials

Page 8: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

GRUNT:The JavaScript Task Runner

Page 9: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

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

Page 11: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

DEMOVS2013 vs VS2015

Bower

NPM

GRUNT

Source maps

Custom tasks

Page 12: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

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!

Page 13: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

Question?

Page 14: Building modern share point apps (angularjs, npm, bower, grunt, VS2015)

Thanks!