Tute_11

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

➥Rich Web-based applications 
      •Use advanced GUIs  
      •Use Delta-Communication 
      •Provide rich user experience
 Most of the web-based applications nowadays are RiWAs

A rich web application (originally called a Rich Internet Application RIA or Installable Internet Application) is a Web application that has many of the characteristics of desktop application software, typically delivered by way of a site-specific browser, a browser plug-in, an independent sandbox, extensive use of JavaScript, or a virtual machine.The concept is closely related to a single-page application, and may allow the user interactive features such as drag and drop, background menu, WYSIWYG editing, etc. HTML5 is a current standard for delivering rich web applications, supported by all major browsers.

Discuss the key features of RiWAs, which make them more advanced than the standard web based applications. 

Rich Internet applications (RIA) are Web-based applications that have some characteristics of graphical desktop applications. Built with powerful development tools, RIAs can run faster and be more engaging. They can offer users a better visual experience and more interactivity than traditional browser applications that use only HTML and HTTP.

explains  RIAs  as  applications,  which  run online and have many of the features and functionalities of desktop applications. He continues the explanation showing that the RIAs have overcome problems with traditional Web applications  –  such  as  slow  performance  and  limited interactivity  –  with  their  responsive  UIs  and  interactive capabilities, which make the Internet-based programs easier to be used and more functional. As  per  Koch  et  al ,  RIAs  are  Web  applications, augmented with desktop features, which use mechanisms of advanced  communications  for  data  handling,  to  execute operations on the client-side, minimizing the server requests. They  mention  that  the  rich  look-and-feel,  better responsiveness,  performance,  and  accessibility  of  RIAs enthuse  both  the  users  and  the  software  engineers;  and improve  user  interaction  facilities  like  drag-and-drop, multimedia presentations, while avoiding  unnecessary page reloading. 

explains RIAs as applications, which run

online and have many of the features and functionalities of

desktop applications. He continues the explanation showing

that the RIAs have overcome problems with traditional Web

applications – such as slow performance and limited

interactivity – with their responsive UIs and interactive

capabilities, which make the Internet-based programs easier

to be used and more functional.

As per Koch et al. [7], RIAs are Web applications,

augmented with desktop features, which use mechanisms of

advanced communications for data handling, to execute

operations on the client-side, minimizing the server requests.

They mention that the rich look-and-feel, better

responsiveness, performance, and accessibility of RIAs

enthuse both the users and the software engineers; and

improve user interaction facilities like drag-and-drop,

multimedia presentations, while avoiding unnecessary page

reloading.

explains RIAs as applications, which run

online and have many of the features and functionalities of

desktop applications. He continues the explanation showing

that the RIAs have overcome problems with traditional Web

applications – such as slow performance and limited

interactivity – with their responsive UIs and interactive

capabilities, which make the Internet-based programs easier

to be used and more functional.

As per Koch et al. [7], RIAs are Web applications,

augmented with desktop features, which use mechanisms of

advanced communications for data handling, to execute

operations on the client-side, minimizing the server requests.

They mention that the rich look-and-feel, better

responsiveness, performance, and accessibility of RIAs

enthuse both the users and the software engineers; and

improve user interaction facilities like drag-and-drop,

multimedia presentations, while avoiding unnecessary page

reloading.

 Identify different technologies and techniques used to develop the client-side components of the RiWAs, explaining their use in dedicated environments. 

Towards the  TTs independency  of an  architectural style for  RiWAs  –  which  is  the  main  focus  of  our  ongoing research – it is essential to have an adequate understanding of the  development  TTs  of  the  RiWAs  and  their  proper utilization. This knowledge will  also help in demonstrating how  the  intended  style  can  be  adopted  in  RiWAs development.  An  in-depth  discussion  of  the  features  and characteristics  of  different  types  of  RiWAs  and  their development  TTs  is  intentionally  avoided  in  this  paper. Instead, this section analyses the  RiWAs development TTs, classifies them, and presents taxonomies in the direction of structured understanding of their usage. We expect that these taxonomies  will  help  to  realize  the  functionalities  of  the components of the intended architectural style. As Meliá et al say that the real challenge in SE is selecting  the  right  and  suitable  TTs  for  the  project  from existing  alternatives,  and  creating  the  optimal  solution  to satisfy the user requirements. Adequate understanding of the TTs  used  in  the  development  of  RiWAs  may  provide sufficient assistance in the effort of designing the proposed architectural style for RiWAs to be TTs independent.

Explain what Delta-Communication is, discussing the advantages of using it. 

The  rich  communication  model  of  the  RIAs  is  called Delta Communication (DC), with three main characteristics: 1)  capability  of processing  in background,  which  helps in partial  page  rendering,  2)  faster  communication  than  the communication used in web-based application, which leads to  improving the  responsiveness  by eliminating  the  work-wait pattern, and 3) support for development of the features in both synchronous and asynchronous processing

DC can be seen as the power of the RIAs and it is defined as ―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

➥Simple-Pull-Delta-Communication (SPDC) can be seen as the simplest form of DC 
        •Used in AJAX 
        •Single XHR request to the server 
        •Client-side: Native JS support 
        •Server-side: special technology is not needed

Compare and contrast synchronous and asynchronous communication in the context of DC. 

Web applications have evolved into much complex Rich Internet Applications, providing rich features and enhanced user experience. Proper definitions, which deliver abstract realization of the fundamental concepts of the Rich Internet Application are still missing. Definitions provide proper understanding of the subject and help in increasing the realization of the characteristics of the same. This paper focuses on conceptually identifying the characteristics of the rich communication model of the Rich Internet Applications – commonly known as the “Asynchronous Communication” – suggesting a better term “Delta-Communication”, followed by a definition for it. Based on the definition, we propose a term and a definition for the abstract model of the simplest rich communication technique, which is exploited in AJAX. Additionally, based on the proposed definition for the rich communication model, the paper proposes a new term to replace the term AJAX to overcome the limitations expressed by the term AJAX. These terms and definitions specify and express the fundamental characteristics of the abstract concepts of the rich communication model of the Rich Internet Applications. Index Terms—AJAX, asynchronous, communication, delta, rich internet applications.

Compare and contrast different types of technologies and techniques available for DC implementation, indicating their pros and cons. 

Delta-Communication can be seen as the power of Rich Internet Applications, and there are different Techniques and Technologies available for the development of Delta-Communication, which should be selected carefully into the Rich Internet Application development. Enough discussions are not available, which compare and contrast these Delta-Communication development Techniques and Technologies towards supporting decision making of selecting them. This paper provides an overview of the contemporary Techniques and Technologies available for the Delta-Communication development, contextually compares them aligning to some selected criteria, and finally discusses some facts to be considered when selecting them for the Rich Internet Application development. A literature survey on the Delta-Communication development Technologies and Techniques was conducted, which was followed by a series of experiments towards getting the empirical evidence for the comparison. During the contextual comparison, the Simple Pull Delta-Communication was identified as the least complex technique and the Websocket was noted as the highest complex technology.

Discuss the history and the evolution of the XHR and AJAX. 

AJAX is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page.In practice, modern implementations commonly utilize JSON instead of XML.

XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design. Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML,but also JSON,HTML or plain text.

➥The concept behind the XMLHttpRequest object was originally created by the developers of Outlook Web Access (by Microsoft) for Microsoft Exchange Server 2000.An interface called IXMLHTTPRequest was developed and implemented into the second version of the MSXML library using this concept.The second version of the MSXML library was shipped with Internet Explorer 5.0 in March 1999, allowing access, via ActiveX, to the IXMLHTTPRequest interface using the XMLHTTP wrapper of the MSXML library.

Discuss the role of the DC-engine in RiWAs. 

Rich Internet Applications (RIAs) have become popular with their increased user experience delivered through rich GUIs and faster responses. The key concept behind the fast responses is the Delta-Communication (DC), which enables the communication of necessary data between the client and the server components, in either synchronous or asynchronous modes, supporting both data-pull and push modes. There are various Technologies and Techniques (TTs) available for developing the DC in RIAs. These TTs have been already discussed in different forums, and also many tutorials are available to demonstrate the development of them. However, proper comparisons of these TTs are not available towards supporting decision making in selecting these TTs for the RIA development.

 Explain the role of the DC-Bus, indicating how a web-service can be effectively used to implement it. 

DC-BUS is technology for reliable and economical communication over noisy DC or AC power lines.The DC-BUS converts the digital input data into phase modulated signals, protected against errors generated by noise over the power line.

 Explain the algorithms for the request and response processing of DC. 

 Delta compression and remote file synchronization techniques are concerned with efficient file transfer over a slow communication link in the case where the receiving party already has a similar file (or files). This problem arises naturally, e.g., when distributing updated versions of software over a network or synchronizing personal files between different accounts and devices. More generally, the problem is becoming increasingly common in many networkbased applications where files and content are widely replicated, frequently modified, and cut and reassembled in different contexts and packagings

Differentiate the functions available in jQuery for implementing AJAX-based DC. 

The XMLHttpRequest object is part of a technology called Ajax (Asynchronous JavaScript and XML). Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. With the widespread adoption of the XMLHttpRequest object it quickly became possible to build web applications like Google Maps, and Gmail that used XMLHttpRequest to get new map tiles, or new email without having to reload the entire page.

Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it's imperative that a callback be used to handle the response.


Unfortunately, different browsers implement the Ajax API differently. Typically this meant that developers would have to account for all the different browsers to ensure that Ajax would work universally.

 Discuss the variation of the jQuery ajax() function, explaining all the related options and events. 

jQuery ajax() function is Perform an asynchronous HTTP (Ajax) request.

The jQuery library has a full suite of Ajax capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.

➥.ajax Complete()
Register a handler to be called when Ajax requests complete. This is an Ajax Event.

➥.ajax Error()
Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

➥.ajax Send()
Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

➥.ajax Start()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

➥.ajax Stop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

➥jQuery. ajax()
Perform an asynchronous HTTP (Ajax) request.

➥jQuery. ajax Prefilter()

Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

Tute_10

Is jQuery a framework or a library? Discuss.

jQuery is a framework/library, which can hide the complexity of the pure JS 

        •Cross-browser compatible 

•Backward compatible

jQuery, it can be library as it's mostly assist your coding without affecting. Or it can be framework as it allows you to write small set of codes to achieve likes of animations, UI toggles, etc.

➤a library is one which helps you write code faster and prabably better without affecting your coding stye or adding effects.

➤a framework which helps you write large portion of HTML or actions with small amount of coding. It largely affects your coding pattern.

➤jQuery, it can be library as it's mostly assist your coding without affecting. Or it can be framework as it allows you to write small set of codes to achieve likes of animations, UI toggles, etc.

Explain the features provided by jQuery?

➯Offers many advanced features 

➮Reveal GUI elements 

➮Change content (based on users’ actions) 
➮Change CSS 

➮Delta-Communication (Ajax)

Explain the features of jQuery.

- jQuery is a write less and do more javascript library.

- It helps us to make the use of javascript much easier.

- It simplifies the complicated things from javascript like the AJAX calls and the DOM manipulation.

Other Features of jQuery are :

1. Effects and animations.
2. Ajax.
3. Extensibility.
4. DOM element selections functions.
5. Events.
6. CSS manipulation.
7. Utilities - such as browser version and the each function.
8. JavaScript Plugins.
9. DOM traversal and modification.

Discuss the advantages and disadvantages of using jQuery in different project scales.

The advantages of jQuery

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.

The disadvantages of jQuery

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

In addition to the problem of the versions, other disadvantages that we can mention:

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

Explain how the jQuery handles the issues related to partial page loads to the browser. 

Suppose when we want to load different views conditionally inside a single view. In other words, we are rendering nested view inside a single view/page based on menu items click in the parent view. In this case, if I click on the back button or forward button of the browser, it will not work as usual when we navigate from one page to another in web application and the way it saves the navigation history of different pages.

So for the case, when we are on the same page, but we are setting the nested view dynamically based on condition, we need some identifying criteria for each different nested view in the same page/View.

Discuss the selectors and their use in jQuery. 


➧jQuery can use CSS selectors 
➧Additionally, provides advanced selectors to access elements faster and efficiently

jQuery Selector

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say,selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

➧Descendent selector
      A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

jQuery descender selector (X Y) is used to select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element.

For example,

• $(‘#container div’) – selects all elements matched by <div> that are descendants of an element that has an id of container.
• $(‘form input’) – selects all elements matched by <input> that are descendants of an element matched by <form>

The most common child selector is the descendant selector, which matches every element that follows an identified ancestor. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.

➧Child selector

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

Child selectors provide a way to select elements that fall within one another, thus making them children of their parent element. These selections can be made two different ways, using either descendant or direct child selectors.

➧Pseudo classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Compare and contrast the use of CSS advanced selectors in jQuery and jQuery’s DOM traversal API, indicating the pros and cons of them.

Descendant Selector

The descendant selector works down the HTML structure in order of what has been written and selects any elements which are a child, descended from the parent element

Child Selector

A child selector selects the immediate child of the parent selector and a ‘greater than’ sign > is used between parent and child, so this will select multiple child elements if they exist.

Attribute Selector

The attribute selector can select a HTML element based on an attribute assigned to it and more extensively selected by adding in the value of the attribute. The attribute is selected by surrounding the attribute name in [brackets] superceding the HTML element or by adding in the value by preceding it with an equals sign ‘=’ and surrounding it in “double quotes”

Structural Pseudo Class Selector

The structural pseudo selector allows you to select elements based on their structural position in the HTML markup

Pseudo Element Selector

The pseudo element selector makes selections based on element position, it has slightly different syntax using a double colon :: between element and selector, the double colon is the official CSS3 syntax, however it is not supported by IE8, you can actually use a single colon : which is from CSS2 syntax and is supported by IE8, so decide to use which one based on your thoughts around IE8. 


Explain the importance of DOM objects and DOM processing in jQuery. 

The Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML.

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed



Discuss the benefits of using jQuery event handling over HTML event attributes, providing a list of events supported by jQuery. 

The 3 main benifits of jQuery are:

➤its light weight when compared to other javascript frameworks.
➤it has a wide range of plugins available for various specific needs.
➤it is easier for a designer to learn jQuery as it uses familiar CSS syntax. jQuery is Javascript for Designers.

EVENT HANDLING


Event handlers can be set on elements, to be triggered by different events.

jQuery events

Explain how to declare jQuery event handlers outside the $(document).ready() function, indicating the need for that, and the related issues and solutions for them. 

➤jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

➤A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Identify a list of advanced features provided by jQuery and explain their use towards improving the user experience. 

➦Object refers to the current object within the scope.Inside event handlers, refers to the element the event has triggered on.

Data attributes

is a characteristic of data that sets it apart from other data, such as location, length, or type. The term attribute is sometimes used synonymously with “data element” or “property.”

Refactoring with DOM objects

It’s something that is heavily talked about in the Ruby world, but seems to be a bit less so in the JS world. In this post what I’ve done is write some of my own (crappy) JavaScript for some simple JS tabs, using bad habits and code smells.

Target on specific elements with generic names

Filters

Description: Reduce the set of matched elements to those that match the selector or pass the function's test

CSS manipulation

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Animation

Description: Perform a custom animation of a set of CSS properties.