Modern Web Apps

HTML5, WebRTC, SPA
Asbury Agile 2012,
Agiles 2013. Lima

Transcript

1. Modern Web Apps with HTML5 in 45 minutes
2. @djidja8
3. Fort Lee 2200 Fletcher Avenue New Jersey , USA Lima Centro Empresarial Omega Av. Manuel Olguín 215 Of. 702 Santiago de Surco, Perú careers@cignium.com
4. Plan • What is a modern Web Application in 2013? • Little bit of history • Evolution: Web Sites → Web Apps → Web Appsᴲ • Modern Web APIs
5. Web Applications Rich, stateful browser applications running on many different devices, utilizing programmatic interfaces delivered via standard Web protocols
6. Big family of specs https://github.com/SirPepe/SpecGraph
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
14. History – W3C <-> WHATWG W3C and WHATWG relationship was never perfect and in July 2012… still, there is hope…
15. Time check... Next: Web App Evolution
16. Web App Evolution: Static Web sites ONE PAGE - ONE REQUEST TO SERVER  Connected documents  Page reload  Stateless client  HTML, JavaScript, CSS
17. Web App Evolution: AJAX ONE PAGE - MANY REQUESTS TO SERVER  Connected documents + Data islands (XML/JSON)  Page reload or #! hacks  Polling  Statefull (but hard)
18. 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)
19. 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)
20. 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
21. 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/
22. Time check... Next: Web APIs
23. Rise of Web APIs http://vitvar.com/events/aaai-ss12/slides/jmusser-keynote.pdf
24. Web APIs: RESTful HTTP Request - Response communication  Client–server  Stateless  Cacheable  Layered system  Uniform interface
25. 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
26. 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.
27. 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 • …
28. 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!
29. = 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.
30. Thanks!