SharePoint Bruger Gruppe (SPBG) SharePoint Framework Introduction http://www.meetup.com/Danish-SharePoint-User-Group-SPBG/ SharePoint Bruger Gruppe (SPBG) SharePoint Framework Introduction

Agenda What is SharePoint Framework Background Underlying technology Demo My take on SPFx

Disclaimer The SharePoint Framework is currently in preview and is subject to change. SharePoint Framework client-side web parts are not currently supported for use in production environments.

What is SharePoint Framework The SharePoint Framework (SPFx) is a page and web part model that are responsive and mobile-ready from day one. The SharePoint Framework works for SharePoint on-premises and SharePoint Online.

WhaT is SharePoint Framework Enhancing the out of the box experience Branding custom portals Building custom Intranet Portals Building custom Web Parts Building vertical focused applications Integrating with external systems

What is SharePoint Framework Tooling (lots of it) Build Workbench local Workbench server JavaScript libraries New application package format New Page type New Web Part

Background Release Framework 2001, 2003 None 2007 Farm Solutions 2010 Sandboxed Solutions 2013 - Apps è Add ins ”2016” SharePoint Framework

”Old” toolbox SharePoint Visual Studio

”Old” toolbox

New Toolbox

New Toolbox SharePoint Visual Studio SharePoint Framework Node.js Npm Gulp Yeoman JavaScript (ES2015) TypeScript SystemJS WebPack Karma Mocha Chai Sinon.js PhantomJS CasperJS Knockout React Angular

Node.js Install from https://nodejs.org JavaScript runtime build on Chrome V8 Use version 4.x or 6.x

Npm – node package manager Package manage a ’la NuGet Installed as part of node.js Check version: npm –v If less that 3.x upgrade: npm install –g npm Installs packages from https://www.npmjs.com/ Install Command line tools (and generators) globally –g Install most things locally (node-modules) package.json

Gulp “the streaming build system” JS equivalence to MSBuild Install CLI using npm “npm install –g gulp-cli” Install locally (done by yeoman in SPFx) Configure using gulpfile.js Run build tasks “gulp <task>” http://gulpjs.com/plugins/

gulp var gulp=require(“gulp”), plugin=require(“gulp-plugin”); … gulp.task(“task”, [“othertask”], function () { return gulp.src('./src/**/*.ts') .pipe(plugin()) .pipe(plugin2()) .pipe(gulp.dest('./dist/js')); });

yeoman “The web’s scaffolding tool for modern apps” A ’la “File | New Project” Install using npm “npm install –g yo” Install generator using npm Make directory Run ”yo <generator>” Tool part of SharePoint Framework is a yeoman generator ”@microsoft/generator-sharepoint”

SharePoint Framework http://dev.office.com/sharepoint https://github.com/SharePoint/sp-dev-docs/wiki Install node.js Upgrade npm (if < 3.x) Install using: npm i –g gulp-cli yo @microsoft/generator-sharepoint Create folder Run: yo @microsoft/sharepoint

Let’s get started

ES2015 Modules Fat Arrow Functions Template literals Classes Promises

ES2015 export function x() {} export function y() {} import {x,y} from “./test”; x(); import * as other from “./test”; other.x();

ES2015 function x(){…} let x = ()=>{…}; let html=`<div class=“myClass”> this is some text ${someVar} </div>`;

ES2015 export class MyClass extends BaseClass { constructor(x, y) { super(x,y); } x; static y; funcX() {} static funcY() {}

Callback hell function getWeb(cb, errorCb) {…} getWeb((web) => { getList(web,(list)=>{ getItem(list, (item) => { … });

Promises return getWeb() .then((web) => getList(web)) .then((list) => getItem(list)) .then((item) => {…}) .catch(() => {…});

TypeScript Types Interfaces Enums Generics Access modifiers (public is default)

Finish demo

My take on SPFx

Background Release Framework +/ - MS 2001, None + 2003 2007 Farm Solutions + 2010 Sandboxed Solutions - 2013 Apps è Add - ins (+) ”2016” SharePoint Framework ?

My take on SPFx Good Tooling Modern Localization Responsive Efficient MS Use Bad Too much tooling Modern Simple Localization Lots missing Security/Control Newbie focus Way too late