3rd Party JavaScript LibrariesYou Need to Know

Download Report

Transcript 3rd Party JavaScript LibrariesYou Need to Know 

[email protected]
@ScotHillier
App Parts
Pages
Web Parts
SharePoint-Hosted Apps
Workflows
Libraries
Provider-Hosted Apps























 http://datajs.codeplex.com




"../_api/web/lists/getByTitle('Contacts')/itemCount"
"GET"
"accept"
function
"application/json;odata=verbose"
var
"contacts"
"../_api/web/lists/getByTitle('Contacts')/items"
"?$select=Id,FullName,FirstName,Title,WorkPhone,Email"
"&$orderby=Title,FirstName"



 http://breezejs.com/







//initialize adapter
"OData"
("/odata/"
//create query
"Contacts"
"LastName"
//execute query
//success
//error
"startsWith"
"C"



//create metadata store
var
new
//Define entities
'Customer'
'Customers'
false











 http://knockoutjs.com/




"resultsTable" data-bind "foreach: get_contacts()"
data-bind "text: get_lname()"
data-bind "text: get_fname()"
data-bind "text: get_phone()"
function
var
ko.observableArray()
function
function
function
//update observable array
function



 http://angularjs.org/
 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js







Module
Routes
View
Directives
$scope
Controller
Factory




 data-ng-app
 data-ng-controller
 data-ng-click
Initializes the app. Can be
anonymous or named.
<!DOCTYPE html>
Creates a property on the
<html data-ng-app>
ViewModel
<head></head>
<body>
<input type="text" data-ng-model="displayName"/>
<div data-ng-click="update" ng-controller="myCtrl">
</div>
</body>
</html>
References a
controller method to
call on a click event
References a controller
named “myCtrl”, which
creates a new ViewModel.
• Binds ViewModels to HTML elements
• Uses {{…}} syntax
• References a property of a ViewModel
• Supports two-way binding
<div ng-app="App">
<div>
<input type="text" data-ng-model="firstName"/>
<div>{{firstName}}</div>
</div>
</div>
This example will display
whatever the user types

//module
var myapp = angular.module("MyApp", []);
<!-- html -->
<div data-ng-app = "MyApp">
Reference dependent modules
• Build up the $scope (a.k.a, View Model)
//controller
myapp.controller("welcomeCtrl", ["$scope",
function welcomeCtrl($scope) {
//model
$scope.welcomeMessage = "Hi";
}
);
<!-- html -->
<div data-ng-controller="welcomeCtrl">
• Bind the $scope to the HTML elements
<div ng-app="App">
<div ng-controller="welcomeCtrl">
<h3>{{welcomeMessage}}</h3>
</div>
</div>



 http://www.lesscss.org/










 http://getbootstrap.com/



















<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
//media query with JavaScript
var mq = window.matchMedia("(max-width:600px)");
mq.addListener(function () {
//do something;
});
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>












 http://curah.microsoft.com/56000/sharepoint-conference-2014-spc413-resources



 http://curah.microsoft.com/56018/sharepoint-conference-2014-spc400-resources



 http://curah.microsoft.com/56111/sharepoint-conference-2014-spc400-resources
Sponsored by