Building High-Performance Cross-Platform Mobile Apps for Office 365 and SharePoint

Roy Sheinfeld, Co-Founder and VP R&D

harmon.ie

@roysheinfeld

www.sharepointeurope.com

Android iOS BlackBerr

yWindows

Phone

Mobile

• Apache Cordova + HTML5

– Sencha Touch

– JQuery Mobile

• Appcelerator

• Qt Mobile

Cross-Platform Frameworks

Picture by breezi.blog

Recommended: Using Sencha Touch as a Strategic Platform

Pros:– End-to-End Development Framework (UI, BL, DA, MVC)

– Out-of-the-Box UI Components

– Cross-platform theming

– Community

Cons:– The framework’s comprehensiveness

Sencha Touch

Performance Challenges

• Native – HTML Integration

• HTML5 Rendering

• Client-Sever Interaction

Native – HTML Integration

• Native uses an embedded browser (e.g. UIWebView)

• Networking and other operations are executed in a the native layer

• Native needs to pass the output to the browser

DEMO

HTML5 Rendering

• Lazy Rendering

• Minimizing Image Elements

• Web Workers

Lazy Rendering

DEMO

• Minimizing the DOM by only rendering what is needed now by the user

• Use a pool of existing <div> elements

• Sencha List: Ext.create('Ext.List', {infinite: true} )

Minimizing Image Elements

Simplify image rendering by unifying complex images.

Example:

<div class="list-item"><div class=“document-icon">

<div class=“pdf-class"><div class="overlay tl-overlay favorite"></div><div class="overlay br-overlay checkout"></div>

</div></div><div class=“document-description">PDF Document</div>

</div>

<div class="pdf-favorite-checkout"><span style="margin-left:50px">PDF Document</span>

</div>

Complex Element Simple Element

DEMO

Web Workers

• JS that runs in the background, independently of the UI JS

• Web Workers utilize multi-core CPUs more effectively

• Use to process raw data retrieved from Office 365/SharePoint

• iOS 5+, Android 4.4 (Kitkat)

Client-Sever Interaction

• Connection Pooling

• CSOM/JSOM

• Lazy Calls

• Paging

• Optimized APIs

• Caching

Connection Pooling

DEMO

Minimizing authentication requests:

CSOM

A way to fetch information from different contexts in a single request. Example:

$Web = $Context.Web$Context.Load($Web)$Lists = $Web.Lists$Context.Load($Lists)$Context.ExecuteQuery()

DEMO

Can you use JSOM from non-SharePoint environments (e.g. HTML5 clients)?

No… and Yes!

Recommended:

[MS-CSOM]: SharePoint Client Query Protocol

Using SharePoint CSOM in Node.js

JSOM

Running JSON from a non-browser context:

var ctx = new SP.ClientContext("/site"),web = ctx.get_web(),list = web.get_lists().getByTitle(‘list'),items = list.getItems('');ctx.load(web);ctx.load(items);ctx.executeQueryAsync(function () {…}

DEMO

Lazy Calls

DEMO

Delay expensive requests.

UI:

1. Async

2. On-demand

3. Combine both

Paging

DEMO

• Retrieve list information in chunks

• Make the chunk-size configurable (environment depended)

• GetListItems supports server-side paging. It includes a ListItemCollectionPositionNext attribute inside the rs:Data element to support paging.

What does ‘vti’ in ‘_vti_bin’ stand for?

Vermeer Technology Incorporated (the original creators of Front Page)

Optimized APIs

• Lists.GetListItemChangesSinceToken method

• Lists.GetListItemChangesWithKnowledge method

• Includes Schema Changes!

• In REST: perform a POST request that includes a SP.ChangeLogItemQuery object in the request body

Caching

• Try not to change business logic

• Be sensitive to:

– Memory allocation

– Storage

Make these parameters configurable

• Use intervals and optimized APIs to invalidate the cache

Roy SheinfeldCo-founder and VP R&D

roys@harmon.ie

@roysheinfeld

il.linkedin.om/pub/roy-sheinfeld/1/170/238

Thank you!