modern web applications
DESCRIPTION
TRANSCRIPT
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ú
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
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!