Client-side development 2 - RiWAs

1 . Distinguish the term “Rich Internet Applications” (RIAs) from “Rich Web-based Applications”.

• Rich Internet application (RIA) which is the Web application which is designed to deliver the same features and functions associated with desktop applications. A rich internet application (RIA) usually runs inside a Web browser and does not require software installation on the client side to work. Rich Internet Applications (RIAs) are very complex Web based systems. RIAs are encompassed with various types of components, integrated in diverse ways, making the RIAs more complex systems. Numerous Technologies and Techniques (TTs), frameworks, libraries, and tools had been introduced over the last decade for the development of these components of RIAs. 
• However, these TTs, frameworks, libraries, and tools do not improve the fundamental concepts in the core of the RIAs and the complexity remains due to the lack of realization of the abstract architectural formalism of the RIAs. The term “Rich Internet Application” had been first used by Jeremy Allaire at Macromedia, in 2002; introducing their new technology named “Macromedia Flash MX”, which is a clientside application development platform with dedicated TTs. As per Jeremy, the RIAs are supposed to have “media rich power of the traditional desktop with the deployment and content rich nature of web applications. Most of the RIAs run their client portions within an area which is special and isolated of the client desktop called a sandbox for security purposes. 
• The sandbox limits visibility and access to the file and operating system on the client to the application server on the other side of the connection. This approach allows the client system to handle local activities, calculations, reformatting, lowering the amount and frequency of client-server traffic, especially when compared to the client-server implementations built around so-called thin clients.

2. Discuss the key features of RiWAs

• An RIA usually does not require client machine installation. However, client machine operation requires installation of a platform - such as Adobe Flash, Java or Microsoft Silverlight. The RIA may request that the user download and install a required platform if the platform not present. Some RIAs run on several Internet browsers, while others run on specified browsers only. These are some key features of RIWA.

• Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
• Microsoft Silverlight
• Curl (an object-oriented language with embedded HTML markup)
• Google Gears
• Open Laszlo and WebTop
• Oracle Web Center

3.  Different technologies and techniques used to develop the client-side components of the RiWAs

Node.js web development frameworks

• Node.js is an open source server environment
• Node.js is free
• Node.js runs on various platforms (Windows, Linux, UNIX, Mac OS X, etc.)
• Node.js uses JavaScript on the server

Tensor flow

• Tensor Flow is an end-to-end open source platform for machine learning. It has a comprehensive, flexible ecosystem of tools, libraries and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML powered applications.

Symphony web application framework

• Symphony is an open-source PHP web application framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications. Symphony is sponsored by SensioLabs. It was developed by Fabien Potencier in 2005.    

4. Delta Communication

• Considering the aforementioned three aspects of the rich communication model of the RIAs, we argue that the most important aspect is its increased speed due to the smaller size of data communicated
•  even though the rich communication model of RIAs is generally called asynchronous communication, not always the features are implemented providing asynchronous user experience. Therefore, even the asynchronous processing is unique for the rich communication model, it is not prominent in increasing the user experience of the user of RIAs. Since the execution is faster due to the fast communication, even for synchronous features the users may not experience the work-wait pattern similar to traditional web applications. If the communication is not fast and the asynchronous features are processed slower, then the GUI might not get updated adequate, thus the users might get confused with the information on the GUI. Therefore the increased speed is an essential factor, even though the features are implemented in asynchronous mode. Furthermore, if the communication is slower, the background processing capabilities alone will not be able to increase the user experience, since still there will be the work-wait pattern engaged. The synergy of the increased speed of the communication and the partial page rendering, increases the user experience, closer to the desktop applications.      

• Delta-Communication is the rich communication model used by the rich features of the RIAs, for client-component(s) to communicate with the server-component(s), to exchange only the needful dataset – for a particular feature executed at the time – which is smaller, compared to the size of the request/response of traditional communication. Since the size of the dataset communicated is smaller, the communication completes faster, eliminating the work-wait pattern. The processing of the response is done by the client-components in the background, therefore the page refreshes are eliminated and replaced by partial page rendering to update the content of the GUI with the results of the response. The user experience can be determined by the implementation of the feature, in either blocking (synchronous) or non-blocking (asynchronous) modes.

5. Synchronous and asynchronous communication in the context of DC.

• Synchronous transmission is a data transfer method which is characterized by a continuous stream of data in the form of signals which are accompanied by regular timing signals which are generated by some external clocking mechanism meant to ensure that both the sender and receiver are synchronized with each other.
• Data are sent as frames or packets in xed intervals.
• Synchronous transmission is transmission of signals in a xed interval based on a predened clocking signal and is meant for constant and reliable transmission of time-sensitive data such as VoIP and audio/video streaming.
• This method of transmission is used when large amounts of data need to be transferred quickly since data is transferred in large blocks instead of individual characters. The data blocks are spaced and grouped in regular intervals and preceded by synchronous characters that a remote device decode and use to synchronize the 
• connection between the end points. After synchronization is complete, the transmission can begin.

• Asynchronous transmission is the transmission of data in which each character is a self-contained unit with its own start and stop bits and an uneven interval between them.
• Asynchronous transmission uses start and stop bits to signify the beginning and ending bits. The additional one at the start and end of a transmission alerts the receiver to the occurrence of the first character and last character. The asynchronous transmission method is deployed when data is sent as packets as opposed to in a solid stream. The start and stop bits have opposite polarity, allowing the receiver to understand when the second packet of information has been sent.      

6. Types of technologies and techniques available for DC implementation

• AJAX technique uses the data-pull mode, and supports both synchronous and asynchronous modes by API. Through experiments we have noted that the DC technique implemented by AJAX is the simplest form of the DC. 
• Furthermore, the underlying concept used to implement the AJAX technique can be developed in other environments – Like desktop applications – using other TTs like WS or C#, even without JS and/or XHR object. We have successfully developed and tested the technique using C#.Net, to develop a desktop application component, which communicates with server components using datapull DC, asynchronously. 
• Moreover, the same DC technique is utilized in other Advanced DC technologies like WS, for the data-pull mode. To denote the abstract concept of this simplest implementation of the DC model, we propose the term “Simple Pull Delta-Communication” (SPDC). 
• Since the SPCD concept is abstract, it is TTs independent and can be developed for both browser-based and non-browser-based clients. 

• One of JavaScript’s greatest strengths is its ability to make asynchronous requests.AJAX. Microsoft invented Ajax in 1999.AJAX can be seen as the beginning of the JS based RIA development approach, and it became a major breakthrough in the web development area (Salva & Laurencot, 2009). After its introduction, developers were learning how to use AJAX to create desktop-like GUIs in the web applications such as Google Maps; and later they subsequently used AJAX even to create entire enterprise RIAs (Lawton, 2008).
•  Using the JS’s ability to manipulate the Document Object Model (DOM) in HTML documents, AJAX achieves and enhances the interoperability capability of the web applications (Salva & Laurencot, 2009). It should be noted that the AJAX itself is not a technology, it is a technique; and the technology behind AJAX is the XHR object with its JS API. The AJAX is a data-pull technique, employing the traditional request-response model. Combining HTML and CSS with JS, AJAX has become a powerful tool in RIA development, providing the fundamental implementation of the DC.

7.  The history and the evolution of the XHR and AJAX.

• Google made a wide deployment of standards-compliant, cross browser Ajax with Gmail (2004) and Google Maps (2005). In October 2004 Kayak.com's public beta release was among the rst large-scale e-commerce uses of what their developers at that time called "the xml http thing". This increased interest in AJAX among web program developers.
• The term Ajax was publicly used on 18 February 2005 by Jesse James Garrett in an article titled Ajax: A New Approach to Web Applications, based on techniques used on Google pages.      

• XHR is also known as XMLHttpRequest. The XMLHttpRequest object was initially dened as part of the WHATWG’s HTML effort. (Based on Microsoft’s implementation many years prior.) It moved to the W3C in 2006. Extensions (e.g. progress events and cross-origin requests) to XMLHttpRequest were developed in a separate draft (XMLHttpRequest Level 2) until end of 2011, at which point the two drafts were merged and XMLHttpRequest became a single entity again from a standards perspective. End of 2012 it moved back to the WHATWG.On Chrome or other browsers, if you were to inspect any page, you could head over to the Network tab, then notice a sub-tab called XHR. 
• Within this tab, you could see the status of requests, how long requests take, and plenty more. Microsoft was working on a technology named XMLHTTP in their Exchange 2000 project [18], and it was rst introduced to the world as an ActiveX control in Internet Explorer 5.0 in March 1999 [19], [20]; and later it was called the XMLHttpRequest (XHR) object, which has an Application Programmer Interface (API) in JS. The XMLHttpRequest object can be used to request data from a web server. 

8.9.10. The role of the DC-engine in RiWAs.

• AJAX technique as a JS implementation of the SPDC, which is limited to the browser based applications. XHR object has the ability to develop the rich communication not only in asynchronous mode, but also in synchronous mode, since the XHR API contains a setting to configure the synchronous/asynchronous mode. However, even using the asynchronous setting of the XHR object, still AJAX features can be developed and presented to the users to perform DC in synchronous manner, and the mode of the DC is determined by the way the feature is designed
• In later rich communication development technologies like WS, a similar setting is not included, and the developers are given the flexibility to determine, in which mode the DC should be developed. Based on these facts, considering the outdated and limited impression of the term “AJAX”, we propose the term (JS-SPCD), in place of the term “AJAX”. The term JSSPCS indicates that it utilizes the SPDC technique, and developed using JS.
• When the RIA bus is used all the AJAX requests are directed to a dedicated file, which is assigned for the RIA Bus. As the system grows, the developers can maintain separate files for multiple RIA-buses for different modules. Then the JavaScript in AJAX engine has to use the direct URLs for these dedicated RIA bus files. There are two drawbacks here 1-there will be multiple URLs to maintain, 2- the physical addresses of these files are exposed to anyone which is not a good practice. Using a small PHP code snippet in the index file the data in the parameter segments can be extracted. According to the first URL parameter the module can be identified.  

11.12.  The functions available in jQuery for implementing AJAX-based DC.

1. jQuery load () Method  

• The jQuery load () method is a simple, but powerful AJAX method. The load () method loads data from a server and puts the returned data into the selected element.

Syntax: $(selector).load (URL, data, callback);

The required URL parameter species the URL you wish to load. The optional data parameter species a set of query string key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load () method is completed.

Here is the content of our example le: "demo_test.txt":

jQuery and AJAX is FUN!!!

This is some text in a paragraph.

The following example loads the content of the le "demo_test.txt" into a specic

element:

Example 

$("#div1").load ("demo_test.txt"); 

It is also possible to add a jQuery selector to the URL parameter. The following example loads the content of the element with id="p1", inside the le "demo_test.txt", into a specic

element:

Example 

$("#div1").load ("demo_test.txt #p1") 

The optional callback parameter specifies a callback function to run when the load () method is completed. 

The callback function can have different parameters: 

responseTxt - contains the resulting content if the call succeeds 

statusTxt - contains the status of the call 

xhr - contains the XMLHttpRequest object The following example displays an alert box after the load () method completes. 

If the load () method has succeeded, it displays "External content loaded successfully!", and if it fails it displays an error message: 

Client-side development 1 - jQuery

1.  Is jQuery a framework or a library?

 

• A framework is something that usually forces a certain way of implementing a solution, whereas jQuery is just a tool to make implementing what you want to do easier.
• A library is a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. Example is jQuery.
• Frameworks is a particular implementation of a web application, where your code fills in the details. 
•  The framework is in charge and it calls into your code when it needs something app specific. 

2. The features provided by jQuery

• The purpose of jQuery is to make it much easier to use JavaScript on your website.
• jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
• jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

3.  The advantages and disadvantages of using          jQuery 

➤ Advantages

• The main advantage of jQuery is that it is much easier than its competitors. 
• You can add plugins easily, translating this into a substantial saving of time and effort. 
• In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).
• The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. 
• The jQuery community is active and extremely hardworking.
• Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.
• jQuery is flexible and fast for web development
• It comes with an MIT license and is Open Source
• It has an excellent support community
• Bugs are resolved quickly
• It has Plugins
• Excellent integration with AJAX

 ➤ Disadvantages

• One of the main disadvantages of jQuery is the large number of published versions in the short time. 
• It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google(attractive, but can bring incompatibility problems with the code).
• jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS
  If jQuery is improperly implemented as a Framework, the development environment can get out of control.

5. Selectors

• jQuery selectors allow you to select and manipulate HTML element(s).

• jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

• All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

• The jQuery element selector selects elements based on the element name.

• You can select all <p> elements on a page like this:

$("p")

Example

• When a user clicks on a button, all <p> elements will be hidden:

Example

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

The #id Selector

• The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

• An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

• To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

Example

$(document).ready(function(){

  $("button").click(function(){

    $("#test").hide();

  });

});

The .class Selector

• The jQuery .class selector finds elements with a specific class.

• To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

Example

$(document).ready(function(){

  $("button").click(function(){

    $(".test").hide();

  });

});

6.1  CSS advanced selectors in jQuery 

• Advanced Selectors used in jQuery. UniversalClass. There are numerous selectors that you can use both in CSS and in jQuery. With jQuery, you can use advanced selectors that help you reference various elements in an HTML page and then apply properties and call methods as needed.

6.2 jQuery’s DOM traversal API

• The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

• The Document Object Model originated as a specification to allow JavaScript scripts and Java programs to be portable among web browsers. Dynamic HTML was the immediate ancestor of the Document Object Model, and it was originally thought of largely in terms of browsers. However, when the Document Object Model Working Group was formed, it was also joined by vendors in other domains, including HTML or XML editors and document repositories. Several of these vendors had worked with SGML before XML was developed; as a result, the Document Object Model has been influenced by SGML Groves and the HyTime standard. Some of these vendors had also developed their own object models for documents in order to provide programming APIs for SGML/XML editors or document repositories, and these object models have also influenced the Document Object Model. 

7. The importance of DOM objects 

• Rendering/Layout engines (wikipedia links: Gecko for Firefox, WebKit for Safari and Chrome, Trident for IE) traverse the DOM, and and processes elements they understand. 
• The aim is to position, represent and render elements according to what it knows inline, or from related CSS. I will conveniently ignore HTML5 Canvas for now. There is a handy comparison on wikipedia of capabilities of the layout engines.

• The rendering/layout engine can only process what it knows. I previously talked of glass-ceilings and used the lack of a ‘image drop-down’ as an example of that. In that case “image drop-down” may be easy for humans to understand but the rendering engine needs it represented in the DOM as a series of regular <div> <ul> <li> <span> items, that are unlike the <select> that is canonical for ‘drop-down’. 
• It is like that for every advanced effect, I suggest. Thus to push ahead in terms of capability, the rendering/layout engine needs to be enhanced. There are four main browsers now, meaning that a committee needs to decide what new affortdnces and capabilities the DOM can encode, and that needs to be rendered and interacted with.

• Your web app may have threads of operation that mutate the DOM. That would be for human interactions as well as Javascript (AJAX, COMET etc). Those DOM changes are not immediately processed. The rendering engine kicks in later and processes the changed nodes within the DOM. As such, you should think about the DOM as being an intermediate between the code that requires something to be seen, and the rendering engine that’s going to make that happen.
• By design, the DOM and browsers pertain to presentation and interaction only. There is a server part of the application, that is most likely handling business logic, and persistence. 
• The server and browser speak HTTP to each other of course, and therefore the overloaded term thin client applies to this class of application. Another “thin” aspect of this type of application is the lazy way that additional “pages” of the application are retrieved at the time of first use. The whole application is delivered incrementally to the browser, while in use, leading to a hugely important faster start.

8. Benefits of using jQuery 

• jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

➤ Benefits of using jQuery:

• Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.

• Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.

• Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.

• Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.

• That was easy! – jQuery has easy implementation for web developers in comparison to other applications.

• Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.

• FREE! – free, open source software.

• Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.

• Simplifies AJAX

• Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

10. Advanced features provided by jQuery 

• In part of being a web designer or front end developer you will commonly run into JavaScript, often referred to as JS, and jQuery. Within the top 10,000 websites JavaScript is used within over 92% of them, and jQuery is used within in over 63% of them. Needless to say, they are fairly popular. You may even aspire to write JavaScript or jQuery to build your own behaviors at one point or another.

• Like CSS, JavaScript should be saved in an external file with the .js file extension, and then referenced within an HTML document using the script element. Where the JavaScript reference is placed with HTML depends on when it should be executed. Generally speaking, the best place to reference JavaScript files is right before the closing </body> tag so that the JavaScript file is loaded after all of the HTML has been parsed. However, at times, JavaScript is needed to help render HTML and determine it’s behavior, thus may be referenced within a documents head.

• The first step to using jQuery is to reference it from within a HTML document. As previously mentioned with JavaScript, this is done using the script element just before the closing </body> tag. Since jQuery is it’s own library it is best to keep it separate from all the other JavaScript being written.

• When referencing jQuery there are a few options, specifically as whether to use the minified or uncompressed version, and as whether to use a content delivery network, CDN, such as Google hosted libraries. If the code being written is for a live, production environment it is encouraged to use the minified version for better loading times. Additionally, using a CDN like Google also helps with loading time, and potential caching benefits.

➤ jquery Object

• jQuery comes with it’s own object, the dollar sign, $, also known as jQuery. The $ object is specifically made for selecting an element and then returning that element node to perform an action on it. These selections and actions should be written in a new file, referenced outside of the actual jQuery library.

➤ Document Ready

• Before trigging any jQuery to traverse and manipulate a page it is best to wait until the DOM is finished loading. Fortunately jQuery has a ready event, .ready(), which can be called when the HTML document is ready to be altered. By placing all of our other custom written jQuery inside of this function we can guarantee that it will not be executed until the page has loaded and the DOM is ready..

➤ Selectors

• As previously mentioned, one of the core concepts of jQuery is to select elements and perform an action. jQuery has done a great job of making the task of selecting an element, or elements, extremely easy by mimicking that of CSS. On top of the general CSS selectors, jQuery has support for all of the unique CSS3 selectors, which work regardless of which browser is being used.
• Invoking the jQuery object, $(), containing a selector will return that DOM node to manipulate it. The selector falls within the parentheses, ('...'), and may select elements just like that of CSS.

➤ Traversing

• At times the general CSS selectors alone don’t cut it and a little more detailed control is desired. Fortunately jQuery provides a handful of methods for traversing up and down the DOM tree, filtering and selecting elements as necessary.

• To get started with filtering elements inside the DOM a general selection needs to be made, from which will be traversed from relatively. In the example below the original selection finds all of the div elements in the DOM, which are then filtered using the .not() method. With this specific method all of the div elements without a class of type or collection will be selected.

➤ Changing Methods

• For even more control as to which elements are selected different traversing methods may be chained together simply by using a dot in-between them.

• The code sample below uses both the .not() method and the .parent() method. Combined together this will only select the parent elements of div elements without a class of type or collection.