Client - side Development II - RiWAs

Key features of RiWAs

Direct interaction: In RiWAs, users can interact directly with page elements through editing or drag-and-drop tools. They can also do things like pan across a map or other image.

Partial-page updating: RiWAs incorporate additional technologies, such as real-time streaming, high-performance client-side virtual machines, and local caching mechanisms that reduce latency (wait times) and increase responsiveness. A number of commercial development tools permit this partial-page updating.

Better feedback: Because of their ability to change parts of pages without reloading, RiWAs can provide the user with fast and accurate feedback, real-time confirmation of actions and choices, and informative and detailed error messages.

Offline use: When connectivity is unavailable, it might still be possible to use an RiWA if the app is designed to retain its state locally on the client machine. (Developments in Web standards have also made it possible for some traditional Web applications to do that.)

Performance impact: Depending on the application and network characteristics, RiWAs can often perform better than traditional apps. In particular, applications that avoid round trips to the server by processing locally on the client are likely to be noticeably faster. Offloading such processing to the client machines can also improve server performance. 

____________________________________________________

Delta Communication

Rich GUIs in RiWAs use Delta-Communication to communicate with the server components.

DC happens behind the GUI

•Eliminates page refreshes

DC can process asynchronously

•Eliminates page freezing

DC works faster

•Eliminates the work-wait pattern

Delta-communication further improves the performance, increases the scalability, and as a result provides higher user experience.

Delta Communication Bus

________________________________________________________________

History and the evolution of the XHR and AJAX

Shortly before web development died out, in early versions of Mozilla, Netscape showed a new kind of technique. I don’t think it ever had a name, but we could call it Dynamic XML. The most vivid example I remember seeing was a mockup of an Amazon.com search result. The webpage looked just like a typical Amazon.com search result page, but instead of being written in HTML it was a piece of XML data which was then rendered for the user by a piece of JavaScript. The cool part was that this meant the rendering could be changed on the fly, there were a bunch of buttons that would allow you to sort the books in different ways and have them display using different schemes.

Shortly thereafter the bubble burst and web development crashed. Not, however, before Microsoft added a little-known function call named XMLHttpRequest to IE5. Mozilla quickly followed suit and, while nobody I know used it, the function stayed there, just waiting to be taken advantage of.

XMLHttpRequest allowed the JavaScript inside web pages to do something they could never really do before: get more data.1 Before, all the data either had to be sent with the web page. If you wanted more data or new data, you had to grab another web page. The JavaScript inside web pages couldn’t talk to the outside world. XMLHttpRequest changed that, allowing web pages to get more data from the server whenever they pleased.

Google was apparently the first to realize what a sea change this was. With Gmail and Google Maps, they built applications that took advantage of this to provide a user interface that was much more like a web application. (The startup Oddpost, bought by Yahoo, actually predated this but their software was for-pay and so they didn’t receive as much attention.)

With Gmail, for example, the application is continually asking the server if there’s new email. If there is, then it live updates the page, it doesn’t make you download a new one. And Google Maps lets you drag a map around and, as you do so, automatically downloads the parts of it you want to look at inline, without making you wait for a whole new page to download.

Jesse James Garrett of Adaptive Path described this new tactic as Ajax (Asynchronous Javascript And XML) in an essay and the term immediately took off. Everyone began using the technique in their own software and JavaScript toolkits sprung up to make doing so even easier.

____________________________________________________________________

References

https://www.computerworld.com/article/2551058/rich-internet-applications.html

http://www.aaronsw.com/weblog/ajaxhistory

Client-Side Development I - jQuery

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

The jQuery library contains the following features:

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

__________________________________________________________________

jQuery Selectors

Tag Name

Represents a tag name available in the DOM. For example $('p')selects all paragraphs <p> in the document.

Tag ID

Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.

Tag Class

Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.

$("*")    Selects all elements

$(this)    Selects the current HTML element

$(":button")     Selects all <button> elements and <input> elements of type="button"

_______________________________________________________________________

Document Object Model

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.
With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.
As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

Events supported by jQuery

.bind()

Attach a handler to an event for the elements.

.blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

.change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

.click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.contextmenu()

Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

.dblclick()

Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

.die()

Remove event handlers previously attached using .live() from the elements.

.error()

Bind an event handler to the “error” JavaScript event.

.submit()

Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.

.mousemove()

Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

jQuery.holdReady()

Holds or releases the execution of jQuery’s ready event.

And there are many more other events i didn't mention here.

______________________________________________________

Advanced features of jQuery

_____________________________________________________

References

https://www.tutorialspoint.com/jquery/jquery-selectors.htm

https://www.w3.org/TR/WD-DOM/introduction.html

https://api.jquery.com/category/events/