Modern Web Apps with HTML5 in 45 minutes The document provides a summary of the evolution of web applications from static web sites to modern web apps. It discusses the history from early HTML specifications to modern APIs that enable real-time communication directly in the browser. It outlines the progression from one page with one server request to a single page with many requests to multiple servers and real-time communication between browsers. The rise of web APIs like REST, Web Sockets, and WebRTC are described that have enabled more powerful and responsive web applications.

1. Modern Web Apps with HTML5
in 45 minutes

2. @djidja8

3. Plan
• What is a modern Web Application in 2013?
• Little bit of history
• Evolution: Web Sites → Web Apps → Web Appsᴲ
• Modern Web APIs

4. Web Applications
Rich, stateful browser applications running on many
different devices, utilizing programmatic interfaces
delivered via standard Web protocols

5. Big family of specs
https://github.com/SirPepe/SpecGraph

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

13. History – W3C <-> WHATWG
W3C and WHATWG relationship was never perfect
and in July 2012…
still, there is hope…

14. Time check...
Next: Web App Evolution

15. Web App Evolution: Static Web sites
ONE PAGE - ONE REQUEST TO SERVER
 Connected documents
 Page reload
 Stateless client
 HTML, JavaScript, CSS

16. Web App Evolution: AJAX
ONE PAGE - MANY REQUESTS TO SERVER
 Connected documents + Data islands (XML/JSON)
 Page reload or #! hacks
 Polling
 Stateful client (but hard)

17. Web App Evolution: Web apps
ONE PAGE - MANY REQUESTS TO MANY SERVERS
 Web API - Connected Resources
 Page reload or #! Hacks History API
 Polling
 Stateful client
 Offline Mode (sessionStorage, localStorage)

18. 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
 Stateful client
 Offline Mode (sessionStorage, localStorage)

19. 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
 Stateful client
 Offline Mode (sessionStorage, localStorage
 Real Time Communication
 HTML5, JavaScript, CSS3

20. 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/

21. Time check...
Next: Web APIs

22. Rise of Web APIs
http://vitvar.com/events/aaai-ss12/slides/jmusser-keynote.pdf

23. Web APIs: RESTful HTTP
Request - Response communication
 Client–server
 Stateless server
 Cacheable
 Layered system
 Uniform interface

24. 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

25. 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.

26. 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
• …

27. 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!

28. = 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.

29. Thanks!