Welcome

Enhancing SharePoint Experience using JavaScript

Pushkar Chivate

My BackgroundSenior SharePoint and Web developer /

Application Architect

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

Why use JavaScript?Traditional SharePoint development

On premises developmentServer side code

App developmentIn the cloudClient side code

JavaScript Best Practices

Strict modeEquality operatorsEncapsulationPromises

Always use strict modeDeclared 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

Always use ===

== Vs ===

!= Vs !==

0 == '0'; //true0 === '0'; //falsefalse == '0'; //truefalse === '0'; //false

JavaScript scopes

Scope is at function levelvar is “private”this. is “public”

No block level scope

Encapsulate your code

Singleton pattern

Module pattern

Prototype pattern

Using the Singleton pattern

var department = {

name: "Sales", getDepartmentInfo: function () {

alert("Department name is '" + this.name + "'"); }

};

department.getDepartmentInfo();

Using the Module patternvar 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

Using the Prototype patternvar 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

Promises

Also called “Deferreds”

Simplify asynchronous operations

jQuery Deferred

Demo

JavaScript Libraries Utility Libraries

jQuery SPServices

Data Libraries DataJS

Application Framework Library AngularJS

UI Library DataTables.js KendoUI

Deploying JavaScript FilesContent Delivery Networks (CDNs)

Use httpsMonkey-Patching

Under Layouts folder Farm solutions

Virtual File Systems Document Libraries Sandboxed solutions, Apps

Using the SharePoint RESTful endpoint

_api is alias for _vti_bin/client.svc

OData

Custom Client Code

JavaScript Library

Server

Client

.Net CLR

Overview of SharePoint & Office 365 JavaScript OptionsContent Editor Web PartScript Editor Web PartSharePoint Designer<ScriptLink> or <Script> Server Side Code Injection

RegisterClientScriptBlock vs RegisterStartupScriptWeb Parts/Delegate Controls/Application Pages

CSS JavaScript Injection

Advantages of ScriptLink over Script element

Dependency loadingLocalized version of your libraryControl over when the file gets addedDoesn’t load the file multiple times if it’s already

loaded once, this improves performanceThe 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

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

Angular FrameworkModule

Routes

View Controller

Directives Factory

$scope

Modules

A container for the components of the app//modulevar myapp = angular.module(“myApp", []);

<!-- html --><div data-ng-app = "MyApp"> Reference dependent

modules

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

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

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

Controllers

//controllermyapp.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)

View Binding

<div ng-app=“myApp"> <div ng-controller=“myCtrl"> <h3>{{welcomeMessage}}</h3> </div></div>

• Bind the $scope to the HTML elements

AngularJSDemo

Angular-1 View Synchronization

•Declarative• Separation between template and code• Two-way data binding• Stateful•Nested Scopes (Controller As)•Unidirectional flow

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

JavaScript Library: DataTablesDataTables (http://www.datatables.net/)

JavaScript LibrariesKendoUI (http://www.telerik.com/kendo-ui)

Moment.js (http://momentjs.com/)

Moment.jsDate arithmetic

moment().add(‘day’, 5);

Date formatting

DataJSDescription

OData client for JavaScriptLocation

http://datajs.codeplex.comFeatures

Cross-browser supportData cachingBatch operations

Retrieving ODataOData.request( { requestUri: "../_api/web/lists/getByTitle(‘SoftwareOrder')/itemCount", method: "GET", headers: { "accept": "application/json;odata=verbose", } }, function (data) { ...} );

Caching Datavar cache = datajs.createDataCache({ name: "contacts", source: "../_api/web/lists/getByTitle(‘SoftwareOrder')/items" + "?$select=Id,Title,SoftwareCategory,UserName" + "&$orderby=Title", pageSize: 1000 });

cache.readRange(startIndex, count).then(function(data){...});

cache.clear().then(function(data){...});

JavaScript Library: SPServicesSPServices (

http://spservices.codeplex.com/)

JavaScript Snippet: JavaScript on all Pages

Registering JavaScript on All Pages in Office 365

RecapWe Looked at…

- JavaScript best practices

- JavaScript librariesUtility LibrariesData access LibrariesApplication Development FrameworksLibraries that Enhance User Interface

- Developing application for Office 365 SharePoint and use of JavaScript libraries

References

- Codeplex

- Github OfficeDev/Pnp

- Youtube, MSDN and other sites on the web

Thank you.