Complex Problem Solving with the New HTML5 APIsScot HillierMVPScot Hillier Technical Solutions, LLC

SPC413

Scot Hillier

scot@scothillier.net@ScotHillier

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

HTML5 Quick Review

A Simple HTML5 PageA new simpler DOCTYPE

A new semantic element

A new functional element

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

Responsive App Parts

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

DEMO

Responsive App Parts

AJAX Navigation

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

DEMO

AJAX Navigation

App Part Communication

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}

DEMO

Connecting App Parts with Server-Sent Events

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");

DEMO

Message Queuing with WebSockets

Multithreading

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

DEMO

Type Ahead

Maintaining SharePointContext

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}

DEMO

Maintaining SharePoint Context

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.