Modern Web Apps with HTML5in 45 minutes

@djidja8

Fort Lee2200 Fletcher AvenueNew Jersey , USA

LimaCentro Empresarial Omega Av. Manuel Olguín 215 Of. 702Santiago de Surco, Perú

careers@cignium.com

Plan

• What is a modern Web Application in 2013?

• Little bit of history

• Evolution: Web Sites → Web Apps → Web Appsᴲ

• Modern Web APIs

Web Applications

Rich, stateful browser applications running on many different devices, utilizing programmatic interfaces

delivered via standard Web protocols

Big family of specs

https://github.com/SirPepe/SpecGraph

History – because history is fun

In 1991 Tim Berners-Lee wrote a document called “HTML Tags” with fewer than two dozen elements that could be used for writing web pages. That same year, he and his team, also published first version of HTTP (0.9)

The first official specification of HTML was HTML 2.0, published by the IETF (Internet Engineering Task Force) in 1995

History – W3C era

HTML 3.2 was the first version developed and standardized exclusively by the W3C (superseded IETF), published in 1996

The first CSS specification to become an official W3C Recommendation is CSS level 1, was also published in 1996

The latter half of the nineties saw a flurry of revisions to the specification until HTML 4.01 was published in 1999

After HTML 4.01, came XHTML 1.0

The only difference was in the syntax of the language. XHTML required authors to follow the rules of XML, a stricter markup language upon which the W3C was basing most of their technologies.

Additionally, the publication of XHTML 1.0 coincided with the rise of browser support for CSS – it took 3 years

History – W3C era

Then the W3C published XHTML 1.1, and it was real, strict XML.

Additionally, next version, XHTML 2.0, wasn’t going to be backwards compatible

XHTML 2.0 made it to a working draft, but work on it was

abandoned in 2009 in favor of work on HTML5/XHTML5

History – W3C era

History – WHATWG era

In 2004, Ian Hickson, who was working for Opera Software, proposed the idea of extending HTML to allow the creation of web applications. W3C rejected this proposal.

Representatives from Opera, Apple, and Mozilla were unhappy, so they formed their own group: Web Hypertext Application Technology Working Group (WHATWG)

WHATWG work was split into two specifications: Web Forms 2.0 and Web Applications 1.0

History – W3C >-< WHATWG

In October 2006, Tim Berners-Lee wrote a blog post in which he admitted that the attempt to move the web from HTML to XML just wasn’t working.

A few months later, the W3C issued a new charter for an HTML Working Group - work of the WHATWG should be used as the basis for any future version of HTML.

Web Applications 1.0

History – W3C <-> WHATWG

W3C and WHATWG relationship was never perfectand in July 2012…

still, there is hope…

Time check...

Next: Web App Evolution

Web App Evolution: Static Web sites

ONE PAGE - ONE REQUEST TO SERVER

Connected documents

Page reload

Stateless client

HTML, JavaScript, CSS

Web App Evolution: AJAX

ONE PAGE - MANY REQUESTS TO SERVER

Connected documents + Data islands (XML/JSON)

Page reload or #! hacks

Polling

Statefull (but hard)

Web App Evolution: Web apps

ONE PAGE - MANY REQUESTS TO MANY SERVERS

Web API - Connected Resources

Page reload (History API)

Polling

Statefull

Offline Mode (sessionStorage, localStorage)

Web App Evolution: Web apps

ONE PAGE - MANY REQUESTS TO MANY SERVERS

+

SERVER REQUESTS TO BROWSER

Web API - Connected Resources

History API

Polling bi-directional, full-duplex

Statefull

Offline Mode (sessionStorage, localStorage)

Web App Evolution: Web Appsᴲ

ONE PAGE - MANY REQUESTS TO MANY SERVERS +PAGE 2 PAGE REQUESTS/STREAMING

Web API - Connected Resources Page reload (History API) bi-directional, full-duplex

Statefull Offline Mode (sessionStorage, localStorage Real Time Communication HTML5, JavaScript, CSS3

All together, now…

Graphic by Jimmy Lee / jimmylee.info

http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/

Time check...

Next: Web APIs

Rise of Web APIs

http://vitvar.com/events/aaai-ss12/slides/jmusser-keynote.pdf

Web APIs: RESTful HTTP

Request - Response communication

Client–server

Stateless

Cacheable

Layered system

Uniform interface

Web APIs: Web Sockets

bi-directional, asynchronous, full-duplex communication

Seamlessly traverse firewalls and routers

Allow duly authorized cross-domain communication

Integrate well with cookie-based authentication

Integrate with existing HTTP load balancers

Be compatible with binary data

Web APIs:

enables Real Time browser to browser Communications

“WebRTC is a technology that allows developers to build real-time communication into web pages, offered directly on the web without any need for plugins or third-party software.”

Championed by Google, WebRTC has potential to disrupt both Telcos and incumbent VoIP players.

What you would need to do to establish browser to browser call:

• Wideband codecs (voice and video)• Echo cancellation• Automatic Gain Control• Noise reduction/suppression• Dynamic jitter buffers• Error concealment• Network Traversal• P2P protocols• Session setup• …

Browser vendors are taking care of all of that.Application developer only has to set up:

• For video on a Web page– Use HTML5 element <video>

• To access local devices: camera, microphone– Use navigator.getUserMedia()

• To display audio/video from a peer– Use createObjectURL

• To connect to remote peers– Use peerConnection API

Dead simple, plugin-free video conferencing in the browser!

= Web Appsᴲ

WebRTC can democratize and decentralize tools for content creation and communication—for telephony, gaming,

video production, music making, news gathering and many other applications.

Technology doesn't get much more disruptive than this.

Thanks!