Top 10 HTML5 Features for Oracle Cloud Developers

Top 10 HTML5 Features for
Oracle Cloud Developers
Brian “Bex” Huff
Chief Software Architect

2
Agenda
 Intro to Oracle Cloud
• Which ones use HTML5 extensively?
 Intro to HTML5
• Why lightweight HTML5 frameworks are usually superior
 Top 10 HTML5 features
• The big ones you should know about
 HTML5 Frameworks
• Oracle JET, jQuery, node.js, etc.
 Questions/Comments?
The most recent version of this presentation is on SlideShare:
 http://www.slideshare.net/bexmex/

3
Intro to Oracle Cloud
 Oracle Sites Cloud Service
• Extension of Oracle Document Cloud Service
• HTML5 centric application for website design
 Oracle Social Cloud
• Deep integrations with the other cloud applications
• Soon to be bundled with Document Cloud
 Oracle Mobile Cloud
• Create rich mobile web apps with the power of native
• Leverages HTML5 browser built into all smartphones

4
Why HTML5?
 HTML5 is critical for cloud development
 Accepted on almost all platforms
• Easier to support homogenous environment if based on open standards
 Rapid development cycles
• Less need for server-side code development
 Cheaper hosting model
• Heavy CPU processing on client browser, not server hardware

Why HTML5 for the enterprise
 Enterprise apps are (slowly) moving to the cloud
 Cloud apps use a more open and friendly architecture
• Based on standard protocols
• HTTP, XML, JSON
 Heavy frameworks still have value (ADF, etc)
• But entire point of the cloud is the least complex way to solve problems
• Heavily customized system? Probably need on-premise solution w/ADF
• Simplified front end? JavaScript and HTML5 are the future
5

Brief History of HTML5
 Initiated in 2004 by Apple, Mozilla, Google, and Microsoft
 XHTML dropped by the W3C in favor of HTML5 in 2009
 Apple bundles HTML5 compliant browser into iPhone
 Apple officially rejects mobile Flash in April 2010
 Adobe stops developing mobile Flash in November 2011
 Became a W3C 1.0 standard in October 2014
 But the most critical event in the history of HTML5???
 Microsoft drops support for browsers older than IE 11/Edge in
January 2016
6

7
Top 10 Features
1. Semantic HTML
2. Local Storage
3. Geolocation
4. New security options: OAuth2
5. Cross-Origin Resource Sharing
6. Advanced HTML forms
7. WebSockets
8. WebWorkers
9. Built in Audio/Video support
10.Custom DOM Elements and Attributes

8
1) Semantic HTML
 Explicit tags for the sections of a page everybody uses
• header, footer, article, section, nav, menu
 Structure
• http://www.hongkiat.com/blog/html-5-semantics/
• https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
 Semantic web comes closer, but probably wont happen yet
• RDFa protocol
• schema.org microdata
• JSON-LD

Semantic HTML Example
<body>
<header>
<h1>Welcome To Our Website!</h1>
</header>
<nav>
<header>
<h2>Please select one!</h2>
</header>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<aside>
<h2>Get To Know Us Better!</h2>
<section>
<h3>Popular Posts</h3>
</section>
</aside>
9

Semantic HTML Example, cont.
<article>
<header>
<h1>Title of Article</h1>
<h2>Subtitle of Article</h2>
</header>
<section>
<h3>First Logical Part (e.g. "Theory")</h3>
<p>Paragraph 1 in first section</p>
</section>
<footer>
<h4>Author Bio</h4>
<p>Paragraph in Article's Footer</p>
</footer>
</article>
<footer>
<div>Social Media Links</div>
</footer>
</body>
10

11
2) Local storage
 Allows large “offline” storage of structured data
• Bye bye cookies, hello database!
• By default, up to 5 Megs per website
• Expandable with user permission
• http://stackoverflow.com/questions/6276282/how-can-i-request-an-increase-to-
the-html5-localstorage-size-on-ipad-like-the-f
 All browser support basic offline Web Storage for strings:
localStorage["foobar"] = "my data";
localStorage.setItem("foobar", "my data");
sessionStorage["colorScheme"] = "oracle-red";
 Objects must be explicitly serialized into JSON:
localStorage["foobar"] = JSON.stringify("my data");
var foobar = JSON.parse(localStorage["foobar"]);

12
2) Local storage, cont.
 contenteditable
• Cool flag to auto-add this functionality
• http://html5demos.com/contenteditable
• But keep in mind, the UI is kind of terrible
• https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480
<section id="editable" contenteditable="true">
<p>This text is natively editable in the browser</p>
</section>
<script>
var editable = document.getElementById('editable');
addEvent(editable, 'blur', function () {
localStorage.setItem('contenteditable', this.innerHTML);
});
</script>

13
2) Local storage, cont.
 Query languages exist, but are not universal
• LocalStorage
• Supported by all browsers, but just name-value pairs
• WebSQL
• Supported in Chrome and Safari, but deprecated since 2010
• IndexedDB
• Successor to both, but browser support is very spotty
• Kind of slow, weird API
 Query Performance is in its infancy
• IndexDB blocks the DOM unless run as a Web Worker (discussed later)
 Not hopeful for any decent query standard any time soon
• Classic example of why WHATWG was better than W3C

14
3) Geolocation
 Allows web sites to determine the location of the client
• http://html5demos.com/geo
• http://www.w3schools.com/html/html5_geolocation.asp
 Not just for mobile web: also for laptops and mobile web sites

15
3) Geolocation, cont.
 How does it know my location???
• This is left up to the implementers of the spec to determine
• Each browser and platform has a different process
 Mobile web: location is usually known
• Either GPS or cell tower info
 Desktop
• In Chrome, it sends a message with your network info (IP address, MAC
address, Access Point, signal strength) to a Google service
• Compares to data Google Maps gathered about WiFi access points
• Or get closest known public router based on IP address

16
4) OAuth2
 Add-on to HTML5, built into most Oracle Cloud apps
• Not strictly part of the spec, but critical for its future
 Think of OAuth2 as the “valet key for the web”
• Grants limited access to specific resources, without giving it all away
 OAuth2 process:
1.An application requests authorization on a user's behalf.
2.The application obtains a Grant Token.
3.The client requests an Access Token by using the Grant Token.
4.The authorization server validates the Grant Token and issues an Access
Token and a Refresh Token.
5.The client requests the protected resource, authenticating using the
Access Token.
6.The resource server verifies the Access Token and serves the request.

18
5) Cross Origin Resource Sharing
 Previously, AJAX calls could only go back to original server
• Probably the most irritating security ‘feature’ in HTML4
 Could not host HTML and JS on two domains without hacks
• Google Maps was ‘hackable’ but most sites were not
• Each loaded JavaScript file needed a ‘callback’ to load
• Every developer had to roll their own callback API
 Now, new HTTP header to load sources from multiple servers
• Access-Control-Allow-Origin: *

5) Cross Origin Resource Sharing, cont.
 Use standard AJAX objects across domains
var req = new XmlHTTPRequest();
req.open("POST", "http://example.org");
 Use new window.postMessage to message across domains
window.postMessage("hello world!", "http://example.org");
function receiveMessage(event) {
// minimal security checks
if (event.origin !== "http://example.org")
return;
alert(event.data);
}
window.addEventListener("message", receiveMessage, false);
19

20
6) Advanced Web Forms
 HTML5 adds form options that have been sorely needed for
decades
 New input types
• url, tel(telephone number), email, number, color, range, datetime, etc
 Automatic in-line validation: critical for mobile web
• Use the pattern attribute to do regular expression validation
• Also specify min, max, required and a placeholder text
<input type="text" id="productId" pattern="[A-Z]{3}[0-9]{3}"
placeholder="XXX999" maxlength="6" required/>
<input type="number" id="quantity" min="0" max="100" step="1" />

21
7) WebSockets
 Web protocols (HTTP) are “stateless”
• By design, as soon as the page is drawn, the data might be out of date
• How do we know when the data has been updated?
 Prior to HTML5, had to use JavaScript to “poll” for new data
• JavaScript timeouts to load in new data
• Every application/framework had to roll their own
• Fairly high overhead, depending on the framework
 WebSockets act like normal sockets
• Allows back-end HTTP server to “push” new notifications to web front end

7) WebSockets, cont.
var connection = new WebSocket('ws://example.com/echo');
connection.onerror = function (error) {
alert('WebSocket Error ' + error);
};
connection.onmessage = function (e) {
alert('Server said: ' + e.data);
};
// send a string, binary data, or even a file!
connection.send('your message');
var binary = new Uint8Array(img.data.length);
connection.send(binary.buffer);
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);
22

23
8) WebWorkers
 JavaScript is a single-threaded programming language
• All scripts and events handled by one single thread
• So if one function takes a long time, the whole web page hangs!
• Major reason why JavaScript cant run heavy enterprise apps
 The solution? WebWorkers!
• Runs in the background, instead of the foreground
• No more JavaScript errors from hogging the CPU resources
• Send messages from main window to worker window

8) WebWorkers, cont.
 Typically, the main page will start a worker, and post JSON
formatted messages to it
• Binary data in buffers can also be transferred
<output id="result"></output>
<script>
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
document.getElementById('result').textContent = e.data;
}, false);
worker.postMessage({'cmd':'doStuff', 'msg':'my message...'});
worker.terminate();
</script>
24

 The worker page (doWork.js) creates an event listener, and
responds to messages from the main page by posing a message
to the ‘self’ object:
self.addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'doStuff':
self.postMessage('DOING STUFF: ' + data.msg);
break;
default:
self.postMessage('Unknown command: ' + data.msg);
};
}, false);
25

 For security, performance, and thread-safety a web worker has
more limited access to JavaScript functions
 The following objects are not available:
• The DOM (it's not thread-safe)
• The window object
• The document object
• The parent object
26

27
9) Audio and Video Support
 New elements: <video> ,<audio>, and <track>
 Mostly eliminates the need for JavaFX, Flash, or Silverlight
 HTML5 is now the enterprise video/audio standard
• http://www.ramp.com/enterprise/the-dawn-of-html5-video-as-the-
enterprise-standard/
 YouTube made HTML5 its default delivery platform in 2015
• http://youtube-eng.blogspot.com/2015/01/youtube-now-defaults-to-
html5_27.html

28
9) Audio and Video Support, cont.
 YouTube wanted to make the jump years ago, but several pieces
were missing that have been recently added:
• Fullscreen mode
• WebRTC: real time video communication between browsers
• Google hangouts
• Encrypted media extensions
• Adaptive Bitrate: downgrade to lower video quality based on bandwidth
• MediaSource extensions: allow JavaScript to create and manage streams

29
10) Custom DOM Elements and Attributes
 In addition to semantic HTML, you can make your own custom
elements and attributes
• Make HTML more like XML, and avoid pages of <div> soup
 Custom elements can be declared in the HTML like others:
<my-elem></my-elem>
 The behavior of the custom element is like the <span> tag, until
you register the element and its behavior:
var myElem = document.registerElement('my-elem', {
prototype: Object.create(HTMLElement.prototype)
});
document.body.appendChild(new myElem());
;

30
10) Custom DOM Elements and Attributes, cont.
 Custom data attributes can be added to all elements:
<div id="foo" data-my-attribute="bar"></div>
 Access data with the standard getAttribute function:
var foo = document.getElementById('foo');
var data = plant.getAttribute('data-my-attribute');
 Limitations and best practices:
• Custom elements must contain a dash
• Ensures it will be compatible with future HTML6 tags
• Custom attributes must start with data-
• HTML5 spec strongly states that data attributes be PRIVATE to that page
• Only JavaScript on that page should interact with those attributes
• Should not be considered a replacement for microformats
• IE 11 supports custom attributes, not custom elements (yet)

31
Tips & Tricks
 HTML5 opens new security holes that need to be plugged
• WebSockets and Cross Origin Resource Sharing in particular
• Never, ever, ever assume LocalStorage can be trusted!
• https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet
 Double check for browser compatability
• Check http://caniuse.com/ to verify
 Performance will likely be an issue for a while
• Plan on using web workers a lot!

32
HTML5 Frameworks to Use
 Oracle JavaScript Extension Toolkit (JET)
• Lightweight JS framework for Oracle apps
• Use in Oracle Dev cloud, Social cloud
 jQuery
• Most battle-tested HTML/JS framework
• Uses HTML5 features when possible, or downgrades to HTML4 for older
browsers
 Node.js
• Front end and back end JavaScript framework
• More free developer packages that Ruby, Python, or Rails
 All can be added to DEV cloud or Sites cloud

33
 My Company: http://bezzotech.com
 My Blog: http://bexhuff.com
 My Self: bex@bezzotech.com
Questions?

Top 10 HTML5 Features for Oracle Cloud Developers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Top 10 HTML5 Features for Oracle Cloud Developers

Similar to Top 10 HTML5 Features for Oracle Cloud Developers (20)

More from Brian Huff

More from Brian Huff (9)

Recently uploaded

Recently uploaded (20)

Top 10 HTML5 Features for Oracle Cloud Developers