Mobile applications, built with Visualforce and HTML5, are a great way to start users on their mobile journey without expending a huge amount of development effort. The applications execute in Web pages retrieved by the device browser, which means that all users are running the latest version of the application and there are no provisioning or distribution hurdles to clear. HTML5 is not a silver bullet, however, as there is limited access to device features (although this is slowly improving) and lack of secure offline storage means they are not suitable for providing offline access to sensitive information.
Note: This post is from Keir Bowden (aka Bob Buzzard), a Force.com MVP, Salesforce Certified Technical Architect and CTO of BrightGen, a Platinum Cloud Alliance partner in the United Kingdom. He has been solving business problems with the Force.com platform since 2008 and building hybrid and HTML5 mobile applications since late 2010. He is a regular blogger on Apex, Visualforce and Salesforce1 solutions at The Bob Buzzard Blog.
Performance Matters for Mobile Apps
Performance is extremely important in the mobile world. Slow applications not only frustrate users, but also affect their perception of other aspects of the application. A user accessing a non-performant mobile application is also likely to believe it is difficult to use, poorly designed, and does not contain interesting content, all of which damage engagement.
We’re Not in Kansas Any More
Mobile devices have some unique characteristics that impact application performance:
- They have reduced memory and CPU compared to desktop machines.
- Network connections are hard on the device battery, and transitioning to a full power connection is expensive and unrelated to the request size. There is no such thing as a small request to the server.
- 3/4G networks require a series of control messages to be sent to establish a connection with a cell tower, introducing latency for the first connection and movement between cells.
- Packet loss is a fact of life for mobile workers–signal strength and interference varies with location. TCP interprets packet loss as network congestion, and both the client and server will back off to ensure the network is still usable.
What’s the upshot of all these details? To create performant HTML5 web applications for mobile devices, we need to reduce our server round trips and exchange as much information as possible in each request, while not overloading the client with large resource files and CPU intensive processing tasks.
Visualforce and HTML5 for Mobile: Some Considerations
You can build mobile apps using Visualforce with HTML5 markup. While it is possible to build an HTML5 application using the standard Visualforce component library and controllers, this will result in a suboptimal user experience for the following reasons:
- The standard components render the design of the standard Salesforce UI, which doesn’t translate well to the smaller screen of a mobile device.
- The standard Visualforce component library delivers the standard Salesforce style sheets to the device, and these are significant in size.
- Business logic Apex controllers require round trips to the server to process user input.
- Visualforce view state is necessary to maintaining application state across multiple requests, which is a large resource for the mobile device to manage and transmit for all postbacks to the controller.
Basic Best Practices for HTML5 Force.com Mobile Apps
To provide optimal performance, it’s best to architect HTML5 applications on Force.com specifically for the mobile world. Here are some key design principles to consider.
Move Business Logic to the Mobile Device
Implement business logic in JavaScript so that it is carried out on device, thus helping to minimize server round trips.
Manage Mobile Application State on the Device
Retrieve all required data from Salesforce when the application is initially rendered, and only save data to Salesforce when absolutely necessary–preferably when the user has completed all of their work.
Note: This recommendation does not include saving data into HTML5 local storage–as detailed in the OWASP security cheat sheet, local storage is easily compromised.
Use a Content Delivery Network for Mobile Apps
Use a Content Delivery Network (CDN) to include JavaScript and CSS resources. There are many benefits to this approach, which I’ll explore deeper in a later post, but the key reason is to maximise the chance of a cache hit. If any of the pages the browser has previously accessed requested the resource from the same CDN, the resource will be retrieved from the browser cache.
Optimize Mobile App Images
Consider how images will be served to the page. Developers will expend a lot of effort reducing the size of the JavaScript and CSS resources used by a mobile application, often switching frameworks to reduce download time, while happily including large images originally designed for desktop browser. Guy Podjarny’s research in 2011 showed that 86% of web sites were downloading the same content for mobile devices as the full sized version. In 2012, the number reduced to 72%, but the overall content size of the web sites had increased.
Retrieving device-specific images is an ongoing challenge for the mobile web, and something I’ll cover in more detail in a later post. However, if the images used by your application will change frequently, consider serving them from Salesforce CRM Content, as described by Markus Spohn in his recent blog post here.
Part 1 Summary
This post was a gentle introduction to building HTML5 mobile apps using Force.com, and we’re just getting started. Look for the next part of this series soon in this blog.
Related Resources
About the Author
Keir Bowden (aka Bob Buzzard), is a Force.com MVP, Salesforce Certified Technical Architect and CTO of BrightGen, a Platinum Cloud Alliance partner in the United Kingdom. He has been solving business problems with the Force.com platform since 2008 and building hybrid and HTML5 mobile applications since late 2010. He is a regular blogger on Apex, Visualforce and Salesforce1 solutions at The Bob Buzzard Blog.
This post was published in conjunction with the Technical Enablement team of the salesforce.com Customer-Centric Engineering group. The team’s mission is to help customers understand how to implement technically sound salesforce.com solutions. Check out all of the resources that this team maintains on the Architect Core Resources page of Salesforce Developers.