U C L L S M . Richer Web Applications On Trends, Techniques and Standards Supervisor: Prof. J. V Master esis: Partial Fulllment of the Requirements for the Degree of Master in Business Engineering Charles M 2323.05.00 INGE22MS/G [email protected] Academic Year 2009-2010 . Acknowledgment I would like to thank my supervisor Prof. Jean V for providing me a subject as interesting as rich web applications. Writing this document has redened how I use the Web today. e e e In addition, this work might not have been possible without my family’s continuous support. .. C C i L F iii I v Disclaimer.................................................................. vi Content & objectives........................................................ vi 1 U RIA 1 1.1 Denition and criteria ................................................. 1 ick vs. thin applications ................................................. 3 Client/server applications vs. web applications................................. 4 RIA features and characteristics ............................................. 5 Deployment alternatives ................................................... 6 1.2 Why RIAs are emerging? .............................................. 6 1.3 Limitations ........................................................... 8 1.4 Web applications vs. native apps: what to choose for the iPhone?. 9 1.5 RIAs as a part of a broader Web 2.0 era ................................. 11 1.6 RIAs for enterprises ................................................... 14 Customer-oriented applications ............................................. 14 Organizational-oriented applications ........................................ 16 2 T 17 2.1 Ajax-based applications ................................................ 18 jQuery ................................................................. 19 SproutCore ............................................................. 21 Google Web Toolkit ....................................................... 22 2.2 Adobe Flash & Flex ................................................... 24 i Development characteristics ................................................ 24 Deployment over Flash Player or AIR ........................................ 25 2.3 Curl .................................................................. 27 2.4 OpenLaszlo ........................................................... 27 e LZX language ....................................................... 28 Proxied & SOLO deployment .............................................. 29 2.5 JavaFX ................................................................ 31 Development tools ........................................................ 31 Deployment options....................................................... 31 2.6 Microsoft Silverlight ................................................... 32 2.7 Design patterns for rich web applications ............................... 33 Model-view-controller & SproutCore MVC+SDR ............................. 34 Model-view-presentation.................................................. 35 Model-view-viewmodel ................................................... 35 3-tier architecture ........................................................ 36 2.8 UI layouts, controls and other components .............................. 37 Screen layouts ........................................................... 38 Controls ................................................................ 38 Effects ................................................................. 39 2.9 Features selection & platforms comparison .............................. 39 2.10 A short discussion on web applications techniques ....................... 42 3 O S... 47 3.1 Why Web standards? .................................................. 47 3.2 Key Web standards in use today ........................................ 49 HTML ................................................................ 49 CSS ................................................................... 50 JavaScript .............................................................. 50 3.3 HTML5 .............................................................. 51 HTML5 explained ....................................................... 51 HTML5 features ........................................................ 52 Other specs related to HTML5.............................................. 54 What about Geolocation, SVG, MahML and XHR? ............................ 55 3.4 A short discussion on web applications standards ........................ 56 E 61 B 63 ii . .. L F 1.1 Rich internet applications in use ........................................... 3 1.2 ick vs. thin clients ...................................................... 4 1.3 A screenshot of Google Maps running in a SSB ............................ 7 1.4 A tag cloud illustrating topics associated to Web 2.0 ........................ 13 1.5 An overview of the Bivolino webstore ...................................... 15 1.6 An dashboard application built with Curl................................... 16 2.1 An overview of the Flash integrated platform ............................... 17 2.2 e Ajax application model: asynchronous communications . 20 2.3 A screenshot of the source code of jQuery.com .............................. 21 2.4 A full scale example of a web application using SproutCore . 23 2.5 A SWF le being deployed ................................................ 25 2.6 A SWF le embedded to HTML document................................ 26 2.7 e Curl platform ......................................................... 28 2.8 A typical workow in proxied mode with the OpenLaszlo Server . 30 2.9 An overview of the JavaFX tools ........................................... 32 2.10 An overview of the Microsoft Silverlight platform .......................... 33 2.11 e Model-View-Controller paradigm ..................................... 34 2.12 e common 3-tier model ................................................. 36 2.13 An example of the master/detail screen layout............................... 37 2.14 Illustration of some controls ............................................... 38 2.15 e jQuery UI effect ...................................................... 39 2.16 e market penetration into the browser of Flash, Silverlight and Java . 42 3.1 e Web among devices. .................................................. 48 3.2 e denition of the features among WHATWG and W3C documents . 52 3.3 deviantART Muro ........................................................ 57 3.4 HTML5-related features supported by modern browsers .................... 58 iii . .. I it comes to consumer applications, those can be classied nowadays into two W main categories: desktop applications and Web applications. On one hand, desk- top applications have to be completely installed on the host device, having the possibility to use Internet for further communications (to update the application or to access email services for example). On the other hand, Web applications run on Web servers, accessible in a specic environment which is commonly the Web browser. Web applications were at rst very primitive: an action from the user implied to refresh the page. Interaction was minimal and responsiveness was limited. e two having for direct consequence a poor user experience compared to native applications pre-installed on the computer. But as the Web extended its importance to the world, the need for dynamism, usability and responsiveness has rapidly grown. And richer Web applications are the answer to that need. And the term Rich Internet Application is the one used by platform vendors to describe the evolution of Web applications. e appellation has been coined in a Macromedia (acquired by Adobe Systems in 2005) White Paper in March 2002 [53], but the concept was not totally new at the time. Rich internet applications are usually seen as a mashup between desktop applications and traditional web applications. ey are as interactive and responsive as desktop apps, while being deployed over the Web. e mashup usually implies to transfer part or all the processing to the client, in contrast to Web apps that are running server-side, the browser taking only care of the rendering part. Web applications have nowadays become a day-to-day part of our lives. ey allow us to perform a large variety of tasks making our lives (on the Web or not) easier: banking transactions, social networking, entertainment and online shopping to name only a few. On one end, their availability to nearly any Web-connected devices make them even more v vi I appealing to the end-user. On the other end, it is a good opportunity for developers to deploy their apps over a unique platform: the Web. D is paper focuses on Web-related technologies. Consequently, it should be noted that technologies around the WWW and Internet are evolving rapidly. All the content present in the thesis is up to date till mid-August 2010, the assigned period to submit the nal version of this document. It can take only a couple of weeks for a technology to improve, and sometimes updates can occur on a daily basis. is is the case for the HTML5 specication for e.g. C e purpose of this document is to give an overview of what can be done today in terms of rich web applications, and how it can be done. e following questions are confronted throughout the thesis: • What is a rich web application? Where can we nd them on the Web? • How rich web clients are built? What is available out