knockoutjs, typescript & gulp in a combination …...knockoutjs, typescript & gulp in a...
TRANSCRIPT
![Page 1: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/1.jpg)
KnockoutJS, TypeScript & Gulp in a combination withSharePoint 2016 andSharePoint Online
![Page 2: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/2.jpg)
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
![Page 3: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/3.jpg)
Environment
Visual Studio 2015
Visual Studio Code
KnockoutJS
TypeScript
Node.js
Gulp
3
![Page 4: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/4.jpg)
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
![Page 5: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/5.jpg)
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
![Page 6: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/6.jpg)
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
![Page 7: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/7.jpg)
TypeScript
Typed superset of JavaScript
Compiles to plan JavaScript
Independent of:• Browser
• Host
• OS
Open Source
7
![Page 8: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/8.jpg)
Node.js
Runtime environment for developing JS applications
Rich library of various JavaScript modules
Node Package Manager (NPM)
8
![Page 9: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/9.jpg)
Gulp
Task runner
Example:• Concat()
• TypeScript()
• Uglify()
• SPSave() *
• Watch()
9
![Page 10: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/10.jpg)
Demo application - description
Get best place for next SharePoint Days conference
Key: average distance for current attendees
10
![Page 11: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/11.jpg)
Demo application - structure
Lists:• Attendees
• Planned Cities
Pages:• Default.aspx
Client-side script
11
![Page 12: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/12.jpg)
Demo 1Initial project
![Page 13: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/13.jpg)
Demo application – 1. stage update
Read data from „Attendees“ list
Calculate distance with Google Maps API
Write data to „Planned Cities“ list
13
![Page 14: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/14.jpg)
Demo application – 1. stage update
Read data from „Attendees“ list & Write data to „Planned Cities“ list• SPServices
14
![Page 15: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/15.jpg)
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
![Page 16: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/16.jpg)
Demo 21. stage update
![Page 17: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/17.jpg)
Demo application – 2. stage update
Show calculated routes from Google Maps
17
![Page 18: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/18.jpg)
Demo 32. stage update
![Page 19: KnockoutJS, TypeScript & Gulp in a combination …...KnockoutJS, TypeScript & Gulp in a combination with SharePoint 2016 and SharePoint Online Author Gašper Rupnik Created Date 11/3/2016](https://reader036.vdocuments.site/reader036/viewer/2022062523/5f09bc427e708231d42844b3/html5/thumbnails/19.jpg)
Questions?