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
MCT, MVP, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, MSc, MInstE etc.
– Flow Simulation Ltd. – www.SPDoctor.net – [email protected] Email: [email protected] Blog: www.SPDoctor.com – @SPDoctor Twitter: @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” App MSDN 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.js JavaScript 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 Gulp Like “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… • Streaming model, a bit like Unix pipes
var gulp = require('gulp.js'); • Gulp tasks for SASS, gulp.task('taskname', function() { TypeScript, etc. etc. // do Stuff here • 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 Suggested Dependencies (package.json)
"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" }
Dan Wahlin gulpfile.js
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']); Git (and GitHub) Distributed Source Control with Git
• No real “master” or server • Command-line • GUI tools available Installing Git • Install from git-scm.com GitHub Visual Studio Code Faster, 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() { mynamespace.mymodule = function() { ..do stuff var privateValue; }; var doSomething: function() { ..do stuff }; }; return { doStuff: doSomething } }(); TypeScript
• 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 to UI Fabric JS:
Decorate elements with UI Fabric classes: http://dev.office.com/fabric Office UI Fabric ReactJS Components
• 30 React components, ready to use • Used by Microsoft to build Office and SharePoint • Angular? See ngOfficeUIFabric
Breadcrumb Dropdown Persona Button Facepile Pickers Callout GroupedList PeoplePicker Checkbox Image Pivot ChoiceGroup Label ProgressIndicator ColorPicker Layer SearchBox CommandBar Link Slider ContextualMenu List Spinner DatePicker MessageBar TextField DetailsList Nav Toggle Dialog Overlay DocumentCard Panel Looking at Office UI Fabric Office Dev PnP
Sharing is Caring… Looking at OfficeDev PnP JS-Core SPFx The 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:
• 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 Bingle Thank you!