KnockoutJS, TypeScript & Gulp in a combination withSharePoint 2016 andSharePoint Online

Gašper RupnikKompas Xnet d.o.o.

Mainly SharePoint developer

Basically develop all that can be programmable

Titles:• MS

• MCPS

• MCSD: SharePoint Applications, App Builder

• MCT

2

Environment

Visual Studio 2015

Visual Studio Code

KnockoutJS

TypeScript

Node.js

Gulp

3

Visual Studio 2015

Integrated development environment (IDE)

Different projects templates

Drag & drop UI, Code Editor

Debugging, deployment

SP Projects templates:• Empty project• Web parts• Etc.

4

Visual Studio Code

New, redefined code editor

Free, open source, runs everywhere

No projects templates

No drag & drop visual UI

Just code editor

Perfect for client-side technologies (HTML/JS/CSS)

5

KnockoutJS

JavaScript library

Create responsive display and editor UI

Clean data model

Connect parts of UI to data model

Update parts of UI depend on data model changes

6

TypeScript

Typed superset of JavaScript

Compiles to plan JavaScript

Independent of:• Browser

• Host

• OS

Open Source

7

Node.js

Runtime environment for developing JS applications

Rich library of various JavaScript modules

Node Package Manager (NPM)

8

Gulp

Task runner

Example:• Concat()

• TypeScript()

• Uglify()

• SPSave() *

• Watch()

9

Demo application - description

Get best place for next SharePoint Days conference

Key: average distance for current attendees

10

Demo application - structure

Lists:• Attendees

• Planned Cities

Pages:• Default.aspx

Client-side script

11

Demo 1Initial project

Demo application – 1. stage update

Read data from „Attendees“ list

Calculate distance with Google Maps API

Write data to „Planned Cities“ list

13

Demo application – 1. stage update

Read data from „Attendees“ list & Write data to „Planned Cities“ list• SPServices

14

Demo application – 1. stage update

Calculate distance with Google Maps API• Get API key

(https://developers.google.com/maps/documentation/javascript/get-api-key)

• Include Google Maps API Scripts

15

Demo 21. stage update

Demo application – 2. stage update

Show calculated routes from Google Maps

17

Demo 32. stage update

Questions?