Presentation at SharePoint Saturday Atlanta 2015 - annual event

1. Welcome
Enhancing SharePoint
Experience using JavaScript
Pushkar Chivate

2. My Background
 Senior SharePoint and Web developer /
Application Architect

3. Agenda
- JavaScript:
- Why use JavaScript?
- Best Practices
- SharePoint app using some useful JavaScript
libraries
- Utility Libraries
- Data access Libraries
- Application Development Frameworks
- Libraries that Enhance User Interface

4. Why use JavaScript?
 Traditional SharePoint development
 On premises development
 Server side code
 App development
 In the cloud
 Client side code

5. JavaScript Best Practices
 Strict mode
 Equality operators
 Encapsulation
 Promises

6. Always use strict mode
 Declared with "use strict"
 Restrictions
 Cannot use a variable without declaring it
 Cannot write to a read-only property
 Cannot add properties to non-extensible objects
 Cannot illegally delete functions and variables
 Cannot define a property more than once in an object literal
 Cannot use a parameter name more than once in a function
 Cannot use reserved words, eval, or arguments, as names for functions and
variables
 The value of this in a function is no longer the window object
 Cannot declare functions inside of statements
 Cannot change the members of the arguments array

7. Always use ===
== Vs ===
!= Vs !==

8. JavaScript scopes
 Scope is at function level
 var is “private”
 this. is “public”
 No block level scope

9. Encapsulate your code
 Singleton pattern
 Module pattern
 Prototype pattern

10. Using the Singleton pattern
var department = {
name: "Sales",
getDepartmentInfo: function () {
alert("Department name is '" + this.name + "'");
}
};
department.getDepartmentInfo();

11. Using the Module pattern
var Organization = {};
Organization.Module = {};
Organization.Module.Department = function () {
//private members
var name,
setDepartmentInfo = function (n) { this.name = n; },
getDepartmentInfo = function () { alert(this.name); };
//public interface
return {
setDepartmentInfo: setDepartmentInfo,
getDepartmentInfo: getDepartmentInfo
}
}(); // self invoking function
// Advantages: Hides function members, Can use private and public members

12. Using the Prototype pattern
var Organization = {};
Organization.Department = function (n) {
this.name = n
};
Organization.Department.prototype = {
getDepartmentInfo: function () { alert(this.name); }
};
var department = new Organization.Department("Sales");
department.getDepartmentInfo();
// every object in JavaScript has prototype
// use of the keyword new
// useful for creating a lots of instances of one object

13. Promises
 Also called “Deferreds”
 Simplify asynchronous operations

14. jQuery Deferred
Demo

15. JavaScript Libraries
 Utility Libraries
 jQuery
 SPServices
 Data Libraries
 DataJS
 Application Framework Library
 AngularJS
 UI Library
 DataTables.js
 KendoUI

16. Deploying JavaScript Files
 Content Delivery Networks (CDNs)
 Use https
 Monkey-Patching
 Under Layouts folder
 Farm solutions
 Virtual File Systems
 Document Libraries
 Sandboxed solutions, Apps

17. Using the SharePoint RESTful endpoint
_api is alias for _vti_bin/client.svc
Custom Client Code
JavaScript
Library
Server
Client
.Net CLR

18. Overview of SharePoint & Office 365 JavaScript
Options
 Content Editor Web Part
 Script Editor Web Part
 SharePoint Designer
 <ScriptLink> or <Script>
 Server Side Code Injection
 RegisterClientScriptBlock vs RegisterStartupScript
 Web Parts/Delegate Controls/Application Pages
 CSS JavaScript Injection

19. Advantages of ScriptLink over
Script element
 Dependency loading
 Localized version of your library
 Control over when the file gets added
 Doesn’t load the file multiple times if it’s already
loaded once, this improves performance
 The ScriptLink element provides benefit only
when your library files reside in layouts folder, if
you are side loading the script files, you will not
get any real benefit with ScriptLink element

20. Angular.js
 Description
 Implements Model-View-Controller (MVC) for JavaScript
 Location
 http://angularjs.org/
 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js
 NuGet
 Features
 Model-View-Controller
 Data Binding
 Routing
 Directives
 Factories

21. Angular Framework
Module
Routes
View Controller
Directives Factory
$scope

22. Modules
 A container for the components of the app
//module
var myapp = angular.module(“myApp", []);
<!-- html -->
<div data-ng-app = "MyApp">
Reference dependent modules

23. Directives
 Utilizes HTML5 custom data attributes
 Allows for the addition of custom attributes starting with
data-
 Angular uses directives for declarative programming
 Angular directives start with “ng-”
 data-ng-app, defines scope of the framework
 data-ng-controller, invokes a controller
 data-ng-click, handles click event

24. Directives
<!DOCTYPE html>
<html data-ng-app=“myApp”>
<head></head>
<body>
<input type="text" data-ng-model="displayName"/>
<div data-ng-click="update" ng-controller="myCtrl">
</div>
</body>
</html>
Initializes the app. Can be
anonymous or named.
Creates a property on the
ViewModel
References a controller
named “myCtrl”, which
creates a new ViewModel.
References a
controller method to
call on a click event

25. Simple Data Binding
<div ng-app=“myApp">
<div ng-controller="myCtrl">
<input type="text" data-ng-model="firstName"/>
<div>{{firstName}}</div>
</div>
</div>
• Binds ViewModels to HTML elements
• Uses {{…}} syntax
• References a property of a ViewModel
• Supports two-way binding
This example will display
whatever the user types

26. Controllers
//controller
myapp.controller(“myCtrl", ["$scope",
function welcomeCtrl($scope) {
//model
$scope.welcomeMessage = "Hi";
}
);
<!-- html -->
<div data-ng-controller=“myCtrl">
• Build up the $scope (a.k.a, View Model)

27. View Binding
<div ng-app=“myApp">
<div ng-controller=“myCtrl">
<h3>{{welcomeMessage}}</h3>
</div>
</div>
• Bind the $scope to the HTML elements

28. AngularJS
Demo

29. Angular-1 View Synchronization
•Declarative
•Separation between template and code
•Two-way data binding
•Stateful
•Nested Scopes (Controller As)
•Unidirectional flow

30. Angular-2 what’s coming
• Still declarative
• Separation between template and code
• 3 types of directives – components
(directives, controllers), decorators,
templates (transformative, e.g. ng-if)
• Support for unidirectional data flow
• Three models: stateful, reactive, immutable
• Controllers are folded into components

31. JavaScript Library: DataTables
 DataTables (http://www.datatables.net/)

32. JavaScript Libraries
 KendoUI (http://www.telerik.com/kendo-ui)
 Moment.js (http://momentjs.com/)

33. Moment.js
 Date arithmetic
 moment().add(‘day’, 5);
 Date formatting

34. DataJS
 Description
 OData client for JavaScript
 Location
 http://datajs.codeplex.com
 Features
 Cross-browser support
 Data caching
 Batch operations

35. Retrieving OData
"../_api/web/lists/getByTitle(‘SoftwareOrder')/itemCount"
"GET"
"accept" "application/json;odata=verbose"
function

36. Caching Data
var
"contacts"
"../_api/web/lists/getByTitle(‘SoftwareOrder')/items"
"?$select=Id,Title,SoftwareCategory,UserName"
"&$orderby=Title"

37. JavaScript Library: SPServices
 SPServices
(http://spservices.codeplex.com/)

38. JavaScript Snippet: JavaScript on all Pages
 Registering JavaScript on All Pages in
Office 365

39. Recap
We Looked at…
- JavaScript best practices
- JavaScript libraries
Utility Libraries
Data access Libraries
Application Development Frameworks
Libraries that Enhance User Interface
- Developing application for Office 365 SharePoint and use of
JavaScript libraries

40. References
- Codeplex
- Github OfficeDev/Pnp
- Youtube, MSDN and other sites on the web

41. Thank you.