HTML5 WebSockets

Summary

 

HTML5 introduces exciting new communication and performance features. New APIs such as WebSockets, Cross Document Messaging, XMLHttpRequest Level 2, Server-Sent Events, and Web Workers provide ways to optimize your web applications' performance and low-latency alternatives for real-time streaming and full-duplex communication. Until recently, the latter were available only in desktop applications.

 

HTML5 WebSocket, which defines a full-duplex communication channel that operates through a single socket over the Web, is not just another incremental enhancement to conventional HTTP communications. It represents a colossal advance, especially for real-time, event-driven web applications. HTML5 WebSockets provides such a dramatic improvement from the old, convoluted "hacks" that are used to simulate a full-duplex connection in a browser that it prompted Ian Hickson (Google)—the HTML5 specification lead—to say:

 

"Reducing kilobytes of data to 2 bytes...and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSockets seriously interesting to Google."

 

In this highly practical, action-packed two-day course, you'll see hands-on how the different communication and performance APIs and HTML5 origin-based security model work. Most of these features are already supported in modern browsers, but the course will also explore ways to make them work in older browsers using polyfills and emulation. With these new standards, the browser can now enjoy the first-class citizenry of network communication that has long been enjoyed only by desktop applications. You will learn how to use the emerging standards to build scalable, mission critical real-time Web 2.0 applications such as:

 

  • Trading System Clients
  • Online Betting Applications
  • Social Chat Solutions
  • Performance Monitoring Applications
  • Sports and News Broadcasting Applications

 

Training Duration

 

2 days

 

Training Objectives

 

Upon completion of this course, you will know how to create your own scalable, real-time Web applications with the latest HTML5 Performance, Communication, and WebSockets technologies and be able to:

 

  • Understand the fundamental HTML5 Communication technologies: WebSocket, Server-Sent Events, Cross-Document Messaging, and XHR Level 2
  • Understand performance improvements that can be gained from using HTML5 Web Workers
  • Use tools to analyze web application performance
  • Improve web application performance dramatically using the latest cutting edge performance techniques
  • Decide when and why to use HTML5 Communication and its implications on your architecture
  • Setup and configure an Enterprise development environment and use HTML5 Communication APIs
  • Build applications on top of WebSocket and use client-side APIs to communicate directly with back-end systems such as JMS, XMPP (Jabber), STOMP and AMQP
  • Design, develop, debug and deploy secure and scalable real-time web applications with HTML5 WebSocket that will work in today's browsers

Training Audience

 

This course is designed for software developers interested in designing, creating, and deploying real-time HTML5 web applications. It is valuable to both beginners and advanced developers that already have experience in developing web applications.

 

To get the most out of the course, you should be familiar with HTML and JavaScript. Prior exposure to any of these concepts will also be helpful:

 

  • Cloud computing (Amazon EC2)
  • UNIX/Linux command scripting
  • Ajax and Reverse Ajax

HTML5 Performance, Communication and WebSocket Training Course Outline

 

The following is a detailed breakdown of all the course modules. Attendees will receive electronic copies of the presentations, lab files, and starter code.

 

Part 1—Introduction

 

HTML5 Overview

 

  • History of HTML5
  • The HTML5 vision
  • WHATWG, W3C, and IETF specifications
  • What is part of HTML5?
  • When can I use HTML5?
  • HTML5 Security Overview
  • Origin-based security
  • Using HTML5 in browsers that do not support it
  • Detecting native availability of HTML5 features
  • Emulation and Polyfills
  • Overview of the HTML5 APIs
  • Programming HTML5
  • Lab: Building a Web App with html5boilerplate

 

Part 2—Web Application Performance

 

HTML5 Web Workers

 

  • Overview
  • Web Worker communication
  • Lab: Using the Web Workers API

 

HTML5 ApplicationCache

 

  • Using ApplicationCache to improve performance
  • ApplicationCache API and Events
  • Understanding the Manifest file
  • Server Configuration
  • Building and using HTML5 Offline Web Applications
  • Lab: Using ApplicationCache

 

High-Performance HTML5 Web Applications

 

  • Tips and Tricks for Web App optimization
    • JavaScript
    • CSS
    • Images
    • Sprites
    • Data URIs
  • Developer Tools for
    • Page Speed
    • YSlow
    • Chrome Speed Tracer
  • Lab: Optimizing web app performance

 

Part 3—HTML5 Communication

 

Cross Document Messaging

 

  • Overview
  • Understanding the origin concept
  • Cross Document Communication
  • Lab: Using the PostMessage API

 

XMLHttpRequest Level 2

 

  • Overview
  • Cross-document XHR
  • Progress events
  • Lab: Using XHR Level 2

 

Part 4—WebSockets and Server-Sent Events

 

HTML5 WebSocket

 

  • Real-time Communication overview
  • Lab: Using Wireshark to analyze network traffic
  • WebSockets Overview
  • WebSocket API
  • WebSocket Protocol
  • Browser and server support
  • Lab: Using the WebSocket API

 

Server-Sent Events

 

  • Overview of SSE
  • EventSource API
  • Browser and server support
  • Lab: Using the EventSource API

 

Part 5—WebSocket-Based Protocol Communication

 

WebSocket and Transport Protocols

 

  • Transport protocol overview
  • Protocols
  • Integration with (useful) transport protocols
  • Practical use cases

 

Real-Time Messaging

 

  • Real-time Messaging Architecture
  • Pub/Sub architecture
  • Messaging protocols and APIs
  • About JMS
  • About Streaming Text Orientated Messaging Protocol (Stomp)
  • About Advanced Message Queuing Protocol (AMQP)
  • Message brokers
    • Apache ActiveMQ
    • RabbitMQ
    • Other message brokers
  • Client-side messaging APIs
  • Lab: Building a real-time stock application

 

 Real-Time Chat

 

  • Overview
  • Chat protocols
    • XMPP
    • IRC
    • Other chat protocols
  • Client-side APIs for XMPP
  • Integrating with Google Talk and Jabber
  • Bonus Lab: Building a real-time chat application

 

Part 6—WebSocketS in the Enterprise

 

Enterprise WebSocket Deployment

 

  • WebSocket network traversal overview
  • WebSocket and proxy servers
  • WebSocket and firewalls
  • WebSocket and load-balancing routers
  • High availability and fault tolerance
  • Cloud Deployment
  • Using the Amazon Cloud
  • Cloud security
  • Tools for cloud deployment
  • Bonus lab: WebSocket cloud configuration

 

WebSocket Security

 

  • WebSocket Security Overview
  • Protocol-based security
  • Protocol validation
  • TLS and SSL certificates
  • Authentication and authorization

Testimonials

 

Here's what some attendees thought about the HTML5 Fast Track course:

 

Loved it. I hope my competitors never hear about this training course.

—IBT - Internet Business Technologies

 

Peter was really knowledgeable in HTML5 - he was fantastic - took his time to answer questions and to help people. Very nice guy.

—BCLC

 

HTML 5 and WebSocket couldn't have a better teacher! Peter is the Best!

—IBT - Internet Business Technologies

 

Peter Lubbers is an excellent trainer and the course material is superb. I had some concerns about taking a training class for technology that is still evolving, however the training material and the instructors knowledge were extraordinarily current. I learned much more than I expected to and I have been given the tools to keep up with the HTML5 standard as it continues to evolve.

—Anvil Dataworks

 

I don't usually mark all "excellent" or give perfect scores but I thought this training was excellent across the board. The materials, labs and the instructor covered the topic very well and provided tools and samples to continue learning after the course. This was one of the best trainings in terms of understanding and retaining the information for a short course I've been to in quite some time.

—Intel Corporation

 

The HTML5 course was quite intense and provided the kind of challenge I was looking for over a conference. I liked having Peter there to help through problems—he even solved some problems with my code after the session was over! He was quite humble and helpful, despite clearly being one of few people who have a grasp of some of the highly technical knowledge required to understand this technology on both a broad and deep level.

—Franklin University

 

Both the course and Peter were great.

—Media Arts Lab

 

Extremely savvy instructor. Definitely gave the impression that he is a leader in the field.

—Media Arts Lab

 

Peter was very professional, a very easy-going and accessible person. I'm amazed by the quality of his teaching.

—IBT - Internet Business Technologies

 

I learned to harness a great deal of the new technology that HTML5 has to offer. Very cool and informative! Peter Lubbers did an excellent job separating the hype behind HTML5 from practical application we can implement this week. I thoroughly enjoyed learning how we can move forward into HTML5 while implementing fallback into everything we do for the older browsers.

—Bechtel National, Inc.

 

Peter did a great job. He demonstrated a great understanding and currency of knowledge on the topics presented.

—A Large Bank

 

Kaazing Training Prerequisites

 

This section describes the recommended and optional system and software for Kaazing's HTML5 courses:

 

Facility prerequisites

Attendee system and software prerequisites

 

Facility Prerequisites

A facility hosting the Kaazing Master Class must provide the following items:

 

  • Reliable, fast Internet access (via Wi-Fi or wired)
  • Projector (VGA-compatible)
  • Whiteboard
  • A good supply of coffee

 

Attendee System and Software Recommendations

 

The following software is recommended for all participants' systems:

 

Questions?

 

If you have any questions whatsoever, please contact training@kaazing.com.