1. SharePoint Bruger Gruppe (SPBG) SharePoint Framework Introduction
SharePoint Bruger Gruppe (SPBG) SharePoint Framework Introduction

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

3. 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.

4. 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.

7. 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

8. 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

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

10. ”Old” toolbox
SharePoint
Visual Studio

11. ”Old” toolbox

12. New Toolbox

13. 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

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

15. 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
Install Command line tools (and generators) globally –g
Install most things locally (node-modules) package.json

16. 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>”

17. 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')); });

18. 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

19. SharePoint Framework http://dev.office.com/sharepoint
Install node.js
Upgrade npm (if < 3.x)
Install using:
npm i –g gulp-cli
Create folder
Run:

20. Let’s get started

21. ES2015
Modules
Fat Arrow Functions
Template literals
Classes
Promises

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

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

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

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

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

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

28. Finish demo

29. My take on SPFx

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

31. 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