AJAX

Asynchronous JavaScript and XML (AJAX) is a group of web development techniques used for creating interactive web applications. By using AJAX, web applications can retrieve data from the server asynchronously. Because it is being done in the background, it won’t interfere with the display and behavior of the current page.
Technologies AJAX is a term that represents a wide range of web technologies that can be used to help web applications communicate with a server, but without interfering with the current state of that page.

AJAX refers to these technologies:
• Extensible Hypertext Markup Language (XHTML) and Cascading Style Sheets
(CSS) for presentation

• The Document Object Model for dynamic display of and interaction with data

• XML and Extensible Style Sheet Language Transformations (XSLT) for the
interchange and manipulation of data, respectively

• The XMLHttpRequest object for asynchronous communication

• JavaScript to bring these technologies together

AJAX continues to evolve. For instance, while JavaScript claims a place in the acronym
for AJAX, it is not the only client-side language that can be used for developing an AJAX application. Languages like VBScript can be used, as well. Further, XML is not required for data exchange. JavaScript Object Notation (JSON) is a widely used alternative. HTML and plain text can also be used.

Pros and Cons

AJAX does some things right, but struggles with others.
Advantages :
• Often, multiple pages on a web site contain the same information. If those pages
were coded by hand, the same content would have to be written into each and every
page. AJAX allows a web application to simply retrieve new information and adjust
how the content is presented. This is very efficient and reduces the amount of
bandwidth consumed and reduces load times.

• Using asynchronous requests allows the client’s web browser to be more interactive
and respond quickly to user inputs. The user may even perceive the application to
be faster.

• Connections to the server are reduced because scripts and style sheets need only be
downloaded once.

Disadvantages :

• Dynamically created web pages do not show up in the browser’s history engine, so
clicking on the Back button would not re-create the last seen page.

• It is difficult to bookmark a dynamically created web page.

• If a browser does not support AJAX or if JavaScript is disabled, AJAX functionality
cannot be used.

• There is no standards body behind AJAX, so there is no widely adopted best
practice to test AJAX applications.

What is  React?

React is a library for building User Interfaces (UI elements).

In the Model View Controller architectural pattern, React stands only for the V (View).

Basically, we build things (Components) separately, then put them together: Components come together to form an Application. For eg. the (or an) “answer” component in a website like Stackoverflow looks like:

answerArray.map(a => <Answer answerData={a}></Answer>)

This is one line that shows most of the information on this page. The developers at Stack Overflow created their own component, called “Answer” and its only job is to show an Answer. We run that in a loop, all the intricacies of all the answers are abstracted, hidden in the Answer Component, which is completely separate from other components.

Now take a look at this:

<App>

  <Header />

  <LeftSidebar />

  <Question>

    { answerArray.map(a => <Answer answerData={a} />  )}

  </Question>

  <RightSidebar />

  <Footer/>

</App>

 This is the whole Stack Overflow site.

Each tag (Header, Question, Answer, etc.) is a component. These components are completely separate and have self-contained code, but here they are used together to build the more complex application – “Composition” .

……..

React is different in the sense that it is a UI component management library as opposed to a utility library wrapping browser APIs. Using React implies that we adhere to a recommended methodology (component oriented structure) for defining user interface, and structure our interactions around well-defined lifecycle methods. If we follow the advised conventions, we get optimized UI for free. In the example, internally it minimizes the actual DOM changes that happen to keep the application performant.

Virtual DOM

A standout feature of React is that it works through the “virtual DOM”, whereas jQuery interacts with the DOM directly. The virtual DOM is a DOM implementation in memory that compares to the existing DOM elements and makes the necessary changes/updates. And that leads to much faster performance.

Comparing React to Ajax – the Conclusion

React and AJAX are not comparable, but React uses AJAX, or rather we – the developer – use AJAX in React to get data without the page needing to reload.

AJAX and other technologies were monumental to the advancement of web applications, but because of how absolutely essential they were to applications, they were assimilated into new technologies so much so that we don’t even have to know about them to reap their benefits.

REFERENCES:

[1] Cloud Computing A Practical Approach – McGraw Hill   [Book]

[2] programmingwithmosh.com: “react-vs-jquery-how-they-compare”  [Article]

[3] stackoverflow.com : “Difference between react.js and Ajax”  [discussion]