1. Customizing SharePoint with Knockout and Typescript
Attention: Johnny Lopez or Naimish Pandya
750 Town and Country Blvd
Suite 1000
Houston, TX 77024
Joe McShea

2. Welcome to SharePoint Saturday Houston
Thank you for being a part of the 8th Annual SharePoint Saturday for the greater Houston area!
Please turn off all electronic devices or set them to vibrate.
If you must take a phone call, please do so in the hall so as not to disturb others.
Special thanks to our Platinum Sponsors:

3. Thanks to all our Sponsors!
Thank you to our sponsors
Thank you to our sponsors
Thank you to our sponsors
Thanks to all our Sponsors!
Thanks to all our Sponsors!

4. Information
Speaker presentation slides should be available from the SPSHOU website within a week or so
The Houston SharePoint User Group will be having it’s next meeting Wednesday May 18th. Please join us at

5. Who am I? Joe McShea IntelliPoint Solutions LLC
Owner/Software Architect
Over 20 years as a software developer/architect
Focused on the Microsoft stack and SharePoint/Office 365 since 2007
Author of SPEasyForms, the free/open source for SharePoint 2010, 2013, 2016, and Online available for download on CodePlex
Contact
@Joe_McShea (twitter)
(blog)

6. Agenda Talk a little about Typescript Talk a little about Knockout
Demo using them in SharePoint

7. What is Typescript? Strongly typed JavaScript
Adds Classes, Interfaces, Modules
Superset of JavaScript

8. Typescript is a Superset of JavaScript

9. Why Typescript? Easier transition for server-side developers
Early detection of errors
Better tool support
Because Microsoft says so

10. Modules
import * as ko from "knockout"; export const numberRegexp = /^[0-9]+$/; // exports from external modules export * from "./StringValidator"; export * from "./LettersOnlyValidator"; export * from "./ZipCodeValidator";

11. Classes and Interfaces

12. Arrow Functions

13. Don’t use var

14. Use let instead

15. What is Knockout? JavaScript library to simplify CRUD applications
Eases the creation of rich and responsive web sites
Provides 2 way databinding between the data and it’s presentation
Based on the Model View ViewModel (MVVM) pattern

16. Why Knockout? Um…really?
Most SharePoint Customizations are CRUD applications
CRUD is mostly boiler plate HTML and JavaScript
Knockout helps separate concerns and minimizes boiler plate code and markup

17. So what can we bind to in HTML?
POJO
Observable
Observable Array
Event

18. POJO

19. POJO Result

20. Observable

21. Observable Result

22. Observable Array

23. Observable Array

24. Observable Array Result

25. Event

26. Event Result

27. Not Covered
Computed Observables
Custom Bindings

28. Demo…

29. References
Typescript quick Start:
Knockout documentation:
Widget-Wrangler by Bob German and Julie Turner:
Source code for tkoWebPart demo: