This document discusses strategies for building high-performance cross-platform mobile apps for Office 365 and SharePoint. It recommends using Sencha Touch as a strategic framework and discusses its pros and cons. It also covers challenges like native-HTML integration, HTML5 rendering, and client-server interaction. It provides demos and discusses approaches to address these challenges through techniques like lazy rendering, connection pooling, caching, and optimized APIs.

1. Building High-Performance Cross-Platform
Mobile Apps for Office 365 and SharePoint
Roy Sheinfeld, Co-Founder and VP R&D
harmon.ie
@roysheinfeld

2. www.sharepointeurope.com
Android iOS BlackBerr
y
Windows
Phone
Mobile

3. • 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

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

5. Performance Challenges
• Native – HTML Integration
• HTML5 Rendering
• Client-Sever Interaction

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

7. HTML5 Rendering
• Lazy Rendering
• Minimizing Image Elements
• Web Workers

8. 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} )

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

10. 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)

11. Client-Sever Interaction
• Connection Pooling
• CSOM/JSOM
• Lazy Calls
• Paging
• Optimized APIs
• Caching

12. Connection Pooling
DEMO
Minimizing authentication requests:

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

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

15. No… and Yes!
Recommended:
[MS-CSOM]: SharePoint Client Query Protocol
Using SharePoint CSOM in Node.js

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

17. Lazy Calls
DEMO
Delay expensive
requests.
UI:
1. Async
2. On-demand
3. Combine both

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

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

20. Vermeer Technology Incorporated (the
original creators of Front Page)

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

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

23. Roy Sheinfeld
Co-founder and VP R&D
roys@harmon.ie
@roysheinfeld
il.linkedin.om/pub/roy-sheinfeld/1/170/238
Thank you!