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
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
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
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
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
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
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
