Introduction to the frameworks: May 2019

Distinguish the term “Rich Internet Applications” (RIAs) from “Rich 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.

A number of key features differentiate RIAs from traditional Web applications.

Rich Internet applications: The tools

AJAX.
Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
Microsoft Silverlight.
Curl (an object-oriented language with embedded HTML markup)
Google Gears.

Rich Web-based applications

•Use advanced GUIs

•Use Delta-Communication

•Provide rich user experience

Most of the web-based applications nowadays are RiWAs

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

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.

Synchronous Communication is based on synchronization between the sender and the receiver. Both must be synchronized before actual communication takes place.

Both of these forms of communication are a means of transmitting data. The difference is in the format that the data is transmitted.
Asynchronous communications is the method of communications most widely used for PC communication and is commonly used for e-mail applications, Internet access, and asynchronous PC-to-PC communications. Through asynchronous communications, data is transmitted one byte at a time with each byte containing one start bit, eight data bits, and one stop bit, thus yielding a total of ten bits. With asynchronous communications, there is a high amount of overhead because every byte sent contains two extra bits (the start and stop bits) and therefore a substantial loss of performance.
Synchronous communications is the more efficient method of communications. CQ's connectivity solutions communicate through the synchronous method of communications.
Through synchronous communications, data is transmitted as frames of large data blocks rather than bulky individual bytes. One advantage of synchronous is that control information is easily inserted at the beginning and end of each block to ensure constant timing, or synchronization. Another advantage of synchronous is that it is more efficient than asynchronous.

Polling is used to simulate data-push

•Send XHR requests periodically to the server

•Client-side: Native JS support

•Server-side: special technology is not needed

•Blank responses can waste resources

Comet is used to simulate data-push

•Long-lived XHR requests

•Client-side: Native JS support

•Reduce network traffic than polling (more scalable)

•Blank responses are eliminated

Server-Sent-Events (SSE) is used (only) for true data-push

•Similar to Comet, but no client requests

•Client-side: HTML5 provides native JS support

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies

•Reduce network traffic than polling/Comet (more scalable)

•Blank responses and requests are totally eliminated

WebSocket (WS)is bi-directional

•Supports both data-pull and true data-push

•Reduce network traffic than polling/Comet/SSE

The history and the evolution of the XHR

XHR is short for XMLHTTP Request. While developed by Microsoft’s Outlook Web Access, some of the earliest instances of this type of request were used in your Gmail inbox. It was pretty revolutionary to see your inbox update without having to refresh your page. The way it worked was every 20–30 seconds, a new request was sent to see whether or not you had new mail.

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.

The history and the evolution of the AJAX

New technology quickly becomes so pervasive that it’s sometimes hard to remember what things were like before it. The latest example of this in miniature is the technique known as Ajax, which has become so widespread that it’s often thought that the technique has been around practically forever.

In some ways it has. During the first big stretch of browser innovation, Netscape added a feature known as LiveScript, which allowed people to put small scripts in web pages so that they could continue to do things after you’d downloaded them..

The role of the DC-engine in RiWAs

The role of the DC-Bus

The DC bus in a VFD has found its usage as the technology has evolved. Some of the applications of DC bus, Common DC applications where a single rectifier unit acts a source of power to many inverter units through common DC bus. These inverters units can be connected to many motors.

The DC bus in a VFD has found its usage as the technology has evolved. Some of the applications of DC bus,

Common DC applications where a single rectifier unit acts a source of power to many inverter units through common DC bus. These inverters units can be connected to many motors.
Powering up VFDs directly using DC terminals bypassing rectifier section. This is similar to first one but the power source could be from a battery, a solar panel or any other DC source.

The algorithms for the request and response processing of DC

AJAX

Traditionally webpages required reloading to update their content. For web-based email this meant that users had to manually reload their inbox to check and see if they had new mail. This had huge drawbacks: it was slow and it required user input. When the user reloaded their inbox, the server had to reconstruct the entire web page and resend all of the HTML, CSS, JavaScript, as well as the user's email. This was hugely inefficient. Ideally, the server should only have to send the user's new messages, not the entire page. By 2003, all the major browsers solved this issue by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with the server without requiring a page reload.

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.

The variation of the jQuery ajax() function

The ajax() method is used to perform an AJAX (asynchronous HTTP) request.

All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.

$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});

Is JQuery framework or library?

Framework and library aren’t necessarily mutually exclusive terms. Framework is typically a library or a collection of libraries.

Strictly speaking , jQuery is a library, but to an extent ,it does meet the definition of a software framework. Although many would argue that jQuery doesn’t meet the definition of a software framework strictly enough, the fact is that no other javascript framework fully meets the definition of a framework either.

Perhaps the best explanation of why JQuery is more of a framework than a library is the fact that as a developer, you can chose not to use any of its framework-like functionalities. You can , for a example , mix a simple JQuety statement with standard Javascript statement on the same line.Angular JS and Bootstrap typically don’t allow you to do this.

Features provided by JQuery

1. DOM manipulation

2. Event handling

3. AJAX Support

4. Animations

5. Lightweight

6. Cross Browser support

7. Latest Technology

Advantage and Disadvantage of JQuery

ADVANTAGES:

· Flexible and fast for web development

· It has plugins

· Bugs resolved quickly

· Excellent integration with AJAX

· It has an excellent support community

DISADVANTAGES:

· It has large number of published versions in the short times

· You will have to host the library yourself, or download the library from Google

· IF a JQuery is improperly implemented as a Framework , the development environment can get out of control

JQuery selectors

jQuery selectors are very useful and would be required at every step while using JQuery. They get the exact elemet that you want from your HTML document

Name selects all elements which match with the givne element name

#ID Selects a single element which matches with given ID

.Class Selects all elements which match with the given class

Universal (*) Selects all elements available in DOM

Multiple element Selects the combined results of all the specified selectors E,F or G

MORE EXAMPLE WITH JQUERY SELECTORS

The JQuery handles the issues related to partial page loads to the browser

· Using the download source

Download

Link <script src=”jQuery.min.js”></script>

Use in the code <script src=”code.js”></script>

· Using CDN

· Ways to use jQuery API

jQuery(<selectors>);->jQuery(document);

$(<selector>); ->$(document);

The importance of DOM objects and DOM processing in JQuery

The Document Object Model is a programming API for html and xml documents. It defines the logical structures of documents and the way a document is accessed and manipulated. In the DOM specification , the term “document” is used in broad sense – increasingly , XML is being used as a way of representing many kinds of information that may be stored in diverse system, 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.

JQuery provide api to travel through the DOM. These DOM navigating APIs are faster than advanced CSS like selectors

The JQuery Object

when creating new elements , jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. it has a zero-indexed sequence of DOM elements, some failure array functions , and a. length property , after all .Jquery object is more complicated than that.

DOM AND DOM ELEMENTS

The Document Object Model (DOM for short) is a representation of an HTML document. It may contain any number of DOM elements. At a high level, a DOM element can be thought of as a "piece" of a web page. It may contain text and/or other DOM elements. DOM elements are described by a type, such as <div>, <a>, or <p>, and any number of attributes such as src, href, class and so on. For a more thorough description, refer to the official DOM specification from the W3C.

Elements have properties like any JavaScript object. Among these properties are attributes like. tagName and methods like .appendChild(). These properties are the only way to interact with the web page via JavaScript.

Some benefits of JQuery object:

1.Compatibility

2.Convenience

Purpose of DOM

The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM ELEMENTS METHODS

.get()

retrieve the DOM elements matched by the jQuery object

.index()

Search for a given element from among the matched elements

.size()

return the number of elements in the JQuery object

.toArray()

retrieve all the elements contained in the jQuery set, as an array

Advanced features provided by jQuey

Form manipulation

1. jQuery Login form