Date post: | 14-Dec-2015 |
Category: |
Documents |
Upload: | josephine-ifill |
View: | 215 times |
Download: | 0 times |
Complex Problem Solving with the New HTML5 APIsScot HillierMVPScot Hillier Technical Solutions, LLC
SPC413
From Bricks to Houses
Web Parts
Workflows
Pages
Libraries
SharePoint 2010 SharePoint 2013
App Parts
SharePoint-Hosted Apps
Provider-Hosted Apps
Agenda Responsive IFrames
postMessage
Single-Page App AJAX Navigation history object
App Part Communication Server-Sent Events Web Sockets
Improved Performance Web Workers
SharePoint Context Web Storage Geolocation
New HTML5 Semantic Tags
<header> <nav> <section> <article> <figure> <dialog> <aside> <hgroup> <time> <footer>
<header></header>
<nav></nav>
<footer></footer>
<article> <section> <h2></h2> <p></p> <p></p> </section><section> <h3></h3> <p></p></section></article>
<aside> <section> </section></aside>
New Functional Elements New Elements Provide Functional
Behavior <canvas> <svg> <audio> <video> <source> <command> <datalist> <embed>
CSS3 Changes CSS3 Adds Many New CSS Properties
Borders can have rounded corners Element can have multiple backgrounds with greater placement precision Colors can be expressed with gradients and opacity Text can have drop shadows and more control over text wrap
Partial adoption of new properties has been going on for years Some browsers support new properties using proprietary prefixes -ms- Internet Explorer (Trident ) -webkit- Google, Chrome & Safari (Gecko) -moz- Firefox (Mozilla) -o- Opera (Presto)
APIs Media Drag and Drop Offline Applications Mime Type and Protocol Handler Registration Canvas Messaging History Server-Sent Events Web Sockets Web Workers Web Storage
Overview Challenge
App Parts appear in IFRAMEs SharePoint controls the IFRAME size App Part may require different area than allotted App Part should respond to different frame sizes
Solution Media Queries with window.matchMedia postMessage to request larger IFRAME
Allows for styling based on device properties width, height device-width, device height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
Media Queries
Using Media Queries<!-- 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 (orientation: portrait) { .facet_sidebar { display: none; }}</style>
//media query with JavaScriptvar mq = window.matchMedia("(device-width:600px)");mq.addListener(function () { //do something;});
postMessage Allows text messages to be sent
between windows Works across domains Message sends additional information
Domain of the window sending the message Full URI of the sending window A reference to the sending window object for two-way
communication
Security Verify domain or URI before accepting Purify the message to avoid script injection
Senders and Receivers//sendervar win = document.getElementById("iframe").contentWindow;win.postMessage("Hello!");
//receiverdocument.addEventListener("message", function(e){ //e.domain, e.uri, e.data, e.source}, false);
//request SharePoint iframe resize for app partwindow.parent.postMessage("<message senderId={senderId}>resize({height},{width})</message>", this.location.hostname);
SharePoint 2013 listens for “resize” message
Overview Challenge
Single-Page Apps (SPA) are trending No postbacks gives great user experience No postbacks makes the browser navigation useless
Solution AJAX Navigation with history object pushState and replaceState to manage history stack Include custom state information window.onpopstate to detect back and forward
Overview Challenge
Web Parts can be “connected” through the UI App Parts do not support connections
Solutions Shared message broker with Server-Sent events Shared message broker with Web Sockets
Server-Sent Events Server can stream (push) messages
and data to JavaScript client WebAPI service utilizes the PushStreamContent class Responds to GET endpoint Opens Stream to clientpublic HttpResponseMessage Get(string appId){
HttpResponseMessage response = Request.CreateResponse(); response.Content = new PushStreamContent((stream, httpContent, context) => { StreamWriter writer = new StreamWriter(stream); writer.WriteLine("data:hello"); writer.WriteLine(); }, "text/event-stream"); return response;}
Server-Sent Events Client creates endpoint using window.EventSource
Check for support if(window.EventSource) Internet Explorer does not support Other major browsers do
if (!!window.EventSource) {
var source = new EventSource('http://dev.wingtip.com/api/chat/');
source.addEventListener('message', function (e) { console.log(e.data); }, false);
} else { // polyfill}
Web Sockets Two-way communication between client
and server Need a WebSocket Server
Roll your own in C# Alchemy http://alchemywebsockets.net/
Client opens connection using window.WebSocket
Web Socketsvar websocket = new WebSocket("ws://myserver");websocket.onopen = function (e) { alert("Connected!");};websocket.onclose = function (e) { alert("Disconnected");};websocket.onmessage = function (e) { alert(e.data);};websocket.onerror = function (e) { alert(e.data);};websocket.send("Hello");
Overview Challenge
JavaScript is historically single-threaded Main thread can be blocked by long-running or intensive
processes
Solution Use Web Workers to spawn new thread
Types Dedicated (Worker object), dedicated to one caller Shared (SharedWorker object), supports multiple callers
Capabilities this and self reference the Web Worker itself importScripts allows referencing additional libraries
Restrictions All communication is via postMessage Cannot access the DOM
Web Workers
Web Workers//clientvar worker = new Worker('task.js');worker.addEventListener('message', function(e) { //e.data is the response message}, false);worker.postMessage();
//workerself.addEventListener('message', function(e) { //do something and call back self.postMessage('response');}, false);
Overview Challenge
SharePoint Context must be maintained across pages
Solution Cache context with Web Storage Add useful information with Geolocation
Web Storage
Types Local, persistent data through localStorage Session, session-based storage through sessionStorage
Store key-value pairs as strings Keys must be unique Serialize/deserialize objects with JSON stringify/parse
Can handle events for data changes
Web Storage//savelocalStorage.setItem("key", "value");sessionStorage.setItem("myobj", JSON.stringify(object));
//retrievevar string = localStorage.getItem("key");var object = JSON.parse(sessionStorage.getItem("myobj"));
//storage eventwindow.onstorage = function (e) { //e.key //e.oldValue //e.newValue //e.storageArea}
Summary Responsive IFrames
postMessage
Single-Page App AJAX Navigation history object
App Part Communication Server-Sent Events Web Sockets
Improved Performance Web Workers
SharePoint Context Web Storage Geolocation
SPC 413, Complex Problem Solving with HTML5 Tuesday, March 4, 2014, 10:45 AM-12:00 PM Palazzo Ballroom A-H http://curah.microsoft.com/56000/sharepoint-conference-2014-spc413-r
esources
SPC 400, 3rd-Party JS Libraries You Need to Know Tuesday, March 4, 2014, 3:15 PM-4:30 PM Palazzo Ballroom K,L http://
curah.microsoft.com/56018/sharepoint-conference-2014-spc400-resources
SPC 404, Build your own REST service with WebAPI 2 Wednesday, March 5, 2014, 10:45 AM-12:00 PM Palazzo Ballroom A-H http://
curah.microsoft.com/56111/sharepoint-conference-2014-spc400-resources
Sessions and Resources
MySPCSponsored by
connect. reimagine. transform.
Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.