A Guide To HTML5, 'API's and Mobile Web Apps

September 2013

John Moy
SAP Mentor
Co-founder Blue T

Warning!

Not all features demonstrated in this presentation are supported yet by all browsers. Chrome browser is recommended to run all the demonstrations. Hey, one day we hope all browsers will support all the features referenced in this presentation, maybe even Internet Explorer.

Who am I

• SAP UI & Mobile Architect
• SAP Mentor & Blogger
• Web Developer
• Former iOS/Android Developer
• Sci-Fi Nerd

What is HTML5?

• The Next Generation of HTML
• Collection of features necessary for modern web apps
• Not yet an official standard, browser support is not universal
• For this presentation, we refer to HTML5 more broadly than the strict specification, to include all features proposed to enhance the web experience in standard browsers.

How many features are proposed?

• Too many to list ...
  HTML Microdata, HTML5 Web Messaging, Web Workers, WebDriver, Messaging API, Network Information API, Network Service Discovery, Push API, Raw Sockets, Server-Sent Events, Web Intents, Web Telephony API, WebRTC, WebSocket API, HTML Imports, HTML Templates, Selectors API Level 1, Selectors API Level 2, Shadow DOM, Ambient Light Events, Battery Status Event Specification, Device Orientation Event Specification, Gamepad, Geolocation API Specification, Pointer Events, Proximity Events, Screen Orientation API, Vibration API, File API, HTML Canvas 2D Context, Web Animations, Audio Processing API, HTML Image Description Extension, HTML Media Capture, Web Audio API, Calendar API, Clipboard API and Events, Contacts API, Contacts Manager API, Web Alarms API Specification, Runtime and Security Model for Web Applications, Web Cryptography API, WebCrypto Key Discovery, Storage Indexed Database API, Quota Management API, Web SQL Database, Web Storage, Web Notifications
  .... etc.
  
  Source: dret.typepad.com/

But simply, just remember this ...

HTML5 is about ...
"More Power to the Browser"

Back to basics ...

Anatomy of a Web Application

Downloading a classic HTML Web Page

Lessons from the Past

Download times rule the Web, and since most users have access speeds on the order of 28.8 kbps, Web pages can be no more than 3 KB if they are to download in one second .... Users do not keep their attention on the page if downloading exceeds 10 seconds, corresponding to 30 KB at modem speed.

Similar challenges Today for Mobile Web Apps

Really, the challenge of modem speeds for web pages in the 1990s, is not unlike the challenge for mobile performance for web apps today.

Good performance is a key ingredient for good UX.

Lets try demo that again ...

This time, we de-couple the data from the web layouts

HTML5 Application Cache

Now lets keep the web layouts permanently on the device

HTML5 Web Storage

And lets store some data on the device as well
Application Cache + Web Storage = Offline web apps

HTML5 File System Access

• Providing access from your device to local files (eg. photos)
• Storing files in the browser

HTML5 Geolocation Access

• Providing browser-based access to your current location

HTML5 Canvas

• A drawing canvas built into your browser
• Useful for lightweight generation of charts and graphics

<canvas id = "democanvas" width="500" height="50" > </canvas>

• Try adjusting the plot numbers in the last line above

HTML5 Canvas

• A more impressive demonstration by much smarter people (touch the grid) ...

Created by lonely-pixel.com

• 0.5Kb HTML file
• 6 Kb JavaScript file
• 1 Kb CSS file

HTML5 Web Sockets

• Providing real-time, full duplex communications between a client and a server
• Avoids the request-response overhead of HTTP, with improved performance
• Also supports push communications from the server
• Well suited to real-time continuous data flows (eg. real-time stock updates, synchronised drawings, games)

var socket = new WebSocket('ws://www.myserver.com/data');
					

HTML5 Web Sockets

HTML5 Web Sockets

• Some awesome demonstrations by KAAZING
• Demonstration of high speed data feed using web sockets into a simulated stock trading dashboard
• Demonstration of a 3D racer controlled using web socket communications

CSS3 Adding some responsive design

@media (min-width: 980px) {
  ... (style declarations here)
}
@media (min-width: 768px) and (max-width: 979px) {
  ... (style declarations here)
}
@media (max-width: 767px) {
  ... (style declarations here)
}	

• Resize the browser for this site
• Resize the browser for this page, and watch the table
• Check it with www.responsinator.com

What about browser support?

What are the benefits of HTML5-based apps?

• Cross platform development (well, kind of)
• Leverage more common skills (HTML, CSS, Javascript)
• Simpler to support
• Provides a path to hybrid apps using wrapper tools such as PhoneGap (Cordova)

What are the challenges of HTML5-based apps?

• Native apps arguably still deliver a more refined UX
• Native solutions offer superior and more secure offline storage capability
• Discoverability on app stores (although mitigate this shortfall using native HTML5 wrappers eg. PhoneGap)

So, who's ready to develop HTML5 apps?

• Develop or procure skills in HTML5 concepts
• Develop or procure skills in Cascading Style Sheets (CSS3)
• Develop or procure skills in JavaScript
• Develop or procure skills in UX & User-Centered design

What can help me develop HTML5 apps more easily?

• HTML5 Frameworks / Libraries / IDEs (Integrated Development Environments)
• SAP's own HTML5 library - 'SAP UI5'

SAP itself is developing HTML5 apps

• See SAP's Fiori apps, based on HTML5

So, how do I leverage all this with my SAP system?

1. You need a way to serve your web layouts (HTML/CSS/JavaScript) to a browser
2. You need a way to exchange data (XML/JSON/etc) between your SAP system and the web layouts on the browser

Ways to serve web layouts (HTML/CSS/JavaScript) to a browser

• From a separate web server (eg. SAP Portal, SAP Web Dispatcher, non-SAP Web Server)
  or ...
• From your own ABAP system's web server (ICM - Internet Communication Manager) eg. using Business Server Pages

Ways to serve data (XML/JSON/etc.) to a browser

• Using custom services (ABAP classes) plugged into the ICM - Internet Communication Manager
• Using SAP NetWeaver Gateway (recommended)

Which gives us this basic architecture

*Of course, incorporate reverse proxies / firewalls etc. for external internet access

Or if you prefer a more advanced architecture ...

Remember HTML5 is about ...
"More Power to the Browser"

HTML5 - Anything's possible

HTML5 game created by Thibaut Despoulain

Click the below image

Note: Use Chrome browser for this demonstration

Thank You

john@BlueT.com.au

+61 403 197727

@jhmoy