4th of March 2017

@MS HQ Munich

Git,

Gulp, Grunt,

Node and Code:Making Sense of the

Modern Development Toolchain

Bill Ayers #SPSMUC05

Bill Ayers

MCM/MCSM Charter SharePoint

Email: BillA@flosim.com

Blog: www.SPDoctor.com

Twitter: @SPDoctor

MCT, MVP, MCTS, MCITP, MCSD, MCAD, MCSA,

MCDBA, MSc, MInstE etc.

– Flow Simulation Ltd.

– www.SPDoctor.net

– BillA@flosim.com

– @SPDoctor

– Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development

Agenda

• What is 'modern’?

• Node

• Grunt and Gulp

• Git

• Code

• Yeoman

• JavaScript Revisited

• Angular and React

• Office UI Fabric

• Conclusions

What is “modern”?

root:>

The Rise of Client-side Technologies• JavaScript

• jQuery

• AJAX

• HTML5

• CSS3

• JavaScript Libraries: React, Angular, etc.

• Node.js

• REST/OData/OAuth

Motivation

• End User Expectations– Rich behaviour in web applications

– “Web 2.0” experience

– Modern Apps

– Mobile (any device, anywhere)

• Microsoft– Custom code is source of many support issues

– Custom code prevents migration to new versions

– Custom code not supported on Office 365

– Make accessible to web developers…

Opening up to web developers

“Use your existing skills to build apps and

take advantage of familiar tools, languages,

and hosting services. You can use any

language, such as HTML, JavaScript, PHP,

or .NET, and you can use your favorite web

development tools”

MSDN

App

Introducing the SharePoint Framework (SPFx)

• Model for building client-side pages and web parts

• Announced May 4th 2016, now GA!

• Authoring canvas, no iFrames

• Command-line-driven open-source toolchain

• Used by SharePoint product team

• Works in “modern” and “classic” pages

• Your choice of client-side framework; Angular, React,

Knockout, Vanilla.JS ;-)

Wait, did you say “Command-

line-driven open-source

toolchain” ?

Logo Quiz

Node.jsJavaScript on the server????

Node.js

• Server-side JavaScript

• Uses Google’s V8 engine

• Main use case is as a web server

• Secondary use as part of development environment

• Modular packages

• Go to nodejs.org and follow instructions (2 mins)

• Verify installed by typing node --version at

command prompt

NPM

• Similar to NuGet

• Manages dependencies

• npm install

• NPM install is driven by package.json

• For Windows, make sure you have version 3

• -g option to install globally

• npm install packagename

• npm init in new directory creates package.json

Node

Grunt and GulpLike “make” or “nant”, but cooler…

Grunt: JavaScript Build Engine

• like a traditional make command (e.g. Unix make or

msbuild)

• makefile replaced by JSON

• install the command line tool…

• npm install -g grunt-cli

Gulp: JavaScript Build Engine

• Build tasks defined in JavaScript

• Gulpfile.js runs build process

• In gulpfile.js, define tasks…

var gulp = require('gulp.js');gulp.task('taskname', function() {// do Stuff here

});

• Streaming model, a bit like Unix pipes

• Gulp tasks for SASS, TypeScript, etc. etc.

• gulp.watch('*.scss', ['task1','task2']);

Installing Gulp

• npm install –g gulp

• Create a directory

• npm install gulp --save-dev

• Create gulpfile.js

• gulp --help

• gulp --tasks

"devDependencies": { "gulp": "^3.8.11", "gulp-debug": "^2.0.1", "gulp-inject": "^1.2.0", "gulp-sourcemaps": "^1.5.1", "gulp-tslint": "^1.4.4", "gulp-typescript": "^2.5.0", "gulp-rimraf": "^0.1.1"

}

Suggested Dependencies (package.json)

Dan Wahlin

var gulp = require('gulp');var pug = require('gulp-pug');var less = require('gulp-less');var minifyCSS = require('gulp-csso');

gulp.task('html', function(){return gulp.src('client/templates/*.pug').pipe(pug()).pipe(gulp.dest('build/html'))

});

gulp.task('css', function(){return gulp.src('client/templates/*.less').pipe(less()).pipe(minifyCSS()).pipe(gulp.dest('build/css'))

});

gulp.task('default', [ 'html', 'css' ]);

gulp.watch('*.scss', ['task1','task2']);

gulpfile.js

Git(and GitHub)

Distributed Source Control with Git

• No real “master” or server

• Command-line

• GUI tools available

• Install from git-scm.com

Installing Git

GitHub

Visual Studio CodeFaster, lighter, leaner, meaner…

Visual Studio• Probably the best development environment on the planet

• With awesome power comes…. A lot of waiting! (and that’s with an SSD)

• Visual Studio Code is a lightweight editor, but it does more than you might think…

*also available

in dark

Installing VS Code

• To install Visual Studio Code, go to

http://code.visualstudio.com/, download and install.

• only takes a few minutes

• knows about package managers

• add-ons for things like Yeoman

Visual Studio Code

What’s missing?

• …file->new->project

Yeoman

It’s just “File New Project”…

Scaffolding

• A bit like the File->New->Project

• A lot more people writing Yeoman generators

• npm install –g yeoman

• npm install –g generator-xyz

• yo (list of generators and commands)

• yo office, yo angular, etc. etc.

JavaScript Revisited

It’s not what you think…

Just the Good Parts, Please!

• Not like C, C++, C#, Java

• Prototypal inheritance

• TypeScript

• ES2015 aka ES6

• A beautifully designed functional language,

with a few very serious mistakes

Encapsulation patterns

mynamespace = mynamespace || {};

mynamespace.foo = {name: “name”,value: “bar”,doSomething: function() {

..do stuff};

};

mynamespace.mymodule = function() {var privateValue;var doSomething: function() {..do stuff

};return {doStuff: doSomething

}}();

TypeScript

• Features of next version of JavaScript

• Compiles to JavaScript

• Features of next version of JavaScript

• Compiles to JavaScript

• Strong typing, classes

• Original design goal was to make JavaScript easier for

C# developers

• Makes it easier to write production quality JavaScript

• Good support in VS Code

Angular and React

Questions

• What are my existing skills - can I re-use?

• What is my existing code - can I re-use?

• What platforms do I need to support?

• What level of legacy platform version needed? (caniuse.com)

• Who is backing different frameworks?

• How much support can you expect?

• What does it give me?

• How opinionated is it?

Angular• Backed by Google

• Very popular because it gives a complete SPA

framework

• Very opinionated, but in some ways this can be an

advantage

• Angular 2 follows more of a web component model

at the cost of backward compatibility

• Learn more: go to angularjs.org

ReactJS

• Backed by Facebook and Instagram

• Virtual DOM page rendering model

• Very fast

• Provides the view engine only

• JSX format takes some getting used to

• TypeScript Compiler has support for JSX

• ReactJS tutorial: https://zapier.com/engineering/react-

js-tutorial-guide-gotchas/

Vanilla.js – the latest trending framework?

Looking at ReactJS

Office UI Fabric

A responsive framework, kind of…

Office UI Fabric• Intended for developing Office Add-ins

• Consistent look-and-feel with Office

• Sort of a responsive framework

• About 100k, 200k with components

• Not originally aligned with “classic” SharePoint CSS, but SharePoint is

changing with “modern” sites and SPFx

• Available as raw CSS or versions for Angular and React

• Dev.office.com/fabric

Office UI Fabric• Design elements to give add-ins the same look

and feel as the rest of the Office suite

• Consistent typography, icons and behaviour

Link to UI Fabric Stylesheets:<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.components.min.css">

Decorate elements with UI Fabric classes:<button class="ms-Button" id="get-data-from-selection"> <span class="ms-Button-icon"><em class="ms-Icon ms-Icon--plus"></em></span> <span class="ms-Button-label">Get Data from selection</span> <span class="ms-Button-description">Get Data from the document selection</span> </button>

http://dev.office.com/fabric

Link to UI Fabric JS:<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

Office UI Fabric ReactJS Components

• 30 React components, ready to use

• Used by Microsoft to build Office and SharePoint

• Angular? See ngOfficeUIFabric

<fabric.Button onClick={() => this.getData() } className="ms-Button--primary">Refresh List</fabric.Button>

Breadcrumb

Button

Callout

Checkbox

ChoiceGroup

ColorPicker

CommandBar

ContextualMenu

DatePicker

DetailsList

Dialog

DocumentCard

Dropdown

Facepile

GroupedList

Image

Label

Layer

Link

List

MessageBar

Nav

Overlay

Panel

Persona

Pickers

PeoplePicker

Pivot

ProgressIndicator

SearchBox

Slider

Spinner

TextField

Toggle

Looking at Office UI Fabric

Office Dev PnP

Sharing is Caring…

Looking at OfficeDev PnP JS-Core

SPFxThe SharePoint Framework

Introducing the SharePoint Framework (SPFx)

Building an SPFx WebPart

Health Alert: Chasing Unicorns

can seriously damage your wealth

You can waste a huge amount of

time and resources trying to come

up with a universal development

solution

#UnicornsWithSmartphones

Conclusions

• We can re-use (or re-learn) our JavaScript skills pretty much everywhere

• New Microsoft loves open-source toolsets

• It’s not Microsoft’s job to tell you how to code, or what tools to use, but it’s interesting to see what tools THEY are using

• You don’t HAVE to use VS Code, etc. – you can continue to use Visual Studio, Add-ins, FTC on-prem, etc…

• Changing fast – need to be agile

Resources:

Bingle

• http://dev.office.com/SharePoint

• http://dev.office.com/fabric

• https://facebook.github.io/react/

• http://github.com/officedev/trainingcontent

• https://dev.office.com/training

• https://github.com/SharePoint/PnP-JS-Core

• http://github.com/SPDoctor/SPFXShoppingList

Thank you!